shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 06:33:45 +08:00
Code Packages Projects Releases Activity

chore: hotkeys display delimiter

Browse Source
This commit is contained in:
dongchengjie 2024-06-21 18:24:58 +08:00
parent 8bd8e149cf
commit aba2ce8390
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -36,7 +36,7 @@
"foxact": "^0.2.35", "foxact": "^0.2.35",
"i18next": "^23.11.5", "i18next": "^23.11.5",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"meta-json-schema": "1.18.5-alpha4", "meta-json-schema": "1.18.5-alpha6",
"monaco-editor": "^0.49.0", "monaco-editor": "^0.49.0",
"monaco-yaml": "^5.2.0", "monaco-yaml": "^5.2.0",
"nanoid": "^5.0.7", "nanoid": "^5.0.7",

10
pnpm-lock.yaml generated
View File

@ -62,8 +62,8 @@ importers:
specifier: ^4.17.21 specifier: ^4.17.21
version: 4.17.21 version: 4.17.21
meta-json-schema: meta-json-schema:
specifier: 1.18.5-alpha4 specifier: 1.18.5-alpha6
version: 1.18.5-alpha4 version: 1.18.5-alpha6
monaco-editor: monaco-editor:
specifier: ^0.49.0 specifier: ^0.49.0
version: 0.49.0 version: 0.49.0
@ -3295,10 +3295,10 @@ packages:
integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==, integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==,
} }
meta-json-schema@1.18.5-alpha4: meta-json-schema@1.18.5-alpha6:
resolution: resolution:
{ {
integrity: sha512-q+JzaM3tMssFPtfu7nxQmILKbJwq08c+0OfRnrdyYwiBaDd0Nim3LPIkiz9vJiuF4c3o5utLU39Q3z8VoUT0qQ==, integrity: sha512-Qh1NOgM8HMKLdx59NUy+Um+r2xOJptD7ge/0rnwxGS+MuEFeBCmNF1lUjW3e1Iktngd8TCopji8KdmGPCla+cw==,
} }
micromark-core-commonmark@2.0.1: micromark-core-commonmark@2.0.1:
@ -6611,7 +6611,7 @@ snapshots:
merge-stream@2.0.0: {} merge-stream@2.0.0: {}
meta-json-schema@1.18.5-alpha4: {} meta-json-schema@1.18.5-alpha6: {}
micromark-core-commonmark@2.0.1: micromark-core-commonmark@2.0.1:
dependencies: dependencies:

24
src/components/setting/mods/hotkey-input.tsx
View File

@ -2,6 +2,7 @@ import { useRef, useState } from "react";
import { alpha, Box, IconButton, styled } from "@mui/material"; import { alpha, Box, IconButton, styled } from "@mui/material";
import { DeleteRounded } from "@mui/icons-material"; import { DeleteRounded } from "@mui/icons-material";
import { parseHotkey } from "@/utils/parse-hotkey"; import { parseHotkey } from "@/utils/parse-hotkey";
import { useTranslation } from "react-i18next";
const KeyWrapper = styled("div")(({ theme }) => ({ const KeyWrapper = styled("div")(({ theme }) => ({
position: "relative", position: "relative",
@ -41,9 +42,12 @@ const KeyWrapper = styled("div")(({ theme }) => ({
border: "1px solid", border: "1px solid",
borderColor: alpha(theme.palette.text.secondary, 0.2), borderColor: alpha(theme.palette.text.secondary, 0.2),
borderRadius: "2px", borderRadius: "2px",
padding: "1px 1px", padding: "1px 5px",
margin: "2px 0", margin: "2px 0",
marginRight: 8, },
".delimiter": {
lineHeight: "25px",
padding: "0 2px",
}, },
})); }));
@ -54,6 +58,7 @@ interface Props {
export const HotkeyInput = (props: Props) => { export const HotkeyInput = (props: Props) => {
const { value, onChange } = props; const { value, onChange } = props;
const { t } = useTranslation();
const changeRef = useRef<string[]>([]); const changeRef = useRef<string[]>([]);
const [keys, setKeys] = useState(value); const [keys, setKeys] = useState(value);
@ -83,17 +88,22 @@ export const HotkeyInput = (props: Props) => {
/> />
<div className="list"> <div className="list">
{keys.map((key) => ( {keys.map((key, index) => (
<div key={key} className="item"> <Box display="flex">
{key} <span className="delimiter" hidden={index === 0}>
</div> +
</span>
<div key={key} className="item">
{key}
</div>
</Box>
))} ))}
</div> </div>
</KeyWrapper> </KeyWrapper>
<IconButton <IconButton
size="small" size="small"
title="Delete" title={t("Delete")}
color="inherit" color="inherit"
onClick={() => { onClick={() => {
onChange([]); onChange([]);