feat(proxy): add back the render proxies in two columns option, closes #360

This commit is contained in:
kunish 2023-10-29 20:02:10 +08:00
parent 0de2010790
commit 62c0cd9a63
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 41 additions and 10 deletions

View File

@ -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>

View File

@ -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()}%`,
}}

View File

@ -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>

View File

@ -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 },