Update settings to re-use admin layout, one big navigation tree, improve settings forms
This commit is contained in:
Eugen Rochko
parent
04bce0cdf2
commit
f4bc9620a9
22 changed files with 169 additions and 82 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Settings::PreferencesController < ApplicationController
|
||||
layout 'auth'
|
||||
layout 'admin'
|
||||
|
||||
before_action :authenticate_user!
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
class Settings::ProfilesController < ApplicationController
|
||||
include ObfuscateFilename
|
||||
|
||||
layout 'auth'
|
||||
layout 'admin'
|
||||
|
||||
before_action :authenticate_user!
|
||||
before_action :set_account
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Settings::TwoFactorAuthsController < ApplicationController
|
||||
layout 'auth'
|
||||
layout 'admin'
|
||||
|
||||
before_action :authenticate_user!
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
- content_for :page_title do
|
||||
= @account.acct
|
||||
|
||||
%table.table
|
||||
%tbody
|
||||
%tr
|
||||
|
|
|
|||
|
|
@ -11,5 +11,3 @@
|
|||
|
||||
.actions
|
||||
= f.button :button, t('generic.save_changes'), type: :submit
|
||||
|
||||
.form-footer= render "settings/shared/links"
|
||||
|
|
|
|||
|
|
@ -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' }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ module Mastodon
|
|||
|
||||
config.to_prepare do
|
||||
Doorkeeper::AuthorizationsController.layout 'public'
|
||||
Doorkeeper::AuthorizedApplicationsController.layout 'admin'
|
||||
Doorkeeper::Application.send :include, ApplicationExtension
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ data:
|
|||
search:
|
||||
paths:
|
||||
- app/
|
||||
- config/navigation.rb
|
||||
|
||||
relative_roots:
|
||||
- app/controllers
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue