refs #625 Add option to hide/show global header

src/main/index.js

@@ -642,6 +642,30 @@ ipcMain.on('get-collapse', (event, _) => {
     })
 })
 
+ipcMain.on('change-global-header', (event, value) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.update(
+    {
+      state: {
+        hideGlobalHeader: value
+      }
+    })
+    .then((conf) => {
+      event.sender.send('response-change-global-header', conf)
+    })
+    .catch(err => {
+      log.error(err)
+    })
+})
+
+ipcMain.on('get-global-header', (event, _) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.load()
+    .then((conf) => {
+      event.sender.send('response-get-global-header', conf.state.hideGlobalHeader)
+    })
+})
+
 ipcMain.on('change-language', (event, value) => {
   const preferences = new Preferences(preferencesDBPath)
   preferences.update(

src/main/preferences.js

@@ -17,7 +17,8 @@ const Base = {
     tootVisibility: Visibility.Public.value
   },
   state: {
-    collapse: false
+    collapse: false,
+    hideGlobalHeader: false
   },
   language: {
     language: Language.en.key

src/renderer/components/GlobalHeader.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="global_header">
     <el-menu
+      v-if="!hide"
       :default-active="activeRoute()"
       class="el-menu-vertical account-menu"
       :collapse="true"
@@ -19,10 +20,11 @@
         <span slot="new">New</span>
       </el-menu-item>
     </el-menu>
-    <div class="space">
+    <div :class="hide ? 'space no-global-header':'space with-global-header' ">
       <router-view :key="$route.params.id"></router-view>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -31,8 +33,11 @@ import { mapState } from 'vuex'
 export default {
   name: 'global-header',
   computed: {
+    ...mapState('GlobalHeader', {
+      accounts: state => state.accounts,
+      hide: state => state.hide
+    }),
     ...mapState({
-      accounts: state => state.GlobalHeader.accounts,
       themeColor: state => state.App.theme.global_header_color
     })
   },
@@ -90,8 +95,15 @@ export default {
   }
 
   .space {
-    margin-left: 65px;
     height: 100%;
   }
+
+  .no-global-header {
+    margin-left: 0;
+  }
+
+  .with-global-header {
+    margin-left: 65px;
+  }
 }
 </style>

src/renderer/components/TimelineSpace.vue

@@ -197,14 +197,13 @@ export default {
     width: calc(100% - 245px);
     position: fixed;
     top: 0;
-    left: 245px;
     height: 48px;
     border-bottom: solid 1px var(--theme-border-color);
   }
 }
 
 .page-narrow {
-  margin-left: 76px;
+  margin-left: 64px;
   height: 100%;
   box-sizing: border-box;
 
@@ -212,7 +211,6 @@ export default {
     width: calc(100% - 141px);
     position: fixed;
     top: 0;
-    left: 141px;
     height: 48px;
     border-bottom: solid 1px var(--theme-border-color);
   }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -87,6 +87,12 @@
         </el-menu-item>
       </template>
     </el-menu>
+    <el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)">
+      <icon name="caret-square-right"></icon>
+    </el-button>
+    <el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)">
+      <icon name="caret-square-left"></icon>
+    </el-button>
   </div>
 </template>
 
@@ -103,7 +109,8 @@ export default {
       unreadLocalTimeline: state => state.unreadLocalTimeline,
       lists: state => state.lists,
       tags: state => state.tags,
-      collapse: state => state.collapse
+      collapse: state => state.collapse,
+      hideGlobalHeader: state => state.hideGlobalHeader
     }),
     ...mapState({
       account: state => state.TimelineSpace.account,
@@ -142,6 +149,9 @@ export default {
     },
     releaseCollapse () {
       this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false)
+    },
+    changeGlobalHeader (value) {
+      this.$store.dispatch('TimelineSpace/SideMenu/changeGlobalHeader', value)
     }
   }
 }
@@ -153,7 +163,6 @@ export default {
     background-color: var(--theme-side-menu-color);
     position: fixed;
     top: 0;
-    left: 65px;
     width: 180px;
     height: 70px;
     font-size: 16px;
@@ -215,7 +224,6 @@ export default {
   .timeline-menu /deep/ {
     position: fixed;
     top: 70px;
-    left: 65px;
     height: calc(100% - 70px);
     width: 180px;
     border: none;
@@ -257,5 +265,11 @@ export default {
       margin-left: -8px;
     }
   }
+
+  .global-header-control {
+    position: fixed;
+    bottom: 0;
+    color: #dcdfe6;
+  }
 }
 </style>

src/renderer/store/GlobalHeader.js

@@ -5,7 +5,8 @@ const GlobalHeader = {
   namespaced: true,
   state: {
     accounts: [],
-    changing: false
+    changing: false,
+    hide: false
   },
   mutations: {
     updateAccounts (state, accounts) {
@@ -13,6 +14,9 @@ const GlobalHeader = {
     },
     updateChanging (state, value) {
       state.changing = value
+    },
+    changeHide (state, value) {
+      state.hide = value
     }
   },
   actions: {
@@ -62,6 +66,12 @@ const GlobalHeader = {
     async removeShortcutEvents () {
       ipcRenderer.removeAllListeners('change-account')
       return 'removeShortcutEvents'
+    },
+    reloadHide ({ commit }) {
+      ipcRenderer.send('get-global-header')
+      ipcRenderer.once('response-get-global-header', (event, value) => {
+        commit('changeHide', value)
+      })
     }
   }
 }

src/renderer/store/TimelineSpace/SideMenu.js

@@ -9,7 +9,8 @@ const SideMenu = {
     unreadLocalTimeline: false,
     lists: [],
     tags: [],
-    collapse: false
+    collapse: false,
+    hideGlobalHeader: false
   },
   mutations: {
     changeUnreadHomeTimeline (state, value) {
@@ -29,6 +30,9 @@ const SideMenu = {
     },
     updateTags (state, tags) {
       state.tags = tags
+    },
+    changeGlobalHeader (state, hide) {
+      state.hideGlobalHeader = hide
     }
   },
   actions: {
@@ -53,6 +57,13 @@ const SideMenu = {
       commit('changeCollapse', value)
       ipcRenderer.send('change-collapse', value)
     },
+    changeGlobalHeader ({ commit, dispatch }, value) {
+      commit('changeGlobalHeader', value)
+      ipcRenderer.send('change-global-header', value)
+      ipcRenderer.once('response-change-global-header', (event, _) => {
+        dispatch('GlobalHeader/reloadHide', {}, { root: true })
+      })
+    },
     readCollapse ({ commit }) {
       ipcRenderer.send('get-collapse')
       ipcRenderer.once('response-get-collapse', (event, value) => {