Add: #769 投稿のフォントサイズ調整機能

kmycode · Aug 21, 2024 · e87e239 · e87e239
1 parent 912072d
commit e87e239
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 4 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -171,6 +171,7 @@ def body_classes
     output << 'system-font' if current_account&.user&.setting_system_font_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
     output << 'rtl' if locale_direction == 'rtl'
+    output << "content-font-size__#{current_account&.user&.setting_content_font_size}"
     output.compact_blank.join(' ')
   end
 

diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
@@ -46,6 +46,29 @@ body {
       sans-serif;
   }
 
+  &.content-font-size {
+    &__large {
+      --content-font-size: 18px;
+      --content-line-height: 27px;
+      --detail-content-font-size: 25px;
+      --detail-content-line-height: 32px;
+    }
+
+    &__x_large {
+      --content-font-size: 22px;
+      --content-line-height: 30px;
+      --detail-content-font-size: 30px;
+      --detail-content-line-height: 39px;
+    }
+
+    &__xx_large {
+      --content-font-size: 30px;
+      --content-line-height: 44px;
+      --detail-content-font-size: 40px;
+      --detail-content-line-height: 52px;
+    }
+  }
+
   &.app-body {
     padding: 0;
 

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1003,8 +1003,8 @@ body > [data-popper-placement] {
   font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 15px;
-  line-height: 22px;
+  font-size: var(--content-font-size);
+  line-height: var(--content-line-height);
   padding-top: 2px;
   color: $primary-text-color;
 
@@ -1738,8 +1738,8 @@ body > [data-popper-placement] {
   }
 
   .status__content {
-    font-size: 19px;
-    line-height: 24px;
+    font-size: var(--detail-content-font-size);
+    line-height: var(--detail-content-line-height);
 
     .emojione {
       min-width: 24px;

diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
@@ -115,4 +115,8 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-variant-background-color: #{$ui-base-color};
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
   --avatar-border-radius: 8px;
+  --content-font-size: 15px;
+  --content-line-height: 22px;
+  --detail-content-font-size: 19px;
+  --detail-content-line-height: 24px;
 }
diff --git a/app/models/concerns/user/has_settings.rb b/app/models/concerns/user/has_settings.rb
@@ -103,6 +103,10 @@ def setting_system_font_ui
     settings['web.use_system_font']
   end
 
+  def setting_content_font_size
+    settings['web.content_font_size']
+  end
+
   def setting_show_quote_in_home
     settings['web.show_quote_in_home']
   end

diff --git a/app/models/user_settings.rb b/app/models/user_settings.rb
@@ -55,6 +55,7 @@ class KeyError < Error; end
     setting :use_blurhash, default: true
     setting :use_pending_items, default: false
     setting :use_system_font, default: false
+    setting :content_font_size, default: 'medium', in: %w(medium large x_large xx_large)
     setting :bookmark_category_needed, default: false
     setting :disable_swiping, default: false
     setting :disable_hover_cards, default: false

diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
@@ -60,6 +60,16 @@
       = ff.input :'web.disable_hover_cards', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_hover_cards')
       = ff.input :'web.use_system_font', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_system_font_ui')
 
+    .fields-group
+      = ff.input :'web.content_font_size',
+                 collection: %w(medium large x_large xx_large),
+                 hint: false,
+                 include_blank: false,
+                 kmyblue: true,
+                 label_method: ->(size) { I18n.t("simple_form.labels.defaults.setting_content_font_size_items.#{size}") },
+                 label: I18n.t('simple_form.labels.defaults.setting_content_font_size'),
+                 wrapper: :with_label
+
     %h4= t 'appearance.custom_emoji_and_emoji_reactions'
 
     .fields-group

diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
@@ -257,6 +257,12 @@ en:
         setting_bookmark_category_needed: Category selection needed when registering bookmark on web
         setting_boost_menu: Show popup when click boost button
         setting_boost_modal: Show confirmation dialog before boosting
+        setting_content_font_size: Font size of posts
+        setting_content_font_size_items:
+          large: Large
+          medium: Default
+          x_large: Large large
+          xx_large: Large large large
         setting_default_language: Posting language
         setting_default_privacy: Posting privacy
         setting_default_reblog_privacy: Reblogging privacy

diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
@@ -257,6 +257,12 @@ ja:
         setting_bookmark_category_needed: Webでブックマーク時にカテゴリの選択を必須にする
         setting_boost_menu: ブーストボタンを押したときにポップアップメニューを表示する
         setting_boost_modal: ブーストする前に確認ダイアログを表示する
+        setting_content_font_size: 投稿本文のフォントサイズ
+        setting_content_font_size_items:
+          large: 大きい
+          medium: デフォルト
+          x_large: 大きい大きい
+          xx_large: 大きい大きい大きい
         setting_default_language: 投稿する言語
         setting_default_privacy: 投稿の公開範囲
         setting_default_reblog_privacy: BTの公開範囲