LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1994 from SkynetLabs/dashboard-v2-feedback-fixes-main-screen 

Dashboard v2 - Address feedback regarding main dashboard
This commit is contained in:
Karol Wypchło 2022-04-12 12:43:27 +02:00 committed by GitHub
parent f7b7392449 d164e538cd
commit a611dd5d07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
View File

@ -12,11 +12,13 @@ const BarTip = styled.span.attrs({
})``; })``;
const BarLabel = styled.span.attrs({ const BarLabel = styled.span.attrs({
className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow", className: "usage-label bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow",
})` })`
right: max(0%, ${({ $percentage }) => 100 - $percentage}%); ${({ $percentage }) => `
top: -0.5rem; left: max(0%, ${$percentage}%);
transform: translateX(50%); top: -0.5rem;
transform: translateX(-${$percentage}%);
`}
`; `;
export const GraphBar = ({ value, limit, label }) => { export const GraphBar = ({ value, limit, label }) => {

34
packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
View File

@ -4,6 +4,7 @@ import useSWR from "swr";
import { Table, TableBody, TableCell, TableRow } from "../Table"; import { Table, TableBody, TableCell, TableRow } from "../Table";
import { ContainerLoadingIndicator } from "../LoadingIndicator"; import { ContainerLoadingIndicator } from "../LoadingIndicator";
import { ViewAllLink } from "./ViewAllLink";
import useFormattedActivityData from "./useFormattedActivityData"; import useFormattedActivityData from "./useFormattedActivityData";
export default function ActivityTable({ type }) { export default function ActivityTable({ type }) {
@ -22,20 +23,23 @@ export default function ActivityTable({ type }) {
} }
return ( return (
<Table style={{ tableLayout: "fixed" }}> <>
<TableBody> <Table style={{ tableLayout: "fixed" }}>
{items.map(({ id, name, type, size, date, skylink }) => ( <TableBody>
<TableRow key={id}> {items.map(({ id, name, type, size, date, skylink }) => (
<TableCell>{name}</TableCell> <TableRow key={id}>
<TableCell className="w-[80px]">{type}</TableCell> <TableCell>{name}</TableCell>
<TableCell className="w-[80px]" align="right"> <TableCell className="w-[80px]">{type}</TableCell>
{size} <TableCell className="w-[80px]" align="right">
</TableCell> {size}
<TableCell className="w-[180px]">{date}</TableCell> </TableCell>
<TableCell>{skylink}</TableCell> <TableCell className="w-[180px]">{date}</TableCell>
</TableRow> <TableCell>{skylink}</TableCell>
))} </TableRow>
</TableBody> ))}
</Table> </TableBody>
</Table>
<ViewAllLink to={`/files?tab=${type}`} />
</>
); );
} }

13
packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
View File

@ -1,21 +1,10 @@
import * as React from "react"; import * as React from "react";
import { Link } from "gatsby";
import { Panel } from "../Panel"; import { Panel } from "../Panel";
import { Tab, TabPanel, Tabs } from "../Tabs"; import { Tab, TabPanel, Tabs } from "../Tabs";
import { ArrowRightIcon } from "../Icons";
import ActivityTable from "./ActivityTable"; import ActivityTable from "./ActivityTable";
const ViewAllLink = (props) => (
<Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
<span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
<ArrowRightIcon />
</span>
<span className="font-sans text-xs uppercase text-palette-400">View all</span>
</Link>
);
export default function LatestActivity() { export default function LatestActivity() {
return ( return (
<Panel title="Latest activity"> <Panel title="Latest activity">
@ -24,11 +13,9 @@ export default function LatestActivity() {
<Tab id="downloads" title="Downloads" /> <Tab id="downloads" title="Downloads" />
<TabPanel tabId="uploads" className="pt-4"> <TabPanel tabId="uploads" className="pt-4">
<ActivityTable type="uploads" /> <ActivityTable type="uploads" />
<ViewAllLink to="/files?tab=uploads" />
</TabPanel> </TabPanel>
<TabPanel tabId="downloads" className="pt-4"> <TabPanel tabId="downloads" className="pt-4">
<ActivityTable type="downloads" /> <ActivityTable type="downloads" />
<ViewAllLink to="/files?tab=downloads" />
</TabPanel> </TabPanel>
</Tabs> </Tabs>
</Panel> </Panel>

12
packages/dashboard-v2/src/components/LatestActivity/ViewAllLink.js Normal file
View File

@ -0,0 +1,12 @@
import { Link } from "gatsby";
import { ArrowRightIcon } from "../Icons";
export const ViewAllLink = (props) => (
<Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
<span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
<ArrowRightIcon />
</span>
<span className="font-sans text-xs uppercase text-palette-400">View all</span>
</Link>
);

1
packages/dashboard-v2/src/components/Uploader/UploaderItem.js
View File

@ -109,7 +109,6 @@ export default function UploaderItem({ onUploadStateChange, upload }) {
{upload.status === "uploading" && ( {upload.status === "uploading" && (
<span className="uppercase tabular-nums">{Math.floor(upload.progress * 100)}%</span> <span className="uppercase tabular-nums">{Math.floor(upload.progress * 100)}%</span>
)} )}
{upload.status === "processing" && <span className="uppercase text-palette-300">Wait</span>}
{upload.status === "complete" && ( {upload.status === "complete" && (
<button <button
className="uppercase hover:text-primary transition-colors duration-200" className="uppercase hover:text-primary transition-colors duration-200"