UI: Keyboard label shortcut

ui/package.json

@@ -43,6 +43,8 @@
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",
     "core-js": "^3.6.5",
+    "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

@@ -1239,6 +1239,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

@@ -24,7 +24,10 @@
         height: $config.theme['@logo-height']
       }"
       :src="$config.logo"
+      v-shortkey="['f']"
+      @shortkey="toggleShowShortkey"
       class="logo-image" />
+    <span class="none" v-shortkey="['backspace']" @shortkey="goBack"></span>
   </div>
 </template>
 
@@ -45,6 +48,16 @@ export default {
       default: true,
       required: false
     }
+  },
+  methods: {
+    toggleShowShortkey () {
+      this.$store.dispatch('SetShowKeyboardShortkeys', !this.$store.getters.showshortkeys)
+    },
+    goBack () {
+      if (this.$route.path.includes('/')) {
+        this.$router.go(-1)
+      }
+    }
   }
 }
 </script>
@@ -67,5 +80,8 @@ export default {
   display: inline-block;
   vertical-align: middle;
 }
+.none {
+  display: none;
+}
 
 </style>

ui/src/components/header/UserMenu.vue

@@ -17,7 +17,6 @@
 
 <template>
   <div class="user-menu">
-
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -43,18 +42,25 @@
           <a @click="toggleUseBrowserTimezone">
             <a-icon class="user-menu-item-icon" type="clock-circle"/>
             <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
-            <a-switch
-              :checked="$store.getters.usebrowsertimezone" />
+            <a-switch :checked="$store.getters.usebrowsertimezone"/>
+          </a>
+        </a-menu-item>
+        <a-menu-item class="user-menu-item" key="2">
+          <a @click="toggleShowShortkey">
+            <a-icon v-if="$store.getters.showshortkeys" class="user-menu-item-icon" type="eye"/>
+            <a-icon v-else class="user-menu-item-icon" type="eye-invisible"/>
+            <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.keyboard.show') }}</span>
+            <a-switch :checked="$store.getters.showshortkeys"/>
           </a>
         </a-menu-item>
-        <a-menu-item class="user-menu-item" key="2" disabled>
+        <a-menu-item class="user-menu-item" key="3" disabled>
           <a :href="$config.docBase" target="_blank">
             <a-icon class="user-menu-item-icon" type="question-circle-o"></a-icon>
             <span class="user-menu-item-name">{{ $t('label.help') }}</span>
           </a>
         </a-menu-item>
         <a-menu-divider/>
-        <a-menu-item class="user-menu-item" key="3">
+        <a-menu-item class="user-menu-item" key="4">
           <a href="javascript:;" @click="handleLogout">
             <a-icon class="user-menu-item-icon" type="logout"/>
             <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
@@ -116,6 +122,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)
     },

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="collapsible"
     v-model="collapsed"
     :trigger="null">

ui/src/components/menu/index.js

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

ui/src/components/menu/menu.js → ui/src/components/menu/menu.vue

@@ -14,6 +14,7 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
+<script>
 
 import Menu from 'ant-design-vue/es/menu'
 import Icon from 'ant-design-vue/es/icon'
@@ -122,11 +123,41 @@ export default {
         to: { name: menu.name },
         target: target
       }
+      const on = {
+        shortkey: () => {
+          const show = this.$store.getters.showshortkeys
+          if (this.cachedPath === menu.path) {
+            return
+          }
+
+          if (menu.path) {
+            this.cachedPath = menu.path
+            setTimeout(() => {
+              this.$store.dispatch('SetShowKeyboardShortkeys', false)
+              this.$router.push({ path: menu.path })
+            })
+          }
+          setTimeout(() => this.$store.dispatch('SetShowKeyboardShortkeys', show), 500)
+        }
+      }
       return (
-        <Item {...{ key: menu.path }}>
+        <Item vShortkey={menu.meta.shortKey} {...{ key: menu.path, on: on }} >
           <router-link {...{ props }}>
             {this.renderIcon(menu.meta.icon, menu)}
             <span>{this.$t(menu.meta.title)}</span>
+            {
+              this.$store.getters.showshortkeys ? (
+                menu.meta.shortKey ? (
+                  <span class="show-shortkey">
+                    {menu.meta.shortKey[0]}{menu.meta.shortKey[1] ? '+' + menu.meta.shortKey[1] : ''}
+                  </span>
+                ) : (
+                  ''
+                )
+              ) : (
+                ''
+              )
+            }
           </router-link>
         </Item>
       )
