Make Preferences accessible

src/renderer/components/Preferences.vue

@@ -3,10 +3,10 @@
     <el-header class="header">
       <el-row>
         <el-col :span="23">
-          <h3>{{ $t('preferences.title') }}</h3>
+          <h1>{{ $t('preferences.title') }}</h1>
         </el-col>
         <el-col :span="1">
-          <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+          <el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
         </el-col>
       </el-row>
     </el-header>
@@ -77,9 +77,10 @@ export default {
   .header {
     text-align: center;
     border-bottom: 1px solid var(--theme-border-color);
+    user-select: none;
 
     .close-button {
-      font-size: 24px;
+      font-size: 28px;
     }
   }
 
@@ -88,31 +89,16 @@ export default {
     padding-left: 24px;
 
     .el-menu {
-      background-color: var(--theme-background-color);
       border-right: solid 1px var(--theme-border-color);
     }
 
     .setting-menu /deep/ {
       height: 100%;
+      user-select: none;
 
       .icon {
         margin-right: 9px;
       }
-
-      .el-menu-item {
-        transition: none;
-        -webkit-transition: none;
-
-        .icon {
-          color: var(--theme-secondary-color);
-        }
-      }
-
-      .is-active {
-        .icon {
-          color: #409eff;
-        }
-      }
     }
   }
 }

src/renderer/components/Preferences/Account.vue

@@ -1,9 +1,9 @@
 <template>
 <div id="account">
   <h2>{{ $t('preferences.account.title') }}</h2>
-  <div class="connected-account">
+  <el-form class="connected-account section" size="small">
     <h3>{{ $t('preferences.account.connected') }}</h3>
-    <template>
+    <el-form-item>
       <el-table
         :data="accounts"
         tooltip-effect="dark"
@@ -23,7 +23,8 @@
           <template slot-scope="scope">
             <el-button
               @click.native.prevent="removeAccount(scope.$index, accounts)"
-              type="text">
+              type="text"
+              class="action">
               <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
             </el-button>
           </template>
@@ -32,30 +33,30 @@
           :label="$t('preferences.account.order')"
           width="60">
           <template slot-scope="scope">
-            <div>
-              <el-button class="arrow-up" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
+            <div class="allow-up">
+              <el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
             </div>
-            <div>
-              <el-button class="arrow-down" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
+            <div class="allow-down">
+              <el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
             </div>
           </template>
         </el-table-column>
       </el-table>
