UI: Keyboard label shortcut

ui/package.json

@@ -46,6 +46,8 @@
     "chart.js": "^3.7.1",
     "chartjs-adapter-moment": "^1.0.0",
     "core-js": "^3.21.1",
+    "custom-event-polyfill": "^1.0.7",
+    "element-matches": "^0.1.2",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",

ui/public/locales/en.json

@@ -1073,6 +1073,7 @@
 "label.key": "Key",
 "label.keyboard": "Keyboard language",
 "label.keyboardtype": "Keyboard type",
+"label.keyboard.show": "Show shortkeys [F]",
 "label.keypair": "SSH key pair",
 "label.keypairs": "SSH key pair(s)",
 "label.kubeconfig.cluster": "Kubernetes cluster config",

ui/src/components/header/Logo.vue

@@ -30,7 +30,11 @@
         width: $config.theme['@logo-width'],
         height: $config.theme['@logo-height']
       }"
-      :src="$config.logo" />
+      :src="$config.logo"
+      v-shortkey="['f']"
+      @shortkey="toggleShowShortkey"
+      class="logo-image" />
+    <span class="none" v-shortkey="['backspace']" @shortkey="goBack"></span>
   </div>
 </template>
 
@@ -56,6 +60,26 @@ export default {
       default: false,
       required: false
     }
+  },
+  methods: {
+    toggleShowShortkey () {
+      this.$store.dispatch('SetShowKeyboardShortkeys', !this.$store.getters.showshortkeys)
+    },
+    goBack () {
+      if (this.$route.path.includes('/')) {
+        this.$router.go(-1)
+      }
+    }
   }
 }
 </script>
+
+<style type="less" scoped>
+.logo-image {
+  display: inline-block;
+  vertical-align: middle;
+}
+.none {
+  display: none;
+}
+</style>

ui/src/components/header/UserMenu.vue

@@ -48,6 +48,11 @@
             <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
             <a-switch :checked="$store.getters.usebrowsertimezone" />
           </a-menu-item>
+          <a-menu-item class="user-menu-item" key="showshortkeys">
+            <EyeInvisibleOutlined class="user-menu-item-icon" />
+            <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.keyboard.show') }}</span>
+            <a-switch :checked="$store.getters.showshortkeys" />
+          </a-menu-item>
           <a-menu-item class="user-menu-item" key="document">
             <QuestionCircleOutlined class="user-menu-item-icon" />
             <span class="user-menu-item-name">{{ $t('label.help') }}</span>