@@ -136,6 +167,9 @@ export default {
       const on = {
         click: () => {
           this.handleClickParentMenu(menu)
+        },
+        shortkey: () => {
+          this.handleClickParentMenu(menu)
         }
       }
       if (!menu.hideChildrenInMenu) {
@@ -145,7 +179,20 @@ export default {
         <SubMenu {...{ key: menu.path }}>
           <span slot="title">
             {this.renderIcon(menu.meta.icon, menu)}
-            <span {...{ on: on }}>{this.$t(menu.meta.title)}</span>
+            <span vShortkey={menu.meta.shortKey} {...{ on: on }}>{this.$t(menu.meta.title)}</span>
+            {
+              this.$store.getters.showshortkeys ? (
+                menu.meta.shortKey ? (
+                  <span class="show-shortkey">
+                    {menu.meta.shortKey[0]}{menu.meta.shortKey[1] ? '+' + menu.meta.shortKey[1] : ''}
+                  </span>
+                ) : (
+                  ''
+                )
+              ) : (
+                ''
+              )
+            }
           </span>
           {itemArr}
         </SubMenu>
@@ -190,7 +237,6 @@ export default {
       },
       openChange: this.onOpenChange
     }
-
     const menuTree = menu.map(item => {
       if (item.hidden) {
         return null
@@ -199,9 +245,26 @@ export default {
     })
     // {...{ props, on: on }}
     return (
-      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
+      <Menu vModel={this.selectedKeys} {...{ props, on }} >
         {menuTree}
       </Menu>
     )
   }
 }
+</script>
+<style scoped>
+  .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);
+  }
+  .none {
+    display: none;
+  }
+</style>

ui/src/components/page/GlobalHeader.vue

@@ -127,6 +127,7 @@ export default {
     },
     toggle () {
       this.$emit('toggle')
+      this.$store.dispatch('SetShowKeyboardShortkeys', false)
     }
   }
 }

ui/src/components/view/ActionButton.vue

@@ -46,12 +46,15 @@
           :shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
           style="margin-left: 5px"
           :size="size"
+          v-shortkey="action.shortKey"
+          @shortkey="execAction(action)"
           @click="execAction(action)">
           <span v-if="!dataView && action.icon === 'plus'">
             {{ $t(action.label) }}
           </span>
           <a-icon v-if="(typeof action.icon === 'string')" :type="action.icon" />
           <font-awesome-icon v-else :icon="action.icon" />
+          <span class="view-shortkey" v-if="$store.getters.showshortkeys">{{ action.shortKey.length ? action.shortKey[0] : '' }}</span>
         </a-button>
       </a-badge>
       <a-button
@@ -65,12 +68,15 @@
         :shape="!dataView && ['plus', 'user-add'].includes(action.icon) ? 'round' : 'circle'"
         style="margin-left: 5px"
         :size="size"
+        v-shortkey="action.shortKey"
+        @shortkey="execAction(action)"
         @click="execAction(action)">
         <span v-if="!dataView && ['plus', 'user-add'].includes(action.icon)">
           {{ $t(action.label) }}
         </span>
         <a-icon v-if="(typeof action.icon === 'string')" :type="action.icon" />
         <font-awesome-icon v-else :icon="action.icon" />
+        <span class="view-shortkey" v-if="$store.getters.showshortkeys">{{ action.shortKey.length ? action.shortKey[0] : '' }}</span>
       </a-button>
     </a-tooltip>
   </span>
@@ -200,7 +206,18 @@ export default {
 .button-action-badge {
   margin-left: 5px;
 }
-
+.view-shortkey {
+ position: absolute;
+ bottom: 20px;
+ right: 5px;
+ font-size: 10px;
+ background-color: rgba(0, 0, 0, 0.9);
+ padding: 2px 6px 2px 6px;
+ border-radius: 4px;
+ color: #e9e9e9;
+ margin: 5px;
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5), -1px 0px 3px  rgba(0, 0, 0, 0.9);
+}
 /deep/.button-action-badge .ant-badge-count {
   right: 10px;
   z-index: 8;

ui/src/config/router.js

@@ -46,6 +46,7 @@ function generateRouterMap (section) {
     meta: {
       title: section.title,
       icon: section.icon,
+      shortKey: section.shortKey,
       docHelp: Vue.prototype.$applyDocHelpMappings(section.docHelp),
       searchFilters: section.searchFilters,
       related: section.related
@@ -70,6 +71,7 @@ function generateRouterMap (section) {
           title: child.title,
           name: child.name,
           icon: child.icon,
+          shortKey: child.shortKey,
           docHelp: Vue.prototype.$applyDocHelpMappings(child.docHelp),
           permission: child.permission,
           resourceType: child.resourceType,
@@ -92,6 +94,7 @@ function generateRouterMap (section) {
               title: child.title,
               name: child.name,
               icon: child.icon,
+              shortKey: child.shortKey,
               docHelp: Vue.prototype.$applyDocHelpMappings(child.docHelp),
               permission: child.permission,
               resourceType: child.resourceType,
@@ -147,6 +150,7 @@ function generateRouterMap (section) {
         title: section.title,
         name: section.name,
         icon: section.icon,
+        shortKey: section.shortKey,
         docHelp: Vue.prototype.$applyDocHelpMappings(section.docHelp),
         hidden: section.hidden,
         permission: section.permission,
@@ -199,6 +203,7 @@ export function asyncRouterMap () {
         meta: {
           title: 'label.dashboard',
           icon: 'dashboard',
+          shortKey: ['shift', 'd'],
           tabs: [
             {
               name: 'dashboard',

ui/src/config/section/account.js

@@ -21,6 +21,7 @@ export default {
   name: 'account',
   title: 'label.accounts',
   icon: 'team',
+  shortKey: ['shift', 'a'],
   docHelp: 'adminguide/accounts.html',
   permission: ['listAccounts'],
   columns: ['name', 'state', 'rolename', 'roletype', 'domainpath'],