From 794d37634827dbc261efe94a633228374c72429a Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sat, 19 Feb 2022 00:23:47 +0800
Subject: [PATCH] feat: adjust profile item ui
---
src/assets/styles/index.scss | 1 +
src/components/profile/profile-item.tsx | 86 ++++++++++++++-----------
2 files changed, 48 insertions(+), 39 deletions(-)
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index bda856d..10c6c25 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -4,6 +4,7 @@ body {
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
+ user-select: none;
}
:root {
diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx
index 76ea37b..0fd587f 100644
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -59,8 +59,11 @@ 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;
+ // local file mode
+ // remote file mode
+ // subscription url mode
+ const hasUrl = !!itemData.url;
+ const hasExtra = !!extra; // only subscription url has extra info
const onView = async () => {
setAnchorEl(null);
@@ -178,7 +181,8 @@ const ProfileItem: React.FC<Props> = (props) => {
{name}
</Typography>
- {isUrlMode && (
+ {/* only if has url can it be updated */}
+ {hasUrl && (
<IconButton
sx={{
width: 26,
@@ -197,43 +201,43 @@ const ProfileItem: React.FC<Props> = (props) => {
)}
</Box>
- {isUrlMode ? (
- <>
- <Box sx={boxStyle}>
- <Typography noWrap title={`From: ${from}`}>
- {from}
- </Typography>
+ {/* the second line show url's info or description */}
+ {hasUrl ? (
+ <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>
-
- <Box sx={{ ...boxStyle, fontSize: 14 }}>
- <span title="used / total">
- {parseTraffic(upload + download)} / {parseTraffic(total)}
- </span>
- <span title="expire time">{expire}</span>
- </Box>
- </>
+ <Typography
+ noWrap
+ flex="1 0 auto"
+ fontSize={14}
+ textAlign="right"
+ title="updated time"
+ >
+ {fromnow}
+ </Typography>
+ </Box>
) : (
- <>
- <Box sx={boxStyle}>
- <Typography noWrap title={itemData.desc}>
- {itemData.desc}
- </Typography>
- </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>
- </>
+ {/* the third line show extra info or last updated time */}
+ {hasExtra ? (
+ <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, fontSize: 14, justifyContent: "flex-end" }}>
+ <span title="updated time">{parseExpire(updated)}</span>
+ </Box>
)}
<LinearProgress
@@ -250,8 +254,12 @@ const ProfileItem: React.FC<Props> = (props) => {
anchorPosition={position}
anchorReference="anchorPosition"
>
- {(isUrlMode ? urlModeMenu : fileModeMenu).map((item) => (
- <MenuItem key={item.label} onClick={item.handler}>
+ {(hasUrl ? urlModeMenu : fileModeMenu).map((item) => (
+ <MenuItem
+ key={item.label}
+ onClick={item.handler}
+ sx={{ minWidth: 133 }}
+ >
{item.label}
</MenuItem>
))}
--
GitLab