Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-10 05:15: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 { validator } from '@felte/validator-zod'
import { IconNetwork, IconX } from '@tabler/icons-solidjs'
import { IconMenuOrder, IconNetwork, IconX } from '@tabler/icons-solidjs'
import type {
DragEventHandler,
Draggable,
@ -13,6 +13,7 @@ import {
SortableProvider,
closestCenter,
createSortable,
transformStyle,
useDragDropContext,
} from '@thisbeyond/solid-dnd'
import { uniq } from 'lodash'
@ -152,15 +153,23 @@ export const ConnectionsSettingsModal = (props: {
return (
<div
use:sortable
class="sortable"
ref={sortable.ref}
classList={{
'opacity-25': sortable.isActiveDraggable,
'transition-transform': !!state.active.draggable,
}}
style={transformStyle(sortable.transform)}
>
<div class="flex cursor-grab justify-between py-2">
<span class="select-none">{t(key)}</span>
<div class="flex justify-between py-2">
<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
type="checkbox"