diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 11aa202ddab9bb..8849c341c4f1e7 100644 --- 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 index 1f961cb9e1279d..9a642a04bf50e3 100644 --- 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 index 36c63acc52598f..d84e3125b2a784 100644 --- 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 index 6ea1b8011d2043..2202ef44956439 100644 --- 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 index 61c2fe4a1f7e31..63e585ec5e767b 100644 --- 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 index 9af2950aad8aad..2d962cd87c47e2 100644 --- 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 index 7d0304d3256b38..759fe3de81cced 100644 --- 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 index 02827f062af602..84ab3ce393bed9 100644 --- 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 index 920e2cf58c8fc4..9fd5a2bf2f9e36 100644 --- 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の公開範囲