diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx index ee21040..d7d5331 100644 --- a/frontend/src/Layout.tsx +++ b/frontend/src/Layout.tsx @@ -4,7 +4,7 @@ import Dashboard from '@mui/icons-material/Dashboard' import DownloadIcon from '@mui/icons-material/Download' import Menu from '@mui/icons-material/Menu' import SettingsIcon from '@mui/icons-material/Settings' -import SettingsEthernet from '@mui/icons-material/SettingsEthernet' +import TerminalIcon from '@mui/icons-material/Terminal' import { Box, createTheme } from '@mui/material' import CssBaseline from '@mui/material/CssBaseline' import Divider from '@mui/material/Divider' @@ -16,26 +16,23 @@ import ListItemText from '@mui/material/ListItemText' import Toolbar from '@mui/material/Toolbar' import Typography from '@mui/material/Typography' import { grey } from '@mui/material/colors' -import { Suspense, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import { Link, Outlet } from 'react-router-dom' import { useRecoilValue } from 'recoil' import { settingsState } from './atoms/settings' -import { connectedState } from './atoms/status' import AppBar from './components/AppBar' import Drawer from './components/Drawer' -import FreeSpaceIndicator from './components/FreeSpaceIndicator' +import Footer from './components/Footer' import Logout from './components/Logout' import SocketSubscriber from './components/SocketSubscriber' import ThemeToggler from './components/ThemeToggler' import { useI18n } from './hooks/useI18n' import Toaster from './providers/ToasterProvider' -import TerminalIcon from '@mui/icons-material/Terminal' export default function Layout() { const [open, setOpen] = useState(false) const settings = useRecoilValue(settingsState) - const isConnected = useRecoilValue(connectedState) const mode = settings.theme const theme = useMemo(() => @@ -81,21 +78,6 @@ export default function Layout() { > {settings.appTitle} - - - -
- - - {isConnected ? settings.serverAddr : i18n.t('notConnectedText')} - -
@@ -181,6 +163,7 @@ export default function Layout() { +
) diff --git a/frontend/src/components/Downloads.tsx b/frontend/src/components/Downloads.tsx index 6b49797..f315185 100644 --- a/frontend/src/components/Downloads.tsx +++ b/frontend/src/components/Downloads.tsx @@ -4,7 +4,7 @@ import { loadingDownloadsState } from '../atoms/downloads' import { listViewState } from '../atoms/settings' import { loadingAtom } from '../atoms/ui' import DownloadsCardView from './DownloadsCardView' -import DownloadsListView from './DownloadsListView' +import DownloadsListView from './DownloadsTableView' const Downloads: React.FC = () => { const listView = useRecoilValue(listViewState) diff --git a/frontend/src/components/DownloadsListView.tsx b/frontend/src/components/DownloadsListView.tsx deleted file mode 100644 index 84b0602..0000000 --- a/frontend/src/components/DownloadsListView.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { - Button, - Grid, - LinearProgress, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Typography -} from "@mui/material" -import { useRecoilValue } from 'recoil' -import { activeDownloadsState } from '../atoms/downloads' -import { useRPC } from '../hooks/useRPC' -import { ellipsis, formatSpeedMiB, formatSize } from "../utils" - - -const DownloadsListView: React.FC = () => { - const downloads = useRecoilValue(activeDownloadsState) - - const { client } = useRPC() - - const abort = (id: string) => client.kill(id) - - return ( - - - - - - ) -} - -export default DownloadsListView \ No newline at end of file diff --git a/frontend/src/components/DownloadsTableView.tsx b/frontend/src/components/DownloadsTableView.tsx new file mode 100644 index 0000000..7553e93 --- /dev/null +++ b/frontend/src/components/DownloadsTableView.tsx @@ -0,0 +1,135 @@ +import { + Box, + Button, + Grid, + IconButton, + LinearProgress, + LinearProgressProps, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography +} from "@mui/material" +import { useRecoilValue } from 'recoil' +import { activeDownloadsState } from '../atoms/downloads' +import { useRPC } from '../hooks/useRPC' +import { ellipsis, formatSpeedMiB, formatSize } from "../utils" +import DownloadIcon from '@mui/icons-material/Download' +import DownloadDoneIcon from '@mui/icons-material/DownloadDone' +import StopCircleIcon from '@mui/icons-material/StopCircle' +import DeleteIcon from '@mui/icons-material/Delete' + +function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) { + return ( + + + + + + {`${Math.round( + props.value, + )}%`} + + + ) +} + +const DownloadsListView: React.FC = () => { + const downloads = useRecoilValue(activeDownloadsState) + + const { client } = useRPC() + + const abort = (id: string) => client.kill(id) + + return ( + + + + + + ) +} + +export default DownloadsListView \ No newline at end of file diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx new file mode 100644 index 0000000..ff9f95b --- /dev/null +++ b/frontend/src/components/Footer.tsx @@ -0,0 +1,56 @@ +import SettingsEthernet from '@mui/icons-material/SettingsEthernet' +import { AppBar, Toolbar } from '@mui/material' +import { Suspense } from 'react' +import { useRecoilValue } from 'recoil' +import { settingsState } from '../atoms/settings' +import { connectedState } from '../atoms/status' +import { useI18n } from '../hooks/useI18n' +import FreeSpaceIndicator from './FreeSpaceIndicator' +import GitHubIcon from '@mui/icons-material/GitHub' + +const Footer: React.FC = () => { + const settings = useRecoilValue(settingsState) + const isConnected = useRecoilValue(connectedState) + + const mode = settings.theme + const { i18n } = useI18n() + + return ( + + +
v3.0.6
+
+
+ + + {isConnected ? settings.serverAddr : i18n.t('notConnectedText')} + +
+ + + +
+ + + ) +} + +export default Footer \ No newline at end of file diff --git a/frontend/src/components/HomeSpeedDial.tsx b/frontend/src/components/HomeSpeedDial.tsx index 3a68c37..31e62be 100644 --- a/frontend/src/components/HomeSpeedDial.tsx +++ b/frontend/src/components/HomeSpeedDial.tsx @@ -2,6 +2,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle' import BuildCircleIcon from '@mui/icons-material/BuildCircle' import DeleteForeverIcon from '@mui/icons-material/DeleteForever' import FormatListBulleted from '@mui/icons-material/FormatListBulleted' +import ViewAgendaIcon from '@mui/icons-material/ViewAgenda' import { SpeedDial, SpeedDialAction, @@ -18,7 +19,7 @@ type Props = { } const HomeSpeedDial: React.FC = ({ onDownloadOpen, onEditorOpen }) => { - const [, setListView] = useRecoilState(listViewState) + const [listView, setListView] = useRecoilState(listViewState) const { i18n } = useI18n() const { client } = useRPC() @@ -28,12 +29,12 @@ const HomeSpeedDial: React.FC = ({ onDownloadOpen, onEditorOpen }) => { return ( } > } - tooltipTitle={`Table view`} + icon={listView ? : } + tooltipTitle={listView ? 'Card view' : 'Table view'} onClick={() => setListView(state => !state)} /> { ref={boxRef} sx={{ fontFamily: 'Roboto Mono', - height: '75.5vh', + height: '70.5vh', overflowY: 'auto', overflowX: 'auto', fontSize: '13.5px', diff --git a/frontend/src/views/Archive.tsx b/frontend/src/views/Archive.tsx index 863007d..5ed3614 100644 --- a/frontend/src/views/Archive.tsx +++ b/frontend/src/views/Archive.tsx @@ -275,7 +275,7 @@ export default function Downloaded() { } > + diff --git a/frontend/src/views/Settings.tsx b/frontend/src/views/Settings.tsx index e21eaea..b4d4b81 100644 --- a/frontend/src/views/Settings.tsx +++ b/frontend/src/views/Settings.tsx @@ -134,7 +134,7 @@ export default function Settings() { } return ( - +