Merge pull request #157 from emqx/develop

Develop

Author: CrazyWisdom

main/getMenuTemplate.ts

@@ -68,6 +68,21 @@ const getMenuTemplate = (win: BrowserWindow): $TSFixed => {
               },
             ]
           : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
+        { type: 'separator' },
+        {
+          label: 'Send payload',
+          accelerator: 'CmdOrCtrl + Enter',
+          click: () => {
+            win.webContents.send('sendPayload')
+          },
+        },
+        {
+          label: 'Search by Topic',
+          accelerator: 'CmdOrCtrl + F',
+          click: () => {
+            win.webContents.send('searchByTopic')
+          },
+        },
       ],
     },
     {

main/updateChecker.ts

@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version = 'v1.2.1'
+const version = 'v1.2.2'
 const release = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl = 'https://github.com/emqx/MQTTX/releases/latest'
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",
@@ -21,7 +21,7 @@
     "axios": "^0.19.0",
     "chai-as-promised": "^7.1.1",
     "core-js": "^2.6.5",
-    "element-ui": "^2.9.1",
+    "element-ui": "^2.13.0",
     "fs-extra": "^8.1.0",
     "jump.js": "^1.0.2",
     "lodash-id": "^0.14.0",
@@ -54,7 +54,7 @@
     "electron": "^5.0.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",
-    "typescript": "^3.4.3",
+    "typescript": "^3.7.4",
     "vue-cli-plugin-electron-builder": "^1.4.4",
     "vue-template-compiler": "^2.6.10"
   },

public/app.ico

@@ -97,4 +97,5 @@ img {
 /* Titlebar */
 .titlebar {
   padding: 16px 0;
+  -webkit-app-region: drag;
 }

public/app.png

@@ -168,6 +168,13 @@
     border-bottom-color: var(--color-bg-messagebox);
   }
 }
+.el-popper[x-placement^="top"] .popper__arrow {
+  border-top-color: var(--color-border-default);
+
+  &:after {
+    border-top-color: var(--color-bg-messagebox);
+  }
+}
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background: var(--color-bg-item);
@@ -186,3 +193,20 @@
 .el-tooltip__popper.is-light {
   color: #616161;
 }
+
+/* Color picker */
+.el-color-picker__panel {
+  background: var(--color-bg-normal);
+  border-color: var(--color-border-default);
+}
+.el-color-dropdown__btn {
+  border-color: var(--color-border-default);
+  background: transparent;
+  color: var(--color-text-default);
+}
+
+/* Icon */
+.el-icon-refresh {
+  cursor: pointer;
+  color: var(--color-main-green);
+}

src/assets/images/brokers.png

@@ -3,7 +3,8 @@
     <el-input
       placeholder="Topic"
       v-model="msgRecord.topic"
-      @focus="handleInputFoucs">
+      @focus="handleInputFoucs"
+      @blur="handleInputBlur">
     </el-input>
     <div class="qos-retain">
       <span class="publish-label">QoS: </span>
@@ -20,7 +21,8 @@
       rows="3"
       placeholder="Payload"
       v-model="msgRecord.payload"
-      @focus="handleInputFoucs">
+      @focus="handleInputFoucs"
+      @blur="handleInputBlur">
     </el-input>
     <a
       href="javascript:;"
@@ -31,8 +33,10 @@
   </div>
 </template>
 
+
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
+import { ipcRenderer } from 'electron'
 import jump from 'jump.js'
 import { MessageModel } from '../views/connections/types'
 
@@ -47,13 +51,23 @@ export default class MsgPublish extends Vue {
     payload: JSON.stringify({ msg: 'hello' }, null, 2),
   }
 
