refs #673 Add toot visibility settings

src/config/locales/en/translation.json

@@ -72,8 +72,8 @@
     "new_toot": "Toot",
     "reload": "Reload"
   },
-  "preferences": {
-    "title": "Preferences",
+  "settings": {
+    "title": "Settings",
     "general": {
       "title": "General",
       "toot": {
@@ -86,7 +86,13 @@
           "private": "Private",
           "direct": "Direct"
         }
+      }
+    }
   },
+  "preferences": {
+    "title": "Preferences",
+    "general": {
+      "title": "General",
       "sounds": {
         "title": "Sounds",
         "description": "Please set feedback sounds.",

src/constants/visibility.js

@@ -1,21 +1,21 @@
 export default {
   Public: {
-    name: 'preferences.general.toot.visibility.public',
+    name: 'settings.general.toot.visibility.public',
     value: 0,
     key: 'public'
   },
   Unlisted: {
-    name: 'preferences.general.toot.visibility.unlisted',
+    name: 'settings.general.toot.visibility.unlisted',
     value: 1,
     key: 'unlisted'
   },
   Private: {
-    name: 'preferences.general.toot.visibility.private',
+    name: 'settings.general.toot.visibility.private',
     value: 2,
     key: 'private'
   },
   Direct: {
-    name: 'preferences.general.toot.visibility.direct',
+    name: 'settings.general.toot.visibility.direct',
     value: 3,
     key: 'direct'
   }

src/renderer/components/GlobalHeader.vue

@@ -74,6 +74,7 @@ export default {
     left: 0;
     width: 65px;
     padding-top: 24px;
+    border: 0;
 
     .el-tooltip {
       outline: 0;

src/renderer/components/Settings.vue

@@ -1,14 +1,120 @@
 <template>
-  <div>
-    TODO
-  </div>
+<el-container id="settings">
+  <el-header class="header">
+    <el-row>
+      <el-col :span="23">
+        <h3>{{ $t('settings.title') }}</h3>
+      </el-col>
+      <el-col :span="1">
+        <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+      </el-col>
+    </el-row>
+  </el-header>
+  <el-container>
+    <div v-shortkey="['esc']" @shortkey="close"></div>
+    <el-aside width="240px" class="menu">
+      <el-menu
+        :default-active="activeRoute()"
+        class="setting-menu"
+        :text-color="primaryColor"
+        :background-color="backgroundColor"
+        :router="true">
+        <el-menu-item :index="`/${id()}/settings/general`">
+          <icon name="cog" class="icon" scale="1.3"></icon>
+          <span>{{ $t('settings.general.title') }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+  </el-container>
+</el-container>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import Visibility from '~/src/constants/visibility'
+
 export default {
-  name: 'Settings'
+  name: 'Settings',
+  data () {
+    return {
+      visibilities: [
+        Visibility.Public,
+        Visibility.Unlisted,
+        Visibility.Private
+      ],
+      tootVisibility: Visibility.Public
+    }
+  },
+  computed: {
+    ...mapState({
+      primaryColor: state => state.App.theme.primary_color,
+      backgroundColor: state => state.App.theme.background_color
+    })
+  },
+  created () {
+    this.$router.push(`/${this.id()}/settings/general`)
+  },
+  methods: {
+    id () {
+      return this.$route.params.id
+    },
+    close () {
+      this.$router.push(`/${this.id()}/home`)
+    },
+    activeRoute () {
+      return this.$route.path
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+#settings {
+  height: 100%;
+
+  .header {
+    text-align: center;
+    border-bottom: 1px solid var(--theme-border-color);
+  }
+
+  .close-button {
+    font-size: 24px;
+  }
+
+  .menu {
+    text-align: right;
+    padding-left: 24px;
+
+    .el-menu {
+      background-color: var(--theme-background-color);
+      border-right: solid 1px var(--theme-border-color);
+    }
+
+    .setting-menu /deep/ {
+      height: 100%;
+
+      .icon {
+        margin-right: 9px;
+      }
+
+      .el-menu-item {
+        transition: none;
+        -webkit-transition: none;
+
+        .icon {
+          color: var(--theme-secondary-color);
+        }
+      }
+
+      .is-active {
+        .icon {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
 </style>

src/renderer/components/Settings/General.vue

@@ -0,0 +1,46 @@
+<template>
+<div id="general">
+  <div class="toot section">
+    <h3>{{ $t('settings.general.toot.title') }}</h3>
+    <p class="description">{{ $t('settings.general.toot.description') }}</p>
+    <el-select v-model="tootVisibility" placeholder="visibility">
+      <el-option
+        v-for="v in visibilities"
+        :key="v.value"
+        :label="$t(v.name)"
+        :value="v.value">
+      </el-option>
+    </el-select>
+  </div>
+</div>
+</template>
+
+<script>
+import Visibility from '~/src/constants/visibility'
+
+export default {
+  name: 'General',
+  data () {
+    return {
+      visibilities: [
+        Visibility.Public,
+        Visibility.Unlisted,
+        Visibility.Private
+      ],
+      tootVisibility: Visibility.Public.value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#general {
+  .description {
+    margin: 24px 0 20px;
+  }
+
+  .section {
+    margin-bottom: 40px;
+  }
+}
+</style>

src/renderer/router/index.js

@@ -54,8 +54,14 @@ export default new Router({
       component: require('@/components/GlobalHeader').default,
       children: [
         {
-          path: ':id/settings',
-          component: require('@/components/Settings').default
+          path: ':id/settings/',
+          component: require('@/components/Settings').default,
+          children: [
+            {
+              path: 'general',
+              component: require('@/components/Settings/General').default
+            }
+          ]
         },
         {
           path: ':id/',