style(desktop): improve select dropdown item style

emqx · Dec 10, 2024 · d40b860 · d40b860
1 parent dcd8435
commit d40b860
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss
@@ -262,10 +262,16 @@
     border-top-color: var(--color-bg-messagebox);
   }
 }
+
+/* Select Dropdown Item */
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background: var(--color-bg-item);
 }
+.el-select-dropdown__item.selected {
+  font-weight: 500;
+}
+
 // Fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   padding-right: 0px !important;

diff --git a/src/components/ConnectionSelect.vue b/src/components/ConnectionSelect.vue
@@ -1,9 +1,17 @@
 <template>
-  <el-select v-model="modelValue" class="connection-select" v-bind="$attrs" :style="{ width }">
+  <el-select
+    v-model="modelValue"
+    class="connection-select"
+    v-bind="$attrs"
+    :style="{ width }"
+    popper-class="connection-select__popper"
+  >
     <el-option v-for="conn in connections" :key="conn.id" :label="`${conn.name}@${conn.host}`" :value="conn.id">
-      <span style="float: left">{{ conn.name }}@{{ conn.host }}</span>
+      <span style="float: left"> {{ conn.name }}@{{ conn.host }} </span>
       <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 24px">
-        {{ getConnectionStatus(conn.id) }}
+        <el-tag size="mini" :type="getConnectionStatus(conn.id) ? '' : 'info'">
+          {{ getConnectionStatus(conn.id) ? $t('connections.connected') : $t('connections.noConnection') }}
+        </el-tag>
       </span>
     </el-option>
   </el-select>
@@ -34,13 +42,11 @@ export default class ConnectionSelect extends Vue {
     this.$emit('change', newVal)
   }
 
-  private getConnectionStatus(connectionId: string) {
+  private getConnectionStatus(connectionId: string): boolean {
     if (this.activeConnection[connectionId]) {
       return this.activeConnection[connectionId].client.connected
-        ? this.$tc('connections.connected')
-        : this.$tc('connections.noConnection')
     }
-    return this.$tc('connections.noConnection')
+    return false
   }
 
   private async loadConnections() {

diff --git a/web/src/assets/scss/element/element-reset.scss b/web/src/assets/scss/element/element-reset.scss
@@ -245,10 +245,16 @@
     border-top-color: var(--color-bg-messagebox);
   }
 }
+
+/* Select Dropdown Item */
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background: var(--color-bg-item);
 }
+.el-select-dropdown__item.selected {
+  font-weight: 500;
+}
+
 // Fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   padding-right: 0px !important;