Merge pull request #422 from h3poteto/iss-341

closes #341 Add small window layout menu

src/main/index.js

@@ -645,6 +645,27 @@ ipcMain.on('save-preferences', (event, data) => {
     })
 })
 
+ipcMain.on('change-collapse', (event, value) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.update(
+    {
+      state: {
+        collapse: value
+      }
+    })
+    .catch((err) => {
+      log.error(err)
+    })
+})
+
+ipcMain.on('get-collapse', (event, _) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.load()
+    .then((conf) => {
+      event.sender.send('response-get-collapse', conf.state.collapse)
+    })
+})
+
 // hashtag
 ipcMain.on('save-hashtag', (event, tag) => {
   const hashtags = new Hashtags(hashtagsDB)

src/main/preferences.js

@@ -10,6 +10,9 @@ const Base = {
     theme: 'white',
     fontSize: 14,
     displayNameStyle: 0
+  },
+  state: {
+    collapse: false
   }
 }
 
@@ -47,4 +50,11 @@ export default class Preferences {
       })
     })
   }
+
+  async update (obj) {
+    const current = await this.load()
+    const data = objectAssignDeep({}, current, obj)
+    const result = await this.save(data)
+    return result
+  }
 }

src/renderer/components/TimelineSpace.vue

@@ -6,7 +6,7 @@
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)">
   <side-menu></side-menu>
-  <div class="page">
+  <div :class="collapse ? 'page-narrow':'page'">
     <header class="header" style="-webkit-app-region: drag;">
       <header-menu></header-menu>
     </header>
@@ -29,7 +29,8 @@ export default {
   components: { SideMenu, HeaderMenu, Modals, Contents },
   computed: {
     ...mapState({
-      loading: state => state.TimelineSpace.loading
+      loading: state => state.TimelineSpace.loading,
+      collapse: state => state.TimelineSpace.SideMenu.collapse
     })
   },
   created () {
@@ -126,4 +127,19 @@ export default {
   }
 }
 
+.page-narrow {
+  margin-left: 76px;
+  height: 100%;
+  box-sizing: border-box;
+
+  .header {
+    width: calc(100% - 141px);
+    position: fixed;
+    top: 0;
+    left: 141px;
+    height: 48px;
+    border-bottom: solid 1px var(--theme-border-color);
+  }
+}
+
 </style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="side_menu">
-    <div class="profile-wrapper" style="-webkit-app-region: drag;">
-      <div class="profile">
+    <div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
+      <div class="profile-narrow" v-if="collapse">
+        <img :src="account.avatar" class="avatar" />
+      </div>
+      <div class="profile-wide" v-else>
         <div>@{{ account.username }}
           <el-dropdown trigger="click" @command="handleProfile">
             <span class="el-dropdown-link">
@@ -14,14 +17,24 @@
         </div>
         <span>{{ account.domain }}</span>
       </div>
+      <div class="collapse">
+        <el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse">
+          <i class="el-icon-arrow-right"></i>
+        </el-button>
+        <el-button type="text" class="do-collapse" @click="doCollapse" v-else>
+          <i class="el-icon-arrow-left"></i>
+        </el-button>
+      </div>
+      <div class="clearfix"></div>
     </div>
     <el-menu
       :default-active="activeRoute()"
       :background-color="themeColor"
       text-color="#909399"
+      :collapse="collapse"
       active-text-color="#ffffff"
       :router="true"
-      class="el-menu-vertical timeline-menu">
+      :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
       <el-menu-item :index="`/${id()}/home`">
         <icon name="home"></icon>
         <span>Home</span>
@@ -83,9 +96,13 @@ export default {
       unreadLocalTimeline: state => state.TimelineSpace.SideMenu.unreadLocalTimeline,
       lists: state => state.TimelineSpace.SideMenu.lists,
       themeColor: state => state.App.theme.side_menu_color,
-      overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath
+      overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath,
+      collapse: state => state.TimelineSpace.SideMenu.collapse
     })
   },
+  created () {
+    this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
+  },
   methods: {
     activeRoute () {
       if (this.overrideActivePath === null) {
@@ -103,6 +120,12 @@ export default {
           shell.openExternal(this.account.baseURL + '/settings/profile')
           break
       }
+    },
+    doCollapse () {
+      this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', true)
+    },
+    releaseCollapse () {
+      this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false)
     }
   }
 }
@@ -119,7 +142,8 @@ export default {
     height: 70px;
     font-size: 16px;
 
-    .profile {
+    .profile-wide {
+      float: left;
       color: #ffffff;
       font-weight: bold;
       padding: 20px 8px 10px 20px;
@@ -131,6 +155,32 @@ export default {
         cursor: pointer;
       }
     }
+
+    .profile-narrow {
+      float: left;
+
+      .avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        margin: 18px 12px;
+      }
+    }
+
+    .collapse {
+      float: right;
+      margin-top: 24px;
+
+      .do-collapse {
+        color: #606266;
+        padding: 0;
+      }
+
+      .release-collapse {
+        color: #606266;
+        padding: 0;
+      }
+    }
   }
 
   .timeline-menu /deep/ {
@@ -164,5 +214,9 @@ export default {
       font-size: 14px;
     }
   }
+
+  .narrow-menu {
+    width: 76px;
+  }
 }
 </style>

src/renderer/store/TimelineSpace/SideMenu.js

@@ -1,4 +1,5 @@
 import Mastodon from 'megalodon'
+import { ipcRenderer } from 'electron'
 
 const SideMenu = {
   namespaced: true,
@@ -7,7 +8,8 @@ const SideMenu = {
     unreadNotifications: false,
     unreadLocalTimeline: false,
     lists: [],
-    overrideActivePath: null
+    overrideActivePath: null,
+    collapse: false
   },
   mutations: {
     changeUnreadHomeTimeline (state, value) {
@@ -24,6 +26,9 @@ const SideMenu = {
     },
     updateOverrideActivePath (state, path) {
       state.overrideActivePath = path
+    },
+    changeCollapse (state, collapse) {
+      state.collapse = collapse
     }
   },
   actions: {
@@ -43,6 +48,16 @@ const SideMenu = {
       commit('changeUnreadHomeTimeline', false)
       commit('changeUnreadNotifications', false)
       commit('changeUnreadLocalTimeline', false)
+    },
+    changeCollapse ({ commit }, value) {
+      commit('changeCollapse', value)
+      ipcRenderer.send('change-collapse', value)
+    },
+    readCollapse ({ commit }) {
+      ipcRenderer.send('get-collapse')
+      ipcRenderer.once('response-get-collapse', (event, value) => {
+        commit('changeCollapse', value)
+      })
     }
   }
 }