commit: f4bc9620a9701db17cb8f651643f65c984e65c27 parent: 04bce0cdf28402c3433403f399ee10113f6f5fdf Author: Eugen Rochko <eugen@zeonfederated.com> Date: Sat, 28 Jan 2017 03:56:10 +0100 Update settings to re-use admin layout, one big navigation tree, improve settings formsDiffstat:
22 files changed, 169 insertions(+), 82 deletions(-)
diff --git a/app/assets/stylesheets/about.scss b/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; diff --git a/app/assets/stylesheets/admin.scss b/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; @@ -40,27 +47,72 @@ } &.selected { - color: $color5; - background-color: $color4; + background: darken($color1, 2%); + border-radius: 4px 0 0 0; + } + } + + ul { + background: darken($color1, 4%); + border-radius: 0 0 0 4px; + + a { + border: 0; - &:hover { - background-color: lighten($color4, 5%); + &.selected { + color: $color5; + background-color: $color4; + border-bottom: 0; + border-radius: 0; + + &:hover { + background-color: lighten($color4, 5%); + } } } } } } + .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; diff --git a/app/assets/stylesheets/application.scss b/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; } diff --git a/app/assets/stylesheets/forms.scss b/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; } } diff --git a/app/controllers/auth/registrations_controller.rb b/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] diff --git a/app/controllers/settings/preferences_controller.rb b/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! diff --git a/app/controllers/settings/profiles_controller.rb b/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 diff --git a/app/controllers/settings/two_factor_auths_controller.rb b/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! diff --git a/app/views/admin/accounts/index.html.haml b/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 diff --git a/app/views/admin/accounts/show.html.haml b/app/views/admin/accounts/show.html.haml @@ -1,3 +1,6 @@ +- content_for :page_title do + = @account.acct + %table.table %tbody %tr diff --git a/app/views/auth/registrations/edit.html.haml b/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" diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml @@ -1,14 +1,17 @@ - content_for :header_tags do = javascript_include_tag 'application_public' - + - content_for :content do .admin-wrapper - .sidebar - = link_to root_path do - = image_tag 'logo.png', class: 'logo' + .sidebar-wrapper + .sidebar + = link_to root_path do + = image_tag 'logo.png', class: 'logo' - = render_navigation - .content - = yield + = render_navigation + .content-wrapper + .content + %h2= yield :page_title + = yield -= render template: "layouts/application" += render template: "layouts/application", locals: { body_classes: 'admin' } diff --git a/app/views/layouts/application.html.haml b/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 diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml @@ -4,14 +4,16 @@ = simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f| = render 'shared/error_messages', object: current_user - = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) } + .fields-group + = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) } - = 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 - = 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 :follow, as: :boolean, wrapper: :with_label + = ff.input :follow_request, as: :boolean, wrapper: :with_label + = ff.input :reblog, as: :boolean, wrapper: :with_label + = ff.input :favourite, as: :boolean, wrapper: :with_label + = ff.input :mention, as: :boolean, wrapper: :with_label = f.simple_fields_for :interactions, hash_to_object(current_user.settings.interactions) do |ff| = ff.input :must_be_follower, 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" diff --git a/app/views/settings/profiles/show.html.haml b/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" diff --git a/app/views/settings/two_factor_auths/show.html.haml b/app/views/settings/two_factor_auths/show.html.haml @@ -1,17 +1,13 @@ - content_for :page_title do = t('settings.two_factor_auth') -- if current_user.otp_required_for_login - %p= t('two_factor_auth.instructions_html') +.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) + .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 + - else + %p= t('two_factor_auth.description_html') = 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" diff --git a/config/application.rb b/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 diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml @@ -18,6 +18,7 @@ data: search: paths: - app/ + - config/navigation.rb relative_roots: - app/controllers diff --git a/config/initializers/simple_form.rb b/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 diff --git a/config/locales/en.yml b/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 diff --git a/config/locales/simple_form.en.yml b/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 diff --git a/config/navigation.rb b/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