feat(rules): config for render rules in two columns

This commit is contained in:
Zephyruso 2023-09-06 16:08:25 +08:00
parent 79ad0acfea
commit 7e2fe6acb0
8 changed files with 120 additions and 98 deletions

View File

@ -1,6 +1,6 @@
import { JSX, ParentComponent, Show, createMemo } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { renderInTwoColumn } from '~/signals'
import { renderInTwoColumns } from '~/signals'
type Props = {
title: JSX.Element
@ -27,7 +27,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
}
const mediaQueryClassName = createMemo(() => {
if (renderInTwoColumn()) {
if (renderInTwoColumns()) {
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'

View File

@ -1,11 +1,11 @@
import { createWindowSize } from '@solid-primitives/resize-observer'
import { JSX, Show, createMemo } from 'solid-js'
import { renderInTwoColumn } from '~/signals'
import { renderInTwoColumns } from '~/signals'
export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
const windowSize = createWindowSize()
const isShowTwoColumns = createMemo(
() => windowSize.width >= 640 && renderInTwoColumn(),
() => windowSize.width >= 640 && renderInTwoColumns(),
) // 640 is sm size in daisyui
const leftCloumns = createMemo(() =>
props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()),

View File

@ -1,5 +1,6 @@
import dayjs from 'dayjs'
import { PROXIES_ORDERING_TYPE } from '~/constants'
import { latencyQualityMap } from '~/signals'
export const formatTimeFromNow = (time: number | string) => {
return dayjs(time).fromNow()
@ -45,16 +46,16 @@ export const sortProxiesByOrderingType = (
switch (orderingType) {
case PROXIES_ORDERING_TYPE.LATENCY_ASC:
if (prevLatency === -1) return 1
if (prevLatency === latencyQualityMap().NOT_CONNECTED) return 1
if (nextLatency === -1) return -1
if (nextLatency === latencyQualityMap().NOT_CONNECTED) return -1
return prevLatency - nextLatency
case PROXIES_ORDERING_TYPE.LATENCY_DESC:
if (prevLatency === -1) return 1
if (prevLatency === latencyQualityMap().NOT_CONNECTED) return 1
if (nextLatency === -1) return -1
if (nextLatency === latencyQualityMap().NOT_CONNECTED) return -1
return nextLatency - prevLatency

View File

@ -47,7 +47,7 @@ export default {
autoSwitchTheme: 'Automatically switch theme',
favDayTheme: 'Favorite light theme',
favNightTheme: 'Favorite dark theme',
renderInTwoColumns: 'Render Proxies in two columns',
renderInTwoColumns: 'Render proxies in two columns',
updateGEODatabases: 'Update GEO Databases',
restartCore: 'Restart Core',
upgradeCore: 'Upgrade Core',
@ -60,6 +60,8 @@ export default {
ms: 'ms',
updated: 'Updated',
renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
renderRulesAndProviderInTwoColumns:
'Render rules and rule provider in two columns',
tableSize: 'Table size',
xs: 'Extra small size',
sm: 'Small size',

View File

@ -60,6 +60,7 @@ export default {
ms: '毫秒',
updated: '更新于',
renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
renderRulesAndProviderInTwoColumns: '规则和规则提供者双列渲染',
tableSize: '表格大小',
xs: '超小尺寸',
sm: '小尺寸',

View File

@ -29,8 +29,9 @@ import {
latencyTestTimeoutDuration,
proxiesOrderingType,
proxiesPreviewType,
renderInTwoColumn,
renderInTwoColumns,
renderProxiesInSamePage,
renderRulesAndProviderInTwoColumns,
setAutoCloseConns,
setAutoSwitchTheme,
setFavDayTheme,
@ -38,8 +39,9 @@ import {
setLatencyTestTimeoutDuration,
setProxiesOrderingType,
setProxiesPreviewType,
setRenderInTwoColumn,
setRenderInTwoColumns,
setRenderProxiesInSamePage,
setRenderRulesAndProviderInTwoColumns,
setSelectedEndpoint,
setTableSize,
setTwemoji,
@ -270,98 +272,102 @@ const ConfigForXd = () => {
navigate(ROUTES.Setup)
}
return (
<div class="grid gap-4">
const autoSwitchThemeSubChild = () => (
<Show when={autoSwitchTheme()}>
<div class="flex flex-col">
<ConfigTitle>{t('renderInTwoColumns')}</ConfigTitle>
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={renderInTwoColumn()}
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => {
setRenderInTwoColumn(e.target.checked)
}}
/>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('renderProxiesInSamePage')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={renderProxiesInSamePage()}
onChange={(e) => {
setRenderProxiesInSamePage(e.target.checked)
}}
/>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={autoSwitchTheme()}
onChange={(e) => {
setAutoSwitchTheme(e.target.checked)
setFavDayTheme(e.target.value)
applyThemeByMode()
}}
/>
>
<For each={themes}>
{(theme) => (
<option selected={favDayTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('favNightTheme')}</ConfigTitle>
<Show when={autoSwitchTheme()}>
<div class="flex flex-col">
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => {
setFavDayTheme(e.target.value)
applyThemeByMode()
}}
>
<For each={themes}>
{(theme) => (
<option selected={favDayTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('favNightTheme')}</ConfigTitle>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => {
setFavNightTheme(e.target.value)
applyThemeByMode()
}}
>
<For each={themes}>
{(theme) => (
<option selected={favNightTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
</Show>
<div>
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
<input
class="toggle"
type="checkbox"
checked={useTwemoji()}
onChange={(e) => setTwemoji(e.target.checked)}
/>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => {
setFavNightTheme(e.target.value)
applyThemeByMode()
}}
>
<For each={themes}>
{(theme) => (
<option selected={favNightTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
</Show>
)
const checkboxList = [
{
label: 'renderInTwoColumns',
value: renderInTwoColumns,
onChange: setRenderInTwoColumns,
},
{
label: 'renderRulesAndProviderInTwoColumns',
value: renderRulesAndProviderInTwoColumns,
onChange: setRenderRulesAndProviderInTwoColumns,
},
{
label: 'renderProxiesInSamePage',
value: renderProxiesInSamePage,
onChange: setRenderProxiesInSamePage,
},
{
label: 'autoSwitchTheme',
value: autoSwitchTheme,
onChange: (value: boolean) => {
setAutoSwitchTheme(value)
applyThemeByMode()
},
subChild: autoSwitchThemeSubChild,
},
{
label: 'useTwemoji',
value: useTwemoji,
onChange: setTwemoji,
},
]
return (
<div class="grid gap-4">
<For each={checkboxList}>
{(checkbox) => (
<>
<div class="flex flex-col">
<ConfigTitle>{t(checkbox.label)}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={checkbox.value()}
onChange={(e) => {
checkbox.onChange(e.target.checked)
}}
/>
</div>
{checkbox.subChild?.()}
</>
)}
</For>
<div>
<ConfigTitle>{t('proxiesPreviewType')}</ConfigTitle>

View File

@ -5,7 +5,7 @@ import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Button } from '~/components'
import { formatTimeFromNow, useStringBooleanMap } from '~/helpers'
import { useRules } from '~/signals'
import { renderRulesAndProviderInTwoColumns, useRules } from '~/signals'
export default () => {
const [t] = useI18n()
@ -40,7 +40,12 @@ export default () => {
}
return (
<div class="flex w-full gap-4">
<div
class={twMerge(
'flex w-full flex-col gap-4',
renderRulesAndProviderInTwoColumns() && 'flex-row',
)}
>
<div class="flex-1">
<h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>

View File

@ -41,7 +41,7 @@ export const [favNightTheme, setFavNightTheme] = makePersisted(
createSignal('night'),
{ name: 'favNightTheme', storage: localStorage },
)
export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
export const [renderInTwoColumns, setRenderInTwoColumns] = makePersisted(
createSignal(true),
{ name: 'renderInTwoColumn', storage: localStorage },
)
@ -50,6 +50,13 @@ export const [renderProxiesInSamePage, setRenderProxiesInSamePage] =
name: 'renderProxiesInSamePage',
storage: localStorage,
})
export const [
renderRulesAndProviderInTwoColumns,
setRenderRulesAndProviderInTwoColumns,
] = makePersisted(createSignal(true), {
name: 'renderRulesAndProviderInTwoColumns',
storage: localStorage,
})
export const [tableSize, setTableSize] = makePersisted(
createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
{ name: 'tableSize', storage: localStorage },