feat: hovering the mouse can change the active element

immich-app · Jun 15, 2024 · 08426e1 · 08426e1
1 parent bbf8ab5
commit 08426e1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 14 deletions.
diff --git a/web/src/lib/actions/context-menu-navigation.ts b/web/src/lib/actions/context-menu-navigation.ts
@@ -11,10 +11,6 @@ interface Options {
    * The id of the currently selected element.
    */
   selectedId: string | undefined;
-  /**
-   * A class name to add to the selected element, if any.
-   */
-  selectedClass?: string;
   /**
    * A function that is called when the selection changes.
    */

diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
@@ -5,7 +5,6 @@
   import { focusOutside } from '$lib/actions/focus-outside';
   import { generateId } from '$lib/utils/generate-id';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { selectedColor } from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
@@ -89,7 +88,6 @@
     use:contextMenuNavigation={{
       container: menuContainer,
       selectedId: $selectedIdStore,
-      selectedClass: `!${selectedColor}`,
       openDropdown,
       closeDropdown,
       selectionChanged: (node) => ($selectedIdStore = node?.id),

diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-  export const selectedColor = 'bg-gray-200';
-</script>
-
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
@@ -27,11 +23,14 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   {id}
   on:click={handleClick}
-  class="w-full p-4 text-left text-sm font-medium text-immich-fg hover:{selectedColor} focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
-  class:bg-slate-200={isActive}
+  on:mouseover={() => ($selectedIdStore = id)}
+  on:mouseleave={() => ($selectedIdStore = undefined)}
+  class="w-full p-4 text-left text-sm font-medium text-immich-fg focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
+  class:bg-slate-300={isActive}
   class:bg-slate-100={!isActive}
   role="menuitem"
 >

diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
@@ -3,7 +3,6 @@
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import { shortcuts } from '$lib/actions/shortcut';
   import { generateId } from '$lib/utils/generate-id';
-  import { selectedColor } from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
@@ -86,7 +85,6 @@
       use:contextMenuNavigation={{
         container: contextMenuElement,
         selectedId: $selectedIdStore,
-        selectedClass: `!${selectedColor}`,
         closeDropdown: closeContextMenu,
         selectionChanged: (node) => ($selectedIdStore = node?.id),
       }}