Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 03:32:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: adjust web ui item style

Browse Source
This commit is contained in:
GyDi 2022-08-16 01:08:54 +08:00
parent 2f8146b11f
commit bd576ca808
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
1 changed files with 91 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/setting/mods/web-ui-item.tsx
View File

@ -1,5 +1,11 @@
import { useState } from "react";
import { IconButton, Stack, TextField, Typography } from "@mui/material";
import {
Divider,
IconButton,
Stack,
TextField,
Typography,
} from "@mui/material";
import {
CheckRounded,
CloseRounded,
@ -32,83 +38,94 @@ const WebUIItem = (props: Props) => {
if (editing || onlyEdit) {
return (
<Stack spacing={1} direction="row" mt={1} mb={2} alignItems="center">
<TextField
fullWidth
size="small"
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
placeholder={`Support %host %port %secret`}
autoComplete="off"
/>
<IconButton
size="small"
title="Save"
color="inherit"
onClick={() => {
onChange(editValue);
setEditing(false);
}}
>
<CheckRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Cancel"
color="inherit"
onClick={() => {
onCancel?.();
setEditing(false);
}}
>
<CloseRounded fontSize="inherit" />
</IconButton>
</Stack>
<>
<Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
<TextField
fullWidth
size="small"
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
placeholder={`Support %host %port %secret`}
autoComplete="off"
/>
<IconButton
size="small"
title="Save"
color="inherit"
onClick={() => {
onChange(editValue);
setEditing(false);
}}
>
<CheckRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Cancel"
color="inherit"
onClick={() => {
onCancel?.();
setEditing(false);
}}
>
<CloseRounded fontSize="inherit" />
</IconButton>
</Stack>
<Divider />
</>
);
}
const html = value
?.replace("%host", "<span>%host</span>")
.replace("%port", "<span>%port</span>")
.replace("%secret", "<span>%secret</span>");
return (
<Stack spacing={1} direction="row" alignItems="center" mt={1} mb={2}>
<Typography
component="div"
width="100%"
title={value}
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{value || "NULL"}
</Typography>
<IconButton
size="small"
title="Open URL"
color="inherit"
onClick={() => onOpenUrl?.(value)}
>
<OpenInNewRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Edit"
color="inherit"
onClick={() => {
setEditing(true);
setEditValue(value);
}}
>
<EditRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Delete"
color="inherit"
onClick={onDelete}
>
<DeleteRounded fontSize="inherit" />
</IconButton>
</Stack>
<>
<Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
<Typography
component="div"
width="100%"
title={value}
color={value ? "text.primary" : "text.secondary"}
sx={({ palette }) => ({
"> span": {
color: palette.primary.main,
},
})}
dangerouslySetInnerHTML={{ __html: html || "NULL" }}
/>
<IconButton
size="small"
title="Open URL"
color="inherit"
onClick={() => onOpenUrl?.(value)}
>
<OpenInNewRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Edit"
color="inherit"
onClick={() => {
setEditing(true);
setEditValue(value);
}}
>
<EditRounded fontSize="inherit" />
</IconButton>
<IconButton
size="small"
title="Delete"
color="inherit"
onClick={onDelete}
>
<DeleteRounded fontSize="inherit" />
</IconButton>
</Stack>
<Divider />
</>
);
};