mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: custom table columns order for mobile (#885)
This commit is contained in:
parent
3cbcc897bc
commit
3fd6abb879
@ -6,7 +6,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"format": "prettier -w .",
|
||||
"lint": "eslint --fix .",
|
||||
"prepare": "husky",
|
||||
|
@ -1,6 +1,12 @@
|
||||
import { createForm } from '@felte/solid'
|
||||
import { validator } from '@felte/validator-zod'
|
||||
import { IconMenuOrder, IconNetwork, IconX } from '@tabler/icons-solidjs'
|
||||
import {
|
||||
IconArrowDown,
|
||||
IconArrowUp,
|
||||
IconMenuOrder,
|
||||
IconNetwork,
|
||||
IconX,
|
||||
} from '@tabler/icons-solidjs'
|
||||
import type {
|
||||
DragEventHandler,
|
||||
Draggable,
|
||||
@ -147,6 +153,29 @@ export const ConnectionsSettingsModal = (props: {
|
||||
}
|
||||
}
|
||||
|
||||
const moveElementInOrder = (
|
||||
key: CONNECTIONS_TABLE_ACCESSOR_KEY,
|
||||
direction: 'forward' | 'backward',
|
||||
) => {
|
||||
const arr = [...props.order]
|
||||
const length = arr.length
|
||||
const index = arr.indexOf(key)
|
||||
|
||||
if (index < 0 || index >= length) {
|
||||
return
|
||||
}
|
||||
|
||||
const newIndex = direction === 'forward' ? index + 1 : index - 1
|
||||
|
||||
if (newIndex < 0 || newIndex >= length) {
|
||||
return
|
||||
}
|
||||
|
||||
;[arr[index], arr[newIndex]] = [arr[newIndex], arr[index]]
|
||||
|
||||
props.onOrderChange(arr)
|
||||
}
|
||||
|
||||
const FormRow: Component<{
|
||||
key: CONNECTIONS_TABLE_ACCESSOR_KEY
|
||||
}> = ({ key }) => {
|
||||
@ -165,14 +194,24 @@ export const ConnectionsSettingsModal = (props: {
|
||||
<div class="flex justify-between py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
class="btn-ghost btn-sm cursor-grab"
|
||||
class="btn-ghost btn-sm hidden cursor-grab sm:inline-block"
|
||||
icon={<IconMenuOrder size={24} />}
|
||||
{...sortable.dragActivators}
|
||||
/>
|
||||
|
||||
<span>{t(key)}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
class="btn-circle btn-sm mx-2 inline-block sm:hidden"
|
||||
icon={<IconArrowUp width={30} size={24} />}
|
||||
onClick={() => moveElementInOrder(key, 'backward')}
|
||||
/>
|
||||
<Button
|
||||
class="btn-circle btn-sm mx-2 inline-block sm:hidden"
|
||||
icon={<IconArrowDown width={30} size={24} />}
|
||||
onClick={() => moveElementInOrder(key, 'forward')}
|
||||
/>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
@ -186,6 +225,7 @@ export const ConnectionsSettingsModal = (props: {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user