style(msg-left-item):modify topic color bar

emqx · Aug 1, 2023 · ffee2cf · ffee2cf
1 parent 14afc32
commit ffee2cf
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -16,33 +16,19 @@
       >
     </div>
     <div v-if="msgError" class="msg-tag">
-      <el-tag size="mini">
+      <el-tag type="warning" size="mini">
         <b style="color: #f56c6c">{{ msgError }}</b>
       </el-tag>
     </div>
     <span
-      v-if="!functionName && !schemaName && !msgError"
       class="topic-color"
       :style="{
         background: color,
-        height: 'calc(100% - 44px)',
-        top: '11px',
+        height: topicColorHeight,
+        top: topicColorTop,
       }"
     >
     </span>
-    <span
-      v-else
-      class="topic-color"
-      :style="{
-        background: color,
-        height:
-          ((functionName || schemaName) && !msgError) || (msgError && !schemaName && !functionName)
-            ? 'calc(100% - 62px)'
-            : 'calc(100% - 84px)',
-        top:
-          ((functionName || schemaName) && !msgError) || (msgError && !schemaName && !functionName) ? '32px' : '55px',
-      }"
-    ></span>
     <div ref="leftPayload" class="left-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="left-info">
         <span class="topic">Topic: {{ topic }}</span>
@@ -100,12 +86,34 @@ export default class MsgLeftItem extends Vue {
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
-  private hightlight: boolean = false
+  public hightlight: boolean = false
 
-  private customMenu(event: MouseEvent) {
+  public customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)
   }
 
+  get topicColorHeight() {
+    const hasFunctionOrSchema = this.functionName || this.schemaName
+    if (!hasFunctionOrSchema && !this.msgError) {
+      return 'calc(100% - 44px)'
+    } else if (hasFunctionOrSchema && !this.msgError) {
+      return 'calc(100% - 62px)'
+    } else {
+      return 'calc(100% - 84px)'
+    }
+  }
+
+  get topicColorTop() {
+    const hasFunctionOrSchema = this.functionName || this.schemaName
+    if (!hasFunctionOrSchema && !this.msgError) {
+      return '11px'
+    } else if (hasFunctionOrSchema && !this.msgError) {
+      return '32px'
+    } else {
+      return '55px'
+    }
+  }
+
   get functionName() {
     return this.meta ? JSON.parse(this.meta).functionName : null
   }