style(connection): modify connection list styles

src/assets/font/iconfont.json

@@ -6,18 +6,11 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "20730817",
-      "name": "collapse",
-      "font_class": "collapse",
-      "unicode": "ea08",
-      "unicode_decimal": 59912
-    },
-    {
-      "icon_id": "17504370",
-      "name": "triangle",
-      "font_class": "triangle",
-      "unicode": "e691",
-      "unicode_decimal": 59025
+      "icon_id": "19526525",
+      "name": "折叠",
+      "font_class": "fold",
+      "unicode": "e663",
+      "unicode_decimal": 58979
     },
     {
       "icon_id": "19023717",

src/lang/connections.ts

@@ -474,11 +474,6 @@ export default {
     en: 'collection name',
     ja: 'フォルダ名',
   },
-  collapseCollection: {
-    zh: '收起文件夹',
-    en: 'Collapse Collection',
-    ja: '折りたたみフォルダ',
-  },
   deleteCollection: {
     zh: '删除文件夹',
     en: 'Delete Collection',

src/views/connections/ConnectionsList.vue

@@ -16,16 +16,6 @@
             <i class="el-icon-folder-add"></i>
           </a>
         </el-tooltip>
-        <el-tooltip
-          placement="bottom"
-          :effect="theme !== 'light' ? 'light' : 'dark'"
-          :open-delay="500"
-          :content="$t('connections.collapseCollection')"
-        >
-          <a class="collapse-collection-btn" href="javascript:;" @click="handleCollapseCollection">
-            <i class="iconfont icon-collapse"></i>
-          </a>
-        </el-tooltip>
       </div>
     </div>
     <div class="connections-list">
@@ -98,7 +88,7 @@
               <div class="collection-name">
                 <i v-if="!node.expanded" class="el-icon-folder"> </i>
                 <i v-else class="el-icon-folder-opened"> </i>
-                {{ data.name }}
+                <span>{{ data.name }}</span>
               </div>
             </div>
           </span>
@@ -116,12 +106,12 @@
         <a href="javascript:;" class="context-menu__item" @click="handleNewCollection">
           <i class="el-icon-plus"></i>{{ $t('connections.newCollection') }}
         </a>
-        <a href="javascript:;" class="context-menu__item danger" @click="handleDeleteCollection">
-          <i class="iconfont icon-delete"></i>{{ $t('connections.deleteCollection') }}
-        </a>
         <a href="javascript:;" class="context-menu__item" @click="handleRenameCollection">
           <i class="iconfont icon-edit"></i>{{ $t('connections.renameCollection') }}
         </a>
+        <a href="javascript:;" class="context-menu__item danger" @click="handleDeleteCollection">
+          <i class="iconfont icon-delete"></i>{{ $t('connections.deleteCollection') }}
+        </a>
       </contextmenu>
     </div>
   </div>
@@ -331,15 +321,6 @@ export default class ConnectionsList extends Vue {
     this.flushCollectionChange()
   }
 
-  private handleCollapseCollection() {
-    const treeRef = this.$refs.tree as $TSFixed
-    if (!treeRef) return
-    const nodes = treeRef.store.nodesMap
-    for (const idx in nodes) {
-      nodes[idx].expanded = false
-    }
-  }
-
   private handleSelectConnection(row: ConnectionModel) {
     this.handleConnectionTreeClick(row)
     this.initUnreadMessageCount(row.id as string)
@@ -548,7 +529,7 @@ export default class ConnectionsList extends Vue {
           justify-content: space-between;
           .connection-item {
             @include flex-space-between;
-            height: 64px;
+            height: 48px;
             width: 100%;
             cursor: pointer;
             position: relative;
@@ -586,7 +567,7 @@ export default class ConnectionsList extends Vue {
               }
             }
             .new-msg-count {
-              margin-right: 8px;
+              margin-right: 28px;
               min-width: 18px;
               height: 18px;
               line-height: 18px;
@@ -612,10 +593,11 @@ export default class ConnectionsList extends Vue {
           }
           .custom-tree-node-collection {
             width: 100%;
-            height: 36px;
+            height: 48px;
             @include flex-space-between;
             .collection-name {
-              display: block;
+              display: flex;
+              align-items: center;
               font-size: $font-size--body;
               font-weight: 500;
               color: var(--color-text-title);
@@ -626,6 +608,7 @@ export default class ConnectionsList extends Vue {
               i {
                 font-size: 18px;
                 color: #c0c4cc;
+                padding-right: 6px;
               }
             }
           }