Merge branch 'main' into playwright_arduino

leaphy-robotics · May 29, 2024 · 3289d91 · 3289d91
2 parents cfc7ca5 + 08ccc4f
commit 3289d91
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/lib/components/ui/SideButton.svelte b/src/lib/components/ui/SideButton.svelte
@@ -1,20 +1,43 @@
 <script lang="ts">
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import Fa from "svelte-fa";
+import { _ } from "svelte-i18n";
 
 interface Props {
 	icon: IconDefinition;
+	action: string;
 	onclick: () => void;
 }
-const { icon, onclick }: Props = $props();
+const { icon, action, onclick }: Props = $props();
 </script>
 
 <button class="side" {onclick}>
+    <div class="tooltip">{$_(action)}</div>
     <Fa {icon} />
 </button>
 
 <style>
+    .tooltip {
+        position: absolute;
+        right: 100%;
+        margin-right: 15px;
+        background: var(--secondary);
+        color: var(--on-secondary);
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 14px;
+        pointer-events: none;
+        filter: opacity(0);
+        transition: .3s ease;
+        width: 100px;
+    }
+
+    .side:hover .tooltip {
+        filter: opacity(1);
+    }
+
     .side {
+        position: relative;
         cursor: pointer;
         font-size: 20px;
         height: 66px;

diff --git a/src/lib/components/workspace/Workspace.svelte b/src/lib/components/workspace/Workspace.svelte
@@ -34,13 +34,13 @@ function openCode() {
 
 {#snippet actions()}
     {#if $mode === Mode.BLOCKS}
-        <SideButton icon={faCode} onclick={openCode} />
+        <SideButton icon={faCode} action="CODE" onclick={openCode} />
     {/if}
     {#if $mode !== Mode.PYTHON}
-        <SideButton icon={faSquarePollHorizontal} onclick={openSerial} />
+        <SideButton icon={faSquarePollHorizontal} action="SERIAL_OUTPUT" onclick={openSerial} />
     {/if}
     {#if $mode === Mode.ADVANCED}
-        <SideButton icon={faBook} onclick={openLibraryManager} />
+        <SideButton icon={faBook} action="LIBRARY_MANAGER" onclick={openLibraryManager} />
     {/if}
 {/snippet}