new menu arrangement and search connections

Omniaevo · Sep 24, 2024 · 984112e · 984112e
1 parent ee8659b
commit 984112e
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 45 deletions.
diff --git a/src/background.js b/src/background.js
@@ -117,14 +117,14 @@ let menuTemplate = (page = pages.HOME) => [
         label: "Copy",
         role: "copy",
       },
-      {
-        label: "Paste",
-        role: "paste",
-      },
       {
         label: "Cut",
         role: "cut",
       },
+      {
+        label: "Paste",
+        role: "paste",
+      },
       ...(page === pages.HOME && !isMac
         ? [
             {
@@ -141,11 +141,13 @@ let menuTemplate = (page = pages.HOME) => [
             },
           ]
         : []),
-      ...(page === pages.VIEWER
-        ? [
-            {
-              type: "separator",
-            },
+    ],
+  },
+  ...(page === pages.VIEWER
+    ? [
+        {
+          label: "Tools",
+          submenu: [
             {
               label: "Toggle search",
               accelerator: "CommandOrControl+F",
@@ -155,10 +157,19 @@ let menuTemplate = (page = pages.HOME) => [
                 }
               },
             },
-          ]
-        : []),
-    ],
-  },
+            {
+              label: "Toggle logging",
+              accelerator: "CommandOrControl+Shift+N",
+              click: () => {
+                if (win != undefined && win.webContents != undefined) {
+                  win.webContents.send("notificationPressed");
+                }
+              },
+            },
+          ],
+        },
+      ]
+    : []),
   ...(!isMac
     ? [
         {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -157,6 +157,12 @@
               {{ isMacOs ? "Cmd" : "Ctrl" }} + F
             </v-list-item-action-text>
           </v-list-item>
+          <v-list-item link>
+            <v-list-item-content>Notifications and logging</v-list-item-content>
+            <v-list-item-action-text>
+              {{ isMacOs ? "Cmd" : "Ctrl" }} + Shift + N
+            </v-list-item-action-text>
+          </v-list-item>
         </v-list>
       </v-list>
 
@@ -188,31 +194,44 @@
 
     <v-card class="card-width">
       <v-toolbar color="primary" dark flat text>
-        <v-toolbar-title>MQTT Connection</v-toolbar-title>
+        <v-toolbar-title>MQTT Connections</v-toolbar-title>
         <v-spacer />
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on:click="addTmpConnection"
-              v-on="on"
-              class="me-2"
-              fab
-              light
-              small
-            >
-              <v-icon color="primary">mdi-plus</v-icon>
-            </v-btn>
-          </template>
-          <span>New connection</span>
-        </v-tooltip>
+        <div class="d-flex align-center">
+          <v-text-field
+            v-model="searchConnection"
+            class="pe-4"
+            label="Search connections"
+            color="white"
+            clearable
+            dense
+            hide-details
+            outlined
+          />
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                v-bind="attrs"
+                v-on:click="addTmpConnection"
+                v-on="on"
+                class="me-2"
+                fab
+                light
+                small
+              >
+                <v-icon color="primary">mdi-plus</v-icon>
+              </v-btn>
+            </template>
+            <span>New connection</span>
+          </v-tooltip>
+        </div>
       </v-toolbar>
 
       <div v-bind:class="'tab-no-overflow-' + outline" row>
         <div class="tab-scroll pe-5">
           <v-tabs v-model="tabId" class="tab-width" vertical>
             <v-tab
               v-for="(connection, i) in connectionsAvailable"
+              v-show="filteredConnectionIDs.includes(connection.id)"
               v-bind:key="'tab-' + i"
             >
               <div
@@ -372,6 +391,7 @@ export default {
     deleteIndex: -1,
     settingsDrawer: false,
     deleteDialog: false,
+    searchConnection: undefined,
     colors: [
       { text: "Punchy Pink", value: { light: "#E91E63", dark: "#EC407A" } },
       { text: "Hipster Purple", value: { light: "#9C27B0", dark: "#AB47BC" } },
@@ -393,6 +413,15 @@ export default {
     version() {
       return process.env.VUE_APP_VERSION;
     },
+    filteredConnectionIDs() {
+      return this.connectionsAvailable
+        .filter(
+          (c) =>
+            !this.searchConnection ||
+            c.name.toLowerCase().includes(this.searchConnection.toLowerCase())
+        )
+        .map((c) => c.id);
+    },
     selectedTheme: {
       get() {
         return this.$store.getters.getTheme;

diff --git a/src/views/MqttViewer.vue b/src/views/MqttViewer.vue
@@ -116,21 +116,6 @@
         </v-text-field>
       </v-slide-y-transition>
       <v-spacer />
-      <div>
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on:click="notifySettings = true"
-              v-on="on"
-              icon
-            >
-              <v-icon>mdi-message-badge-outline</v-icon>
-            </v-btn>
-          </template>
-          <span>Notifications and logging</span>
-        </v-tooltip>
-      </div>
       <div v-if="selectedId !== -1" center-vertical class="ms-2">
         <v-tooltip bottom>
           <template v-slot:activator="{ on, attrs }">
@@ -889,6 +874,7 @@ export default {
 
     ipcRenderer.send("enterViewerPage");
     ipcRenderer.on("searchPressed", this.toggleSearchField);
+    ipcRenderer.on("notificationPressed", this.toggleNotificationsDialog);
   },
 
   mounted() {
@@ -902,6 +888,11 @@ export default {
   beforeDestroy() {
     this.messageLogger?.stopLogging();
     ipcRenderer.removeListener("searchPressed", this.toggleSearchField);
+    // eslint-disable-next-line prettier/prettier
+    ipcRenderer.removeListener(
+      "notificationPressed",
+      this.toggleNotificationsDialog
+    );
   },
 
   methods: {
@@ -915,6 +906,9 @@ export default {
         else this.$refs.searchField.focus();
       });
     },
+    toggleNotificationsDialog() {
+      this.notifySettings = !this.notifySettings;
+    },
     disconnectFromMqtt(msg = undefined) {
       this.$connection.disconnect(() => {
         this.connectionState =