Update settings to re-use admin layout, one big navigation tree, improve settings forms

app/assets/stylesheets/about.scss

@@ -12,7 +12,7 @@
   }
 
   h1 {
-    font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font: 46px/52px 'Roboto', sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
     color: $color4;

app/assets/stylesheets/admin.scss

@@ -1,16 +1,20 @@
 .admin-wrapper {
-  width: 100%;
+  display: flex;
+  justify-content: center;
   height: 100%;
-  position: fixed;
-  background: darken($color1, 2%);
-  overflow-y: scroll;
+
+  .sidebar-wrapper {
+    flex: 1;
+    height: 100%;
+    background: $color1;
+    display: flex;
+    justify-content: flex-end;
+  }
 
   .sidebar {
     width: 240px;
-    position: fixed;
-    left: 0;
     height: 100%;
-    background: $color1;
+    padding: 20px 0;
 
     .logo {
       display: block;
@@ -21,6 +25,8 @@
 
     ul {
       list-style: none;
+      border-radius: 4px 0 0 4px;
+      overflow: hidden;
 
       a {
         display: block;
@@ -28,6 +34,7 @@
         color: rgba($color5, 0.7);
         text-decoration: none;
         transition: all 200ms linear;
+        border-radius: 4px 0 0 4px;
 
         i.fa {
           margin-right: 5px;
@@ -39,9 +46,24 @@
           transition: all 100ms linear;
         }
 
+        &.selected {
+          background: darken($color1, 2%);
+          border-radius: 4px 0 0 0;
+        }
+      }
+
+      ul {
+        background: darken($color1, 4%);
+        border-radius: 0 0 0 4px;
+
+        a {
+          border: 0;
+
           &.selected {
             color: $color5;
             background-color: $color4;
+            border-bottom: 0;
+            border-radius: 0;
 
             &:hover {
               background-color: lighten($color4, 5%);
@@ -50,17 +72,47 @@
         }
       }
     }
+  }
+
+  .content-wrapper {
+    flex: 2;
+  }
 
   .content {
-    margin-left: 240px;
-    padding: 15px;
+    max-width: 700px;
+    padding: 20px 15px;
+    padding-top: 60px;
+    padding-left: 25px;
+
+    h2 {
+      color: $color2;
+      font-size: 24px;
+      line-height: 28px;
+      font-weight: 400;
+      margin-bottom: 40px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 18px;
+      color: $color2;
+      margin-bottom: 20px;
+
+      strong {
+        color: $color5;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .simple_form {
+    max-width: 400px;
   }
 }
 
 .filters {
   display: flex;
   margin-bottom: 20px;
-  padding-left: 8px;
 
   .filter-subset {
     flex: 0 0 auto;

app/assets/stylesheets/application.scss

@@ -115,6 +115,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 0;
+    background: $color1;
   }
 
   &.embed {
@@ -129,6 +130,14 @@ body {
     }
   }
 
+  &.admin {
+    background: darken($color1, 4%);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
   @media screen and (max-width: 360px) {
     padding-bottom: 0;
   }

app/assets/stylesheets/forms.scss

@@ -7,18 +7,6 @@ code {
   max-width: 400px;
   padding: 20px;
   margin: 0 auto;
-
-  p {
-    font-size: 14px;
-    line-height: 18px;
-    color: $color2;
-    margin-bottom: 20px;
-
-    strong {
-      color: $color5;
-      font-weight: 500;
-    }
-  }
 }
 
 .simple_form {
@@ -28,28 +16,35 @@ code {
 
   .hint {
     display: block;
-    color: rgba($color5, 0.8);
+    color: $color3;
     font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .label_input {
+    display: flex;
+
+    label {
+      flex: 0 0 auto;
+      width: 100px;
+    }
+
+    input {
+      flex: 1 1 auto;
+    }
   }
 
   .input.file, .input.select {
     padding: 15px 0;
     margin-bottom: 0;
-    display: flex;
 
     label {
       font-family: inherit;
       font-size: 16px;
       color: $color5;
-      width: 100px;
       display: block;
-      flex: 0 0 auto;
       padding-top: 5px;
     }
-
-    input[type=file], select {
-      flex: 1 1 auto;
-    }
   }
 
   .fields-group {
@@ -64,6 +59,7 @@ code {
       font-size: 14px;
       color: white;
       display: block;
+      width: auto;
     }
 
     label.checkbox {
@@ -80,6 +76,7 @@ code {
 
     .hint {
       padding-left: 25px;
+      margin-left: 0;
     }
   }
 
@@ -116,13 +113,19 @@ code {
   }
 
   .input.field_with_errors {
+    label {
+      color: $color6;
+    }
+
     input[type=text], input[type=email], input[type=password] {
       border-bottom-color: $color6;
     }
 
     .error {
+      display: block;
       font-weight: 500;
       color: $color6;
+      margin-top: 4px;
     }
   }
 

app/controllers/auth/registrations_controller.rb

@@ -2,6 +2,7 @@
 
 class Auth::RegistrationsController < Devise::RegistrationsController
   layout 'auth'
+  layout 'admin', only: [:edit]
 
   before_action :check_single_user_mode
   before_action :configure_sign_up_params, only: [:create]

app/controllers/settings/preferences_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Settings::PreferencesController < ApplicationController
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
 

app/controllers/settings/profiles_controller.rb

@@ -3,7 +3,7 @@
 class Settings::ProfilesController < ApplicationController
   include ObfuscateFilename
 
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
   before_action :set_account

app/controllers/settings/two_factor_auths_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Settings::TwoFactorAuthsController < ApplicationController
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
 

app/views/admin/accounts/index.html.haml

@@ -54,8 +54,8 @@
           - else
             %i.fa.fa-times
         %td
-          = table_link_to 'circle', 'Open in web', web_path("accounts/#{account.id}")
-          = table_link_to 'globe', 'Open public', TagManager.instance.url_for(account)
+          = table_link_to 'circle', 'Web', web_path("accounts/#{account.id}")
+          = table_link_to 'globe', 'Public', TagManager.instance.url_for(account)
           = table_link_to 'pencil', 'Edit', admin_account_path(account.id)
 
 = will_paginate @accounts, pagination_options

app/views/admin/accounts/show.html.haml

@@ -1,3 +1,6 @@
+- content_for :page_title do
+  = @account.acct
+
 %table.table
   %tbody
     %tr

app/views/auth/registrations/edit.html.haml

@@ -11,5 +11,3 @@
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"

app/views/layouts/admin.html.haml

@@ -3,12 +3,15 @@
 
 - content_for :content do
   .admin-wrapper
+    .sidebar-wrapper
       .sidebar
         = link_to root_path do
           = image_tag 'logo.png', class: 'logo'
 
         = render_navigation
+    .content-wrapper
       .content
+        %h2= yield :page_title
         = yield
 
-= render template: "layouts/application"
+= render template: "layouts/application", locals: { body_classes: 'admin' }

app/views/layouts/application.html.haml

@@ -20,5 +20,7 @@
 
     = yield :header_tags
 
-  %body{ class: @body_classes }
+  - body_classes ||= @body_classes
+
+  %body{ class: body_classes }
     = content_for?(:content) ? yield(:content) : yield

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

@@ -4,8 +4,10 @@
 = simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
+  .fields-group
     = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
 
+  .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
       = ff.input :follow_request, as: :boolean, wrapper: :with_label
@@ -19,5 +21,3 @@
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"

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

@@ -7,12 +7,10 @@
   .fields-group
     = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name')
     = f.input :note, placeholder: t('simple_form.labels.defaults.note')
-    = f.input :avatar, wrapper: :with_label
-    = f.input :header, wrapper: :with_label
+    = f.input :avatar, wrapper: :with_label, hint: t('simple_form.hints.defaults.avatar')
+    = f.input :header, wrapper: :with_label, hint: t('simple_form.hints.defaults.header')
 
   = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"

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

@@ -1,17 +1,13 @@
 - content_for :page_title do
   = t('settings.two_factor_auth')
 
+.simple_form
   - if current_user.otp_required_for_login
     %p= t('two_factor_auth.instructions_html')
 
     .qr-code= raw @qrcode.as_svg(padding: 0, module_size: 5)
 
-  .simple_form
     = link_to t('two_factor_auth.disable'), disable_settings_two_factor_auth_path, data: { method: 'POST' }, class: 'block-button'
   - else
     %p= t('two_factor_auth.description_html')
-
-  .simple_form
     = link_to t('two_factor_auth.enable'), enable_settings_two_factor_auth_path, data: { method: 'POST' }, class: 'block-button'
-
-.form-footer= render "settings/shared/links"

config/application.rb

@@ -46,6 +46,7 @@ module Mastodon
 
     config.to_prepare do
       Doorkeeper::AuthorizationsController.layout 'public'
+      Doorkeeper::AuthorizedApplicationsController.layout 'admin'
       Doorkeeper::Application.send :include, ApplicationExtension
     end
 

config/i18n-tasks.yml

@@ -18,6 +18,7 @@ data:
 search:
   paths:
    - app/
+   - config/navigation.rb
 
   relative_roots:
     - app/controllers

config/initializers/simple_form.rb

@@ -52,7 +52,7 @@ SimpleForm.setup do |config|
 
   config.wrappers :with_label, class: :input, hint_class: :field_with_hint, error_class: :field_with_errors do |b|
     b.use :html5
-    b.use :label_input
+    b.use :label_input, wrap_with: { tag: :div, class: :label_input }
     b.use :hint,  wrap_with: { tag: :span, class: :hint }
     b.use :error, wrap_with: { tag: :span, class: :error }
   end

config/locales/en.yml

@@ -31,10 +31,11 @@ en:
   applications:
     invalid_url: The provided URL is invalid
   auth:
-    change_password: Change password
+    change_password: Credentials
     didnt_get_confirmation: Didn't receive confirmation instructions?
     forgot_password: Forgot your password?
     login: Log in
+    logout: Logout
     register: Sign up
     resend_confirmation: Resend confirmation instructions
     reset_password: Reset password
@@ -93,6 +94,7 @@ en:
     back: Back to Mastodon
     edit_profile: Edit profile
     preferences: Preferences
+    settings: Settings
     two_factor_auth: Two-factor Authentication
   statuses:
     over_character_limit: character limit of %{max} exceeded

config/locales/simple_form.en.yml

@@ -3,7 +3,11 @@ en:
   simple_form:
     hints:
       defaults:
+        avatar: PNG, GIF or JPG. At most 2MB. Will be downscaled to 120x120px
+        display_name: At most 30 characters
+        header: PNG, GIF or JPG. At most 2MB. Will be downscaled to 700x335px
         locked: Requires you to manually approve followers and defaults post privacy to followers-only
+        note: At most 160 characters
     labels:
       defaults:
         avatar: Avatar

config/navigation.rb

@@ -2,11 +2,25 @@
 
 SimpleNavigation::Configuration.run do |navigation|
   navigation.items do |primary|
-    primary.item :accounts, safe_join([fa_icon('users fw'), 'Accounts']), admin_accounts_url
-    primary.item :pubsubhubbubs, safe_join([fa_icon('paper-plane-o fw'), 'PubSubHubbub']), admin_pubsubhubbub_index_url
-    primary.item :domain_blocks, safe_join([fa_icon('lock fw'), 'Domain Blocks']), admin_domain_blocks_url
-    primary.item :sidekiq, safe_join([fa_icon('diamond fw'), 'Sidekiq']), sidekiq_url
-    primary.item :pghero, safe_join([fa_icon('database fw'), 'PgHero']), pghero_url
-    primary.item :settings, safe_join([fa_icon('cogs fw'), 'Site Settings']), admin_settings_url
+    primary.item :web, safe_join([fa_icon('chevron-left fw'), t('settings.back')]), root_url
+
+    primary.item :settings, safe_join([fa_icon('cog fw'), t('settings.settings')]), settings_profile_url do |settings|
+      settings.item :profile, safe_join([fa_icon('user fw'), t('settings.edit_profile')]), settings_profile_url
+      settings.item :preferences, safe_join([fa_icon('sliders fw'), t('settings.preferences')]), settings_preferences_url
+      settings.item :password, safe_join([fa_icon('cog fw'), t('auth.change_password')]), edit_user_registration_url
+      settings.item :two_factor_auth, safe_join([fa_icon('mobile fw'), t('settings.two_factor_auth')]), settings_two_factor_auth_url
+      # settings.item :authorized_apps, safe_join([fa_icon('list fw'), 'Authorized Apps']), oauth_authorized_applications_url
+    end
+
+    primary.item :admin, safe_join([fa_icon('cogs fw'), 'Administration']), admin_accounts_url, if: proc { current_user.admin? } do |admin|
+      admin.item :accounts, safe_join([fa_icon('users fw'), 'Accounts']), admin_accounts_url, highlights_on: %r{/admin/accounts}
+      admin.item :pubsubhubbubs, safe_join([fa_icon('paper-plane-o fw'), 'PubSubHubbub']), admin_pubsubhubbub_index_url
+      admin.item :domain_blocks, safe_join([fa_icon('lock fw'), 'Domain Blocks']), admin_domain_blocks_url
+      admin.item :sidekiq, safe_join([fa_icon('diamond fw'), 'Sidekiq']), sidekiq_url
+      admin.item :pghero, safe_join([fa_icon('database fw'), 'PgHero']), pghero_url
+      admin.item :settings, safe_join([fa_icon('cogs fw'), 'Site Settings']), admin_settings_url
+    end
+
+    primary.item :logout, safe_join([fa_icon('sign-out fw'), t('auth.logout')]), destroy_user_session_url, link_html: { 'data-method' => 'delete' }
   end
 end