mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat(proxy): add back the render proxies in two columns option, closes #360
This commit is contained in:
parent
0de2010790
commit
62c0cd9a63
@ -9,11 +9,13 @@ import {
|
||||
latencyTestTimeoutDuration,
|
||||
proxiesOrderingType,
|
||||
proxiesPreviewType,
|
||||
renderProxiesInTwoColumns,
|
||||
setAutoCloseConns,
|
||||
setHideUnAvailableProxies,
|
||||
setLatencyTestTimeoutDuration,
|
||||
setProxiesOrderingType,
|
||||
setProxiesPreviewType,
|
||||
setRenderProxiesInTwoColumns,
|
||||
setUrlForLatencyTest,
|
||||
setUrlIPv6SupportTest,
|
||||
urlForIPv6SupportTest,
|
||||
@ -113,6 +115,19 @@ export const ProxiesSettingsModal: Component<{
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ConfigTitle withDivider>{t('renderInTwoColumns')}</ConfigTitle>
|
||||
|
||||
<div class="flex w-full justify-center">
|
||||
<input
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
checked={renderProxiesInTwoColumns()}
|
||||
onChange={(e) => setRenderProxiesInTwoColumns(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ConfigTitle withDivider>{t('proxiesPreviewType')}</ConfigTitle>
|
||||
|
||||
|
@ -42,27 +42,27 @@ export const ProxyPreviewBar = (props: {
|
||||
|
||||
return (
|
||||
<div class="flex items-center gap-2 py-2">
|
||||
<div class="flex flex-1 overflow-hidden rounded-2xl">
|
||||
<div class="flex h-4 flex-1 items-center justify-center">
|
||||
<div
|
||||
class="h-2 bg-success"
|
||||
class="h-2 overflow-hidden rounded-2xl bg-success"
|
||||
style={{
|
||||
width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-warning"
|
||||
class="h-2 overflow-hidden rounded-2xl bg-warning"
|
||||
style={{
|
||||
width: `${(middle() * 100) / all()}%`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-error"
|
||||
class="h-2 overflow-hidden rounded-2xl bg-error"
|
||||
style={{
|
||||
width: `${(slow() * 100) / all()}%`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-neutral"
|
||||
class="h-2 overflow-hidden rounded-2xl bg-neutral"
|
||||
style={{
|
||||
width: `${(notConnected() * 100) / all()}%`,
|
||||
}}
|
||||
|
@ -11,7 +11,6 @@ import {
|
||||
ProxiesSettingsModal,
|
||||
ProxyNodeCard,
|
||||
ProxyNodePreview,
|
||||
RenderInTwoColumns,
|
||||
SubscriptionInfo,
|
||||
} from '~/components'
|
||||
import {
|
||||
@ -23,6 +22,7 @@ import {
|
||||
formatTimeFromNow,
|
||||
hideUnAvailableProxies,
|
||||
proxiesOrderingType,
|
||||
renderProxiesInTwoColumns,
|
||||
useProxies,
|
||||
} from '~/signals'
|
||||
|
||||
@ -143,7 +143,12 @@ export default () => {
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<Show when={activeTab() === ActiveTab.proxies}>
|
||||
<RenderInTwoColumns>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={proxies()}>
|
||||
{(proxyGroup) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
@ -222,11 +227,16 @@ export default () => {
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</RenderInTwoColumns>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<RenderInTwoColumns>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={proxyProviders()}>
|
||||
{(proxyProvider) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
@ -318,7 +328,7 @@ export default () => {
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</RenderInTwoColumns>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
|
@ -32,6 +32,12 @@ export const [hideUnAvailableProxies, setHideUnAvailableProxies] =
|
||||
storage: localStorage,
|
||||
})
|
||||
|
||||
export const [renderProxiesInTwoColumns, setRenderProxiesInTwoColumns] =
|
||||
makePersisted(createSignal(true), {
|
||||
name: 'renderProxiesInTwoColumns',
|
||||
storage: localStorage,
|
||||
})
|
||||
|
||||
export const [urlForLatencyTest, setUrlForLatencyTest] = makePersisted(
|
||||
createSignal('https://www.gstatic.com/generate_204'),
|
||||
{ name: 'urlForLatencyTest', storage: localStorage },
|
||||
|
Loading…
Reference in New Issue
Block a user