mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15: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",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"dev": "vite",
|
"dev": "vite --host",
|
||||||
"format": "prettier -w .",
|
"format": "prettier -w .",
|
||||||
"lint": "eslint --fix .",
|
"lint": "eslint --fix .",
|
||||||
"prepare": "husky",
|
"prepare": "husky",
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
import { createForm } from '@felte/solid'
|
import { createForm } from '@felte/solid'
|
||||||
import { validator } from '@felte/validator-zod'
|
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 {
|
import type {
|
||||||
DragEventHandler,
|
DragEventHandler,
|
||||||
Draggable,
|
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<{
|
const FormRow: Component<{
|
||||||
key: CONNECTIONS_TABLE_ACCESSOR_KEY
|
key: CONNECTIONS_TABLE_ACCESSOR_KEY
|
||||||
}> = ({ key }) => {
|
}> = ({ key }) => {
|
||||||
@ -165,25 +194,36 @@ export const ConnectionsSettingsModal = (props: {
|
|||||||
<div class="flex justify-between py-2">
|
<div class="flex justify-between py-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
class="btn-ghost btn-sm cursor-grab"
|
class="btn-ghost btn-sm hidden cursor-grab sm:inline-block"
|
||||||
icon={<IconMenuOrder size={24} />}
|
icon={<IconMenuOrder size={24} />}
|
||||||
{...sortable.dragActivators}
|
{...sortable.dragActivators}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<span>{t(key)}</span>
|
<span>{t(key)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<input
|
<Button
|
||||||
type="checkbox"
|
class="btn-circle btn-sm mx-2 inline-block sm:hidden"
|
||||||
class="toggle"
|
icon={<IconArrowUp width={30} size={24} />}
|
||||||
checked={props.visible[key]}
|
onClick={() => moveElementInOrder(key, 'backward')}
|
||||||
onChange={(e) => {
|
/>
|
||||||
props.onVisibleChange({
|
<Button
|
||||||
...props.visible,
|
class="btn-circle btn-sm mx-2 inline-block sm:hidden"
|
||||||
[key]: e.target.checked,
|
icon={<IconArrowDown width={30} size={24} />}
|
||||||
})
|
onClick={() => moveElementInOrder(key, 'forward')}
|
||||||
}}
|
/>
|
||||||
/>
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="toggle"
|
||||||
|
checked={props.visible[key]}
|
||||||
|
onChange={(e) => {
|
||||||
|
props.onVisibleChange({
|
||||||
|
...props.visible,
|
||||||
|
[key]: e.target.checked,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user