Change the way headers of group of settings are displayed

src/lang/en.js

@@ -359,7 +359,11 @@ export default {
     metadatLowerCase: 'metadata',
     files: 'files',
     successfullyRemoved: 'Setting removed successfully!',
-    seeDocs: 'See Documentation'
+    seeDocs: 'See Documentation',
+    assets: 'Assets',
+    emoji: 'Emoji',
+    markup: 'Markup settings',
+    corsPlug: 'CORS plug config'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/views/settings/components/Frontend.vue

@@ -4,12 +4,16 @@
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
-      <el-form-item label="Assets:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.assets') }}</span>
+      </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
-      <el-form-item label="Emoji:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.emoji') }}</span>
+      </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <div class="line"/>
@@ -18,7 +22,9 @@
     </el-form>
     <div class="line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
-      <el-form-item label="Markup settings:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.markup') }}</span>
+      </el-form-item>
       <setting :setting-group="markup" :data="markupData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Http.vue

@@ -4,7 +4,9 @@
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
-      <el-form-item label="Cors plug config:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.corsPlug') }}</span>
+      </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <div class="line"/>

src/views/settings/components/Inputs.vue

@@ -16,8 +16,7 @@
           :setting="subSetting"
           :data="data[setting.key]"
           :custom-label-width="isDesktop ? '120px' : '100px'"
-          :label-class="'center-label'"
-          :input-class="'keyword-inner-input'"
+          :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
           :margin="isDesktop ? margin + 15 : margin + 8"
           :nested="true"/>
       </el-form-item>
@@ -76,20 +75,6 @@
         @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
         <template slot="prepend">:</template>
       </el-input>
-      <div v-if="setting.type === 'keyword'">
-        <div v-for="subSetting in setting.children" :key="subSetting.key">
-          <!-- {{ [...settingParent, subSetting].map(s => s.label) }} -->
-          <inputs
-            :setting-group="settingGroup"
-            :setting-parent="[...settingParent, subSetting]"
-            :setting="subSetting"
-            :data="data[setting.key]"
-            :custom-label-width="isDesktop ? '140px' : '100px'"
-            :label-class="'center-label'"
-            :input-class="'keyword-inner-input'"
-            :nested="true"/>
-        </div>
-      </div>
       <!-- special inputs -->
       <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
       <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
@@ -145,13 +130,6 @@ export default {
         return {}
       }
     },
-    inputClass: {
-      type: String,
-      default: function() {
-        return 'input-class'
-      },
-      required: false
-    },
     labelClass: {
       type: String,
       default: function() {

src/views/settings/components/Setting.vue

@@ -38,13 +38,13 @@
           </div>
           <div v-else>
             <div class="input-container">
-              <el-form-item class="settings-input">
+              <el-form-item class="grouped-settings-header">
                 <span slot="label">
-                  {{ setting.label }}:
                   <el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                     <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
                   </el-tooltip>
                 </span>
+                <span class="label-font">{{ setting.label }}</span>
               </el-form-item>
               <el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                 <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>

src/views/settings/components/Upload.vue

@@ -4,8 +4,8 @@
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
     <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
-      <el-form-item class="description-container description settings-input">
-        <span class="description"><p>Pleroma.Uploaders.Local</p></span>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
       <div class="line"/>

src/views/settings/styles/main.scss

@@ -63,6 +63,9 @@
   .form-container {
     margin-bottom: 80px;
   }
+  .grouped-settings-header {
+    margin: 0 0 14px 0;
+  }
   .highlight {
   background-color: #e6e6e6;
   }
@@ -111,13 +114,16 @@
       width: 100%;
     }
   }
-  .keyword-inner-input {
-    margin-bottom: 22px;
-  }
   label {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .label-font {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -377,9 +383,6 @@
     .icons-button-container {
       line-height: 24px;
     }
-    .keyword-inner-input {
-      margin-bottom: 10px;
-    }
     .line {
       margin-bottom: 10px;
     }