From 5d43ea0b5f48b2d84984bdf94dcef87d8e780432 Mon Sep 17 00:00:00 2001 From: Zephyruso <127948745+Zephyruso@users.noreply.github.com> Date: Sat, 2 Sep 2023 21:00:20 +0800 Subject: [PATCH] feat: config for render in two col --- src/components/Collpase.tsx | 14 ++++++++++++-- src/components/ForTwoColumns.tsx | 33 ++++++++++++++++++++++++++++++++ src/components/ForTwoLine.tsx | 30 ----------------------------- src/i18n/en.ts | 1 + src/i18n/zh.ts | 1 + src/pages/Config.tsx | 13 +++++++++++++ src/pages/Proxies.tsx | 4 ++-- src/pages/ProxyProvider.tsx | 4 ++-- src/signals/config.ts | 4 ++++ 9 files changed, 68 insertions(+), 36 deletions(-) create mode 100644 src/components/ForTwoColumns.tsx delete mode 100644 src/components/ForTwoLine.tsx diff --git a/src/components/Collpase.tsx b/src/components/Collpase.tsx index 139e015..9c8fa7d 100644 --- a/src/components/Collpase.tsx +++ b/src/components/Collpase.tsx @@ -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) => { 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 (
= (props) => {
{content} diff --git a/src/components/ForTwoColumns.tsx b/src/components/ForTwoColumns.tsx new file mode 100644 index 0000000..eec78b8 --- /dev/null +++ b/src/components/ForTwoColumns.tsx @@ -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 ( +
+
{leftCloumns()}
+ +
{rightCloumns()}
+ +
+ ) +} + +export default ForTwoColumns diff --git a/src/components/ForTwoLine.tsx b/src/components/ForTwoLine.tsx deleted file mode 100644 index 0aa32c7..0000000 --- a/src/components/ForTwoLine.tsx +++ /dev/null @@ -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 ( -
-
{leftLine()}
- -
{rightLine()}
- -
- ) -} - -export default ForTwoLine diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 476cc49..e0b3f69 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -43,4 +43,5 @@ export default { autoSwitchTheme: 'Automatically switch theme', favDayTheme: 'Favorite light theme', favNightTheme: 'Favorite dark theme', + renderInTwoColumns: 'Render Proxies in two columns', } diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts index eac9603..4bbfada 100644 --- a/src/i18n/zh.ts +++ b/src/i18n/zh.ts @@ -43,4 +43,5 @@ export default { autoSwitchTheme: '自动切换主题', favDayTheme: '浅色主题偏好', favNightTheme: '深色主题偏好', + renderInTwoColumns: '节点双列渲染', } diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx index b9a4220..106705c 100644 --- a/src/pages/Config.tsx +++ b/src/pages/Config.tsx @@ -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 (
+
+
{t('renderInTwoColumns')}
+ { + setRenderInTwoColumn(e.target.checked) + }} + /> +
{t('autoSwitchTheme')}
{

{t('proxies')}

- { const title = ( <> diff --git a/src/pages/ProxyProvider.tsx b/src/pages/ProxyProvider.tsx index 4c51994..837f20f 100644 --- a/src/pages/ProxyProvider.tsx +++ b/src/pages/ProxyProvider.tsx @@ -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 () => { - { const title = ( <> diff --git a/src/signals/config.ts b/src/signals/config.ts index 362b339..7d62885 100644 --- a/src/signals/config.ts +++ b/src/signals/config.ts @@ -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()) {