refactor: replace buttons with custom button component

This commit is contained in:
kunish 2023-09-03 02:31:06 +08:00
parent 0d46d1df19
commit 071a607124
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
7 changed files with 45 additions and 36 deletions

View File

@ -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" />

View File

@ -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>

View File

@ -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>
), ),
}, },

View File

@ -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}

View File

@ -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

View File

@ -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">

View File

@ -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>