From c91937c9a1d3065ae18580e0d6f8966e24744176 Mon Sep 17 00:00:00 2001 From: noellabo Date: Mon, 8 Jul 2019 13:03:08 +0900 Subject: [PATCH] Show navigation panel in multiple columns WebUI --- app/controllers/settings/preferences_controller.rb | 1 + .../mastodon/features/ui/components/columns_area.js | 6 ++++++ app/javascript/mastodon/initial_state.js | 1 + app/javascript/styles/mastodon/components.scss | 10 +++++++++- app/lib/user_settings_decorator.rb | 5 +++++ app/models/user.rb | 2 +- app/serializers/initial_state_serializer.rb | 3 ++- app/views/settings/preferences/other/show.html.haml | 3 +++ config/locales/simple_form.en.yml | 2 ++ config/locales/simple_form.ja.yml | 2 ++ config/settings.yml | 1 + 11 files changed, 33 insertions(+), 3 deletions(-) diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb index 8734b198e..b34720546 100644 --- a/app/controllers/settings/preferences_controller.rb +++ b/app/controllers/settings/preferences_controller.rb @@ -60,6 +60,7 @@ class Settings::PreferencesController < Settings::BaseController :setting_show_subscribe_button_on_timeline, :setting_show_followed_by, :setting_follow_button_to_list_adder, + :setting_show_navigation_panel, :setting_show_target, notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account trending_tag), interactions: %i(must_be_follower must_be_following must_be_following_dm) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 1846030d8..28ca53e51 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -31,6 +31,7 @@ import { import Icon from 'mastodon/components/icon'; import ComposePanel from './compose_panel'; import NavigationPanel from './navigation_panel'; +import { show_navigation_panel } from 'mastodon/initial_state'; import { supportsPassiveEvents } from 'detect-passive-events'; import { scrollRight } from '../../../scroll'; @@ -266,6 +267,11 @@ class ColumnsArea extends ImmutablePureComponent { })} {React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))} + {show_navigation_panel &&
+
+ +
+
} ); } diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index 158448f32..558a6784a 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -32,6 +32,7 @@ export const show_follow_button_on_timeline = getMeta('show_follow_button_on_tim export const show_subscribe_button_on_timeline = getMeta('show_subscribe_button_on_timeline'); export const show_followed_by = getMeta('show_followed_by'); export const follow_button_to_list_adder = getMeta('follow_button_to_list_adder'); +export const show_navigation_panel = getMeta('show_navigation_panel'); export const show_target = getMeta('show_target'); export default initialState; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 3688666eb..785bcf856 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2061,6 +2061,14 @@ a.account__display-name { vertical-align: middle; } +.layout-multiple-columns .columns-area__panels__pane { + height: auto; + + &__inner { + position: static; + } +} + .columns-area { display: flex; flex: 1 1 auto; @@ -2490,7 +2498,7 @@ a.account__display-name { } @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { - .columns-area__panels__pane--navigational { + .layout-single-column .columns-area__panels__pane--navigational { display: none; } } diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb index eae2d23aa..49247e17f 100644 --- a/app/lib/user_settings_decorator.rb +++ b/app/lib/user_settings_decorator.rb @@ -44,6 +44,7 @@ class UserSettingsDecorator user.settings['show_subscribe_button_on_timeline'] = show_subscribe_button_on_timeline_preference if change?('setting_show_subscribe_button_on_timeline') user.settings['show_followed_by'] = show_followed_by_preference if change?('setting_show_followed_by') user.settings['follow_button_to_list_adder'] = follow_button_to_list_adder_preference if change?('setting_follow_button_to_list_adder') + user.settings['show_navigation_panel'] = show_navigation_panel_preference if change?('setting_show_navigation_panel') user.settings['show_target'] = show_target_preference if change?('setting_show_target') end @@ -163,6 +164,10 @@ class UserSettingsDecorator boolean_cast_setting 'setting_follow_button_to_list_adder' end + def show_navigation_panel_preference + boolean_cast_setting 'setting_show_navigation_panel' + end + def show_target_preference boolean_cast_setting 'setting_show_target' end diff --git a/app/models/user.rb b/app/models/user.rb index b5f3d1665..ceaaf60e3 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -128,7 +128,7 @@ class User < ApplicationRecord :disable_swiping, :show_follow_button_on_timeline, :show_subscribe_button_on_timeline, :show_target, :show_follow_button_on_timeline, :show_subscribe_button_on_timeline, :show_followed_by, :show_target, - :follow_button_to_list_adder, + :follow_button_to_list_adder, :show_navigation_panel, to: :settings, prefix: :setting, allow_nil: false attr_reader :invite_code, :sign_in_token_attempt diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index df57868b4..db7580cc6 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -46,8 +46,9 @@ class InitialStateSerializer < ActiveModel::Serializer store[:show_subscribe_button_on_timeline] = object.current_account.user.setting_show_subscribe_button_on_timeline store[:show_followed_by] = object.current_account.user.setting_show_followed_by store[:follow_button_to_list_adder] = object.current_account.user.setting_follow_button_to_list_adder + store[:show_navigation_panel] = object.current_account.user.setting_show_navigation_panel store[:show_target] = object.current_account.user.setting_show_target - else + else store[:auto_play_gif] = Setting.auto_play_gif store[:display_media] = Setting.display_media store[:reduce_motion] = Setting.reduce_motion diff --git a/app/views/settings/preferences/other/show.html.haml b/app/views/settings/preferences/other/show.html.haml index 54c01a449..512e15082 100644 --- a/app/views/settings/preferences/other/show.html.haml +++ b/app/views/settings/preferences/other/show.html.haml @@ -45,6 +45,9 @@ .fields-group = f.input :setting_follow_button_to_list_adder, as: :boolean, wrapper: :with_label + .fields-group + = f.input :setting_show_navigation_panel, as: :boolean, wrapper: :with_label + -# .fields-group -# = f.input :setting_show_target, as: :boolean, wrapper: :with_label diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index 632203f9a..0addf8e63 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -56,6 +56,7 @@ en: setting_noindex: Affects your public profile and post pages setting_show_application: The application you use to post will be displayed in the detailed view of your posts setting_show_follow_button_on_timeline: You can easily check the follow status and build a follow list quickly + setting_show_navigation_panel: Show the navigation panel at the right end of the advanced UI setting_show_subscribe_button_on_timeline: You can easily check the status of your subscriptions and quickly build a subscription list setting_show_followed_by: "The color of the follow button changes according to the follow status (gray: no follow relationship, yellow: followed, blue: following, green: mutual follow)" setting_show_target: Enable the function to switch between posting target and follow / subscribe target @@ -184,6 +185,7 @@ en: setting_reduce_motion: Reduce motion in animations setting_show_application: Disclose application used to send posts setting_show_follow_button_on_timeline: Show follow button on timeline + setting_show_navigation_panel: Show the navigation panel setting_show_subscribe_button_on_timeline: Show subscribe button on timeline setting_show_followed_by: Reflect the following status on the follow button setting_show_target: Enable targeting features diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml index 08d8cf4bf..5aec8ce8d 100644 --- a/config/locales/simple_form.ja.yml +++ b/config/locales/simple_form.ja.yml @@ -56,6 +56,7 @@ ja: setting_noindex: 公開プロフィールおよび各投稿ページに影響します setting_show_application: 投稿するのに使用したアプリが投稿の詳細ビューに表示されるようになります setting_show_follow_button_on_timeline: フォロー状態を確認し易くなり、素早くフォローリストを構築できます + setting_show_navigation_panel: 上級者向け UI の右端にナビゲーションパネルを表示します setting_show_subscribe_button_on_timeline: 購読状態を確認し易くなり、素早く購読リストを構築できます setting_show_followed_by: フォロー状態に応じてフォローボタンの色が変わります（灰色：フォロー関係なし、黄色：フォローされている、青色：フォローしている、緑色：相互フォロー） setting_show_target: 投稿対象と、フォロー・購読の対象を切り替える機能を有効にします @@ -184,6 +185,7 @@ ja: setting_reduce_motion: アニメーションの動きを減らす setting_show_application: 送信したアプリを開示する setting_show_follow_button_on_timeline: タイムライン上にフォローボタンを表示する + setting_show_navigation_panel: ナビゲーションパネルを表示する setting_show_subscribe_button_on_timeline: タイムライン上に購読ボタンを表示する setting_show_followed_by: 被フォロー状態をフォローボタンに反映する setting_show_target: ターゲット機能を有効にする diff --git a/config/settings.yml b/config/settings.yml index 4f1b47971..b2fb56fb5 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -43,6 +43,7 @@ defaults: &defaults show_subscribe_button_on_timeline: false show_followed_by: false follow_button_to_list_adder: false + show_navigation_panel: true show_target: false notification_emails: follow: false