wip: add icon for download

GZTimeWalker · Aug 22, 2023 · 9b4b5b5 · 9b4b5b5
1 parent 3405b79
commit 9b4b5b5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/TrafficItems.tsx b/src/GZCTF/ClientApp/src/components/TrafficItems.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { Avatar, Badge, Group, Stack, Text, rem, useMantineTheme } from '@mantine/core'
-import { mdiMenuRight } from '@mdi/js'
+import { mdiFileDownloadOutline, mdiMenuRight } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { SelectableItem, SelectableItemComponent } from '@Components/ScrollSelect'
 import { ChallengeTagLabelMap, HunamizeSize } from '@Utils/Shared'
@@ -85,14 +85,18 @@ export const FileItem: SelectableItemComponent<FileRecord> = (itemProps) => {
   return (
     <SelectableItem h={itemHeight} {...props}>
       <Group position="apart" spacing={0} w="100%" noWrap>
-        <Stack spacing={0} align="flex-start">
-          <Text truncate fw={500} w="calc(50vw - 20rem)">
-            {item.fileName}
-          </Text>
-          <Badge size="sm" color="indigo">
-            {dayjs(item.updateTime).format('MM/DD HH:mm:ss')}
-          </Badge>
-        </Stack>
+        <Group position="left" spacing="sm" noWrap>
+          <Icon path={mdiFileDownloadOutline} size={1.2} />
+
+          <Stack spacing={0} align="flex-start">
+            <Text truncate fw={500} w="calc(50vw - 22rem)">
+              {item.fileName}
+            </Text>
+            <Badge size="sm" color="indigo">
+              {dayjs(item.updateTime).format('MM/DD HH:mm:ss')}
+            </Badge>
+          </Stack>
+        </Group>
 
         <Text fw={500} size="sm">
           {HunamizeSize(item.size ?? 0)}

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Traffic.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Traffic.tsx
@@ -15,7 +15,7 @@ import {
   Title,
 } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
-import { mdiClose, mdiDownload } from '@mdi/js'
+import { mdiClose, mdiDownloadMultiple } from '@mdi/js'
 import Icon from '@mdi/react'
 import ScrollSelect from '@Components/ScrollSelect'
 import { ChallengeItem, TeamItem, FileItem } from '@Components/TrafficItems'
@@ -134,7 +134,7 @@ const Traffic: FC = () => {
                 </Text>
                 <Tooltip label="下载全部列出流量" position="left" classNames={tooltipClasses}>
                   <ActionIcon size="md" onClick={onDownloadAll}>
-                    <Icon path={mdiDownload} size={1} />
+                    <Icon path={mdiDownloadMultiple} size={1} />
                   </ActionIcon>
                 </Tooltip>
               </Group>