[maud] Add legacy style

* Choose default/compact/legacy UI
* fix: remove unused padding preference
* fix incorrect width video-player and audio player
* fix detailed-status padding
* fix if huge font-size
* fix mod-announcements
* fix account header

Signed-off-by: lindwurm <lindwurm.q@gmail.com>

app/controllers/settings/preferences_controller.rb

@@ -57,7 +57,7 @@ def user_settings_params
       :setting_bigger_publish,
       :setting_wider_column,
       :setting_always_send_emails,
-      :setting_compact_padding,
+      :setting_webui_styles,
       notification_emails: %i(follow follow_request reblog favourite mention report pending_account trending_tag appeal),
       interactions: %i(must_be_follower must_be_following must_be_following_dm)
     )

app/helpers/application_helper.rb

@@ -166,14 +166,20 @@ def react_admin_component(name, props = {})
     content_tag(:div, nil, data: { 'admin-component': name.to_s.camelcase, props: Oj.dump({ locale: I18n.locale }.merge(props)) })
   end
 
+  WEBUI_STYLES = {
+    'default' => '',
+    'compact' => 'compact-padding',
+    'legacy' => 'legacy-style',
+  }.freeze
+
   def body_classes
     output = (@body_classes || '').split(' ')
     output << "theme-#{current_theme.parameterize}"
     output << 'system-font' if current_account&.user&.setting_system_font_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
     output << 'bigger-publish' if current_account&.user&.setting_bigger_publish
     output << 'wider-column' if (current_account&.user&.setting_advanced_layout && current_account&.user&.setting_wider_column)
-    output << 'compact-padding' if current_account&.user&.setting_compact_padding
+    output << WEBUI_STYLES[current_account&.user&.setting_webui_styles]
     output << 'rtl' if locale_direction == 'rtl'
     output.reject(&:blank?).join(' ')
   end

app/javascript/styles/application.scss

@@ -30,3 +30,4 @@
 @import 'mods/bigger-publish';
 @import 'mods/wider-column';
 @import 'mods/compact-padding';
+@import 'mods/legacy-style';

app/javascript/styles/mods/announcements.scss

