Reorganize preferences page (#5161)

app/javascript/styles/forms.scss

@@ -22,6 +22,16 @@ code {
     margin-top: 4px;
   }
 
+  h4 {
+    text-transform: uppercase;
+    font-size: 13px;
+    font-weight: 500;
+    color: $ui-primary-color;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
   p.hint {
     margin-bottom: 15px;
     color: $ui-primary-color;
@@ -316,6 +326,7 @@ code {
 
   select {
     font-size: 16px;
+    max-height: 29px;
   }
 
   .input-with-append {

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

@@ -4,30 +4,22 @@
 = simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
+  %h4= t 'preferences.languages'
+
   .fields-group
-    = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| safe_join([I18n.t("themes.#{theme}", default: theme)])}, wrapper: :with_label, include_blank: false
-
-    = f.input :locale,
-      collection: I18n.available_locales,
-      wrapper: :with_label,
-      include_blank: false,
-      label_method: lambda { |locale| human_locale(locale) },
-      selected: I18n.locale
-
-    = f.input :filtered_languages,
-      collection: filterable_languages,
-      wrapper: :with_block_label,
-      include_blank: false,
-      label_method: lambda { |locale| human_locale(locale) },
-      required: false,
-      as: :check_boxes,
-      collection_wrapper_tag: 'ul',
-      item_wrapper_tag: 'li'
+    = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, selected: I18n.locale
+
+    = f.input :filtered_languages, collection: filterable_languages, wrapper: :with_block_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, required: false, as: :check_boxes, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
+
+  %h4= t 'preferences.publishing'
 
+  .fields-group
     = f.input :setting_default_privacy, collection: Status.visibilities.keys - ['direct'], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| safe_join([I18n.t("statuses.visibilities.#{visibility}"), content_tag(:span, I18n.t("statuses.visibilities.#{visibility}_long"), class: 'hint')]) }, required: false, as: :radio_buttons, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
 
     = f.input :setting_default_sensitive, as: :boolean, wrapper: :with_label
 
+  %h4= t 'preferences.notifications'
+
   .fields-group
     = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
       = ff.input :follow, as: :boolean, wrapper: :with_label
@@ -35,6 +27,9 @@
       = ff.input :reblog, as: :boolean, wrapper: :with_label
       = ff.input :favourite, as: :boolean, wrapper: :with_label
       = ff.input :mention, as: :boolean, wrapper: :with_label
+
+  .fields-group
+    = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
       = ff.input :digest, as: :boolean, wrapper: :with_label
 
   .fields-group
@@ -42,10 +37,17 @@
       = ff.input :must_be_follower, as: :boolean, wrapper: :with_label
       = ff.input :must_be_following, as: :boolean, wrapper: :with_label
 
+  %h4= t 'preferences.other'
+
   .fields-group
     = f.input :setting_noindex, as: :boolean, wrapper: :with_label
 
+  %h4= t 'preferences.web'
+
   .fields-group
+    - if Themes.instance.names.size > 1
+      = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false
+
     = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_delete_modal, as: :boolean, wrapper: :with_label

config/locales/de.yml

@@ -388,7 +388,6 @@ de:
       private_long: Nur für Folgende sichtbar
       public: Öffentlich
       public_long: Für alle sichtbar
-      unlisted: Nicht gelistet
       unlisted: Für alle sichtbar, aber nicht in öffentlichen Zeitleisten aufgelistet
   stream_entries:
     click_to_show: Klicken, um zu zeigen

config/locales/devise.de.yml

@@ -8,10 +8,10 @@ de:
     failure:
       already_authenticated: Du bist bereits angemeldet.
       inactive: Dein Konto wurde noch nicht aktiviert.
-      invalid: '%{authentication_keys} oder Passwort ungültig.'
+      invalid: "%{authentication_keys} oder Passwort ungültig."
       last_attempt: Du hast noch einen Versuch, bevor dein Konto gesperrt wird.
       locked: Dein Konto ist gesperrt.
-      not_found_in_database: '%{authentication_keys} oder Passwort ungültig.'
+      not_found_in_database: "%{authentication_keys} oder Passwort ungültig."
       timeout: Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.
       unauthenticated: Du musst dich anmelden oder registrieren, bevor du fortfahren kannst.
       unconfirmed: Du musst deine E-Mail-Adresse bestätigen, bevor du fortfahren kannst.

config/locales/en.yml

@@ -393,6 +393,12 @@ en:
     next: Next
     prev: Prev
     truncate: "…"
+  preferences:
+    languages: Languages
+    notifications: Notifications
+    other: Other
+    publishing: Publishing
+    web: Web
   push_notifications:
     favourite:
       title: "%{name} favourited your status"

config/locales/ja.yml

@@ -247,7 +247,7 @@ ja:
     salutation: "%{name} さん"
     settings: 'メール設定の変更: %{link}'
     signature: Mastodon %{instance} インスタンスからの通知
-    view: 'リンク'
+    view: リンク
   applications:
     created: アプリが作成されました
     destroyed: アプリが削除されました

config/locales/oc.yml

@@ -93,8 +93,8 @@ oc:
       reset_password: Reïnicializar lo senhal
       resubscribe: Se tornar abonar
       salmon_url: URL Salmon
-      shared_inbox_url: URL de recepcion partejada
       search: Cercar
+      shared_inbox_url: URL de recepcion partejada
       show:
         created_reports: Rapòrts creat per aqueste compte
         report: rapòrt

config/locales/pl.yml

@@ -62,7 +62,7 @@ pl:
       followers: Śledzący
       followers_url: Adres śledzących
       follows: Śledzeni
-      inbox: Adres skrzynki
+      inbox_url: Adres skrzynki
       ip: Adres IP
       location:
         all: Wszystkie

config/locales/simple_form.en.yml

@@ -4,6 +4,7 @@ en:
     hints:
       defaults:
         avatar: PNG, GIF or JPG. At most 2MB. Will be downscaled to 120x120px
+        digest: Sent after a long period of inactivity with a summary of mentions you've received in your absence
         display_name:
           one: <span class="name-counter">1</span> character left
           other: <span class="name-counter">%{count}</span> characters left
@@ -19,7 +20,7 @@ en:
       sessions:
         otp: Enter the Two-factor code from your phone or use one of your recovery codes.
       user:
-        filtered_languages: Selected languages will be removed from your public timelines.
+        filtered_languages: Checked languages will be filtered from public timelines for you
     labels:
       defaults:
         avatar: Avatar
@@ -44,7 +45,7 @@ en:
         setting_delete_modal: Show confirmation dialog before deleting a toot
         setting_noindex: Opt-out of search engine indexing
         setting_system_font_ui: Use system's default font
-        setting_theme: Site theme 
+        setting_theme: Site theme
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         severity: Severity
         type: Import type