Add WebUI element size adjustment

app/controllers/settings/preferences_controller.rb

@@ -87,6 +87,9 @@ class Settings::PreferencesController < Settings::BaseController
       :setting_add_reference_modal,
       :setting_unselect_reference_modal,
       :setting_enable_empty_column,
+      :setting_content_font_size,
+      :setting_info_font_size,
+      :setting_content_emoji_reaction_size,
       notification_emails: %i(follow follow_request reblog favourite emoji_reaction status_reference mention digest report pending_account trending_tag),
       interactions: %i(must_be_follower must_be_following must_be_following_dm)
     )

app/helpers/accounts_helper.rb

@@ -118,6 +118,16 @@ module AccountsHelper
     end.join("\n")
   end
 
+  def account_theme_valiables
+    return if current_user.nil?
+
+    ":root {
+      --content-font-size: #{h(current_user.setting_content_font_size)}px;
+      --info-font-size: #{h(current_user.setting_info_font_size)}px;
+      --content-emoji-reaction-size: #{h(current_user.setting_content_emoji_reaction_size)}px;
+    }"
+  end
+
   def svg_logo
     content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
   end

app/javascript/styles/mastodon/about.scss

@@ -543,10 +543,10 @@ $small-breakpoint: 960px;
       }
 
       .display-name {
-        font-size: 15px;
+        font-size: var(--info-font-size, 15px);
 
         &__account {
-          font-size: 14px;
+          font-size: calc(var(--info-font-size, 15px)*0.933);
         }
       }
     }

app/javascript/styles/mastodon/components.scss

@@ -837,8 +837,8 @@
 .reply-indicator__content,
 .quote-indicator__content {
   position: relative;
-  font-size: 15px;
+  font-size: var(--content-font-size, 15px);
-  line-height: 20px;
+  line-height: calc(var(--content-font-size, 15px)*1.33);
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
@@ -859,13 +859,13 @@
   }
 
   .emojione {
-    width: 20px;
+    width: calc(var(--content-font-size, 15px)*1.33);
-    height: 20px;
+    height: calc(var(--content-font-size, 15px)*1.33);
     margin: -3px 0 0;
   }
 
   p {
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--content-font-size, 15px)*1.33);
     white-space: pre-wrap;
     unicode-bidi: plaintext;
 
@@ -939,8 +939,8 @@
   overflow-y: auto;
 
   .emojione {
-    width: 20px;
+    width: calc(var(--content-font-size, 15px)*1.33);
-    height: 20px;
+    height: calc(var(--content-font-size, 15px)*1.33);
     margin: -3px 0 0;
   }
 
@@ -1189,7 +1189,7 @@
 .notification__relative_time {
   color: $dark-text-color;
   float: right;
-  font-size: 14px;
+  font-size: calc(var(--info-font-size, 15px)*0.933);
   padding-bottom: 1px;
 }
 
