mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat(proxy): regression on render proxies in two columns
This commit is contained in:
parent
f4e82e0e27
commit
8502a6e489
@ -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>
|
||||
)
|
||||
}
|
||||
|
26
src/components/RenderInTwoColumns.tsx
Normal file
26
src/components/RenderInTwoColumns.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -13,4 +13,5 @@ export * from './ProxyNodeCard'
|
||||
export * from './ProxyNodePreview'
|
||||
export * from './ProxyPreviewBar'
|
||||
export * from './ProxyPreviewDots'
|
||||
export * from './RenderInTwoColumns'
|
||||
export * from './SubscriptionInfo'
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user