@@ -118,6 +123,9 @@ export default {
     toggleUseBrowserTimezone () {
       this.$store.dispatch('SetUseBrowserTimezone', !this.$store.getters.usebrowsertimezone)
     },
+    toggleShowShortkey () {
+      this.$store.dispatch('SetShowKeyboardShortkeys', !this.$store.getters.showshortkeys)
+    },
     async getIcon () {
       await this.fetchResourceIcon(this.$store.getters.userInfo.id)
     },
@@ -145,6 +153,9 @@ export default {
         case 'timezone':
           this.toggleUseBrowserTimezone()
           break
+        case 'showshortkeys':
+          this.toggleShowShortkey()
+          break
         case 'document':
           window.open(this.$config.docBase, '_blank')
           break

ui/src/components/menu/SMenu.vue

@@ -31,29 +31,46 @@
             <render-icon
             v-if="item.meta.icon && typeof (item.meta.icon) === 'string'"
             :icon="item.meta.icon"
-            @click="() => { handleClickParentMenu(item) }" />
+            @click="() => { handleClickParentMenu(item) }"
+            v-shortkey="item.meta.shortKey"
+            @shortkey="handleMenuItemShortKey(item, '1')" />
             <span @click="() => { handleClickParentMenu(item) }">{{ $t(item.meta.title) }}</span>
+            <span class="show-shortkey" v-if="$store.getters.showshortkeys && item.meta.shortKey">
+              {{ getShortKeyLabel(item) }}
+            </span>
           </span>
         </template>
-        <template v-for="children in item.children" :key="children.path">
-          <a-menu-item :key="children.path" v-if="!children.hidden">
-            <router-link :to="{ name: children.name, target: children.meta.target || null }">
+        <template v-for="child in item.children" :key="child.path">
+          <a-menu-item :key="child.path" v-if="!child.hidden">
+            <router-link
+              :to="{ name: child.name, target: child.meta.target || null }"
+              v-shortkey="child.meta.shortKey"
+              @shortkey="handleMenuItemShortKey(child, '2')">
               <render-icon
-                v-if="children.meta.icon && typeof (children.meta.icon) === 'string'"
-                :icon="children.meta.icon" />
-              <render-icon v-else :svgIcon="children.meta.icon" />
-              <span>{{ $t(children.meta.title) }}</span>
+                v-if="child.meta.icon && typeof (child.meta.icon) === 'string'"
+                :icon="child.meta.icon" />
+              <render-icon v-else :svgIcon="child.meta.icon" />
+              <span>{{ $t(child.meta.title) }}</span>
+              <span class="show-shortkey" v-if="$store.getters.showshortkeys && child.meta.shortKey">
+                {{ getShortKeyLabel(child) }}
+              </span>
             </router-link>
           </a-menu-item>
         </template>
       </a-sub-menu>
       <a-menu-item v-else :key="item.path">
-        <router-link :to="{ name: item.name, target: item.meta.target || null }">
+        <router-link
+          :to="{ name: item.name, target: item.meta.target || null }"
+          v-shortkey="item.meta.shortKey"
+          @shortkey="handleMenuItemShortKey(item)">
           <render-icon
             v-if="item.meta.icon && typeof (item.meta.icon) === 'string'"
             :icon="item.meta.icon"
             @click="() => { handleClickParentMenu(item) }" />
           <span>{{ $t(item.meta.title) }}</span>
+          <span class="show-shortkey" v-if="$store.getters.showshortkeys && item.meta.shortKey">
+            {{ getShortKeyLabel(item) }}
+          </span>
         </router-link>
       </a-menu-item>
     </template>
@@ -149,21 +166,48 @@ export default {
         this.openKeys = openKeys
       }
     },
-    handleClickParentMenu (menuItem) {
-      if (this.cachedPath === menuItem.redirect) {
+    routeMenuItem (redirect, path) {
+      if (this.cachedPath === redirect) {
         return
       }
-      if (menuItem.redirect) {
-        this.cachedPath = menuItem.redirect
-        setTimeout(() => this.$router.push({ path: menuItem.path }))
+      if (redirect) {
+        this.cachedPath = redirect
+        setTimeout(() => this.$router.push({ path: path }))
+      }
+    },
+    getShortKeyLabel (item) {
+      if (item.meta.shortKey) {
+        return item.meta.shortKey.join('+')
+      }
+      return null
+    },
+    handleClickParentMenu (menuItem) {
+      this.routeMenuItem(menuItem.redirect, menuItem.path)
+    },
+    handleMenuItemShortKey (item, type) {
+      if (type === 1) {
+        this.handleClickParentMenu(item)
+      } else {
+        this.routeMenuItem(item.path, item.path)
       }
     }
   }
 }
 </script>
 
 <style>
-.sider .ant-menu-vertical .ant-menu-item {
-  margin-right: 0;
-}
+  .sider .ant-menu-vertical .ant-menu-item {
+    margin-right: 0;
+  }
+  .show-shortkey {
+    font-size: 10px;
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: 2px 6px 2px 6px;
+    border-radius: 4px;
+    color: #e9e9e9;
+    margin: 5px;
+    border: solid .1em transparent;
+    text-shadow: 2px 2px 2px rgba(255,255,255,0.1);
+    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 1px  rgba(0, 0, 0, 0.9);
+  }
 </style>

ui/src/components/menu/SideMenu.vue

@@ -18,7 +18,7 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="256px"
+    width="265px"
     collapsible
     v-model:collapsed="isCollapsed"
     :trigger="null">

ui/src/components/menu/index.js

@@ -15,5 +15,6 @@
 // specific language governing permissions and limitations
 // under the License.
 
+// import SMenu from './menu.vue'
 import SMenu from './SMenu.vue'
 export default SMenu