@@ -1,10 +1,10 @@
 .mods__announcements__item {
   display: flex;
   padding: 10px;
-  margin: 10px;
+  margin: 15px;
   background: $simple-background-color;
   color: $inverted-text-color;
-  box-shadow: 0 0 15px rgba(0,0,0,.2);
+  box-shadow: 0 0 2px rgba(0,0,0,.5);
   border-radius: 4px;
   text-decoration: none;
 

app/javascript/styles/mods/legacy-style.scss

@@ -0,0 +1,85 @@
+.legacy-style {
+    .status__prepend {
+        padding-top: 0.25em;
+        padding-left: 2.15em;
+        padding-bottom: 0;
+    }
+    .status {
+        padding: 0.5em 0.5em 0.5em 4.75em;
+        position: relative;
+    }
+    .status-reply {
+        padding-top: 0.25em;
+    }
+    .status .status__info {
+        margin-bottom: 0;
+    }
+    .status .status__relative-time {
+        height: auto;
+        line-height: normal;
+    }
+    .status .status__avatar {  
+        width: 3em;
+        height: 3em;
+        position: absolute;
+        left: 0.5em;
+        top: 0.5em;
+    }
+    .status .display-name:not(.detailed-status__display-name) bdi {
+        padding-right: 0.25em;
+    }
+    .status .display-name:not(.detailed-status__display-name) {
+        display: flex;
+    }
+    .detailed-status .status-card {
+        padding: 0.25em;
+    }
+    .account {
+        padding: 0.5em;
+    }
+    .account__wrapper .display-name, .detailed-status .display-name {
+        padding-left: 0;
+    }
+    .status__action-bar {
+        margin-top: 0.25em;
+        justify-content: flex-start;
+    }
+    .status .media-gallery, .detailed-status .status-card, .detailed-status__meta {
+        margin-top: 0.5em;
+    }
+    .status .attachment-list {
+        margin-top: 0.25em;
+    }
+    .notification__message {
+        padding: 0.5em 0.5em 0 2.35em;
+    }
+    .muted {
+        padding-top: 0.5em;
+    }
+    .detailed-status__display-name {
+        margin-bottom: 0.5em;
+    }
+    .mods__announcements__item {
+        margin: 10px;   
+    }
+    .drawer__inner .navigation-bar, .drawer__inner .compose-form {
+        padding: 10px;
+    }
+    .account__header__bar {
+        padding: 0 12px;
+    }
+    .account__header__tabs__name {
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
+    .account__header__bio .account__header__fields {
+        margin: 12px 0 0;
+    }
+    .account__header__bio .account__header__fields dl {
+        padding: 8px 12px;
+    }
+    .account__header__extra__links {
+        margin: 0 -8px;
+        padding-top: 12px;
+    }
+}

app/lib/user_settings_decorator.rb

@@ -41,7 +41,7 @@ def process_update
     user.settings['bigger_publish']      = bigger_publish_preference if change?('setting_bigger_publish')
     user.settings['wider_column']        = wider_column_preference if change?('setting_wider_column')
     user.settings['always_send_emails']  = always_send_emails_preference if change?('setting_always_send_emails')
-    user.settings['compact_padding']     = compact_padding_preference if change?('setting_compact_padding')
+    user.settings['webui_styles']        = webui_styles_preference if change?('setting_webui_styles')
   end
 
   def merged_notification_emails
@@ -148,8 +148,8 @@ def always_send_emails_preference
     boolean_cast_setting 'setting_always_send_emails'
   end
 
-  def compact_padding_preference
-    boolean_cast_setting 'setting_compact_padding'
+  def webui_styles_preference
+    settings['setting_webui_styles']
   end
 
   def boolean_cast_setting(key)

app/models/user.rb

@@ -136,7 +136,7 @@ class User < ApplicationRecord
            :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
            :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images,
            :disable_swiping, :always_send_emails,
-           :bigger_publish, :wider_column, :compact_padding,
+           :bigger_publish, :wider_column, :webui_styles,
            to: :settings, prefix: :setting, allow_nil: false
 
   delegate :can?, to: :role

app/serializers/initial_state_serializer.rb

@@ -49,6 +49,7 @@ def meta
       store[:use_pending_items] = object.current_account.user.setting_use_pending_items
       store[:trends]            = Setting.trends && object.current_account.user.setting_trends
       store[:crop_images]       = object.current_account.user.setting_crop_images
+      store[:webui_styles]      = object.current_account.user.setting_webui_styles
     else
       store[:auto_play_gif] = Setting.auto_play_gif
       store[:display_media] = Setting.display_media

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

@@ -21,7 +21,7 @@
     = f.input :setting_bigger_publish, as: :boolean, wrapper: :with_label, hint: true
 
   .fields-group
-    = f.input :setting_compact_padding, as: :boolean, wrapper: :with_label, hint: true
+    = f.input :setting_webui_styles, collection: ['default', 'compact', 'legacy'],label_method: lambda { |item| t("simple_form.hints.defaults.setting_webui_styles_#{item}") }, wrapper: :with_label, include_blank: false, hint: t('simple_form.hints.defaults.setting_webui_styles_hint')
 
   %h4= t 'appearance.advanced_web_interface'
 

config/locales/simple_form.en.yml

@@ -61,7 +61,10 @@ en:
         setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed
         setting_bigger_publish: Make button larger and easier to press
         setting_wider_column: Equalize column widths to fit window or display
-        setting_compact_padding: Make padding/margin tighter like previous version
+        setting_webui_styles_hint: You can make padding/margin tighter like previous version
+        setting_webui_styles_default: Default
+        setting_webui_styles_compact: Compact
+        setting_webui_styles_legacy: Legacy style
         username: Your username will be unique on %{domain}
         whole_word: When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word
       domain_allow:
@@ -218,7 +221,7 @@ en:
         setting_use_pending_items: Slow mode
         setting_bigger_publish: Use bigger publish button
         setting_wider_column: Use wider columns
-        setting_compact_padding: Use more compact UI
+        setting_webui_styles: WebUI styles
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title

config/locales/simple_form.ja.yml

@@ -61,7 +61,10 @@ ja:
         setting_use_pending_items: 新着があってもタイムラインを自動的にスクロールしないようにします
         setting_bigger_publish: より大きく、押しやすくなった投稿ボタンを使用します
         setting_wider_column: ウィンドウやディスプレイの幅に合わせてカラムの幅を等分します
-        setting_compact_padding: 従来のバージョンのものに近い、余白が狭めの表示に切り替えます
+        setting_webui_styles_hint: 従来のバージョンのものに近い、余白が狭めの表示に切り替えることができます
+        setting_webui_styles_default: デフォルト
+        setting_webui_styles_compact: コンパクト
+        setting_webui_styles_legacy: 旧バージョン風
         username: あなたのユーザー名は %{domain} の中で重複していない必要があります
         whole_word: キーワードまたはフレーズが英数字のみの場合、単語全体と一致する場合のみ適用されるようになります
       domain_allow:
@@ -218,7 +221,7 @@ ja:
         setting_use_pending_items: 手動更新モード
         setting_bigger_publish: より大きな投稿ボタンを使用する
         setting_wider_column: より幅広なカラムを使用する
-        setting_compact_padding: よりコンパクトな表示にする
+        setting_webui_styles: 表示スタイル
         severity: 重大性
         sign_in_token_attempt: セキュリティコード
         title: タイトル

config/settings.yml

@@ -72,7 +72,7 @@ defaults: &defaults
   require_invite_text: false
   bigger_publish: false
   wider_column: false
-  compact_padding: false
+  webui_styles: 'default'
   backups_retention_period: 7
 
 development: