From 99fec25ed5bca63a9059d138a2eb62f97a739393 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Wed, 9 Feb 2022 02:08:27 +0800
Subject: [PATCH] feat: profile item ui
---
src/components/profile-item.tsx | 105 +++++++++++++++++++-------------
src/services/types.ts | 1 +
2 files changed, 64 insertions(+), 42 deletions(-)
diff --git a/src/components/profile-item.tsx b/src/components/profile-item.tsx
index 542e452..9870477 100644
--- a/src/components/profile-item.tsx
+++ b/src/components/profile-item.tsx
@@ -59,6 +59,9 @@ const ProfileItem: React.FC<Props> = (props) => {
const progress = Math.round(((download + upload) * 100) / (total + 0.1));
const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
+ // url or file mode
+ const isUrlMode = itemData.url && extra;
+
const onView = async () => {
setAnchorEl(null);
try {
@@ -111,6 +114,13 @@ const ProfileItem: React.FC<Props> = (props) => {
event.preventDefault();
};
+ const boxStyle = {
+ height: 26,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ };
+
return (
<>
<Wrapper
@@ -155,52 +165,63 @@ const ProfileItem: React.FC<Props> = (props) => {
{name}
</Typography>
- <IconButton
- sx={{
- width: 30,
- height: 30,
- animation: loading ? `1s linear infinite ${round}` : "none",
- }}
- color="inherit"
- disabled={loading}
- onClick={(e) => {
- e.stopPropagation();
- onUpdateWrapper(false)();
- }}
- >
- <RefreshRounded />
- </IconButton>
+ {isUrlMode && (
+ <IconButton
+ sx={{
+ width: 26,
+ height: 26,
+ animation: loading ? `1s linear infinite ${round}` : "none",
+ }}
+ color="inherit"
+ disabled={loading}
+ onClick={(e) => {
+ e.stopPropagation();
+ onUpdateWrapper(false)();
+ }}
+ >
+ <RefreshRounded />
+ </IconButton>
+ )}
</Box>
- <Box display="flex" justifyContent="space-between" alignItems="center">
- <Typography noWrap title={`From: ${from}`}>
- {from}
- </Typography>
+ {isUrlMode ? (
+ <>
+ <Box sx={boxStyle}>
+ <Typography noWrap title={`From: ${from}`}>
+ {from}
+ </Typography>
- <Typography
- noWrap
- flex="1 0 auto"
- fontSize={14}
- textAlign="right"
- title="updated time"
- >
- {fromnow}
- </Typography>
- </Box>
+ <Typography
+ noWrap
+ flex="1 0 auto"
+ fontSize={14}
+ textAlign="right"
+ title="updated time"
+ >
+ {fromnow}
+ </Typography>
+ </Box>
- <Box
- sx={{
- my: 0.5,
- fontSize: 14,
- display: "flex",
- justifyContent: "space-between",
- }}
- >
- <span title="used / total">
- {parseTraffic(upload + download)} / {parseTraffic(total)}
- </span>
- <span title="expire time">{expire}</span>
- </Box>
+ <Box sx={{ ...boxStyle, fontSize: 14 }}>
+ <span title="used / total">
+ {parseTraffic(upload + download)} / {parseTraffic(total)}
+ </span>
+ <span title="expire time">{expire}</span>
+ </Box>
+ </>
+ ) : (
+ <>
+ <Box sx={boxStyle}>
+ <Typography noWrap title={itemData.desc}>
+ {itemData.desc}
+ </Typography>
+ </Box>
+
+ <Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
+ <span title="updated time">{parseExpire(updated)}</span>
+ </Box>
+ </>
+ )}
<LinearProgress
variant="determinate"
diff --git a/src/services/types.ts b/src/services/types.ts
index e45ee00..1f42c82 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -87,6 +87,7 @@ export namespace CmdType {
export interface ProfileItem {
name?: string;
+ desc?: string;
file?: string;
mode?: string;
url?: string;
--
GitLab