Feature/#176 tooltips

Apps/frontend/package.json

@@ -29,12 +29,13 @@
     "prettier": "2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "sass": "^1.56.2",
-    "svelte": "^3.52.0",
+    "svelte": "^3.55.1",
     "svelte-toggle": "^3.1.0",
     "vite": "^3.2.0"
   },
   "dependencies": {
     "axios": "^1.2.1",
+    "sveltestrap": "^5.10.0",
     "webgl-plot": "^0.7.0"
   }
 }

Apps/frontend/src/App.svelte

@@ -8,6 +8,10 @@
     href="https://fonts.googleapis.com/icon?family=Material+Icons"
   />
   <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" />
+  <link
+    rel="stylesheet"
+    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+  />
 </svelte:head>
 <main data-cy="oscilloscope">
   <Layout />

Apps/frontend/src/components/DistributeOffsetButton.svelte

@@ -1,14 +1,18 @@
 <script>
   import { NUM_CHANNELS } from "../const";
   import { channelActivated, offsetAdjustment } from "../stores";
+  import { Tooltip } from "sveltestrap";
+  import { TOOLTIP_BUTTON_DISTRIBUTE } from "../labels";
 
   function calculateOffset() {
     // offset is calculated based on the number of channels between -1 and 1
     return 2 / ($channelActivated.filter(Boolean).length + 1);
   }
+  let button;
 </script>
 
 <button
+  bind:this={button}
   class="icon-button mui-icon--distribute"
   on:click={() => {
     let baseOffset = calculateOffset();
@@ -22,3 +26,6 @@
   }}
   data-cy="distribute-button"
 />
+<Tooltip target={button} placement="bottom">
+  {TOOLTIP_BUTTON_DISTRIBUTE}
+</Tooltip>

Apps/frontend/src/components/GNDButton.svelte

@@ -1,12 +1,17 @@
 <script>
+  import { Tooltip } from "sveltestrap";
+  import { TOOLTIP_BUTTON_GND } from "../labels";
+
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
   const handleClick = async (/** @type {boolean} */ down) => {
     dispatch("set-gnd", { down: down });
   };
+  let button;
 </script>
 
 <button
+  bind:this={button}
   class="icon-button mui-icon--drop-down"
   on:mousedown={async () => {
     handleClick(true);
@@ -16,3 +21,4 @@
   }}
   data-cy="gnd-button"
 />
+<Tooltip target={button} placement="bottom">{TOOLTIP_BUTTON_GND}</Tooltip>

Apps/frontend/src/components/OnOffButton.svelte

@@ -2,6 +2,11 @@
   import clsx from "clsx";
   import { createEventDispatcher } from "svelte";
   import { osciEnabled } from "../stores";
+  import { Tooltip } from "sveltestrap";
+  import {
+    TOOLTIP_BUTTON_OFFOFF_ON,
+    TOOLTIP_BUTTON_OFFOFF_OFF,
+  } from "../labels";
 
   const dispatch = createEventDispatcher();
 
@@ -13,9 +18,11 @@
   export const click = () => {
     handleClick();
   };
+  let button;
 </script>
 
 <button
+  bind:this={button}
   data-cy="on-off-button"
   class={clsx(
     { "icon-button": true },
@@ -24,3 +31,6 @@
   )}
   on:click={handleClick}
 />
+<Tooltip target={button} placement="bottom">
+  {$osciEnabled ? TOOLTIP_BUTTON_OFFOFF_OFF : TOOLTIP_BUTTON_OFFOFF_ON}
+</Tooltip>

Apps/frontend/src/components/ResetButton.svelte

@@ -1,16 +1,23 @@
 <script>
   import { createEventDispatcher } from "svelte";
+  import { Tooltip } from "sveltestrap";
+  import { TOOLTIP_BUTTON_RESET } from "../labels";
 
   const dispatch = createEventDispatcher();
   $: url = "../assets/mui_reset.svg";
 
   const handleClick = async () => {
     dispatch("reset", {});
   };
+  let button;
 </script>
 
 <button
+  bind:this={button}
   class="icon-button mui-icon--reset"
   on:click={handleClick}
   data-cy="reset-button"
 />
+<Tooltip target={button} placement="bottom">
+  {TOOLTIP_BUTTON_RESET}
+</Tooltip>

Apps/frontend/src/labels.js

@@ -8,6 +8,12 @@ export const LABEL_BUTTON_LOAD_CHANNEL_CONFIG = "Load";
 export const LABEL_BUTTON_UPDATE_CHANNEL_CONFIG = "Save";
 export const LABEL_BUTTON_CANCEL_CHANNEL_CONFIG = "Cancel";
 
+export const TOOLTIP_BUTTON_GND = "GND";
+export const TOOLTIP_BUTTON_DISTRIBUTE = "Distributes enabled channels vertically";
+export const TOOLTIP_BUTTON_RESET = "Cleans the canvas and stops plotting";
+export const TOOLTIP_BUTTON_OFFOFF_ON = "Turn on";
+export const TOOLTIP_BUTTON_OFFOFF_OFF = "Turn off";
+
 /* Log messages */
 export const ERR_MSG_COULD_NOT_RETRIEVE_CHANNEL_CONFIG =
   "Could not load channel config!";

Apps/frontend/src/views/ChannelConfigControlPanel.svelte

@@ -37,6 +37,7 @@
     id="managePresets"
     on:click={showPopup}
     data-cy="preset-config-open-popup"
-    >{LABEL_BUTTON_MANAGE_CHANNEL_CONFIG}</button
   >
+    {LABEL_BUTTON_MANAGE_CHANNEL_CONFIG}
+  </button>
 </div>

Apps/frontend/src/views/ChannelConfigPopup.svelte

@@ -57,9 +57,9 @@
         </option>
       {/each}
     </select>
-    <button id="getChannelConfig" on:click={loadChannelConfigById}
-      >{LABEL_BUTTON_LOAD_CHANNEL_CONFIG}</button
-    >
+    <button id="getChannelConfig" on:click={loadChannelConfigById}>
+      {LABEL_BUTTON_LOAD_CHANNEL_CONFIG}
+    </button>
   </div>
   <div style="margin-left: auto;">
     <h3>{LABEL_HEADER_CREATE_CHANNEL_CONFIG}</h3>
@@ -69,12 +69,12 @@
       bind:value={presetName}
       on:change={handleSaveButton}
     />
-    <button id="storeChannelConfig" on:click={storeChannelConfig} disabled
-      >{LABEL_BUTTON_UPDATE_CHANNEL_CONFIG}</button
-    >
+    <button id="storeChannelConfig" on:click={storeChannelConfig} disabled>
+      {LABEL_BUTTON_UPDATE_CHANNEL_CONFIG}
+    </button>
   </div>
   <br />
-  <button id="cancelChannelConfig" on:click={() => ($presetPopupOpen = false)}
-    >{LABEL_BUTTON_CANCEL_CHANNEL_CONFIG}</button
-  >
+  <button id="cancelChannelConfig" on:click={() => ($presetPopupOpen = false)}>
+    {LABEL_BUTTON_CANCEL_CHANNEL_CONFIG}
+  </button>
 </div>