mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
refactor: replace buttons with custom button component
This commit is contained in:
parent
0d46d1df19
commit
071a607124
@ -14,6 +14,7 @@ import {
|
|||||||
useDragDropContext,
|
useDragDropContext,
|
||||||
} from '@thisbeyond/solid-dnd'
|
} from '@thisbeyond/solid-dnd'
|
||||||
import { For, Show, createSignal } from 'solid-js'
|
import { For, Show, createSignal } from 'solid-js'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import {
|
import {
|
||||||
AccessorKey,
|
AccessorKey,
|
||||||
initColumnOrder,
|
initColumnOrder,
|
||||||
@ -109,15 +110,15 @@ export default (props: {
|
|||||||
</DragOverlay>
|
</DragOverlay>
|
||||||
</DragDropProvider>
|
</DragDropProvider>
|
||||||
|
|
||||||
<button
|
<Button
|
||||||
class="btn btn-neutral btn-sm ml-auto mt-4 block"
|
class="btn-neutral btn-sm ml-auto mt-4 block"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
props.onOrderChange(initColumnOrder)
|
props.onOrderChange(initColumnOrder)
|
||||||
props.onVisibleChange(initColumnVisibility)
|
props.onVisibleChange(initColumnVisibility)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t('reset')}
|
{t('reset')}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="modal-backdrop" for="connection-modal" />
|
<label class="modal-backdrop" for="connection-modal" />
|
||||||
|
@ -15,6 +15,7 @@ import {
|
|||||||
} from '@tabler/icons-solidjs'
|
} from '@tabler/icons-solidjs'
|
||||||
import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
|
import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import { LANG, ROUTE } from '~/config/enum'
|
import { LANG, ROUTE } from '~/config/enum'
|
||||||
import { themes } from '~/constants'
|
import { themes } from '~/constants'
|
||||||
import { setCurTheme, setSelectedEndpoint } from '~/signals'
|
import { setCurTheme, setSelectedEndpoint } from '~/signals'
|
||||||
@ -181,8 +182,8 @@ export const Header = () => {
|
|||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-sm"
|
class="btn-circle btn-sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const curLocale = locale()
|
const curLocale = locale()
|
||||||
|
|
||||||
@ -190,16 +191,16 @@ export const Header = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<IconLanguage />
|
<IconLanguage />
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
<ThemeSwitcher />
|
<ThemeSwitcher />
|
||||||
|
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-secondary btn-sm"
|
class="btn-circle btn-secondary btn-sm"
|
||||||
onClick={onSwitchEndpointClick}
|
onClick={onSwitchEndpointClick}
|
||||||
>
|
>
|
||||||
<IconArrowsExchange />
|
<IconArrowsExchange />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -20,6 +20,7 @@ import byteSize from 'byte-size'
|
|||||||
import { isIPv6 } from 'is-ip'
|
import { isIPv6 } from 'is-ip'
|
||||||
import { For, createEffect, createSignal } from 'solid-js'
|
import { For, createEffect, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import ConnectionsModal from '~/components/ConnectionsModal'
|
import ConnectionsModal from '~/components/ConnectionsModal'
|
||||||
import {
|
import {
|
||||||
AccessorKey,
|
AccessorKey,
|
||||||
@ -111,22 +112,22 @@ export default () => {
|
|||||||
accessorKey: AccessorKey.Close,
|
accessorKey: AccessorKey.Close,
|
||||||
header: () => (
|
header: () => (
|
||||||
<div class="flex h-full items-center">
|
<div class="flex h-full items-center">
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-xs"
|
class="btn-circle btn-xs"
|
||||||
onClick={() => request.delete('connections')}
|
onClick={() => request.delete('connections')}
|
||||||
>
|
>
|
||||||
<IconCircleX size="18" />
|
<IconCircleX size="18" />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div class="flex h-full items-center">
|
<div class="flex h-full items-center">
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-xs"
|
class="btn-circle btn-xs"
|
||||||
onClick={() => onCloseConnection(row.id)}
|
onClick={() => onCloseConnection(row.id)}
|
||||||
>
|
>
|
||||||
<IconCircleX size="18" />
|
<IconCircleX size="18" />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
|
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
|
||||||
import { Show, createSignal } from 'solid-js'
|
import { Show, createSignal } from 'solid-js'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import Collapse from '~/components/Collpase'
|
import Collapse from '~/components/Collpase'
|
||||||
import ForTwoColumns from '~/components/ForTwoColumns'
|
import ForTwoColumns from '~/components/ForTwoColumns'
|
||||||
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
||||||
@ -42,12 +43,12 @@ export default () => {
|
|||||||
<>
|
<>
|
||||||
<div class="mr-10 flex items-center justify-between">
|
<div class="mr-10 flex items-center justify-between">
|
||||||
<span>{proxy.name}</span>
|
<span>{proxy.name}</span>
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-sm"
|
class="btn-circle btn-sm"
|
||||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||||
>
|
>
|
||||||
<IconBrandSpeedtest />
|
<IconBrandSpeedtest />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-slate-500">
|
<div class="text-sm text-slate-500">
|
||||||
{proxy.type} :: {proxy.now}
|
{proxy.type} :: {proxy.now}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
||||||
import { Show, createSignal } from 'solid-js'
|
import { Show, createSignal } from 'solid-js'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import Collapse from '~/components/Collpase'
|
import Collapse from '~/components/Collpase'
|
||||||
import ForTwoColumns from '~/components/ForTwoColumns'
|
import ForTwoColumns from '~/components/ForTwoColumns'
|
||||||
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
||||||
@ -53,12 +54,13 @@ export default () => {
|
|||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
|
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
|
||||||
{t('proxyProviders')}
|
{t('proxyProviders')}
|
||||||
<button
|
|
||||||
class="btn btn-circle btn-ghost btn-sm ml-2"
|
<Button
|
||||||
|
class="btn-circle btn-ghost btn-sm ml-2"
|
||||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||||
>
|
>
|
||||||
<IconReload />
|
<IconReload />
|
||||||
</button>
|
</Button>
|
||||||
</h1>
|
</h1>
|
||||||
<ForTwoColumns
|
<ForTwoColumns
|
||||||
subChild={proxyProviders().map((proxyProvider) => {
|
subChild={proxyProviders().map((proxyProvider) => {
|
||||||
@ -67,20 +69,21 @@ export default () => {
|
|||||||
<div class="mr-8 flex items-center justify-between">
|
<div class="mr-8 flex items-center justify-between">
|
||||||
<span>{proxyProvider.name}</span>
|
<span>{proxyProvider.name}</span>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-sm mr-2"
|
class="btn btn-circle btn-sm mr-2"
|
||||||
onClick={(e) =>
|
onClick={(e) =>
|
||||||
onUpdateProviderClick(e, proxyProvider.name)
|
onUpdateProviderClick(e, proxyProvider.name)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<IconReload />
|
<IconReload />
|
||||||
</button>
|
</Button>
|
||||||
<button
|
|
||||||
|
<Button
|
||||||
class="btn btn-circle btn-sm"
|
class="btn btn-circle btn-sm"
|
||||||
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
|
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
|
||||||
>
|
>
|
||||||
<IconBrandSpeedtest />
|
<IconBrandSpeedtest />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<SubscriptionInfo
|
<SubscriptionInfo
|
||||||
|
@ -2,6 +2,7 @@ import { useI18n } from '@solid-primitives/i18n'
|
|||||||
import { IconReload } from '@tabler/icons-solidjs'
|
import { IconReload } from '@tabler/icons-solidjs'
|
||||||
import InfiniteScroll from 'solid-infinite-scroll'
|
import InfiniteScroll from 'solid-infinite-scroll'
|
||||||
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
|
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import { useRules } from '~/signals/rules'
|
import { useRules } from '~/signals/rules'
|
||||||
import { formatTimeFromNow, getBtnElFromClickEvent } from '~/utils/proxies'
|
import { formatTimeFromNow, getBtnElFromClickEvent } from '~/utils/proxies'
|
||||||
|
|
||||||
@ -67,12 +68,12 @@ export default () => {
|
|||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<h1 class="flex h-11 items-center pb-4 text-lg font-semibold">
|
<h1 class="flex h-11 items-center pb-4 text-lg font-semibold">
|
||||||
{t('ruleProviders')}
|
{t('ruleProviders')}
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-ghost btn-sm ml-2"
|
class="btn-circle btn-ghost btn-sm ml-2"
|
||||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||||
>
|
>
|
||||||
<IconReload />
|
<IconReload />
|
||||||
</button>
|
</Button>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<For each={rulesProviders()}>
|
<For each={rulesProviders()}>
|
||||||
@ -83,14 +84,14 @@ export default () => {
|
|||||||
{rulesProvider.name} ({rulesProvider.ruleCount})
|
{rulesProvider.name} ({rulesProvider.ruleCount})
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-sm mr-2"
|
class="btn-circle btn-sm mr-2"
|
||||||
onClick={(e) =>
|
onClick={(e) =>
|
||||||
onUpdateProviderClick(e, rulesProvider.name)
|
onUpdateProviderClick(e, rulesProvider.name)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<IconReload />
|
<IconReload />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xs text-slate-500">
|
<div class="text-xs text-slate-500">
|
||||||
|
@ -7,6 +7,7 @@ import ky from 'ky'
|
|||||||
import { For, onMount } from 'solid-js'
|
import { For, onMount } from 'solid-js'
|
||||||
import { v4 as uuid } from 'uuid'
|
import { v4 as uuid } from 'uuid'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
|
import { Button } from '~/components/Button'
|
||||||
import { endpointList, setEndpointList, setSelectedEndpoint } from '~/signals'
|
import { endpointList, setEndpointList, setSelectedEndpoint } from '~/signals'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
@ -122,9 +123,9 @@ export default () => {
|
|||||||
placeholder="secret"
|
placeholder="secret"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary join-item uppercase">
|
<Button type="submit" class="btn-primary join-item uppercase">
|
||||||
{t('add')}
|
{t('add')}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -137,15 +138,15 @@ export default () => {
|
|||||||
>
|
>
|
||||||
{url}
|
{url}
|
||||||
|
|
||||||
<button
|
<Button
|
||||||
class="btn btn-circle btn-ghost btn-xs text-white"
|
class="btn-circle btn-ghost btn-xs text-white"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
onRemove(id)
|
onRemove(id)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<IconX />
|
<IconX />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
Loading…
Reference in New Issue
Block a user