Add hot keys to opening apps

package-lock.json

@@ -2461,6 +2461,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
+    "hotkeys-js": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.5.tgz",
+      "integrity": "sha512-beJJ2Y4J6XkSlXlLPOG29BRKxZx3bV0gVi3eUpYdjrecN1i25iqndM/+X1eIDPSeG0XdqSv7Ksek43j5tQrmPQ=="
+    },
     "html-minifier": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.3.2",
     "compression": "^1.7.1",
+    "hotkeys-js": "^3.8.5",
     "js-yaml": "^4.1.0",
     "marked": "^1.2.7",
     "node-sass": "^6.0.0",

src/components/Apps/index.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { onMount } from "svelte";
+  import hotkeys from "hotkeys-js";
   import Forum24 from "carbon-icons-svelte/lib/Forum24";
   import AlignBoxTopLeft24 from "carbon-icons-svelte/lib/AlignBoxTopLeft24";
   import SendAlt24 from "carbon-icons-svelte/lib/SendAlt24";
@@ -24,62 +26,28 @@
       selectedApp = appName;
     }
   }
+
+  onMount(() => {
+    hotkeys("ctrl+1,ctrl+2,ctrl+3,ctrl+4", function (event, handler) {
+      event.preventDefault();
+      switch (handler.key) {
+        case "ctrl+1":
+          handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT);
+          break;
+        case "ctrl+2":
+          handleAppClick(APPS_CONSTANTS.APPS.QANDA);
+          break;
+        case "ctrl+3":
+          handleAppClick(APPS_CONSTANTS.APPS.NOTES);
+          break;
+        case "ctrl+4":
+          handleAppClick(APPS_CONSTANTS.APPS.POLL);
+          break;
+      }
+    });
+  });
 </script>
 
-<div class="root">
-  <div class="apps">
-    <IconButton
-      title="Live Chat"
-      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
-    >
-      <SendAlt24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="QandA"
-      value={APPS_CONSTANTS.APPS.QANDA}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
-    >
-      <Forum24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Notes"
-      value={APPS_CONSTANTS.APPS.NOTES}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
-    >
-      <AlignBoxTopLeft24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Poll"
-      value={APPS_CONSTANTS.APPS.POLL}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
-    >
-      <ChartPie24 class="carbon-icon" />
-    </IconButton>
-  </div>
-
-  {#if !!selectedApp}
-    <div class="app">
-      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
-        <QandA {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
-        <LiveChat {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
-        <Poll {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
-        <Notes {handleClose} />
-      {/if}
-    </div>
-  {/if}
-</div>
-
 <style lang="scss">
   .root {
     height: 95vh;
@@ -106,3 +74,53 @@
     }
   }
 </style>
+
+<div class="root">
+  <div class="apps">
+    <IconButton
+      toolTipProps={{ title: 'Live Chat', hotkeys: ['Ctrl', '1'] }}
+      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}>
+      <SendAlt24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      toolTipProps={{ title: 'QandA', hotkeys: ['Ctrl', '2'] }}
+      value={APPS_CONSTANTS.APPS.QANDA}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}>
+      <Forum24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      toolTipProps={{ title: 'Notes', hotkeys: ['Ctrl', '3'] }}
+      value={APPS_CONSTANTS.APPS.NOTES}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}>
+      <AlignBoxTopLeft24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      toolTipProps={{ title: 'Poll', hotkeys: ['Ctrl', '4'] }}
+      value={APPS_CONSTANTS.APPS.POLL}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}>
+      <ChartPie24 class="carbon-icon" />
+    </IconButton>
+  </div>
+
+  {#if !!selectedApp}
+    <div class="app">
+      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
+        <QandA {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
+        <LiveChat {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
+        <Poll {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
+        <Notes {handleClose} />
+      {/if}
+    </div>
+  {/if}
+</div>

src/components/IconButton/index.svelte

@@ -4,11 +4,15 @@
   export let disabled = false;
   export let selected = false;
   export let value;
-  export let title;
+  export let toolTipProps = {
+    title: "",
+    hotkeys: [],
+  };
 
   function handleClick() {
     onClick(value);
   }
+  console.log("toolTipProps", toolTipProps);
 </script>
 
 <style lang="scss">
@@ -38,12 +42,11 @@
   }
 </style>
 
-<ToolTip title={title}>
+<ToolTip title={toolTipProps.title} hotkeys={toolTipProps.hotkeys}>
   <button
     class={`root ${selected && 'active'}`}
     {disabled}
     on:click={handleClick}>
     <slot />
   </button>
-
+</ToolTip>
-</ToolTip>

src/components/ToolTip/index.svelte

@@ -1,5 +1,6 @@
 <script>
   export let title;
+  export let hotkeys = [];
 </script>
 
 <style>
@@ -10,33 +11,54 @@
 
   .tooltip .tooltiptext {
     color: #fff;
-    padding: 4px 8px;
+    padding: 6px 8px;
     font-size: 0.625rem;
-    max-width: 300px;
+    /* max-width: 300px; */
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;
     font-weight: 500;
     line-height: 1.4em;
     border-radius: 4px;
-    background-color: rgba(97, 97, 97, 0.9);
+    background-color: #000;
     visibility: hidden;
     text-align: center;
+    font-weight: bold;
+    white-space: nowrap;
+    font-size: 13px;
 
     /* Position the tooltip */
     position: absolute;
     z-index: 1;
-    top: 100%;
+    /* top: 100%;
-    left: 0;
+    left: 0; */
+    top: 20%;
+    right: 100%;
+    margin-left: 5px;
   }
 
   .tooltip:hover .tooltiptext {
     visibility: visible;
   }
+
+  .shortcut span {
+    font-weight: lighter;
+    padding: 2px 4px;
+    background-color: rgba(97, 97, 97, 0.9);
+    border-radius: 2px;
+    margin-left: 5px;
+  }
 </style>
 
 {#if !!title}
   <div class="tooltip">
-    <span class="tooltiptext">{title}</span>
+    <span class="tooltiptext">
+      {title}
+      {#if Array.isArray(hotkeys) && hotkeys.length}
+        <span class="shortcut">
+          {#each hotkeys as hotkey}<span>{hotkey}</span>{/each}
+        </span>
+      {/if}
+    </span>
     <slot />
   </div>
 {:else}