From b48a3210a3056385484e60551dd601177839b6cd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Aug 2018 14:28:05 +0300
Subject: [PATCH] tabs for settings

---
 src/components/settings/settings.js  |   2 +
 src/components/settings/settings.vue | 169 ++++++++++++++-------------
 src/i18n/messages.js                 |   2 +
 3 files changed, 95 insertions(+), 78 deletions(-)

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index f8eaad00..333633c9 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,4 +1,5 @@
 /* eslint-env browser */
+import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import { filter, trim } from 'lodash'
@@ -29,6 +30,7 @@ const settings = {
     }
   },
   components: {
+    TabSwitcher,
     StyleSwitcher,
     InterfaceLanguageSwitcher
   },
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index f500a1b0..923c6970 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -4,90 +4,99 @@
     {{$t('settings.settings')}}
   </div>
   <div class="panel-body">
-    <div class="setting-item">
-      <h2>{{$t('settings.theme')}}</h2>
-      <style-switcher></style-switcher>
-    </div>
-    <div class="setting-item">
-      <h2>{{$t('settings.filtering')}}</h2>
-      <p>{{$t('settings.filtering_explanation')}}</p>
-      <textarea id="muteWords" v-model="muteWordsString"></textarea>
-    </div>
-    <div class="setting-item">
-      <h2>{{$t('nav.timeline')}}</h2>
-      <ul class="setting-list">
-        <li>
-          <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
-          <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="streaming" v-model="streamingLocal">
-          <label for="streaming">{{$t('settings.streaming')}}</label>
-          <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+    <tab-switcher>
+      <div :title="$t('settings.general')" >
+        <div class="setting-item">
+          <h2>{{ $t('settings.interfaceLanguage') }}</h2>
+          <interface-language-switcher />
+        </div>
+        <div class="setting-item">
+          <h2>{{$t('nav.timeline')}}</h2>
+          <ul class="setting-list">
             <li>
-              <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
-              <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
+              <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
+              <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="streaming" v-model="streamingLocal">
+              <label for="streaming">{{$t('settings.streaming')}}</label>
+              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+                <li>
+                  <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
+                  <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+              <label for="autoload">{{$t('settings.autoload')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+              <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
+            </li>
+            <li>
+              <label for="replyVisibility" class="select">
+                <select id="replyVisibility" v-model="replyVisibilityLocal">
+                  <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
+                  <option value="following">{{$t('settings.reply_visibility_following')}}</option>
+                  <option value="self">{{$t('settings.reply_visibility_self')}}</option>
+                </select>
+                <i class="icon-down-open"/>
+              </label>
             </li>
           </ul>
-        </li>
-        <li>
-          <input type="checkbox" id="autoload" v-model="autoLoadLocal">
-          <label for="autoload">{{$t('settings.autoload')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
-          <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
-        </li>
-        <li>
-          <label for="replyVisibility" class="select">
-            <select id="replyVisibility" v-model="replyVisibilityLocal">
-              <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
-              <option value="following">{{$t('settings.reply_visibility_following')}}</option>
-              <option value="self">{{$t('settings.reply_visibility_self')}}</option>
-            </select>
-            <i class="icon-down-open"/>
-          </label>
-        </li>
-      </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{$t('settings.attachments')}}</h2>
-      <ul class="setting-list">
-        <li>
-          <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
-          <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
-          <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
-          <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="stopGifs" v-model="stopGifs">
-          <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
-        </li>
-        <li>
-          <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
-          <label for="loopVideo">{{$t('settings.loop_video')}}</label>
-          <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+        </div>
+        <div class="setting-item">
+          <h2>{{$t('settings.attachments')}}</h2>
+          <ul class="setting-list">
             <li>
-              <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
-              <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
-              <div v-if="!loopSilentAvailable" class="unavailable">
-                <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
-              </div>
+              <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+              <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
+              <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
+              <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="stopGifs" v-model="stopGifs">
+              <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
+              <label for="loopVideo">{{$t('settings.loop_video')}}</label>
+              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+                <li>
+                  <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
+                  <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
+                  <div v-if="!loopSilentAvailable" class="unavailable">
+                    <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+                  </div>
+                </li>
+              </ul>
             </li>
           </ul>
-        </li>
-      </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.interfaceLanguage') }}</h2>
-      <interface-language-switcher />
-    </div>
+        </div>
+      </div>
+
+      <div :title="$t('settings.theme')" >
+        <div class="setting-item">
+          <style-switcher></style-switcher>
+        </div>
+      </div>
+
+      <div :title="$t('settings.filtering')" >
+        <div class="setting-item">
+          <p>{{$t('settings.filtering_explanation')}}</p>
+          <textarea id="muteWords" v-model="muteWordsString"></textarea>
+        </div>
+      </div>
+
+    </tab-switcher>
   </div>
 </div>
 </template>
@@ -103,6 +112,10 @@
   margin: 1em 1em 1.4em;
   padding-bottom: 1.4em;
 
+  &:last-child {
+    border-bottom: none;
+  }
+
 
   textarea {
     width: 100%;
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index c9a4961c..cd8fa512 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -277,6 +277,7 @@ const en = {
     no_retweet_hint: 'Post is marked as followers-only or direct and cannot be repeated'
   },
   settings: {
+    general: 'General',
     user_settings: 'User Settings',
     name_bio: 'Name & Bio',
     name: 'Name',
@@ -1625,6 +1626,7 @@ const ru = {
     no_retweet_hint: 'Пост помечен как "только для подписчиков" или "личное" и поэтому не может быть повторён'
   },
   settings: {
+    general: 'Общие',
     user_settings: 'Настройки пользователя',
     name_bio: 'Имя и описание',
     name: 'Имя',