refs #22 Add change channel shortcut and change channel modal

src/main/index.js

@@ -137,6 +137,18 @@ function createWindow () {
               type: 'separator'
             }
           ].concat(accountsChange)
+            .concat([
+              {
+                type: 'separator'
+              },
+              {
+                label: 'Jump to',
+                accelerator: 'CmdOrCtrl+K',
+                click: () => {
+                  mainWindow.webContents.send('CmdOrCtrl+K')
+                }
+              }
+            ])
         }
       ]
 

src/renderer/components/TimelineSpace.vue

@@ -5,16 +5,18 @@
     <router-view></router-view>
   </div>
   <new-toot-modal></new-toot-modal>
+  <jump-modal></jump-modal>
 </div>
 </template>
 
 <script>
 import SideMenu from './TimelineSpace/SideMenu'
 import NewTootModal from './TimelineSpace/NewTootModal'
+import JumpModal from './TimelineSpace/JumpModal'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, NewTootModal },
+  components: { SideMenu, NewTootModal, JumpModal },
   created () {
     const loading = this.$loading({
       lock: true,

src/renderer/components/TimelineSpace/JumpModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :visible.sync="jumpModal"
+    width="440px"
+    class="jump-modal">
+    <el-form class="jump-form" v-on:submit.prevent="jump">
+      <div class="channel">
+        <input type="text" v-model="channel" placeholder="Jump to..." ref="channel" @keyup.enter.exact="jumpCurrentSelected" @keyup.down.exact="nextChannel" @keyup.up.exact="prevChannel" />
+        <ul class="channel-list">
+          <li v-for="c in filterdChannel" :class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'" @click="jump(c)" @mouseover="changeSelected(c)">{{ c.name }}</li>
+        </ul>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'jump-modal',
+  computed: {
+    ...mapState({
+      channelList: state => state.TimelineSpace.JumpModal.channelList,
+      selectedChannel: state => state.TimelineSpace.JumpModal.selectedChannel
+    }),
+    channel: {
+      get () {
+        return this.$store.state.TimelineSpace.JumpModal.channel
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/JumpModal/updateChannel', value)
+      }
+    },
+    filterdChannel () {
+      return this.filterChannelForm()
+    },
+    jumpModal: {
+      get () {
+        return this.$store.state.TimelineSpace.JumpModal.modalOpen
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/JumpModal/changeModal', value)
+      }
+    }
+  },
+  watch: {
+    channel (newChannel, oldChannel) {
+      this.$store.commit('TimelineSpace/JumpModal/changeSelected', this.filterChannelForm()[0])
+    }
+  },
+  updated () {
+    if (this.jumpModal) {
+      this.$refs.channel.focus()
+    } else {
+      this.channel = ''
+    }
+  },
+  methods: {
+    filterChannelForm () {
+      return this.channelList.filter((c) => {
+        return c.name.toLowerCase().indexOf(this.channel.toLowerCase()) !== -1
+      })
+    },
+    nextChannel () {
+      const filterd = this.filterChannelForm()
+      const i = filterd.findIndex((e) => {
+        return e.name === this.selectedChannel.name
+      })
+      if (i !== undefined && i < (filterd.length - 1)) {
+        this.$store.commit('TimelineSpace/JumpModal/changeSelected', filterd[i + 1])
+      }
+    },
+    prevChannel () {
+      const filterd = this.filterChannelForm()
+      const i = filterd.findIndex((e) => {
+        return e.name === this.selectedChannel.name
+      })
+      if (i !== undefined && i > 0) {
+        this.$store.commit('TimelineSpace/JumpModal/changeSelected', filterd[i - 1])
+      }
+    },
+    changeSelected (channel) {
+      this.$store.commit('TimelineSpace/JumpModal/changeSelected', channel)
+    },
+    jumpCurrentSelected () {
+      this.$store.dispatch('TimelineSpace/JumpModal/jumpCurrentSelected')
+    },
+    jump (channel) {
+      this.$store.dispatch('TimelineSpace/JumpModal/jump', channel)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.jump-form {
+  .channel {
+    input {
+      font-size: 32px;
+      line-height: 54px;
+      width: 100%;
+      outline: 0;
+      border: 1px solid #dcdfe6;
+      border-radius: 8px;
+      padding: 8px;
+      color: #303133;
+      box-sizing: border-box;
+    }
+
+    .channel-list {
+      list-style: none;
+      font-size: 16px;
+      padding: 0;
+
+      .channel-list-item {
+        padding: 4px 8px;
+        border-radius: 4px;
+      }
+
+      .selected {
+        background-color: #409eff;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

src/renderer/components/TimelineSpace/NewTootModal.vue

@@ -3,8 +3,8 @@
     title="New Toot"
     :visible.sync="newTootModal"
     width="400px"
-    class="new-toot-modal" v-on:submit.prevent="toot">
-    <el-form>
+    class="new-toot-modal">
+    <el-form v-on:submit.prevent="toot">
       <div class="status">
         <textarea v-model="status" ref="status" @keyup.ctrl.enter.exact="toot" @keyup.meta.enter.exact="toot"></textarea>
       </div>

src/renderer/store/TimelineSpace.js

@@ -6,6 +6,7 @@ import Local from './TimelineSpace/Local'
 import Public from './TimelineSpace/Public'
 import Cards from './TimelineSpace/Cards'
 import NewTootModal from './TimelineSpace/NewTootModal'
+import JumpModal from './TimelineSpace/JumpModal'
 import router from '../router'
 
 const TimelineSpace = {
@@ -16,7 +17,8 @@ const TimelineSpace = {
     Local,
     Public,
     Cards,
-    NewTootModal
+    NewTootModal,
+    JumpModal
   },
   state: {
     account: {
@@ -142,6 +144,9 @@ const TimelineSpace = {
       ipcRenderer.on('CmdOrCtrl+N', () => {
         commit('TimelineSpace/NewTootModal/changeModal', true, { root: true })
       })
+      ipcRenderer.on('CmdOrCtrl+K', () => {
+        commit('TimelineSpace/JumpModal/changeModal', true, { root: true })
+      })
     },
     async removeShortcutEvents () {
       ipcRenderer.removeAllListeners('CmdOrCtrl+N')

src/renderer/store/TimelineSpace/JumpModal.js

@@ -0,0 +1,58 @@
+import router from '../../router'
+
+const JumpModal = {
+  namespaced: true,
+  state: {
+    modalOpen: false,
+    channel: '',
+    channelList: [
+      {
+        name: 'Home',
+        path: 'home'
+      },
+      {
+        name: 'Notification',
+        path: 'notifications'
+      },
+      {
+        name: 'Favourite',
+        path: 'favourites'
+      },
+      {
+        name: 'LocalTimeline',
+        path: 'local'
+      },
+      {
+        name: 'PublicTimeline',
+        path: 'public'
+      }
+    ],
+    selectedChannel: {
+      name: 'Home',
+      path: 'home'
+    }
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    },
+    updateChannel (state, value) {
+      state.channel = value
+    },
+    changeSelected (state, value) {
+      state.selectedChannel = value
+    }
+  },
+  actions: {
+    jumpCurrentSelected ({ state, commit, rootState }) {
+      commit('changeModal', false)
+      router.push({ path: `/${rootState.TimelineSpace.account._id}/${state.selectedChannel.path}` })
+    },
+    jump ({ state, commit, rootState }, channel) {
+      commit('changeModal', false)
+      router.push({ path: `/${rootState.TimelineSpace.account._id}/${channel.path}` })
+    }
+  }
+}
+
+export default JumpModal