coracle/flotilla
1
6
Fork 24
Code Issues 34 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

feat(spaces): use drag-handle icon with smoother reorder easing

Browse Source
This commit is contained in:
Priyanshu Bharti
2026-04-12 19:31:35 +05:30
parent 70675353d1
commit cf5503c0a2
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/drag-handle.svg
+8
View File
@@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="6" r="1.5" fill="#000000"/>
<circle cx="15" cy="6" r="1.5" fill="#000000"/>
<circle cx="9" cy="12" r="1.5" fill="#000000"/>
<circle cx="15" cy="12" r="1.5" fill="#000000"/>
<circle cx="9" cy="18" r="1.5" fill="#000000"/>
<circle cx="15" cy="18" r="1.5" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

src/routes/spaces/+page.svelte
+12 -10
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import {onMount, tick} from "svelte"
import {flip} from "svelte/animate"
import {cubicOut} from "svelte/easing"
import {derived as _derived} from "svelte/store"
import {dec, insertAt, removeAt, sleep} from "@welshman/lib"
import type {RelayProfile} from "@welshman/util"
@@ -8,7 +9,7 @@
import {relays, createSearch} from "@welshman/app"
import {createScroller} from "@lib/html"
import {fly} from "@lib/transition"
import MenuDots from "@assets/icons/menu-dots-2.svg?dataurl"
import DragHandle from "@assets/icons/drag-handle.svg?dataurl"
import Widget from "@assets/icons/widget-4.svg?dataurl"
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -249,23 +250,24 @@
<Divider>Your spaces</Divider>
{#each filteredUserUrls as url (url)}
<div
animate:flip={{duration: 250}}
class="group flex w-full items-center gap-2"
class:opacity-60={draggedUrl === url}
animate:flip={{duration: 300, easing: cubicOut}}
class="transition-opacity duration-200 {draggedUrl === url ? 'opacity-50' : ''}"
draggable="true"
role="listitem"
ondragstart={e => onDragStart(e, url)}
ondragover={e => onDragOver(e, url)}
ondrop={e => onDrop(e, url)}
ondragend={onDragEnd}>
<div
class="flex cursor-grab p-1 opacity-100 sm:opacity-0 sm:transition-opacity sm:hover:text-base-content sm:group-hover:opacity-100">
<Icon icon={MenuDots} class="text-base-content/50" />
</div>
<Button
class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
class="group card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
onclick={() => openSpace(url)}>
<RelaySummary hideFavorites {url} />
<div class="flex w-full items-start gap-2">
<div
class="mt-4 flex cursor-grab p-1 text-base-content/30 transition-colors group-hover:text-base-content/60">
<Icon icon={DragHandle} />
</div>
<RelaySummary hideFavorites {url} />
</div>
{#if $notifications.has(makeSpacePath(url))}
<div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
{/if}