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: add a close button to the modal (#239)

Browse Source 
* feat: add a close button to the modal

* fix: replace modal close icon
This commit is contained in:
Alpha 2023-09-19 00:35:58 +08:00 committed by GitHub
parent 2755f845a0
commit 737f1b0189
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ConnectionsSettingsModal.tsx
View File

@ -109,6 +109,7 @@ export const ConnectionsSettingsModal = (props: {
onOrderChange: (value: ConnectionsTableColumnOrder) => void
onVisibleChange: (value: ConnectionsTableColumnVisibility) => void
}) => {
const modalID = MODAL.CONNECTIONS_SETTINGS
const [t] = useI18n()
const [activeKey, setActiveKey] =
createSignal<CONNECTIONS_TABLE_ACCESSOR_KEY | null>(null)
@ -175,14 +176,26 @@ export const ConnectionsSettingsModal = (props: {
}
return (
<dialog
id={MODAL.CONNECTIONS_SETTINGS}
class="modal modal-bottom sm:modal-middle"
>
<dialog id={modalID} class="modal modal-bottom sm:modal-middle">
<div
class="modal-box flex flex-col gap-4"
onContextMenu={(e) => e.preventDefault()}
>
<div class="sticky top-0 z-50 flex items-center justify-end">
<Button
class="btn-circle btn-sm"
onClick={() => {
const modal = document.querySelector(
`#${modalID}`,
) as HTMLDialogElement | null
modal?.close()
}}
>
<IconX size={20} />
</Button>
</div>
<div>
<ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>

24
src/components/ConnectionsTableDetailsModal.tsx
View File

@ -1,16 +1,32 @@
import { IconX } from '@tabler/icons-solidjs'
import { Component, Show } from 'solid-js'
import { MODAL } from '~/constants'
import { allConnections } from '~/signals'
import { Button } from './Button'
export const ConnectionsTableDetailsModal: Component<{
selectedConnectionID?: string
}> = (props) => {
const modalID = MODAL.CONNECTIONS_TABLE_DETAILS
return (
<dialog
id={MODAL.CONNECTIONS_TABLE_DETAILS}
class="modal modal-bottom sm:modal-middle"
>
<dialog id={modalID} class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<div class="sticky top-0 z-50 flex items-center justify-end">
<Button
class="btn-circle btn-sm"
onClick={() => {
const modal = document.querySelector(
`#${modalID}`,
) as HTMLDialogElement | null
modal?.close()
}}
>
<IconX size={20} />
</Button>
</div>
<Show when={props.selectedConnectionID}>
<pre>
<code>

23
src/components/LogsSettingsModal.tsx
View File

@ -1,9 +1,10 @@
import { useI18n } from '@solid-primitives/i18n'
import { IconX } from '@tabler/icons-solidjs'
import { For } from 'solid-js'
import { ConfigTitle } from '~/components'
import { Button, ConfigTitle } from '~/components'
import {
LOG_LEVEL,
LOGS_TABLE_MAX_ROWS_LIST,
LOG_LEVEL,
MODAL,
TAILWINDCSS_SIZE,
} from '~/constants'
@ -17,11 +18,27 @@ import {
} from '~/signals'
export const LogsSettingsModal = () => {
const modalID = MODAL.LOGS_SETTINGS
const [t] = useI18n()
return (
<dialog id={MODAL.LOGS_SETTINGS} class="modal modal-bottom sm:modal-middle">
<dialog id={modalID} class="modal modal-bottom sm:modal-middle">
<div class="modal-box flex flex-col gap-4">
<div class="sticky top-0 z-50 flex items-center justify-end">
<Button
class="btn-circle btn-sm"
onClick={() => {
const modal = document.querySelector(
`#${modalID}`,
) as HTMLDialogElement | null
modal?.close()
}}
>
<IconX size={20} />
</Button>
</div>
<div>
<ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>

24
src/components/ProxiesSettingsModal.tsx
View File

@ -1,6 +1,7 @@
import { useI18n } from '@solid-primitives/i18n'
import { IconX } from '@tabler/icons-solidjs'
import { For } from 'solid-js'
import { ConfigTitle } from '~/components'
import { Button, ConfigTitle } from '~/components'
import { MODAL, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE } from '~/constants'
import {
autoCloseConns,
@ -18,14 +19,27 @@ import {
} from '~/signals'
export const ProxiesSettingsModal = () => {
const modalID = MODAL.PROXIES_SETTINGS
const [t] = useI18n()
return (
<dialog
id={MODAL.PROXIES_SETTINGS}
class="modal modal-bottom sm:modal-middle"
>
<dialog id={modalID} class="modal modal-bottom sm:modal-middle">
<div class="modal-box flex flex-col gap-4">
<div class="sticky top-0 z-50 flex items-center justify-end">
<Button
class="btn-circle btn-sm"
onClick={() => {
const modal = document.querySelector(
`#${modalID}`,
) as HTMLDialogElement | null
modal?.close()
}}
>
<IconX size={20} />
</Button>
</div>
<div>
<ConfigTitle withDivider>{t('autoCloseConns')}</ConfigTitle>