Improve UI of admin site settings (#4163)

4 files changed, 123 insertions, 87 deletions

diff --git a/app/controllers/admin/settings_controller.rb b/app/controllers/admin/settings_controller.rb
index 29b590d7a..5985d6282 100644
--- a/app/controllers/admin/settings_controller.rb
+++ b/app/controllers/admin/settings_controller.rb
@@ -22,7 +22,7 @@ module Admin
     ).freeze
 
     def edit
-      @settings = Setting.all_as_records
+      @admin_settings = Form::AdminSettings.new
     end
 
     def update
@@ -38,12 +38,12 @@ module Admin
     private
 
     def settings_params
-      params.permit(ADMIN_SETTINGS)
+      params.require(:form_admin_settings).permit(ADMIN_SETTINGS)
     end
 
     def value_for_update(key, value)
       if BOOLEAN_SETTINGS.include?(key)
-        value == 'true'
+        value == '1'
       else
         value
       end
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index e723b50ff..e1de36d55 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -57,10 +57,7 @@ code {
     }
   }
 
-  .input.file,
-  .input.select,
-  .input.radio_buttons,
-  .input.check_boxes {
+  .input.with_label {
     padding: 15px 0;
     margin-bottom: 0;
 
@@ -71,6 +68,44 @@ code {
       display: block;
       padding-top: 5px;
     }
+
+    &.boolean {
+      padding: initial;
+      margin-bottom: initial;
+
+      .label_input > label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        display: block;
+        width: auto;
+      }
+
+      label.checkbox {
+        position: relative;
+        padding-left: 25px;
+        flex: 1 1 auto;
+      }
+    }
+  }
+
+  .input.with_block_label {
+    & > label {
+      font-family: inherit;
+      font-size: 16px;
+      color: $primary-text-color;
+      display: block;
+      padding-top: 5px;
+    }
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    li {
+      float: left;
+      width: 50%;
+    }
   }
 
   .fields-group {
@@ -106,7 +141,7 @@ code {
     input[type=checkbox] {
       position: absolute;
       left: 0;
-      top: 1px;
+      top: 5px;
       margin: 0;
     }
 
@@ -116,6 +151,29 @@ code {
     }
   }
 
+  .check_boxes {
+    .checkbox {
+      label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        display: block;
+        width: auto;
+        position: relative;
+        padding-top: 5px;
+        padding-left: 25px;
+        flex: 1 1 auto;
+      }
+
+      input[type=checkbox] {
+        position: absolute;
+        left: 0;
+        top: 5px;
+        margin: 0;
+      }
+    }
+  }
+
   input[type=text],
   input[type=number],
   input[type=email],
@@ -390,25 +448,6 @@ code {
   }
 }
 
