Merge pull request #678 from h3poteto/iss-673

closes #673 Move visibility settings to sync instance settings

src/config/locales/de/translation.json

@@ -42,6 +42,7 @@
     "profile": "Profil",
     "show_profile": "Profil ansehen",
     "edit_profile": "Profil bearbeiten",
+    "settings": "Settings",
     "collapse": "Zusammenbruch",
     "expand": "Erweitern",
     "home": "Home",
@@ -71,10 +72,9 @@
     "new_toot": "Toot",
     "reload": "Neu laden"
   },
-  "preferences": {
-    "title": "Einstellungen",
+  "settings": {
     "general": {
-      "title": "Allgemein",
+      "title": "Settings",
       "toot": {
         "title": "Toot",
         "description": "Customize default visibility of toot.",
@@ -85,7 +85,13 @@
           "private": "Privat",
           "direct": "Direkt"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "Einstellungen",
+    "general": {
+      "title": "Allgemein",
       "sounds": {
         "title": "Klänge",
         "description": "Please set feedback sounds.",

src/config/locales/en/translation.json

@@ -42,6 +42,7 @@
     "profile": "Profile",
     "show_profile": "Show profile",
     "edit_profile": "Edit profile",
+    "settings": "Settings",
     "collapse": "Collapse",
     "expand": "Expand",
     "home": "Home",
@@ -71,8 +72,8 @@
     "new_toot": "Toot",
     "reload": "Reload"
   },
-  "preferences": {
-    "title": "Preferences",
+  "settings": {
+    "title": "Settings",
     "general": {
       "title": "General",
       "toot": {
@@ -85,7 +86,13 @@
           "private": "Private",
           "direct": "Direct"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "Preferences",
+    "general": {
+      "title": "General",
       "sounds": {
         "title": "Sounds",
         "description": "Please set feedback sounds.",

src/config/locales/fr/translation.json

@@ -42,6 +42,7 @@
     "profile": "Profil",
     "show_profile": "Voir le profil",
     "edit_profile": "Éditer mon profil",
+    "settings": "Settings",
     "collapse": "Effondrer",
     "expand": "Développer",
     "home": "Accueil",
@@ -71,8 +72,8 @@
     "new_toot": "Pouet",
     "reload": "Recharger"
   },
-  "preferences": {
-    "title": "Préférences",
+  "settings": {
+    "title": "Settings",
     "general": {
       "title": "Général",
       "toot": {
@@ -85,7 +86,13 @@
           "private": "Abonné⋅e⋅s uniquement",
           "direct": "Message direct"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "Préférences",
+    "general": {
+      "title": "Général",
       "sounds": {
         "title": "Sons",
         "description": "Please set feedback sounds.",

src/config/locales/ja/translation.json

@@ -42,6 +42,7 @@
     "profile": "プロフィール",
     "show_profile": "プロフィール確認",
     "edit_profile": "プロフィール編集",
+    "settings": "設定",
     "collapse": "縮小",
     "expand": "拡大",
     "home": "ホーム",
@@ -71,10 +72,9 @@
     "new_toot": "トゥート",
     "reload": "再読み込み"
   },
-  "preferences": {
+  "settings": {
     "title": "設定",
     "general": {
-      "title": "一般",
       "toot": {
         "title": "トゥート",
         "description": "トゥートの公開設定を変更できます",
@@ -85,7 +85,13 @@
           "private": "フォロワー限定",
           "direct": "ダイレクト"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "設定",
+    "general": {
+      "title": "一般",
       "sounds": {
         "title": "効果音",
         "description": "操作時の効果音を設定",

src/config/locales/ko/translation.json

@@ -42,6 +42,7 @@
     "profile": "프로필",
     "show_profile": "프로필 보기",
     "edit_profile": "프로필 수정",
+    "settings": "Settings",
     "collapse": "접기",
     "expand": "펼치기",
     "home": "홈",
@@ -71,8 +72,8 @@
     "new_toot": "툿",
     "reload": "새로고침"
   },
-  "preferences": {
-    "title": "설정",
+  "settings": {
+    "title": "Settings",
     "general": {
       "title": "일반",
       "toot": {
@@ -85,7 +86,13 @@
           "private": "비공개",
           "direct": "다이렉트"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "설정",
+    "general": {
+      "title": "일반",
       "sounds": {
         "title": "사운드",
         "description": "피드백 소리를 설정해 주세요.",

src/config/locales/pl/translation.json

@@ -42,6 +42,7 @@
     "profile": "Profil",
     "show_profile": "Pokaż profil",
     "edit_profile": "Edytuj profil",
+    "settings": "Settings",
     "collapse": "Zawalić się",
     "expand": "Rozszerzać",
     "home": "Strona główna",
@@ -71,8 +72,8 @@
     "new_toot": "Wpisy",
     "reload": "Przeładować"
   },
-  "preferences": {
-    "title": "Preferencje",
+  "settings": {
+    "title": "Settings",
     "general": {
       "title": "Ogólne",
       "toot": {
@@ -85,7 +86,13 @@
           "private": "Prywatne",
           "direct": "Bezpośrednie"
         }
-      },
+      }
+    }
+  },
+  "preferences": {
+    "title": "Preferencje",
+    "general": {
+      "title": "Ogólne",
       "sounds": {
         "title": "Dźwięki",
         "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/main/preferences.js

@@ -1,6 +1,5 @@
 import storage from 'electron-json-storage'
 import objectAssignDeep from 'object-assign-deep'
-import Visibility from '../constants/visibility'
 import DisplayStyle from '../constants/displayStyle'
 import Theme from '../constants/theme'
 import Language from '../constants/language'
@@ -13,8 +12,7 @@ const Base = {
     sound: {
       fav_rb: true,
       toot: true
-    },
-    tootVisibility: Visibility.Public.value
+    }
   },
   state: {
     collapse: false,

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/Preferences/General.vue

@@ -1,18 +1,6 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="toot section">
-    <h3>{{ $t('preferences.general.toot.title') }}</h3>
-    <p class="description">{{ $t('preferences.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 class="sounds section">
     <h3>{{ $t('preferences.general.sounds.title') }}</h3>
     <p class="description">{{ $t('preferences.general.sounds.description') }}</p>
@@ -40,31 +28,13 @@
 
 <script>
 import { mapState } from 'vuex'
-import Visibility from '~/src/constants/visibility'
 
 export default {
   name: 'general',
-  data () {
-    return {
-      visibilities: [
-        Visibility.Public,
-        Visibility.Unlisted,
-        Visibility.Private
-      ]
-    }
-  },
   computed: {
     ...mapState({
       loading: state => state.Preferences.General.loading
     }),
-    tootVisibility: {
-      get () {
-        return this.$store.state.Preferences.General.general.tootVisibility
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateTootVisibility', value)
-      }
-    },
     sound_fav_rb: {
       get () {
         return this.$store.state.Preferences.General.general.sound.fav_rb

src/renderer/components/Settings.vue

@@ -0,0 +1,109 @@
+<template>
+<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'
+
+export default {
+  name: 'Settings',
+  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,58 @@
+<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
+      ]
+    }
+  },
+  computed: {
+    tootVisibility: {
+      get () {
+        return this.$store.state.Settings.General.visibility
+      },
+      set (value) {
+        this.$store.dispatch('Settings/General/setVisibility', value)
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('Settings/General/fetchVisibility')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#general {
+  .description {
+    margin: 24px 0 20px;
+  }
+
+  .section {
+    margin-bottom: 40px;
+  }
+}
+</style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -13,6 +13,7 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="show">{{ $t("side_menu.show_profile") }}</el-dropdown-item>
               <el-dropdown-item command="edit">{{ $t("side_menu.edit_profile") }}</el-dropdown-item>
+              <el-dropdown-item command="settings">{{ $t("side_menu.settings") }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -142,6 +143,10 @@ export default {
         case 'edit':
           shell.openExternal(this.account.baseURL + '/settings/profile')
           break
+        case 'settings':
+          const url = `/${this.id()}/settings`
+          this.$router.push(url)
+          break
       }
     },
     doCollapse () {
@@ -178,6 +183,11 @@ export default {
 
       .el-dropdown-link {
         cursor: pointer;
+        color: #dcdfe6;
+
+        &:hover {
+          color: #409eff;
+        }
       }
 
       .domain-name {

src/renderer/router/index.js

@@ -53,6 +53,16 @@ export default new Router({
       name: 'global-header',
       component: require('@/components/GlobalHeader').default,
       children: [
+        {
+          path: ':id/settings/',
+          component: require('@/components/Settings').default,
+          children: [
+            {
+              path: 'general',
+              component: require('@/components/Settings/General').default
+            }
+          ]
+        },
         {
           path: ':id/',
           name: 'timeline-space',

src/renderer/store/App.js

@@ -1,7 +1,6 @@
 import { ipcRenderer } from 'electron'
 import router from '../router'
 import { LightTheme, DarkTheme, SolarizedLightTheme, SolarizedDarkTheme, KimbieDarkTheme } from '../utils/theme'
-import Visibility from '~/src/constants/visibility'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
@@ -14,7 +13,6 @@ const App = {
     theme: LightTheme,
     fontSize: 14,
     displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    tootVisibility: Visibility.Public.value,
     notify: {
       reply: true,
       reblog: true,
@@ -35,9 +33,6 @@ const App = {
     updateDisplayNameStyle (state, value) {
       state.displayNameStyle = value
     },
-    updateTootVisibility (state, value) {
-      state.tootVisibility = value
-    },
     updateNotify (state, notify) {
       state.notify = notify
     },
@@ -73,7 +68,6 @@ const App = {
           dispatch('updateTheme', conf.appearance)
           commit('updateDisplayNameStyle', conf.appearance.displayNameStyle)
           commit('updateFontSize', conf.appearance.fontSize)
-          commit('updateTootVisibility', conf.general.tootVisibility)
           commit('updateNotify', conf.notification.notify)
           commit('updateTimeFormat', conf.appearance.timeFormat)
           commit('updateLanguage', conf.language.language)

src/renderer/store/Preferences/General.js

@@ -1,5 +1,4 @@
 import { ipcRenderer } from 'electron'
-import Visibility from '~/src/constants/visibility'
 
 const General = {
   namespaced: true,
@@ -8,8 +7,7 @@ const General = {
       sound: {
         fav_rb: true,
         toot: true
-      },
-      tootVisibility: Visibility.Public.value
+      }
     },
     loading: false
   },
@@ -39,23 +37,6 @@ const General = {
         })
       })
     },
-    updateTootVisibility ({ dispatch, commit, state }, value) {
-      const newGeneral = Object.assign({}, state.general, {
-        tootVisibility: value
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('updateGeneral', conf.general)
-      })
-    },
     updateSound ({ commit, state }, sound) {
       commit('changeLoading', true)
       const newSound = Object.assign({}, state.general.sound, sound)

src/renderer/store/Settings.js

@@ -0,0 +1,8 @@
+import General from './Settings/General'
+
+export default {
+  namespaced: true,
+  modules: {
+    General
+  }
+}

src/renderer/store/Settings/General.js

@@ -0,0 +1,48 @@
+import Mastodon from 'megalodon'
+import Visibility from '~/src/constants/visibility'
+
+export default {
+  namespaced: true,
+  state: {
+    visibility: Visibility.Public.value
+  },
+  mutations: {
+    changeVisibility (state, value) {
+      state.visibility = value
+    }
+  },
+  actions: {
+    fetchVisibility ({ state, commit, rootState }) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/accounts/verify_credentials')
+        .then(res => {
+          const visibility = Object.values(Visibility).find((v) => {
+            return v.key === res.data.source.privacy
+          })
+          commit('changeVisibility', visibility.value)
+          return res.data
+        })
+    },
+    setVisibility ({ state, commit, rootState }, value) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      const visibility = Object.values(Visibility).find((v) => {
+        return v.value === value
+      })
+      return client.patch('/accounts/update_credentials', {
+        source: {
+          privacy: visibility.key
+        }
+      })
+        .then(res => {
+          commit('changeVisibility', visibility.value)
+          return res.data
+        })
+    }
+  }
+}

src/renderer/store/TimelineSpace/Modals/NewToot.js

@@ -109,7 +109,7 @@ const NewToot = {
       if (!state.replyToMessage && state.pinedHashtag) {
         commit('updateStatus', state.hashtags.map(t => ` #${t.name}`).join())
       }
-      commit('changeVisibilityValue', rootState.App.tootVisibility)
+      dispatch('fetchVisibility')
     },
     closeModal ({ commit }) {
       commit('changeModal', false)
@@ -155,6 +155,20 @@ const NewToot = {
       if (state.pinedHashtag) {
         commit('updateHashtags', tags)
       }
+    },
+    fetchVisibility ({ commit, rootState }) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/accounts/verify_credentials')
+        .then(res => {
+          const visibility = Object.values(Visibility).find((v) => {
+            return v.key === res.data.source.privacy
+          })
+          commit('changeVisibilityValue', visibility.value)
+          return res.data
+        })
     }
   }
 }

src/renderer/store/index.js

@@ -8,6 +8,7 @@ import Login from './Login'
 import Authorize from './Authorize'
 import TimelineSpace from './TimelineSpace'
 import Preferences from './Preferences'
+import Settings from './Settings'
 
 Vue.use(Vuex)
 
@@ -22,6 +23,7 @@ export default new Vuex.Store({
     Login,
     Authorize,
     TimelineSpace,
-    Preferences
+    Preferences,
+    Settings
   }
 })