-  private send(): void {
+  private send() {
     this.$emit('handleSend', this.msgRecord)
   }
 
-  private handleInputFoucs(): void {
+  private handleInputFoucs() {
+    ipcRenderer.on('sendPayload', () => {
+      this.send()
+    })
     jump(document.body.scrollHeight)
   }
+  private handleInputBlur() {
+    ipcRenderer.removeAllListeners('sendPayload')
+  }
+
+  private beforeDestroy() {
+    ipcRenderer.removeAllListeners('sendPayload')
+  }
 }
 </script>
 
@@ -109,6 +123,7 @@ export default class MsgPublish extends Vue {
     .el-textarea__inner {
       border: 0px;
       border-top: 1px solid var(--color-border-default);
+      border-radius: 0px;
       padding: 8px 0px;
       &:focus,
       &:hover {
@@ -125,7 +140,7 @@ export default class MsgPublish extends Vue {
     }
   }
   &.message {
-    height: 120px;
+    height: 125px;
   }
 }
 </style>

src/assets/images/mqttx-dark.png

@@ -1,14 +1,7 @@
 <template>
   <el-dialog
     class="my-dialog"
-    :append-to-body="true"
-    :show-close="false"
-    :center="true"
-    :visible.sync="showDialog"
-    :title="title"
-    :width="width"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
+    v-bind="$props"
     @open="open"
     @close="close">
 

src/assets/images/mqttx-light.png

@@ -28,6 +28,7 @@
             :effect="theme !== 'light' ? 'light' : 'dark'"
             :disabled="sub.topic.length < 25"
             :content="sub.topic"
+            :open-delay="500"
             placement="top">
             <span class="topic">
               {{ sub.topic }}
@@ -45,26 +46,56 @@
     <my-dialog
       :title="$t('connections.newSubscription')"
       :visible.sync="showDialog"
+      width="500px"
+      class="topic-dialog"
       @confirm="saveSubs"
       @close="resetSubs">
-      <el-form
-        ref="form"
-        :model="subRecord"
-        :rules="rules">
-        <el-form-item label="Topic" prop="topic">
-          <el-input v-model="subRecord.topic" placeholder="testtopic/#"></el-input>
-        </el-form-item>
-        <el-form-item label="QoS" prop="qos">
-          <el-select v-model="subRecord.qos">
-            <el-option
-              v-for="qos in qosOption"
-              :key="qos"
-              :label="qos"
-              :value="qos">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
+      <el-row :gutter="20">
+        <el-form
+          ref="form"
+          :model="subRecord"
+          :rules="rules">
+          <el-col :span="24">
+            <el-form-item label="Topic" prop="topic">
+              <el-input v-model="subRecord.topic" placeholder="testtopic/#" size="small">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="QoS" prop="qos">
+              <el-select v-model="subRecord.qos" size="small">
+                <el-option
+                  v-for="qos in qosOption"
+                  :key="qos"
+                  :label="qos"
+                  :value="qos">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('connections.color')">
+              <el-color-picker
+                v-model="topicColor"
+                size="mini"
+                color-format="hex"
+                :predefine="predefineColors">
+              </el-color-picker>
+              <el-input
+                v-model="topicColor"
+                size="small"
+                placeholder="#34C388">
+                <i
+                  slot="suffix"
+                  title="Refresh"
+                  class="el-icon-refresh"
+                  @click="setColor">
+                </i>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
     </my-dialog>
   </div>
 </template>
@@ -74,6 +105,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { updateConnection } from '@/utils/api/connection'
+import { defineColors, getRandomColor } from '@/utils/colors'
 import LeftPanel from '@/components/LeftPanel.vue'
 import MyDialog from '@/components/MyDialog.vue'
 import { ConnectionModel } from '../views/connections/types'
@@ -95,6 +127,7 @@ export default class SubscriptionsList extends Vue {
   @Getter('activeConnection') private activeConnection: $TSFixed
   @Getter('currentTheme') private theme!: Theme
 
+  private topicColor = ''
   private currentConnection: $TSFixed = {}
   private showDialog: boolean = false
   private subRecord: SubscriptionModel = {
@@ -115,35 +148,42 @@ export default class SubscriptionsList extends Vue {
     return this.$refs.form as VueForm
   }
 
+  get predefineColors(): string[] {
+    return defineColors
+  }
+
   @Watch('record')
   private handleRecordChanged(val: ConnectionModel) {
     this.getCurrentConnection(val.id as string)
   }
 
+  private setColor() {
+    this.topicColor = getRandomColor()
+  }
   private getBorderColor(): string {
     let $index: number = this.subsList.length
     const lastSubs: SubscriptionModel = this.subsList[$index - 1]
-    const colors = ['#34C388', '#6ECBEE', '#D08CF1', '#907AEF', '#EDB16E']
 
     if ($index === 0) {
-      return colors[0]
+      return this.predefineColors[0]
     }
-    const subIndex = colors.findIndex((color) => color === lastSubs.color)
-    if (colors[subIndex + 1]) {
+    const subIndex = this.predefineColors.findIndex((color) => color === lastSubs.color)
+    if (this.predefineColors[subIndex + 1]) {
       $index = subIndex + 1
     } else {
       $index = 0
     }
-    return colors[$index]
+    return this.predefineColors[$index]
   }
 
   private hideSubsList() {
     this.$emit('update:subsVisible', false)
     this.changeShowSubscriptions({ showSubscriptions: false })
   }
 
-  private openDialog(): void {
+  private openDialog() {
     this.showDialog = true
+    this.setColor()
   }
 
   private saveSubs(): void | boolean {
@@ -160,7 +200,7 @@ export default class SubscriptionsList extends Vue {
         return false
       }
       const { topic, qos } = this.subRecord
-      this.subRecord.color = this.getBorderColor()
+      this.subRecord.color = this.topicColor || this.getBorderColor()
       this.currentConnection.client.subscribe(
         topic,
         { qos },
@@ -226,12 +266,12 @@ export default class SubscriptionsList extends Vue {
     })
   }
 
-  private resetSubs(): void {
+  private resetSubs() {
     this.vueForm.clearValidate()
     this.vueForm.resetFields()
   }
 
-  private getCurrentConnection(id: string): void {
+  private getCurrentConnection(id: string) {
     const $activeConnection = this.activeConnection[id]
     const { clean } = this.record
     if ($activeConnection) {
@@ -303,8 +343,8 @@ export default class SubscriptionsList extends Vue {
         border-radius: 50%;
         background: var(--color-second-red);
         position: absolute;
-        right: -7px;
-        top: -7px;
+        right: -5px;
+        top: -5px;
         width: 18px;
         height: 18px;
         text-align: center;
@@ -321,4 +361,14 @@ export default class SubscriptionsList extends Vue {
     }
   }
 }
+.topic-dialog {
+  .el-dialog__body {
+    padding: 20px 20px 0 20px;
+    .el-color-picker {
+      position: absolute;
+      right: 0;
+      top: 6px;
+    }
+  }
+}
 </style>