ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add delay mouseleave effect to select-expand (#413)

Browse source 
* #408 add delay mouseleave effect to select-expand

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-07 12:07:25 +08:00 committed by GitHub
parent 4192d35268
commit 833b0d2012
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/desktop/src/components/popout-menu/popout-menu.svelte
View file

@ -32,7 +32,7 @@
navStore.sideNavOpen.set(false);
}
</script>
<nav class="w-full p-2 text-sm" use:mouseLeaveDelay on:leave_delay={() => hidePopup()}>
<nav class="w-full p-2 text-sm" use:mouseLeaveDelay={2000} on:leave_delay={() => hidePopup()}>
{#if $user}
<section class="flex items-center justify-between p-1 hover:bg-gray hover:border hover:border-white rounded-sm hover:bg-opacity-90 hover:text-black">
<div class="text-white">@{$user?.login}</div>

3
modules/ui/src/lib/mouse-leave-delay.ts
View file

@ -1,6 +1,5 @@
export default function mouseLeaveDelay(element: HTMLElement) {
export default function mouseLeaveDelay(element: HTMLElement, timeout = 600) {
let isOut = false;
const timeout = 600;
const handleEnter = () => {
isOut = false;

26
modules/ui/src/select-expand/select-expand.svelte
View file

@ -1,10 +1,24 @@
<script lang="ts">
import mouseLeaveDelay from "../lib/mouse-leave-delay";
export let options: { label: string; value: string; selected?: boolean }[] = [];
export let label = "";
export let value = "";
export let expanded = false;
const unexpand = () => {
console.log("unexpand");
expanded = false;
};
</script>
<section class="cursor-pointer">
<section
class="cursor-pointer"
class:expanded
use:mouseLeaveDelay={3000}
on:mouseenter={() => (expanded = true)}
on:leave_delay={() => unexpand()}
>
<header
class="mt-2 flex h-8 justify-between rounded-sm px-1 hover:border hover:bg-gray focus:bg-secondary"
>
@ -39,17 +53,17 @@
overflow: hidden;
}
section:hover {
section.expanded {
height: auto;
}
section:hover header {
section.expanded header {
margin-bottom: 10px;
}
section:hover hr {
section.expanded hr {
display: block;
}
section:hover .dropdown {
section.expanded .dropdown {
max-height: 100px;
overflow-y: scroll;
margin-bottom: 10px;
@ -72,7 +86,7 @@
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb.expanded {
background: white;
}