gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-29 20:43:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

💅 Improve Popover styling and transitions

Browse Source 
- Update Popover component to include fading transition and updated styling
- Improve accessibility by updating aria labels, orientation, and class of element

[src/lib/components/Popover/Popover.svelte]
- Import `fade` and `expoOut` from `svelte/transition` and `svelte/easing` respectively
- Change the `slide` transition duration and easing
- Add a `fade` transition for the `out` transition
- Update the `aria` labels, orientation and class of the element
- Update the `style` of the element to include `bottom` and `left`
This commit is contained in:
Kiril Videlov 2023-03-03 11:58:47 +01:00
parent 42067ca8cd
commit e9e341e3b5
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/Popover/Popover.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
import { slide, fade } from 'svelte/transition';
import { expoOut } from 'svelte/easing';
let showPopover: boolean = false;
let anchor: HTMLButtonElement | undefined = undefined;
@ -50,7 +50,8 @@
aria-labelledby="Title"
aria-describedby="Description"
aria-orientation="vertical"
transition:slide={{ duration: 150, easing: cubicOut }}
in:slide={{ duration: 150, easing: expoOut }}
out:fade={{ duration: 100 }}
on:mouseup={() => (showPopover = false)}
class="wrapper z-[999] bg-zinc-800 border border-zinc-700 text-zinc-50 rounded shadow-2xl min-w-[180px] max-w-[512px]"
style="--popover-top: {`${bottom}px`}; --popover-left: {`${left}px`}"