fix(desktop): fix can not hide the conn-list in new window

emqx · Jan 31, 2024 · 9feab7b · 9feab7b
1 parent d5e9d34
commit 9feab7b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/src/assets/scss/connections.scss b/src/assets/scss/connections.scss
@@ -33,3 +33,14 @@
   margin-right: 30px;
   overflow-x: hidden;
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+.slide-enter {
+  transform: translateX(-100%);
+}
+.slide-leave-to {
+  transform: translateX(-100%);
+}
diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue
@@ -164,15 +164,5 @@ export default class Connections extends Vue {
 </script>
 
 <style lang="scss">
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-.slide-enter {
-  transform: translateX(-100%);
-}
-.slide-leave-to {
-  transform: translateX(-100%);
-}
 @import '~@/assets/scss/connections.scss';
 </style>
diff --git a/src/views/window/Window.vue b/src/views/window/Window.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="window connections">
-    <div class="left-list">
-      <ConnectionsList ref="connectionList" />
-    </div>
+    <transition name="slide">
+      <div v-show="showConnectionList" class="left-list">
+        <ConnectionsList ref="connectionList" />
+      </div>
+    </transition>
     <div class="connections-view">
       <ConnectionsDetail ref="ConnectionsDetail" :record="currentConnection" @reload="handleReload" />
     </div>
@@ -15,6 +17,7 @@ import ConnectionsDetail from '@/views/connections/ConnectionsDetail.vue'
 import ConnectionsList from '@/views/connections/ConnectionsList.vue'
 import useServices from '@/database/useServices'
 import { getDefaultRecord } from '@/utils/mqttUtils'
+import { Getter } from 'vuex-class'
 
 @Component({
   components: {
@@ -23,6 +26,8 @@ import { getDefaultRecord } from '@/utils/mqttUtils'
   },
 })
 export default class Window extends Vue {
+  @Getter('showConnectionList') private showConnectionList!: boolean
+
   private records: ConnectionModel[] = []
   private currentConnection: ConnectionModel = { ...getDefaultRecord() }