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