From 6743ebde8f5e13f32b27f913c620629517f63da2 Mon Sep 17 00:00:00 2001 From: kunish Date: Sat, 16 Sep 2023 00:17:41 +0800 Subject: [PATCH] feat(rules): renderInTwoColumns --- package.json | 1 - pnpm-lock.yaml | 9 -- src/components/Collapse.tsx | 4 +- src/components/ForTwoColumns.tsx | 4 +- src/components/ProxiesSettingsModal.tsx | 15 +++ src/components/RulesSettingsModal.tsx | 34 +++++ src/components/index.ts | 1 + src/pages/Config.tsx | 7 - src/pages/Rules.tsx | 163 ++++++++++++++---------- src/signals/config.ts | 14 +- 10 files changed, 157 insertions(+), 95 deletions(-) create mode 100644 src/components/RulesSettingsModal.tsx diff --git a/package.json b/package.json index 4a4afa8..1f5214e 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "prettier-plugin-organize-imports": "^3.2.3", "prettier-plugin-tailwindcss": "^0.5.4", "solid-apexcharts": "^0.3.2", - "solid-infinite-scroll": "^1.0.1", "solid-js": "^1.7.11", "solid-toast": "^0.5.0", "sort-package-json": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 21066d0..07ba3dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,9 +131,6 @@ dependencies: solid-apexcharts: specifier: ^0.3.2 version: 0.3.2(apexcharts@3.42.0)(solid-js@1.7.11) - solid-infinite-scroll: - specifier: ^1.0.1 - version: 1.0.1 solid-js: specifier: ^1.7.11 version: 1.7.11 @@ -5230,12 +5227,6 @@ packages: solid-js: 1.7.11 dev: false - /solid-infinite-scroll@1.0.1: - resolution: {integrity: sha512-yIDyr61316jyHSxuQqidMUTcauKDQyPIzIAKawTrTadqxij2wOcM3ei6/MR6WPBCcR0ZMJ8E0aQInFSnL9w2Hg==} - dependencies: - solid-js: 1.7.11 - dev: false - /solid-js@1.7.11: resolution: {integrity: sha512-JkuvsHt8jqy7USsy9xJtT18aF9r2pFO+GB8JQ2XGTvtF49rGTObB46iebD25sE3qVNvIbwglXOXdALnJq9IHtQ==} dependencies: diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx index af25edd..4619fad 100644 --- a/src/components/Collapse.tsx +++ b/src/components/Collapse.tsx @@ -1,6 +1,6 @@ import { JSX, ParentComponent, Show, createMemo } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { renderInTwoColumns } from '~/signals' +import { proxiesRenderInTwoColumns } from '~/signals' type Props = { title: JSX.Element @@ -27,7 +27,7 @@ export const Collapse: ParentComponent = (props) => { } const mediaQueryClassName = createMemo(() => { - if (renderInTwoColumns()) { + if (proxiesRenderInTwoColumns()) { 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' diff --git a/src/components/ForTwoColumns.tsx b/src/components/ForTwoColumns.tsx index 3da127c..1583e8e 100644 --- a/src/components/ForTwoColumns.tsx +++ b/src/components/ForTwoColumns.tsx @@ -1,11 +1,11 @@ import { createWindowSize } from '@solid-primitives/resize-observer' import { JSX, Show, createMemo } from 'solid-js' -import { renderInTwoColumns } from '~/signals' +import { proxiesRenderInTwoColumns } from '~/signals' export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => { const windowSize = createWindowSize() const isShowTwoColumns = createMemo( - () => windowSize.width >= 640 && renderInTwoColumns(), + () => windowSize.width >= 640 && proxiesRenderInTwoColumns(), ) // 640 is sm size in daisyui const leftColumns = createMemo(() => props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()), diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx index b1ab556..a61a603 100644 --- a/src/components/ProxiesSettingsModal.tsx +++ b/src/components/ProxiesSettingsModal.tsx @@ -8,11 +8,13 @@ import { latencyTestTimeoutDuration, proxiesOrderingType, proxiesPreviewType, + proxiesRenderInTwoColumns, setAutoCloseConns, setHideUnAvailableProxies, setLatencyTestTimeoutDuration, setProxiesOrderingType, setProxiesPreviewType, + setProxiesRenderInTwoColumns, setUrlForLatencyTest, urlForLatencyTest, } from '~/signals' @@ -112,6 +114,19 @@ export const ProxiesSettingsModal = () => { + +
+ {t('renderInTwoColumns')} + +
+ setProxiesRenderInTwoColumns(e.target.checked)} + /> +
+
diff --git a/src/components/RulesSettingsModal.tsx b/src/components/RulesSettingsModal.tsx new file mode 100644 index 0000000..1b5f286 --- /dev/null +++ b/src/components/RulesSettingsModal.tsx @@ -0,0 +1,34 @@ +import { useI18n } from '@solid-primitives/i18n' +import { ConfigTitle } from '~/components' +import { MODAL } from '~/constants' +import { rulesRenderInTwoColumns, setRulesRenderInTwoColumns } from '~/signals' + +export const RulesSettingsModal = () => { + const [t] = useI18n() + + return ( + +
+
+ {t('renderInTwoColumns')} + +
+ setRulesRenderInTwoColumns(e.target.checked)} + /> +
+
+
+ + +
+ ) +} diff --git a/src/components/index.ts b/src/components/index.ts index 93295be..e0e972f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -14,4 +14,5 @@ export * from './ProxyNodeCard' export * from './ProxyNodePreview' export * from './ProxyPreviewBar' export * from './ProxyPreviewDots' +export * from './RulesSettingsModal' export * from './SubscriptionInfo' diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx index 2b93db8..66bf3b4 100644 --- a/src/pages/Config.tsx +++ b/src/pages/Config.tsx @@ -22,12 +22,10 @@ import { backendConfig, favDayTheme, favNightTheme, - renderInTwoColumns, setAutoSwitchTheme, setBackendConfig, setFavDayTheme, setFavNightTheme, - setRenderInTwoColumns, setSelectedEndpoint, setTwemoji, useRequest, @@ -238,11 +236,6 @@ const ConfigForXd = () => { ) const checkboxList = [ - { - label: t('renderInTwoColumns'), - value: renderInTwoColumns, - onChange: setRenderInTwoColumns, - }, { label: t('autoSwitchTheme'), value: autoSwitchTheme, diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx index 5d5ea3c..02321df 100644 --- a/src/pages/Rules.tsx +++ b/src/pages/Rules.tsx @@ -1,11 +1,11 @@ import { useI18n } from '@solid-primitives/i18n' -import { IconReload } from '@tabler/icons-solidjs' -import InfiniteScroll from 'solid-infinite-scroll' -import { For, Show, createMemo, createSignal, onMount } from 'solid-js' +import { IconReload, IconSettings } from '@tabler/icons-solidjs' +import { For, Show, createSignal, onMount } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { Button, ForTwoColumns } from '~/components' +import { Button, RulesSettingsModal } from '~/components' +import { MODAL } from '~/constants' import { formatTimeFromNow, useStringBooleanMap } from '~/helpers' -import { useRules } from '~/signals' +import { rulesRenderInTwoColumns, useRules } from '~/signals' enum ActiveTab { ruleProviders = 'ruleProviders', @@ -21,8 +21,6 @@ export default () => { updateAllRuleProvider, updateRuleProviderByName, } = useRules() - const [maxRuleRender, setMaxRuleRender] = createSignal(100) - const renderRules = createMemo(() => rules().slice(0, maxRuleRender())) onMount(updateRules) @@ -61,55 +59,102 @@ export default () => { return (
- 0}> -
-
- - {(tab) => ( - +
+
+ + {(tab) => ( + + )} + +
+ + + + + +
+ +
+
+ +
+ +
+ + {(rule) => ( +
+
+ {rule.payload} + +
{rule.size}
+ +
+
+ {rule.type} :: {rule.proxy} +
+
)}
+ - - - -
- - -
- { - return ( -
+
+ + {(ruleProvider) => ( +
{ruleProvider.name}
{ruleProvider.ruleCount}
+
{ruleProvider.vehicleType} / {ruleProvider.behavior} / {t('updated')} {formatTimeFromNow(ruleProvider.updatedAt)}
+
- ) - })} - /> - - - - setMaxRuleRender(maxRuleRender() + 100)} - > - {(rule) => ( -
-
- {rule.payload} - -
{rule.size}
- -
-
- {rule.type} :: {rule.proxy} -
-
- )} - + )} + +
+ +
) } diff --git a/src/signals/config.ts b/src/signals/config.ts index f617de5..9ea8577 100644 --- a/src/signals/config.ts +++ b/src/signals/config.ts @@ -51,10 +51,16 @@ export const [favNightTheme, setFavNightTheme] = makePersisted( createSignal('night'), { name: 'favNightTheme', storage: localStorage }, ) -export const [renderInTwoColumns, setRenderInTwoColumns] = makePersisted( - createSignal(true), - { name: 'renderInTwoColumn', storage: localStorage }, -) +export const [proxiesRenderInTwoColumns, setProxiesRenderInTwoColumns] = + makePersisted(createSignal(true), { + name: 'proxiesRenderInTwoColumns', + storage: localStorage, + }) +export const [rulesRenderInTwoColumns, setRulesRenderInTwoColumns] = + makePersisted(createSignal(true), { + name: 'rulesRenderInTwoColumns', + storage: localStorage, + }) export const [connectionsTableSize, setConnectionsTableSize] = makePersisted( createSignal(TAILWINDCSS_SIZE.XS), { name: 'connectionsTableSize', storage: localStorage },