fix(publish): optimize publish options UI

emqx · Sep 14, 2023 · d8d6758 · d8d6758
1 parent 59f2099
commit d8d6758
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 34 deletions.
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
@@ -88,18 +88,18 @@
     </div>
     <div class="publish-header">
       <div class="publish-metadata">
-        <span class="publish-label">Payload: </span>
         <el-select class="payload-select" size="mini" v-model="payloadType">
-          <el-option v-for="(type, index) in payloadOptions" :key="index" :value="type"> </el-option>
+          <el-option-group :label="$t('connections.publishPayloadEncodedBy')">
+            <el-option v-for="(type, index) in payloadOptions" :key="index" :label="type" :value="type"> </el-option>
+          </el-option-group>
         </el-select>
-        <span class="publish-label">QoS: </span>
         <el-select class="qos-select" size="mini" v-model="msgRecord.qos">
-          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="qos" :value="qos">
+          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="`QoS ${qos}`" :value="qos">
             <span style="float: left">{{ qos }}</span>
             <span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
           </el-option>
         </el-select>
-        <el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
+        <el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
         <el-tooltip
           placement="top"
           :disabled="mqtt5PropsEnable"
@@ -683,8 +683,9 @@ export default class MsgPublish extends Vue {
   }
   .publish-metadata {
     background: var(--color-bg-normal);
-    padding: 0 16px;
+    padding: 0 13px;
     margin-top: 6px;
+    margin-bottom: 2px;
     .el-input__inner {
       padding: 4px 10px;
     }
@@ -697,10 +698,16 @@ export default class MsgPublish extends Vue {
       margin-right: 8px;
     }
     .qos-select {
-      width: 46px;
+      width: 76px;
     }
-    .retain-block {
+    .retain-checkbox {
       margin-left: 8px;
+      .el-checkbox__input {
+        line-height: 1px;
+      }
+      .el-checkbox__label {
+        padding-left: 8px;
+      }
     }
     .meta-block {
       margin-left: 6px;

diff --git a/src/lang/connections.ts b/src/lang/connections.ts
@@ -497,11 +497,18 @@ export default {
     hu: 'Fogadott üzenet',
   },
   receivedPayloadDecodedBy: {
-    zh: '接收到的 Payload 通过编码格式输出',
-    en: 'Received Payload is output by encoding format',
-    tr: 'Alınan Payload, kodlama biçimiyle çıkarılır',
-    ja: '受信したペイロードは、エンコード形式で出力されます',
-    hu: 'A fogadott Payload kódolási formátum szerint',
+    zh: '使用以下格式编码接收到的 Payload',
+    en: 'Format Received Payload by',
+    tr: 'Alınan Payload’ı şununla biçimlendir: ',
+    ja: '以下の方式で受信 Payload をフォーマット: ',
+    hu: 'Fogadott Payload formázása e szerint: ',
+  },
+  publishPayloadEncodedBy: {
+    zh: '使用以下格式编码要发布的 Payload',
+    en: 'Format Payload to Publish by',
+    tr: 'Yayınlamak için Payload’ı şununla biçimlendir: ',
+    ja: '以下の方式で公開用 Payload をフォーマット: ',
+    hu: 'A közzétételre szánt Payload formázása e szerint: ',
   },
   alias: {
     zh: '别名',

diff --git a/src/utils/element.ts b/src/utils/element.ts
@@ -27,7 +27,7 @@ import {
   Switch,
   Select,
   Option,
-  // OptionGroup,
+  OptionGroup,
   Button,
   // ButtonGroup,
   // Table,
@@ -100,7 +100,7 @@ export default (Vue: typeof _Vue) => {
   Vue.use(Switch)
   Vue.use(Select)
   Vue.use(Option)
-  // Vue.use(OptionGroup)
+  Vue.use(OptionGroup)
   Vue.use(Button)
   // Vue.use(ButtonGroup)
   // Vue.use(Table)

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -202,18 +202,11 @@
             </a>
           </span>
           <div class="message-type">
-            <el-tooltip
-              placement="top"
-              :effect="theme !== 'light' ? 'light' : 'dark'"
-              :open-delay="500"
-              :content="$t('connections.receivedPayloadDecodedBy')"
-            >
-              <a href="javascript:;" class="icon-tip">
-                <i class="el-icon-question"></i>
-              </a>
-            </el-tooltip>
-            <el-select class="received-type-select" size="small" v-model="receivedMsgType">
-              <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type"> </el-option>
+            <el-select class="received-type-select" size="mini" v-model="receivedMsgType">
+              <el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
+                <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type">
+                </el-option>
+              </el-option-group>
             </el-select>
             <MsgTypeTabs v-model="msgType" @change="handleMsgTypeChanged" />
           </div>
@@ -429,7 +422,7 @@ export default class ConnectionsDetail extends Vue {
   }
 
   private retryTimes = 0
-  private inputHeight = 160
+  private inputHeight = 180
   private msgBottom = 166
   private messageListHeight: number = 284
   private messageListMarginTop: number = 19
@@ -1933,8 +1926,8 @@ export default class ConnectionsDetail extends Vue {
         z-index: 1;
         transition: all 0.4s;
         .el-input .el-input__inner {
-          border: none;
-          color: var(--color-main-green);
+          // border: none;
+          // color: var(--color-main-green);
         }
         .subs-title {
           color: var(--color-text-title);
@@ -1954,8 +1947,11 @@ export default class ConnectionsDetail extends Vue {
         .message-type {
           @include flex-space-between;
           .received-type-select {
-            width: 95px;
-            margin-left: 245px;
+            width: 88px;
+            margin-left: 227px;
+            .el-input__inner {
+              padding: 4px 10px;
+            }
           }
           .icon-tip {
             position: absolute;
@@ -2016,4 +2012,11 @@ export default class ConnectionsDetail extends Vue {
     }
   }
 }
+.el-select-group__title {
+  padding-right: 20px;
+  color: var(--color-text-light) !important;
+  font-size: 13px;
+  height: 34px;
+  border-bottom: 1px solid var(--color-border-default);
+}
 </style>
diff --git a/web/src/assets/scss/element/element-reset.scss b/web/src/assets/scss/element/element-reset.scss
@@ -324,3 +324,11 @@
     }
   }
 }
+
+/* Select */
+.el-select-group__wrap {
+  .el-select-group__title {
+    padding: 0;
+    margin: 0 12px;
+  }
+}
diff --git a/web/src/components/MsgPublish.vue b/web/src/components/MsgPublish.vue
@@ -100,7 +100,7 @@
             <span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
           </el-option>
         </el-select>
-        <el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
+        <el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
         <el-tooltip
           placement="top"
           :disabled="mqtt5PropsEnable"
@@ -602,7 +602,7 @@ export default class MsgPublish extends Vue {
     .qos-select {
       width: 46px;
     }
-    .retain-block {
+    .retain-checkbox {
       margin-left: 8px;
     }
     .meta-block {