From cbc60e64a1651683ef2cb366dcc26b806dfdccdb Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 19:53:30 +0300
Subject: [PATCH] Add select menu for mobile UI

---
 src/views/settings/index.vue | 131 ++++++++++++++++++++++++++---------
 1 file changed, 100 insertions(+), 31 deletions(-)

diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 5edb0a19..0a5cc15b 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -1,72 +1,101 @@
 <template>
   <div class="settings-container">
-    <h1>{{ $t('settings.settings') }}</h1>
-    <el-tabs v-model="activeTab" :tab-position="tabPosition">
-      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" lazy>
+    <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
+    <el-tabs v-if="isDesktop" v-model="activeTab" tab-position="left">
+      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
         <activity-pub/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" name="auth" lazy>
         <authentication/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" name="autoLinker" lazy>
         <auto-linker/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" name="esshd" lazy>
         <esshd/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" name="captcha" lazy>
         <captcha/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" name="frontend" lazy>
         <frontend/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" name="gopher" lazy>
         <gopher/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" name="http" lazy>
         <http/>
       </el-tab-pane>
       <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
         <instance/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" name="jobQueue" lazy>
         <job-queue/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" name="logger" lazy>
         <logger/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" name="mailer" lazy>
         <mailer/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" name="mediaProxy" lazy>
         <media-proxy/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" name="metadata" lazy>
         <metadata/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" name="mrf" lazy>
         <mrf/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" name="rateLimiters" lazy>
         <rate-limiters/>
       </el-tab-pane>
       <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
         <relays/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" name="webPush" lazy>
         <web-push/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" name="upload" lazy>
         <upload/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" name="other" lazy>
         <other/>
       </el-tab-pane>
     </el-tabs>
+    <el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="configDisabled"/>
+    </el-select>
+    <activity-pub v-if="activeTab === 'activityPub'"/>
+    <authentication v-if="activeTab === 'auth'"/>
+    <auto-linker v-if="activeTab === 'autoLinker'"/>
+    <esshd v-if="activeTab === 'esshd'"/>
+    <captcha v-if="activeTab === 'captcha'"/>
+    <frontend v-if="activeTab === 'frontend'"/>
+    <gopher v-if="activeTab === 'gopher'"/>
+    <http v-if="activeTab === 'http'"/>
+    <instance v-if="activeTab === 'instance'"/>
+    <job-queue v-if="activeTab === 'jobQueue'"/>
+    <logger v-if="activeTab === 'logger'"/>
+    <mailer v-if="activeTab === 'mailer'"/>
+    <media-proxy v-if="activeTab === 'mediaProxy'"/>
+    <metadata v-if="activeTab === 'metadata'"/>
+    <mrf v-if="activeTab === 'mrf'"/>
+    <rate-limiters v-if="activeTab === 'rateLimiters'"/>
+    <relays v-if="activeTab === 'relays'"/>
+    <web-push v-if="activeTab === 'webPush'"/>
+    <upload v-if="activeTab === 'upload'"/>
+    <other v-if="activeTab === 'other'"/>
   </div>
 </template>
 
 <script>
+import i18n from '@/lang'
 import {
   ActivityPub,
   Authentication,
@@ -113,6 +142,32 @@ export default {
     Upload,
     WebPush
   },
+  data() {
+    return {
+      options: [
+        { value: 'activityPub', label: i18n.t('settings.activityPub') },
+        { value: 'auth', label: i18n.t('settings.auth') },
+        { value: 'autoLinker', label: i18n.t('settings.autoLinker') },
+        { value: 'esshd', label: i18n.t('settings.esshd') },
+        { value: 'captcha', label: i18n.t('settings.captcha') },
+        { value: 'frontend', label: i18n.t('settings.frontend') },
+        { value: 'gopher', label: i18n.t('settings.gopher') },
+        { value: 'http', label: i18n.t('settings.http') },
+        { value: 'instance', label: i18n.t('settings.instance') },
+        { value: 'jobQueue', label: i18n.t('settings.jobQueue') },
+        { value: 'logger', label: i18n.t('settings.logger') },
+        { value: 'mailer', label: i18n.t('settings.mailer') },
+        { value: 'mediaProxy', label: i18n.t('settings.mediaProxy') },
+        { value: 'metadata', label: i18n.t('settings.metadata') },
+        { value: 'mrf', label: i18n.t('settings.mrf') },
+        { value: 'rateLimiters', label: i18n.t('settings.rateLimiters') },
+        { value: 'relays', label: i18n.t('settings.relays') },
+        { value: 'webPush', label: i18n.t('settings.webPush') },
+        { value: 'upload', label: i18n.t('settings.upload') },
+        { value: 'other', label: i18n.t('settings.other') }
+      ]
+    }
+  },
   computed: {
     activeTab: {
       get() {
@@ -125,6 +180,9 @@ export default {
     configDisabled() {
       return this.$store.state.settings.configDisabled
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -139,18 +197,29 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
+.settings-container {
+  .el-tabs {
+    margin-top: 20px
+  }
+
+}
+.settings-header {
+  margin: 22px 0 0 15px;
+}
+@media only screen and (min-width: 1824px) {
   .settings-container {
-    .el-tabs {
-      margin-top: 20px
-    }
-    h1 {
-      margin: 22px 0 0 15px;
-    }
+    max-width: 1824px;
+    margin: auto;
   }
-  @media only screen and (min-width: 1824px) {
-    .settings-container {
-      max-width: 1824px;
-      margin: auto;
-    }
+}
+@media only screen and (max-width: 760px),
+  (min-device-width: 768px) and (max-device-width: 1024px) {
+  .settings-header {
+    margin: 7px 10px 15px 10px;
   }
+  .settings-menu {
+    margin: 0 0 15px 10px;
+    width: 45%;
+  }
+}
 </style>