summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Root.scss2
-rw-r--r--src/components/proxies/Proxy.module.scss26
-rw-r--r--src/components/proxies/Proxy.tsx16
-rw-r--r--src/components/proxies/ProxyList.module.scss1
-rw-r--r--src/components/proxies/ProxyProvider.tsx22
5 files changed, 45 insertions, 22 deletions
diff --git a/src/components/Root.scss b/src/components/Root.scss
index 5fb5ffd..719e7a2 100644
--- a/src/components/Root.scss
+++ b/src/components/Root.scss
@@ -96,6 +96,7 @@ body {
--bc-tooltip: #555;
--select-border-color: #040404;
--select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
+ --color-proxy-dot-selected-ind-bo: transparent;
}
@mixin light {
--color-background: #eee;
@@ -124,6 +125,7 @@ body {
--bc-tooltip: #ccc;
--select-border-color: #999999;
--select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
+ --color-proxy-dot-selected-ind-bo: #888;
}
:root[data-theme='auto'] {
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 3c4503f..aba4800 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -64,13 +64,31 @@
}
.proxySmall {
- width: 13px;
- height: 13px;
+ --size: 13px;
+ width: var(--size);
+ height: var(--size);
border-radius: 50%;
- border: 1px solid var(--color-background);
+ position: relative;
&.now {
- border-color: var(--color-text-secondary);
+ --size: 15px;
+ &:before {
+ --size-dot: 7px;
+ content: '';
+ position: absolute;
+ width: var(--size-dot);
+ height: var(--size-dot);
+ background-color: #fff;
+ // For non-primitive proxy type like "Selector", "LoadBalance", "DIRECT", etc. we are using a transparent
+ // background, and this selected indicator has a white background. In "light" them mode, the constrast
+ // between the bg of the indicator and the "background" is too small. In that case we want to add a
+ // border around this indicator so it's more distinguishable.
+ border: 1px solid var(--color-proxy-dot-selected-ind-bo);
+ border-radius: 4px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
&.selectable {
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index b943bcc..051d2e2 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -1,7 +1,6 @@
import { TooltipPopup, useTooltip } from '@reach/tooltip';
import cx from 'clsx';
import * as React from 'react';
-import { keyCodes } from 'src/misc/keycode';
import { State } from '$src/store/types';
@@ -40,16 +39,17 @@ function getLabelColor({
return colorMap.na;
}
-function getProxyDotBackgroundColor(
+function getProxyDotStyle(
latency: {
number?: number;
},
proxyType: string
) {
if (NonProxyTypes.indexOf(proxyType) > -1) {
- return 'linear-gradient(135deg, white 15%, #999 15% 30%, white 30% 45%, #999 45% 60%, white 60% 75%, #999 75% 90%, white 90% 100%)';
+ return { border: '1px dotted #777' };
}
- return getLabelColor(latency);
+ const bg = getLabelColor(latency);
+ return { background: bg };
}
type ProxyProps = {
@@ -62,7 +62,7 @@ type ProxyProps = {
};
function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyProps) {
- const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [latency, proxy]);
+ const style = useMemo(() => getProxyDotStyle(latency, proxy.type), [latency, proxy]);
const title = useMemo(() => {
let ret = name;
if (latency && typeof latency.number === 'number') {
@@ -84,9 +84,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
const handleKeyDown = React.useCallback(
(e: React.KeyboardEvent) => {
- if (e.keyCode === keyCodes.Enter) {
- doSelect();
- }
+ if (e.key === 'Enter') doSelect();
},
[doSelect]
);
@@ -95,7 +93,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
<div
title={title}
className={className}
- style={{ background: color }}
+ style={style}
onClick={doSelect}
onKeyDown={handleKeyDown}
role={isSelectable ? 'menuitem' : ''}
diff --git a/src/components/proxies/ProxyList.module.scss b/src/components/proxies/ProxyList.module.scss
index 1814929..d548572 100644
--- a/src/components/proxies/ProxyList.module.scss
+++ b/src/components/proxies/ProxyList.module.scss
@@ -10,4 +10,5 @@
display: grid;
grid-template-columns: repeat(auto-fill, 13px);
grid-gap: 10px;
+ place-items: center;
}
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index a20521c..972a735 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -16,11 +16,13 @@ import {
import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
import { DelayMapping, State } from 'src/store/types';
+import { useState2 } from '$src/hooks/basic';
+
import { useFilteredAndSorted } from './hooks';
import { ProxyList, ProxyListSummaryView } from './ProxyList';
import s from './ProxyProvider.module.scss';
-const { useState, useCallback } = React;
+const { useCallback } = React;
type Props = {
name: string;
@@ -49,15 +51,15 @@ function ProxyProviderImpl({
apiConfig,
}: Props) {
const proxies = useFilteredAndSorted(all, delay, hideUnavailableProxies, proxySortBy);
- const [isHealthcheckLoading, setIsHealthcheckLoading] = useState(false);
+ const checkingHealth = useState2(false);
const updateProvider = useUpdateProviderItem({ dispatch, apiConfig, name });
- const healthcheckProvider = useCallback(async () => {
- setIsHealthcheckLoading(true);
- await dispatch(healthcheckProviderByName(apiConfig, name));
- setIsHealthcheckLoading(false);
- }, [apiConfig, dispatch, name, setIsHealthcheckLoading]);
+ const healthcheckProvider = useCallback(() => {
+ checkingHealth.set(true);
+ const stop = () => checkingHealth.set(false);
+ dispatch(healthcheckProviderByName(apiConfig, name)).then(stop, stop);
+ }, [apiConfig, dispatch, name, checkingHealth]);
const {
app: { updateCollapsibleIsOpen },
@@ -77,7 +79,9 @@ function ProxyProviderImpl({
isOpen={isOpen}
qty={proxies.length}
/>
- <div className={s.updatedAt}><small>Updated {timeAgo} ago</small></div>
+ <div className={s.updatedAt}>
+ <small>Updated {timeAgo} ago</small>
+ </div>
<Collapsible isOpen={isOpen}>
<ProxyList all={proxies} />
<div className={s.actionFooter}>
@@ -86,7 +90,7 @@ function ProxyProviderImpl({
text="Health Check"
start={<Zap size={16} />}
onClick={healthcheckProvider}
- isLoading={isHealthcheckLoading}
+ isLoading={checkingHealth.value}
/>
</div>
</Collapsible>
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-14 09:53:35 +0000