feat(web): add collapsible connections list pane (desktop icon pattern)

web/src/components/Leftbar.vue

@@ -7,7 +7,7 @@
         </a>
       </div>
       <div :class="[{ active: isConnection }, 'leftbar-item']">
-        <a href="javascript:;" @click="routeToPage('/recent_connections')">
+        <a href="javascript:;" @click="openConnections">
           <i class="iconfont icon-connections"></i>
         </a>
       </div>
@@ -40,11 +40,16 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Getter } from 'vuex-class'
+import { Getter, Action } from 'vuex-class'
 
 @Component
 export default class Leftbar extends Vue {
   @Getter('currentLang') private getterLang!: Language
+  @Getter('showConnectionList') private showConnectionList!: boolean
+
+  @Action('TOGGLE_SHOW_CONNECTION_LIST') private toggleShowConnectionList!: (payload: {
+    showConnectionList: boolean
+  }) => void
 
   get siteLink(): string {
     return this.getterLang === 'zh' ? 'https://mqttx.app/zh' : 'https://mqttx.app/'
@@ -72,6 +77,14 @@ export default class Leftbar extends Vue {
       })
       .catch(() => {})
   }
+
+  private openConnections() {
+    if (this.isConnection) {
+      this.toggleShowConnectionList({ showConnectionList: !this.showConnectionList })
+    } else {
+      this.routeToPage('/recent_connections')
+    }
+  }
 }
 </script>
 

web/src/database/index.ts

@@ -11,6 +11,7 @@ interface Schema {
     autoCheck: boolean
     currentLang: string
     currentTheme: string
+    showConnectionList: boolean
   }
   connections: []
   suggestConnections: []
