feat(desktop & web): display el-tooltip only when the connection name…

… is too long
emqx · Jul 18, 2024 · 8285b8a · 8285b8a
1 parent 069f7fa
commit 8285b8a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -31,12 +31,13 @@
               </a>
             </el-tooltip>
             <el-tooltip
+              :disabled="!showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
-              :content="`${titleName}`"
+              :content="titleName"
               :open-delay="500"
               placement="top"
             >
-              <h2 :class="[ { offline: !client.connected }, 'title-name' ]">
+              <h2 ref="title" :class="[{ offline: !client.connected }, 'title-name']">
                 {{ titleName }}
               </h2>
             </el-tooltip>
@@ -439,6 +440,7 @@ export default class ConnectionsDetail extends Vue {
   private showImportData = false
   private showTimedMessage = false
   private showUseScript = false
+  private showTitleTooltip = false
 
   private connectLoading = false
   private disconnectLoding = false
@@ -567,6 +569,17 @@ export default class ConnectionsDetail extends Vue {
     }, 500)
   }
 
+  @Watch('titleName')
+  private async checkTitleOverflow() {
+    await this.$nextTick()
+    const titleElement = this.$refs.title as HTMLElement
+    if (titleElement?.scrollWidth > 200) {
+      this.showTitleTooltip = true
+    } else {
+      this.showTitleTooltip = false
+    }
+  }
+
   private checkScriptOption(optionName: 'function' | 'schema', optionMethod: 'received' | 'publish') {
     const applyOption: any = this.scriptOption?.apply
     const optionNameExists = Boolean(this.scriptOption?.[optionName]?.name)

diff --git a/web/src/views/connections/ConnectionsDetail.vue b/web/src/views/connections/ConnectionsDetail.vue
@@ -5,12 +5,13 @@
         <div class="topbar">
           <div class="connection-head">
             <el-tooltip
+              :disabled="!showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
-              :content="`${titleName}`"
+              :content="titleName"
               :open-delay="500"
               placement="top"
             >
-              <h2 :class="[ { offline: !client.connected }, 'title-name' ]">
+              <h2 ref="title" :class="[{ offline: !client.connected }, 'title-name']">
                 {{ titleName }}
               </h2>
             </el-tooltip>
@@ -278,9 +279,12 @@ export default class ConnectionsDetail extends Vue {
   }
 
   private showSubs = true
+  private showClientInfo = true
+  private showContextmenu: boolean = false
+  private showTitleTooltip = false
+
   private largeDesktop = false
   private screenWidth = document.body.clientWidth
-  private showClientInfo = true
   private connectLoading = false
   private disconnectLoding = false
   private isReconnect = false
@@ -301,7 +305,6 @@ export default class ConnectionsDetail extends Vue {
   private messageListMarginTop: number = 19
   private messagesAddedNewItem: boolean = false
   private activeTopic = ''
-  private showContextmenu: boolean = false
   private selectedMessage: MessageModel | null = null
   private contextmenuConfig: ContextmenuModel = {
     top: 0,
@@ -515,6 +518,17 @@ export default class ConnectionsDetail extends Vue {
     }, 500)
   }
 
+  @Watch('titleName')
+  private async checkTitleOverflow() {
+    await this.$nextTick()
+    const titleElement = this.$refs.title as HTMLElement
+    if (titleElement?.scrollWidth > 200) {
+      this.showTitleTooltip = true
+    } else {
+      this.showTitleTooltip = false
+    }
+  }
+
   private getConnectionValue(id: string) {
     const currentActiveConnection:
       | {