@@ -1242,7 +1242,7 @@
 }
 
 .status__info {
-  font-size: 15px;
+  font-size: var(--info-font-size, 15px);
 }
 
 .status-check-box {
@@ -1288,7 +1288,7 @@
   color: $dark-text-color;
   padding: 8px 0;
   padding-bottom: 2px;
-  font-size: 14px;
+  font-size: calc(var(--content-font-size, 15px)*0.933);
   position: relative;
 
   .status__display-name strong {
@@ -1364,17 +1364,17 @@
   }
 
   .status__content {
-    font-size: 19px;
+    font-size: calc(var(--content-font-size, 15px)*1.27);
-    line-height: 24px;
+    line-height: calc(var(--content-font-size, 15px)*1.6);
 
     .emojione {
-      width: 24px;
+      width: calc(var(--content-font-size, 15px)*1.6);
-      height: 24px;
+      height: calc(var(--content-font-size, 15px)*1.6);
       margin: -1px 0 0;
     }
 
     .status__content__spoiler-link {
-      line-height: 24px;
+      line-height: calc(var(--content-font-size, 15px)*1.6);
       margin: -1px 0 0;
     }
   }
@@ -1500,7 +1500,7 @@
     color: $darker-text-color;
     overflow: hidden;
     text-decoration: none;
-    font-size: 14px;
+    font-size: calc(var(--info-font-size, 15px)*0.933);
 
     &--with-note {
       strong {
@@ -1563,7 +1563,7 @@
   &__display-name__html {
     color: $black;
     text-decoration: none;
-    font-size: 13px;
+    font-size: calc(var(--info-font-size, 15px)*0.867);
   }
 }
 
@@ -1854,8 +1854,8 @@ a.account__display-name {
   padding: 8px 0 0;
   cursor: default;
   color: $darker-text-color;
-  font-size: 15px;
+  font-size: calc(var(--content-font-size, 15px)*0.933);
-  line-height: 22px;
+  line-height: calc(var(--content-font-size, 15px)*1.467);
   position: relative;
 
   .fa {
@@ -1928,7 +1928,7 @@ a.account__display-name {
 }
 
 .display-name__account {
-  font-size: 14px;
+  font-size: calc(var(--info-font-size, 15px)*0.933);
 }
 
 .status__relative-time,
@@ -6390,7 +6390,7 @@ a.status-card.compact:hover {
         text-align: left;
 
         strong {
-          font-size: 15px;
+          font-size: var(--info-font-size, 15px);
           color: $primary-text-color;
           font-weight: 500;
           overflow: hidden;
@@ -6399,7 +6399,7 @@ a.status-card.compact:hover {
 
         span {
           display: block;
-          font-size: 14px;
+          font-size: calc(var(--info-font-size, 15px)*0.933);
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -6508,7 +6508,7 @@ a.status-card.compact:hover {
         text-align: left;
 
         strong {
-          font-size: 15px;
+          font-size: var(--info-font-size, 15px);
           color: $primary-text-color;
           font-weight: 500;
           overflow: hidden;
@@ -6517,7 +6517,7 @@ a.status-card.compact:hover {
 
         span {
           display: block;
-          font-size: 14px;
+          font-size: calc(var(--info-font-size, 15px)*0.933);
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -7448,7 +7448,7 @@ noscript {
       }
 
       h1 {
-        font-size: 16px;
+        font-size: calc(var(--info-font-size, 15px)*1.067);
         line-height: 24px;
         color: $primary-text-color;
         font-weight: 500;
@@ -7458,7 +7458,7 @@ noscript {
 
         small {
           display: block;
-          font-size: 14px;
+          font-size: calc(var(--info-font-size, 15px)*0.933);
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -7737,20 +7737,20 @@ noscript {
     }
 
     &__relative-time {
-      font-size: 15px;
+      font-size: var(--info-font-size, 15px);
       color: $darker-text-color;
       padding-left: 15px;
     }
 
     &__expiration-time {
-      font-size: 15px;
+      font-size: var(--info-font-size, 15px);
       color: $darker-text-color;
       padding-left: 15px;
     }
 
     &__names {
       color: $darker-text-color;
-      font-size: 15px;
+      font-size: var(--info-font-size, 15px);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -7892,8 +7892,8 @@ noscript {
     &__emoji {
       display: block;
       margin: 3px 0;
-      width: 16px;
+      width: var(--content-emoji-reaction-size, 16px);
-      height: 16px;
+      height: var(--content-emoji-reaction-size, 16px);
 
       img {
         display: block;

app/javascript/styles/mastodon/polls.scss

@@ -1,6 +1,6 @@
 .poll {
-  margin-top: 16px;
+  margin-top: calc(var(--content-font-size, 15px)*1.067);
-  font-size: 14px;
+  font-size: calc(var(--content-font-size, 15px)*0.933);
 
   li {
     margin-bottom: 10px;
@@ -53,7 +53,7 @@
     position: relative;
     display: flex;
     padding: 6px 0;
-    line-height: 18px;
+    line-height: calc(var(--content-font-size, 15px)*1.2);
     cursor: default;
     overflow: hidden;
 

app/lib/user_settings_decorator.rb

@@ -81,6 +81,9 @@ class UserSettingsDecorator
     user.settings['match_visibility_of_references']    = match_visibility_of_references_preference if change?('setting_match_visibility_of_references')
     user.settings['hexagon_avatar']                    = hexagon_avatar_preference if change?('setting_hexagon_avatar')
     user.settings['enable_empty_column']               = enable_empty_column_preference if change?('setting_enable_empty_column')
+    user.settings['content_font_size']                 = content_font_size_preference if change?('setting_content_font_size')
+    user.settings['info_font_size']                    = info_font_size_preference if change?('setting_info_font_size')
+    user.settings['content_emoji_reaction_size']       = content_emoji_reaction_size_preference if change?('setting_content_emoji_reaction_size')
 end
 
   def merged_notification_emails
@@ -291,6 +294,18 @@ end
     boolean_cast_setting 'setting_enable_empty_column'
   end
 
+  def content_font_size_preference
+    settings['setting_content_font_size']
+  end
+
+  def info_font_size_preference
+    settings['setting_info_font_size']
+  end
+
+  def content_emoji_reaction_size_preference
+    settings['setting_content_emoji_reaction_size']
+  end
+
   def boolean_cast_setting(key)
     ActiveModel::Type::Boolean.new.cast(settings[key])
   end

app/models/user.rb

@@ -137,6 +137,9 @@ class User < ApplicationRecord
            :enable_status_reference, :match_visibility_of_references,
            :post_reference_modal, :add_reference_modal, :unselect_reference_modal,
            :hexagon_avatar, :enable_empty_column,
+           :content_font_size, :info_font_size, :content_emoji_reaction_size,
+           :multi_column_customize, :multi_column_content_font_size, :multi_column_info_font_size, :multi_column_content_emoji_reaction_size,
+           :mobile_customize, :mobile_content_font_size, :mobile_info_font_size, :mobile_content_emoji_reaction_size,
 
            to: :settings, prefix: :setting, allow_nil: false
 

app/serializers/initial_state_serializer.rb

@@ -65,6 +65,9 @@ class InitialStateSerializer < ActiveModel::Serializer
       store[:add_reference_modal]               = object.current_account.user.setting_add_reference_modal
       store[:unselect_reference_modal]          = object.current_account.user.setting_unselect_reference_modal
       store[:enable_empty_column]               = object.current_account.user.setting_enable_empty_column
+      store[:content_font_size]                 = object.current_account.user.setting_content_font_size
+      store[:info_font_size]                    = object.current_account.user.setting_info_font_size
+      store[:content_emoji_reaction_size]       = object.current_account.user.setting_content_emoji_reaction_size
     
     else
       store[:auto_play_gif] = Setting.auto_play_gif

app/views/layouts/application.html.haml

@@ -38,6 +38,7 @@
 
     %style{ nonce: request.content_security_policy_nonce }
       != account_cat_styles
+      != account_theme_valiables
 
     = yield :header_tags
 

app/views/settings/preferences/appearance/show.html.haml

@@ -24,6 +24,31 @@
   .fields-group
     = f.input :setting_hexagon_avatar, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
 
+  -# %h5= t 'appearance.custom_size.all'
+
+  .fields-group
+    = f.input :setting_content_font_size, as: :range, input_html: { min: 10, max: 20, list: 'content_font_size_label' },  wrapper: :with_label, hint: false, fedibird_features: true
+    = f.input :setting_info_font_size, as: :range, input_html: { min: 10, max: 20, list: 'info_font_size_label' },  wrapper: :with_label, hint: false, fedibird_features: true
+    = f.input :setting_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48, list: 'emoji_reaction_size_label' }, wrapper: :with_label, false: true, fedibird_features: true
+
+  -# %h5= t 'appearance.custom_size.multi_column'
+
+  -# .fields-group
+  -#   = f.input :setting_multi_column_customize, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
+
+  -# .fields-group.multi-column-customize
+  -#   = f.input :setting_multi_column_content_font_size, as: :range, input_html: { min: 10, max: 24, list: 'content_font_size_label' },  wrapper: :with_label, hint: false, fedibird_features: true
+  -#   = f.input :setting_multi_column_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48 }, wrapper: :with_label, false: true, fedibird_features: true
+
+  -# %h5= t 'appearance.custom_size.mobile'
+
+  -# .fields-group
+  -#   = f.input :setting_mobile_customize, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
+
+  -# .fields-group.mobile-customize
+  -#   = f.input :setting_mobile_content_font_size, as: :range, input_html: { min: 10, max: 24, list: 'content_font_size_label' },  wrapper: :with_label, hint: false, fedibird_features: true
+  -#   = f.input :setting_mobile_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48 }, wrapper: :with_label, false: true, fedibird_features: true
+
   %h4= t 'appearance.advanced_web_interface'
 
   %p.hint= t 'appearance.advanced_web_interface_hint'

config/locales/simple_form.en.yml

@@ -208,6 +208,8 @@ en:
         setting_auto_play_gif: Auto-play animated GIFs
         setting_boost_modal: Show confirmation dialog before boosting
         setting_compact_reaction: Compact display of reaction
+        setting_content_emoji_reaction_size: Emoji reaction size
+        setting_content_font_size: Content font size
         setting_crop_images: Crop images in non-expanded posts to 16x9
         setting_default_language: Posting language
         setting_default_privacy: Posting privacy
@@ -230,6 +232,7 @@ en:
         setting_hide_following_count: Hide your following count
         setting_hide_network: Hide your social graph
         setting_hide_statuses_count: Hide your post count
+        setting_info_font_size: Information header font size
         setting_match_visibility_of_references: Match the visibility of the post to the references
         setting_new_features_policy: Policy for new features
         setting_new_features_policy_tester: Participate in the beta test

config/locales/simple_form.ja.yml

@@ -208,6 +208,8 @@ ja:
         setting_auto_play_gif: アニメーションGIFを自動再生する
         setting_boost_modal: ブーストする前に確認ダイアログを表示する
         setting_compact_reaction: リアクションをコンパクトに表示
+        setting_content_emoji_reaction_size: 投稿の絵文字リアクションのサイズ
+        setting_content_font_size: 投稿のフォントサイズ
         setting_crop_images: 投稿の詳細以外では画像を16:9に切り抜く
         setting_default_language: 投稿する言語
         setting_default_privacy: 投稿の公開範囲
@@ -230,6 +232,7 @@ ja:
         setting_hide_following_count: フォロー数を隠す
         setting_hide_network: 繋がりを隠す
         setting_hide_statuses_count: 投稿数を隠す
+        setting_info_font_size: 情報ヘッダのフォントサイズ
         setting_match_visibility_of_references: 投稿の公開範囲を参照先に合わせる
         setting_new_features_policy: 新機能へのポリシー
         setting_new_features_policy_conservative: 無効にしておき、自分で判断する

config/settings.yml

@@ -60,6 +60,9 @@ defaults: &defaults
   disable_joke_appearance: false
   new_features_policy: 'default'
   enable_status_reference: true
+  content_font_size: 15
+  info_font_size: 15
+  content_emoji_reaction_size: 16
   notification_emails:
     follow: false
     reblog: false