@@ -49,6 +50,9 @@ class DB {
     if (!this.db.has('settings.autoScrollInterval').value()) {
       this.db.set('settings.autoScrollInterval', 0).write()
     }
+    if (!this.db.has('settings.showConnectionList').value()) {
+      this.db.set('settings.showConnectionList', true).write()
+    }
     // Set max reconnection times
     if (!this.db.get('settings.maxReconnectTimes').value()) {
       this.db.set('settings.maxReconnectTimes', 10).write()

web/src/lang/connections.ts

@@ -9,6 +9,16 @@ export default {
     en: 'New Connection',
     ja: '新規接続',
   },
+  hideConnections: {
+    zh: '隐藏连接列表',
+    en: 'Hide Connections',
+    ja: '接続リストを非表示',
+  },
+  showConnections: {
+    zh: '显示连接列表',
+    en: 'Show Connections',
+    ja: '接続リストを表示',
+  },
   search: {
     zh: '搜索',
     en: 'Search',

web/src/store/getter.ts

@@ -14,6 +14,7 @@ const getters = {
   allConnections: (state: State) => state.app.allConnections,
   multiTopics: (state: State) => state.app.multiTopics,
   topicWhitespaceDetection: (state: State) => state.app.topicWhitespaceDetection,
+  showConnectionList: (state: State) => state.app.showConnectionList,
 }
 
 export default getters

web/src/store/modules/app.ts

@@ -18,6 +18,7 @@ const TOGGLE_ADVANCED_VISIBLE = 'TOGGLE_ADVANCED_VISIBLE'
 const CHANGE_ALL_CONNECTIONS = 'CHANGE_ALL_CONNECTIONS'
 const TOGGLE_MULTI_TOPICS = 'TOGGLE_MULTI_TOPICS'
 const TOGGLE_TOPIC_WHITESPACE_DETECTION = 'TOGGLE_TOPIC_WHITESPACE_DETECTION'
+const TOGGLE_SHOW_CONNECTION_LIST = 'TOGGLE_SHOW_CONNECTION_LIST'
 
 const stateRecord: App = loadSettings()
 
@@ -38,6 +39,7 @@ const app = {
     advancedVisible: true,
     willMessageVisible: true,
     allConnections: [],
+    showConnectionList: stateRecord.showConnectionList ?? true,
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -115,6 +117,9 @@ const app = {
     [CHANGE_ALL_CONNECTIONS](state: App, allConnections: ConnectionModel[] | []) {
       state.allConnections = allConnections
     },
+    [TOGGLE_SHOW_CONNECTION_LIST](state: App, showConnectionList: boolean) {
+      state.showConnectionList = showConnectionList
+    },
   },
   actions: {
     TOGGLE_THEME({ commit }: any, payload: App) {
@@ -177,6 +182,10 @@ const app = {
     CHANGE_ALL_CONNECTIONS({ commit }: any, payload: App) {
       commit(CHANGE_ALL_CONNECTIONS, payload.allConnections)
     },
+    TOGGLE_SHOW_CONNECTION_LIST({ commit }: any, payload: App) {
+      setSettings('settings.showConnectionList', payload.showConnectionList)
+      commit(TOGGLE_SHOW_CONNECTION_LIST, payload.showConnectionList)
+    },
   },
 }
 

web/src/types/global.d.ts

@@ -134,6 +134,7 @@ declare global {
     willMessageVisible: boolean
     advancedVisible: boolean
     allConnections: ConnectionModel[] | []
+    showConnectionList: boolean
   }
 
   interface State {

web/src/views/connections/ConnectionsDetail.vue

@@ -4,6 +4,21 @@
       <div class="connections-info">
         <div class="topbar">
           <div class="connection-head">
+            <el-tooltip
+              v-if="!showConnectionList"
+              placement="bottom"
+              :effect="theme !== 'light' ? 'light' : 'dark'"
+              :open-delay="500"
+              :content="$t('connections.showConnections')"
+            >
+              <a
+                href="javascript:;"
+                class="show-connections-button"
+                @click="toggleShowConnectionList({ showConnectionList: true })"
+              >
+                <i class="iconfont icon-show-connections"></i>
+              </a>
+            </el-tooltip>
             <el-tooltip
               :disabled="!showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
@@ -251,6 +266,9 @@ export default class ConnectionsDetail extends Vue {
   @Action('REMOVE_ACTIVE_CONNECTION') private removeActiveConnection!: (payload: { readonly id: string }) => void
   @Action('SHOW_CLIENT_INFO') private changeShowClientInfo!: (payload: ClientInfo) => void
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void
+  @Action('TOGGLE_SHOW_CONNECTION_LIST') private toggleShowConnectionList!: (payload: {
+    showConnectionList: boolean
+  }) => void
 
   @Getter('currentLang') private getterLang!: Language
   @Getter('activeConnection') private activeConnection: $TSFixed
@@ -261,6 +279,7 @@ export default class ConnectionsDetail extends Vue {
   @Getter('showClientInfo') private clientInfoVisibles!: {
     [id: string]: boolean
   }
+  @Getter('showConnectionList') private showConnectionList!: boolean
 
   /**
    * Notice: when we jump order by `other page` -> `creation page` -> `connection page`,
@@ -490,8 +509,17 @@ export default class ConnectionsDetail extends Vue {
   }
 
   get marginLeft(): string {
-    const left = this.showSubs ? (this.largeDesktop ? '916px' : '676px') : this.largeDesktop ? '517px' : '397px'
-    return left
+    if (!this.showConnectionList) {
+      // ConnectionsList hidden: subtract its width (320px / 400px) from the offsets.
+      return this.showSubs
+        ? this.largeDesktop
+          ? '516px'
+          : '356px'
+        : this.largeDesktop
+        ? '116px'
+        : '76px'
+    }
+    return this.showSubs ? (this.largeDesktop ? '916px' : '676px') : this.largeDesktop ? '517px' : '397px'
   }
 
   get subListRef(): SubscriptionsList {
@@ -1139,6 +1167,13 @@ export default class ConnectionsDetail extends Vue {
             color: var(--color-text-light);
           }
         }
+        .icon-show-connections {
+          font-size: 20px;
+        }
+        a.show-connections-button {
+          color: var(--color-text-title);
+          margin-right: 12px;
+        }
         a.collapse-btn {
           font-size: 18px;
           float: right;

web/src/views/connections/index.vue

@@ -1,11 +1,31 @@
 <template>
   <div class="connections">
-    <div class="left-list">
-      <h1 class="titlebar">{{ $t('connections.connections') }}</h1>
-      <ConnectionsList :data="records" :connectionId="connectionId" @delete="onDelete" />
-    </div>
+    <transition name="slide">
+      <div v-show="showConnectionList" class="left-list">
+        <div class="left-list-topbar">
+          <h1 class="titlebar">{{ $t('connections.connections') }}</h1>
+          <div class="left-list-tailbar">
+            <el-tooltip
+              placement="bottom"
+              :effect="theme !== 'light' ? 'light' : 'dark'"
+              :open-delay="500"
+              :content="$t('connections.hideConnections')"
+            >
+              <a
+                href="javascript:;"
+                class="hide-connections-button"
+                @click="toggleShowConnectionList({ showConnectionList: false })"
+              >
+                <i class="iconfont icon-hide-connections"></i>
+              </a>
+            </el-tooltip>
+          </div>
+        </div>
+        <ConnectionsList :data="records" :connectionId="connectionId" @delete="onDelete" />
+      </div>
+    </transition>
 
-    <div class="connections-view">
+    <div :class="['connections-view', { 'is-list-hidden': !showConnectionList }]">
       <EmptyPage
         v-if="isEmpty && !oper"
         name="connections"
@@ -28,7 +48,7 @@
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
-import { Action } from 'vuex-class'
+import { Action, Getter } from 'vuex-class'
 import { loadConnections, loadConnection } from '@/utils/api/connection'
 import EmptyPage from '@/components/EmptyPage.vue'
 import ConnectionsList from './ConnectionsList.vue'
@@ -49,6 +69,12 @@ export default class Connections extends Vue {
   @Action('CHANGE_ALL_CONNECTIONS') private changeAllConnections!: (payload: {
     allConnections: ConnectionModel[] | []
   }) => void
+  @Action('TOGGLE_SHOW_CONNECTION_LIST') private toggleShowConnectionList!: (payload: {
+    showConnectionList: boolean
+  }) => void
+
+  @Getter('currentTheme') private theme!: Theme
+  @Getter('showConnectionList') private showConnectionList!: boolean
 
   private isEmpty: boolean = false
   private records: ConnectionModel[] | [] = []
@@ -122,10 +148,72 @@ export default class Connections extends Vue {
 </script>
 
 <style lang="scss">
+@import '~@/assets/scss/mixins.scss';
+
+$collapse-ease: cubic-bezier(0.4, 0, 0.2, 1);
+$collapse-duration: 0.3s;
+
 .connections {
+  .left-list-topbar {
+    @include flex-space-between;
+    min-height: 10px;
+    height: 59px;
+  }
   .titlebar {
     padding: 16px;
   }
+  .left-list-tailbar {
+    display: flex;
+    align-items: center;
+    margin-right: 16px;
+    .hide-connections-button {
+      color: var(--color-text-title);
+      .icon-hide-connections {
+        font-size: 20px;
+        color: var(--color-text-title);
+        &:hover {
+          color: var(--color-text-title);
+        }
+      }
+    }
+  }
+  .connections-view {
+    .right-topbar {
+      transition: left $collapse-duration $collapse-ease;
+    }
+    .connections-detail-main {
+      transition: margin-left $collapse-duration $collapse-ease, padding-top 0.3s;
+    }
+    .connections-detail-main .connections-body .filter-bar {
+      transition: left $collapse-duration $collapse-ease;
+    }
+    .connections-footer {
+      transition: margin-left $collapse-duration $collapse-ease;
+    }
+    .left-panel > div {
+      transition: left $collapse-duration $collapse-ease;
+    }
+  }
+  .connections-view.is-list-hidden {
+    .right-topbar,
+    .connections-detail-main .connections-body .filter-bar,
+    .left-panel > div {
+      left: 76px;
+    }
+    .right-content {
+      margin-left: 76px;
+    }
+    @media (min-width: 1920px) {
+      .right-topbar,
+      .connections-detail-main .connections-body .filter-bar,
+      .left-panel > div {
+        left: 116px;
+      }
+      .right-content {
+        margin-left: 116px;
+      }
+    }
+  }
 }
 .left-list {
   position: fixed;
@@ -150,4 +238,13 @@ export default class Connections extends Vue {
     color: var(--color-text-light);
   }
 }
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform $collapse-duration $collapse-ease, opacity $collapse-duration $collapse-ease;
+}
+.slide-enter,
+.slide-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
 </style>