-.user_filtered_languages {
-  & > label {
-    font-family: inherit;
-    font-size: 16px;
-    color: $primary-text-color;
-    display: block;
-    padding-top: 5px;
-  }
-
-  .hint {
-    margin-bottom: 15px;
-  }
-
-  li {
-    float: left;
-    width: 50%;
-  }
-}
-
 .post-follow-actions {
   text-align: center;
   color: $ui-primary-color;
diff --git a/app/models/form/admin_settings.rb b/app/models/form/admin_settings.rb
new file mode 100644
index 000000000..c3a04ba65
--- /dev/null
+++ b/app/models/form/admin_settings.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Form::AdminSettings
+  include ActiveModel::Model
+
+  delegate(
+    :site_contact_username,
+    :site_contact_username=,
+    :site_contact_email,
+    :site_contact_email=,
+    :site_title,
+    :site_title=,
+    :site_description,
+    :site_description=,
+    :site_extended_description,
+    :site_extended_description=,
+    :site_terms,
+    :site_terms=,
+    :open_registrations,
+    :open_registrations=,
+    :closed_registrations_message,
+    :closed_registrations_message=,
+    :open_deletion,
+    :open_deletion=,
+    :timeline_preview,
+    :timeline_preview=,
+    to: Setting
+  )
+end
diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml
index 59192530b..9f8a6640b 100644
--- a/app/views/admin/settings/edit.html.haml
+++ b/app/views/admin/settings/edit.html.haml
@@ -1,64 +1,32 @@
 - content_for :page_title do
   = t('admin.settings.title')
 
-= form_tag(admin_settings_path, method: :put, class: 'simple_form', style: 'max-width: 100%') do
-  %table.table
-    %thead
-      %tr
-        %th{ width: '40%' }
-          = t('admin.settings.setting')
-        %th
-    %tbody
-      %tr
-        %td
-          %strong= t('admin.settings.contact_information.label')
-        %td= text_field_tag :site_contact_username, @settings['site_contact_username'].value, place_holder: t('admin.settings.contact_information.username')
-      %tr
-        %td
-          %strong= t('admin.accounts.email')
-        %td= text_field_tag :site_contact_email, @settings['site_contact_email'].value, place_holder: t('admin.settings.contact_information.email')
-      %tr
-        %td
-          %strong= t('admin.settings.site_title')
-        %td= text_field_tag :site_title, @settings['site_title'].value
-      %tr
-        %td
-          %strong= t('admin.settings.site_description.title')
-          %p= t('admin.settings.site_description.desc_html')
-        %td= text_area_tag :site_description, @settings['site_description'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.site_description_extended.title')
-          %p= t('admin.settings.site_description_extended.desc_html')
-        %td= text_area_tag :site_extended_description, @settings['site_extended_description'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.site_terms.title')
-          %p= t('admin.settings.site_terms.desc_html')
-        %td= text_area_tag :site_terms, @settings['site_terms'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.open.title')
-          %p= t('admin.settings.registrations.open.desc_html')
-        %td
-          = select_tag :open_registrations, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_registrations'].value)
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.closed_message.title')
-          %p= t('admin.settings.registrations.closed_message.desc_html')
-        %td= text_area_tag :closed_registrations_message, @settings['closed_registrations_message'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.deletion.title')
-          %p= t('admin.settings.registrations.deletion.desc_html')
-        %td
-          = select_tag :open_deletion, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_deletion'].value)
-      %tr
-        %td
-          %strong= t('admin.settings.timeline_preview.title')
-          %p= t('admin.settings.timeline_preview.desc_html')
-        %td
-          = select_tag :timeline_preview, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['timeline_preview'].value)
+= simple_form_for @admin_settings, url: admin_settings_path, html: { method: :patch } do |f|
+  .fields-group
+    = f.input :site_title, placeholder: t('admin.settings.site_title')
+    = f.input :site_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description.title'), hint: t('admin.settings.site_description.desc_html'), input_html: { rows: 8 }
+    = f.input :site_contact_username, placeholder: t('admin.settings.contact_information.username')
+    = f.input :site_contact_email, placeholder: t('admin.settings.contact_information.email')
 
-  .simple_form.actions
-    = button_tag t('generic.save_changes'), type: :submit, class: :btn
+  %hr/
+
+  .fields-group
+    = f.input :timeline_preview, as: :boolean, wrapper: :with_label, label: t('admin.settings.timeline_preview.title'), hint: t('admin.settings.timeline_preview.desc_html')
+
+  .fields-group
+    = f.input :open_registrations, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.open.title'), hint: t('admin.settings.registrations.open.desc_html')
+
+  .fields-group
+    = f.input :open_deletion, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.deletion.title'), hint: t('admin.settings.registrations.deletion.desc_html')
+
+  .fields-group
+    = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, label: t('admin.settings.registrations.closed_message.title'), hint: t('admin.settings.registrations.closed_message.desc_html'), input_html: { rows: 8 }
+
+  %hr/
+
+  .fields-group
+    = f.input :site_extended_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description_extended.title'), hint: t('admin.settings.site_description_extended.desc_html'), input_html: { rows: 8 }
+    = f.input :site_terms, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_terms.title'), hint: t('admin.settings.site_terms.desc_html'), input_html: { rows: 8 }
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit