mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: config for render in two col
This commit is contained in:
parent
a82fe71f01
commit
5d43ea0b5f
@ -1,5 +1,6 @@
|
||||
import { JSX, ParentComponent, Show } from 'solid-js'
|
||||
import { JSX, ParentComponent, Show, createMemo } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { renderInTwoColumn } from '~/signals/config'
|
||||
|
||||
type Props = {
|
||||
title: JSX.Element
|
||||
@ -23,6 +24,14 @@ const Collapse: ParentComponent<Props> = (props) => {
|
||||
return props.isOpen ? openedClassName : closedClassName
|
||||
}
|
||||
|
||||
const mediaQueryClassName = createMemo(() => {
|
||||
if (renderInTwoColumn()) {
|
||||
return 'lg:grid-cols-3 xl:grid-cols-4'
|
||||
} else {
|
||||
return 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7'
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
class={twMerge(
|
||||
@ -39,7 +48,8 @@ const Collapse: ParentComponent<Props> = (props) => {
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseContentClassName(),
|
||||
'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4',
|
||||
mediaQueryClassName(),
|
||||
'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000',
|
||||
)}
|
||||
>
|
||||
<Show when={props.isOpen}>{content}</Show>
|
||||
|
33
src/components/ForTwoColumns.tsx
Normal file
33
src/components/ForTwoColumns.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { JSX, Show, createMemo, createSignal } from 'solid-js'
|
||||
import { renderInTwoColumn } from '~/signals/config'
|
||||
|
||||
const [windowWidth, setWindowWidth] = createSignal(0)
|
||||
|
||||
setWindowWidth(document?.body?.clientWidth)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
setWindowWidth(document.body.clientWidth)
|
||||
})
|
||||
|
||||
const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
|
||||
const isShowTwoColumns = createMemo(
|
||||
() => windowWidth() >= 640 && renderInTwoColumn(),
|
||||
) // 640 is sm size in daisyui
|
||||
const leftCloumns = createMemo(() =>
|
||||
props.subChild.filter((i, index) => index % 2 === 0 || !isShowTwoColumns()),
|
||||
)
|
||||
const rightCloumns = createMemo(() =>
|
||||
props.subChild.filter((i, index) => index % 2 === 1),
|
||||
)
|
||||
|
||||
return (
|
||||
<div class="flex">
|
||||
<div class="flex flex-1 flex-col">{leftCloumns()}</div>
|
||||
<Show when={isShowTwoColumns()}>
|
||||
<div class="ml-2 flex flex-1 flex-col">{rightCloumns()}</div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForTwoColumns
|
@ -1,30 +0,0 @@
|
||||
import { JSX, Show, createMemo, createSignal } from 'solid-js'
|
||||
|
||||
const [windowWidth, setWindowWidth] = createSignal(0)
|
||||
|
||||
setWindowWidth(document?.body?.clientWidth)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
setWindowWidth(document.body.clientWidth)
|
||||
})
|
||||
|
||||
const ForTwoLine = (props: { subChild: JSX.Element[] }) => {
|
||||
const isWidder = createMemo(() => windowWidth() >= 640) // 640 is sm size in daisyui
|
||||
const leftLine = createMemo(() =>
|
||||
props.subChild.filter((i, index) => index % 2 === 0 || !isWidder()),
|
||||
)
|
||||
const rightLine = createMemo(() =>
|
||||
props.subChild.filter((i, index) => index % 2 === 1),
|
||||
)
|
||||
|
||||
return (
|
||||
<div class="flex">
|
||||
<div class="flex flex-1 flex-col">{leftLine()}</div>
|
||||
<Show when={isWidder()}>
|
||||
<div class="ml-2 flex flex-1 flex-col">{rightLine()}</div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForTwoLine
|
@ -43,4 +43,5 @@ export default {
|
||||
autoSwitchTheme: 'Automatically switch theme',
|
||||
favDayTheme: 'Favorite light theme',
|
||||
favNightTheme: 'Favorite dark theme',
|
||||
renderInTwoColumns: 'Render Proxies in two columns',
|
||||
}
|
||||
|
@ -43,4 +43,5 @@ export default {
|
||||
autoSwitchTheme: '自动切换主题',
|
||||
favDayTheme: '浅色主题偏好',
|
||||
favNightTheme: '深色主题偏好',
|
||||
renderInTwoColumns: '节点双列渲染',
|
||||
}
|
||||
|
@ -13,11 +13,13 @@ import {
|
||||
favDayTheme,
|
||||
favNightTheme,
|
||||
proxiesPreviewType,
|
||||
renderInTwoColumn,
|
||||
setAutoCloseConns,
|
||||
setAutoSwitchTheme,
|
||||
setFavDayTheme,
|
||||
setFavNightTheme,
|
||||
setProxiesPreviewType,
|
||||
setRenderInTwoColumn,
|
||||
setUrlForDelayTest,
|
||||
urlForDelayTest,
|
||||
} from '~/signals/config'
|
||||
@ -151,6 +153,17 @@ const ConfigForXd = () => {
|
||||
|
||||
return (
|
||||
<div class="grid gap-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="pb-4">{t('renderInTwoColumns')}</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={renderInTwoColumn()}
|
||||
onChange={(e) => {
|
||||
setRenderInTwoColumn(e.target.checked)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="pb-4">{t('autoSwitchTheme')}</div>
|
||||
<input
|
||||
|
@ -2,7 +2,7 @@ import { useI18n } from '@solid-primitives/i18n'
|
||||
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
|
||||
import { Show, createSignal } from 'solid-js'
|
||||
import Collapse from '~/components/Collpase'
|
||||
import ForTwoLine from '~/components/ForTwoLine'
|
||||
import ForTwoColumns from '~/components/ForTwoColumns'
|
||||
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
||||
import ProxyNodePreview from '~/components/ProxyNodePreview'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
@ -35,7 +35,7 @@ export default () => {
|
||||
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
|
||||
{t('proxies')}
|
||||
</h1>
|
||||
<ForTwoLine
|
||||
<ForTwoColumns
|
||||
subChild={proxies().map((proxy) => {
|
||||
const title = (
|
||||
<>
|
||||
|
@ -2,7 +2,7 @@ import { useI18n } from '@solid-primitives/i18n'
|
||||
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
||||
import { Show, createSignal } from 'solid-js'
|
||||
import Collapse from '~/components/Collpase'
|
||||
import ForTwoLine from '~/components/ForTwoLine'
|
||||
import ForTwoColumns from '~/components/ForTwoColumns'
|
||||
import ProxyCardGroups from '~/components/ProxyCardGroups'
|
||||
import ProxyNodePreview from '~/components/ProxyNodePreview'
|
||||
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
||||
@ -60,7 +60,7 @@ export default () => {
|
||||
<IconReload />
|
||||
</button>
|
||||
</h1>
|
||||
<ForTwoLine
|
||||
<ForTwoColumns
|
||||
subChild={proxyProviders().map((proxyProvider) => {
|
||||
const title = (
|
||||
<>
|
||||
|
@ -27,6 +27,10 @@ export const [favNightTheme, setFavNightTheme] = makePersisted(
|
||||
createSignal('night'),
|
||||
{ name: 'favNightTheme', storage: localStorage },
|
||||
)
|
||||
export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
|
||||
createSignal(true),
|
||||
{ name: 'renderInTwoColumn', storage: localStorage },
|
||||
)
|
||||
|
||||
const setTheme = (isDark: boolean) => {
|
||||
if (autoSwitchTheme()) {
|
||||
|
Loading…
Reference in New Issue
Block a user