-    </template>
-  </div>
-  <div class="reset">
-    <el-popover
-      placement="top"
-      width="160"
-      v-model="deletePopoverVisible">
-      <p>{{ $t('preferences.account.confirm_message') }}</p>
-      <div style="text-align: right; margin: 0">
-        <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
-        <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
-      </div>
-      <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
-    </el-popover>
-  </div>
+    </el-form-item>
+    <el-form-item>
+      <el-popover
+        placement="top"
+        width="160"
+        v-model="deletePopoverVisible">
+        <p>{{ $t('preferences.account.confirm_message') }}</p>
+        <div style="text-align: right; margin: 0">
+          <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
+          <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
+        </div>
+        <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
+      </el-popover>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -130,32 +131,38 @@ export default {
 
 <style lang="scss" scoped>
 #account {
-  .el-table /deep/ {
-    tr,
-    th,
-    td {
-      background-color: var(--theme-background-color);
-      color: var(--theme-secondary-color);
-      border-bottom: 1px solid var(--theme-border-color);
+  .connected-account {
+    .el-table /deep/ {
+      tr,
+      th,
+      td {
+        background-color: var(--theme-background-color);
+        color: var(--theme-primary-color);
+        border-bottom: 1px solid var(--theme-border-color);
+      }
     }
 
+    .el-table::before {
+      background-color: var(--theme-border-color);
+    }
+
+    .allow-up,
+    .allow-down {
+      display: inline-block;
+    }
+
+    .action {
+      font-size: var(--base-font-size);
+    }
   }
 
-  .el-table::before {
-    background-color: var(--theme-border-color);
-  }
+  .section /deep/ {
+    margin-bottom: 40px;
 
-  .reset {
-    margin: 24px 12px;
-    text-align: right;
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 }
 
-.allow-up {
-  padding: 0;
-}
-
-.allow-down {
-  padding: 0;
-}
 </style>

src/renderer/components/Preferences/Appearance.vue

@@ -1,11 +1,10 @@
 <template>
 <div id="appearance">
   <h2>{{ $t('preferences.appearance.title') }}</h2>
-  <div class="theme section">
+  <el-form class="theme section" size="small" label-position="top">
     <div class="left">
-      <h4>{{ $t('preferences.appearance.theme_color') }}</h4>
-      <div class="status">
-        <el-select v-model="theme" placeholder="theme">
+      <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
+        <el-select id="theme" v-model="theme" placeholder="theme">
           <el-option
             v-for="t in themes"
             :key="t.key"
@@ -13,7 +12,7 @@
             :value="t.key">
           </el-option>
         </el-select>
-      </div>
+      </el-form-item>
     </div>
     <div class="right">
       <Toot
@@ -21,30 +20,27 @@
         :timeFormat="timeFormat"
         ></Toot>
     </div>
-  </div>
-  <div class="color-pallet" v-if="customizeThemeColor">
+  </el-form>
+  <div class="color-pallet section" v-if="customizeThemeColor">
     <color-pallet></color-pallet>
   </div>
-  <div class="font section">
-    <h4>{{ $t('preferences.appearance.font_family') }}</h4>
-    <span class="status">
-      <el-select v-model="font" placeholder="fonts">
+  <el-form class="font section" size="small" label-position="top">
+    <el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
+      <el-select id="font-family" v-model="font" placeholder="fonts">
         <el-option
           v-for="f in fontList"
           :key="f"
           :label="f"
           :value="f" />
       </el-select>
-    </span>
-    <h4>{{ $t('preferences.appearance.font_size') }}</h4>
-    <span class="status">
-      <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-    </span>
-  </div>
-  <div class="display-style section">
-    <h4>{{ $t('preferences.appearance.display_style.title') }}</h4>
-    <span class="status">
-      <el-select v-model="displayNameStyle" placeholder="style">
+    </el-form-item>
+    <el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
+      <el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+    </el-form-item>
+  </el-form>
+  <el-form class="display-style section" size="small" label-position="top">
+    <el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
+      <el-select id="display-style" v-model="displayNameStyle" placeholder="style">
         <el-option
           v-for="style in nameStyles"
           :key="style.value"
@@ -52,12 +48,11 @@
           :value="style.value">
         </el-option>
       </el-select>
-    </span>
-  </div>
-  <div class="time-format section">
-    <h4>{{ $t('preferences.appearance.time_format.title') }}</h4>
-    <span class="status">
-      <el-select v-model="timeFormat" placeholder="format">
+    </el-form-item>
+  </el-form>
+  <el-form class="time-format section" size="small" label-position="top">
+    <el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
+      <el-select id="time-format" v-model="timeFormat" placeholder="format">
         <el-option
           v-for="format in timeFormats"
           :key="format.value"
@@ -65,8 +60,8 @@
           :value="format.value">
         </el-option>
       </el-select>
-    </span>
-  </div>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -160,20 +155,24 @@ export default {
 
 <style lang="scss" scoped>
 #appearance {
-  color: var(--theme-secondary-color);
   box-sizing: border-box;
 
   .theme {
     display: flex;
     align-items: flex-start;
+    justify-content: space-between;
 
     .right {
       margin-left: 40px;
     }
   }
 
-  .section {
-    margin-bottom: 48px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 }
 </style>

src/renderer/components/Preferences/Appearance/ColorPallet.vue

@@ -1,36 +1,46 @@
 <template>
-<div class="pallet">
+<el-form class="pallet" label-position="top" size="small">
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.background_color') }}</div>
-    <el-color-picker v-model="background"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.selected_background_color') }}</div>
-    <el-color-picker v-model="selectedBackground"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.background_color') ">
+      <el-color-picker v-model="background"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.selected_background_color')">
+      <el-color-picker v-model="selectedBackground"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.global_header_color') }}</div>
-    <el-color-picker v-model="globalHeader"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.side_menu_color') }}</div>
-    <el-color-picker v-model="sideMenu"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.global_header_color')">
+      <el-color-picker v-model="globalHeader"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.side_menu_color')">
+      <el-color-picker v-model="sideMenu"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.primary_color') }}</div>
-    <el-color-picker v-model="primary"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.regular_color') }}</div>
-    <el-color-picker v-model="regular"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.primary_color')">
+      <el-color-picker v-model="primary"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.regular_color')">
+      <el-color-picker v-model="regular"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.secondary_color') }}</div>
-    <el-color-picker v-model="secondary"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.border_color') }}</div>
-    <el-color-picker v-model="border"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.secondary_color')">
+      <el-color-picker v-model="secondary"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.border_color')">
+      <el-color-picker v-model="border"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.header_menu_color') }}</div>
-    <el-color-picker v-model="headerMenu"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.wrapper_mask_color') }}</div>
-    <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.header_menu_color')">
+      <el-color-picker v-model="headerMenu"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')">
+      <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
+    </el-form-item>
   </div>
-</div>
+</el-form>
 </template>
 
 <script>
@@ -150,8 +160,14 @@ export default {
     text-align: center;
     margin: 0 12px;
 
-    .title {
-      margin: 8px 0;
+    .el-form-item {
+      margin-bottom: 0;
+    }
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+      text-align: center;
+      line-height: unset;
     }
   }
 }

src/renderer/components/Preferences/General.vue

@@ -1,28 +1,24 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="sounds section">
+  <el-form class="sounds section" label-position="right" label-width="250px" size="small">
     <h3>{{ $t('preferences.general.sounds.title') }}</h3>
     <p class="description">{{ $t('preferences.general.sounds.description') }}</p>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="sound_fav_rb"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.general.sounds.fav_rb') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="sound_toot"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.general.sounds.toot') }}</span>
-    </div>
-  </div>
+    <el-form-item for="fav_rb" :label="$t('preferences.general.sounds.fav_rb')">
+      <el-switch
+        id="fav_rb"
+        v-model="sound_fav_rb"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="sound_toot" :label="$t('preferences.general.sounds.toot')">
+      <el-switch
+        id="sound_toot"
+        v-model="sound_toot"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -74,8 +70,12 @@ export default {
     margin: 24px 0 20px;
   }
 
-  .section {
-    margin-bottom: 48px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 
   .selection {

src/renderer/components/Preferences/Language.vue

@@ -1,18 +1,19 @@
 <template>
 <div id="language">
   <h2>{{ $t('preferences.language.title') }}</h2>
-  <div class="display-language">
-    <p class="description">{{ $t('preferences.language.language_description') }}</p>
-    <el-select v-model="displayLanguage" placeholder="style">
-      <el-option
-        v-for="lang in languages"
-        :key="lang.key"
-        :label="lang.name"
-        :value="lang.key">
-      </el-option>
-    </el-select>
-    <p class="notice">{{ $t('preferences.language.notice') }}</p>
-  </div>
+  <el-form class="display-language section" label-position="top" size="small">
+    <el-form-item for="language" :label="$t('preferences.language.language_description')">
+      <el-select id="language" v-model="displayLanguage" placeholder="style">
+        <el-option
+          v-for="lang in languages"
+          :key="lang.key"
+          :label="lang.name"
+          :value="lang.key">
+        </el-option>
+      </el-select>
+      <p class="notice">{{ $t('preferences.language.notice') }}</p>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -72,8 +73,12 @@ export default {
 
 <style lang="scss" scoped>
 #language {
-  .description {
-    margin: 24px 0 20px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 
   .notice {

src/renderer/components/Preferences/Notification.vue

@@ -1,45 +1,36 @@
 <template>
 <div id="notification">
   <h2>{{ $t('preferences.notification.title') }}</h2>
-  <div class="enable">
+  <el-form class="section" label-position="right" label-width="250px" size="small">
     <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyReply"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.reply') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyReblog"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.reblog') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyFavourite"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.favourite') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyFollow"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.follow') }}</span>
-    </div>
-  </div>
+    <el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
+      <el-switch
+        id="notifyReply"
+        v-model="notifyReply"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
+      <el-switch
+        id="notifyReblog"
+        v-model="notifyReblog"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
+      <el-switch
+        id="notifyFavourite"
+        v-model="notifyFavourite"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
+      <el-switch
+        v-model="notifyFollow"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -106,12 +97,11 @@ export default {
     margin: 24px 0 20px;
   }
 
-  .selection {
-    margin: 12px 0;
+  .section /deep/ {
+    margin-bottom: 40px;
 
-    .title {
-      margin-left: 12px;
-      font-weight: 800;
+    .el-form-item__label {
+      color: var(--theme-primary-color);
     }
   }
 }