Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(connection): drag handle, closes #320

Browse Source
This commit is contained in:
kunish 2023-10-19 23:42:33 +08:00
parent 22de2b95d6
commit dc8fddb08a
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ConnectionsSettingsModal.tsx
View File

@ -1,6 +1,6 @@
import { createForm } from '@felte/solid' import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-zod' import { validator } from '@felte/validator-zod'
import { IconNetwork, IconX } from '@tabler/icons-solidjs' import { IconMenuOrder, IconNetwork, IconX } from '@tabler/icons-solidjs'
import type { import type {
DragEventHandler, DragEventHandler,
Draggable, Draggable,
@ -13,6 +13,7 @@ import {
SortableProvider, SortableProvider,
closestCenter, closestCenter,
createSortable, createSortable,
transformStyle,
useDragDropContext, useDragDropContext,
} from '@thisbeyond/solid-dnd' } from '@thisbeyond/solid-dnd'
import { uniq } from 'lodash' import { uniq } from 'lodash'
@ -152,15 +153,23 @@ export const ConnectionsSettingsModal = (props: {
return ( return (
<div <div
use:sortable ref={sortable.ref}
class="sortable"
classList={{ classList={{
'opacity-25': sortable.isActiveDraggable, 'opacity-25': sortable.isActiveDraggable,
'transition-transform': !!state.active.draggable, 'transition-transform': !!state.active.draggable,
}} }}
style={transformStyle(sortable.transform)}
> >
<div class="flex cursor-grab justify-between py-2"> <div class="flex justify-between py-2">
<span class="select-none">{t(key)}</span> <div class="flex items-center gap-2">
<Button
class="btn-ghost btn-sm cursor-grab"
icon={<IconMenuOrder size={24} />}
{...sortable.dragActivators}
/>
<span>{t(key)}</span>
</div>
<input <input
type="checkbox" type="checkbox"