feat(proxy): regression on render proxies in two columns

This commit is contained in:
kunish 2023-09-21 23:58:06 +08:00
parent f4e82e0e27
commit 8502a6e489
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
5 changed files with 50 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { Show, createMemo } from 'solid-js'
import { createMemo, Match, Show, Switch } from 'solid-js'
import { ProxyPreviewBar, ProxyPreviewDots } from '~/components'
import { PROXIES_PREVIEW_TYPE } from '~/constants'
import { proxiesPreviewType } from '~/signals'
@ -9,7 +9,7 @@ export const ProxyNodePreview = (props: {
}) => {
const off = () => proxiesPreviewType() === PROXIES_PREVIEW_TYPE.OFF
const isSmallGroup = createMemo(() => props.proxyNameList.length <= 30)
const isSmallGroup = createMemo(() => props.proxyNameList.length <= 10)
const isShowBar = createMemo(() => {
const type = proxiesPreviewType()
@ -31,12 +31,21 @@ export const ProxyNodePreview = (props: {
return (
<Show when={!off()}>
<Show when={isShowBar()}>
<ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
</Show>
<Show when={isShowDots()}>
<ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
</Show>
<Switch>
<Match when={isShowBar()}>
<ProxyPreviewBar
proxyNameList={props.proxyNameList}
now={props.now}
/>
</Match>
<Match when={isShowDots()}>
<ProxyPreviewDots
proxyNameList={props.proxyNameList}
now={props.now}
/>
</Match>
</Switch>
</Show>
)
}

View File

@ -0,0 +1,26 @@
import { createWindowSize } from '@solid-primitives/resize-observer'
import { ParentComponent, Show, children, createMemo } from 'solid-js'
export const RenderInTwoColumns: ParentComponent = (props) => {
const resolvedChildren = children(() => props.children)
const windowSize = createWindowSize()
// 640 is sm size in default tailwindcss breakpoint
const showTwoColumns = createMemo(() => windowSize.width >= 640)
const leftColumns = createMemo(() =>
resolvedChildren.toArray().filter((_, index) => index % 2 === 0),
)
const rightColumns = createMemo(() =>
resolvedChildren.toArray().filter((_, index) => index % 2 === 1),
)
return (
<div class="flex flex-col gap-2 sm:flex-row">
<Show when={showTwoColumns()} fallback={props.children}>
<div class="flex flex-1 flex-col gap-2">{leftColumns()}</div>
<div class="flex flex-1 flex-col gap-2">{rightColumns()}</div>
</Show>
</div>
)
}

View File

@ -13,4 +13,5 @@ export * from './ProxyNodeCard'
export * from './ProxyNodePreview'
export * from './ProxyPreviewBar'
export * from './ProxyPreviewDots'
export * from './RenderInTwoColumns'
export * from './SubscriptionInfo'

View File

@ -12,6 +12,7 @@ import {
ProxiesSettingsModal,
ProxyCardGroups,
ProxyNodePreview,
RenderInTwoColumns,
SubscriptionInfo,
} from '~/components'
import { MODAL } from '~/constants'
@ -146,7 +147,7 @@ export default () => {
<div class="flex-1 overflow-y-auto">
<Show when={activeTab() === ActiveTab.proxies}>
<div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
<RenderInTwoColumns>
<For each={proxies()}>
{(proxyGroup) => {
const sortedProxyNames = createMemo(() =>
@ -216,11 +217,11 @@ export default () => {
)
}}
</For>
</div>
</RenderInTwoColumns>
</Show>
<Show when={activeTab() === ActiveTab.proxyProviders}>
<div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
<RenderInTwoColumns>
<For each={proxyProviders()}>
{(proxyProvider) => {
const sortedProxyNames = createMemo(() =>
@ -302,7 +303,7 @@ export default () => {
)
}}
</For>
</div>
</RenderInTwoColumns>
</Show>
</div>

View File

@ -5,7 +5,7 @@ import { Config } from 'tailwindcss'
import safeArea from 'tailwindcss-safe-area'
export default {
content: ['./src/**/*.{css,ts,tsx}'],
content: ['src/**/*.{css,ts,tsx}'],
plugins: [daisyui, safeArea],
daisyui: { themes: true },
theme: {