From 68048c6982bcbb5200fd4a8358893e42be0cefd6 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Wed, 2 Dec 2020 12:52:47 +0200 Subject: [PATCH] Release/prod 2020 12 02 (#591) * Files-UI - File or Folder operations (#586) * Components - Progress Bar Indeterminant state added (#589) * Files Landing - Add button to landing page && Fix image (#587) --- packages/common-components/package.json | 3 +- .../src/MenuDropdown/MenuDropdown.tsx | 2 +- .../src/ProgressBar/ProgressBar.tsx | 113 +++++++++++++-- .../src/stories/ProgressBar.stories.tsx | 1 + .../src/Components/Modules/Title.tsx | 4 +- .../src/Components/Subpages/Landing.tsx | 134 ++++++++++++------ .../Modules/FileBrowserModule/FileBrowser.tsx | 11 +- .../FileBrowserModule/FileOrFolderView.tsx | 128 ++++++++++------- .../Modules/FileBrowserModule/index.tsx | 5 +- .../Modules/FileBrowserModule/types.ts | 9 ++ .../src/Components/Pages/HomePage.tsx | 7 +- 11 files changed, 300 insertions(+), 117 deletions(-) create mode 100644 packages/files-ui/src/Components/Modules/FileBrowserModule/types.ts diff --git a/packages/common-components/package.json b/packages/common-components/package.json index cbb373d75d..927b4aad00 100644 --- a/packages/common-components/package.json +++ b/packages/common-components/package.json @@ -1,6 +1,6 @@ { "name": "@chainsafe/common-components", - "version": "1.0.25", + "version": "1.0.26", "description": "Common Components", "author": "Michael Yankelev ", "license": "GPL-3.0", @@ -28,6 +28,7 @@ "rollup-plugin-babel": "^4.4.0" }, "peerDependencies": { + "@chainsafe/common-theme": ">1.0.0", "@material-ui/styles": ">4.0.0", "formik": "^2.2.5", "react": ">16.8.0", diff --git a/packages/common-components/src/MenuDropdown/MenuDropdown.tsx b/packages/common-components/src/MenuDropdown/MenuDropdown.tsx index cc56495fb4..ea05e6a2ad 100644 --- a/packages/common-components/src/MenuDropdown/MenuDropdown.tsx +++ b/packages/common-components/src/MenuDropdown/MenuDropdown.tsx @@ -252,4 +252,4 @@ const MenuDropdown: React.FC = ({ export default MenuDropdown -export { IMenuDropdownProps } +export { IMenuItem, IMenuDropdownProps } diff --git a/packages/common-components/src/ProgressBar/ProgressBar.tsx b/packages/common-components/src/ProgressBar/ProgressBar.tsx index c250348453..eb2166d982 100644 --- a/packages/common-components/src/ProgressBar/ProgressBar.tsx +++ b/packages/common-components/src/ProgressBar/ProgressBar.tsx @@ -9,6 +9,26 @@ interface IStyleProps { const useStyles = makeStyles((theme: ITheme) => createStyles({ + "@keyframes increase": { + from: { + left: "-5%", + width: "5%", + }, + to: { + left: "130%", + width: "100%", + }, + }, + "@keyframes decrease": { + from: { + left: "-80%", + width: "80%", + }, + to: { + left: "110%", + width: "10%", + }, + }, root: { backgroundColor: theme.palette.additional["gray"][4], position: "relative", @@ -25,14 +45,83 @@ const useStyles = makeStyles((theme: ITheme) => borderRadius: theme.constants.generalUnit * 3, }, }, - progressBar: (props: IStyleProps) => ({ + line: { + position: "absolute", + opacity: 0.4, + width: "150%", + background: theme.palette.additional["blue"][6], + "&.primary": { + background: theme.palette.primary.main, + }, + "&.secondary": { + background: theme.palette.secondary.main, + }, + "&.small": { + height: theme.constants.generalUnit, + borderRadius: theme.constants.generalUnit, + }, + "&.medium": { + height: theme.constants.generalUnit * 2, + borderRadius: theme.constants.generalUnit * 2, + }, + "&.large": { + height: theme.constants.generalUnit * 3, + borderRadius: theme.constants.generalUnit * 3, + }, + }, + slider: { + position: "absolute", + overflowX: "hidden", + width: "100%", + "&.small": { + height: theme.constants.generalUnit, + borderRadius: theme.constants.generalUnit, + }, + "&.medium": { + height: theme.constants.generalUnit * 2, + borderRadius: theme.constants.generalUnit * 2, + }, + "&.large": { + height: theme.constants.generalUnit * 3, + borderRadius: theme.constants.generalUnit * 3, + }, + }, + subline: { + position: "absolute", + background: theme.palette.additional["blue"][6], + "&.primary": { + background: theme.palette.primary.main, + }, + "&.secondary": { + background: theme.palette.secondary.main, + }, + "&.small": { + height: theme.constants.generalUnit, + borderRadius: theme.constants.generalUnit, + }, + "&.medium": { + height: theme.constants.generalUnit * 2, + borderRadius: theme.constants.generalUnit * 2, + }, + "&.large": { + height: theme.constants.generalUnit * 3, + borderRadius: theme.constants.generalUnit * 3, + }, + "&.inc": { + animation: "$increase 2s infinite", + }, + "&.dec": { + animation: "$decrease 2s 0.5s infinite", + }, + }, + progressBar: ({ width }: IStyleProps) => ({ borderRadius: theme.constants.generalUnit, display: "flex", alignItems: "center", justifyContent: "center", height: "100%", transition: `${theme.animation.translate}ms`, - width: `${props.width}%`, + width: `${width}%`, "&.small": { borderRadius: theme.constants.generalUnit, }, @@ -68,26 +157,34 @@ export type ProgressBarVariant = "primary" | "secondary" export interface IProgressBarProps { className?: string state?: ProgressBarState - progress: number + progress?: number size?: ProgressBarSize variant?: ProgressBarVariant } const ProgressBar: React.FC = ({ className, state = "progress", - progress, + progress = -1, size = "medium", variant, ...rest }) => { - const progressValue = progress < 0 ? 0 : progress > 100 ? 100 : progress + const progressValue = progress < -1 ? -1 : progress > 100 ? 100 : progress const classes = useStyles({ width: progressValue }) return (
-
+ {progressValue == -1 ? ( +
+
+
+
+
+ ) : ( +
+ )}
) } diff --git a/packages/common-components/src/stories/ProgressBar.stories.tsx b/packages/common-components/src/stories/ProgressBar.stories.tsx index d30c1dc276..e6ae330a16 100644 --- a/packages/common-components/src/stories/ProgressBar.stories.tsx +++ b/packages/common-components/src/stories/ProgressBar.stories.tsx @@ -30,6 +30,7 @@ export const ProgressBarDemo = (): React.ReactNode => { )} progress={progress} /> + diff --git a/packages/files-landing-page/src/Components/Modules/Title.tsx b/packages/files-landing-page/src/Components/Modules/Title.tsx index 17af51736a..6b9da9ff0c 100644 --- a/packages/files-landing-page/src/Components/Modules/Title.tsx +++ b/packages/files-landing-page/src/Components/Modules/Title.tsx @@ -15,8 +15,8 @@ const useStyles = makeStyles(({ constants, palette, breakpoints }: ITheme) => { margin: `${constants.generalUnit * 6} 0 ${constants.generalUnit * 2} 0`, color: palette.common.white.main, [breakpoints.down("md")]: { - fontSize: "40px", - lineHeight: "48px", + fontSize: "30px", + lineHeight: "38px", }, [breakpoints.down("xs")]: { fontSize: "20px", diff --git a/packages/files-landing-page/src/Components/Subpages/Landing.tsx b/packages/files-landing-page/src/Components/Subpages/Landing.tsx index d99f80cb3d..4abbc5740f 100644 --- a/packages/files-landing-page/src/Components/Subpages/Landing.tsx +++ b/packages/files-landing-page/src/Components/Subpages/Landing.tsx @@ -1,41 +1,88 @@ import React, { useState, useEffect } from "react" -import { Grid } from "@chainsafe/common-components" +import { Grid, Button } from "@chainsafe/common-components" import Section from "../Modules/Section" import Title from "../Modules/Title" import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" import { t, Trans } from "@lingui/macro" -const useStyles = makeStyles(({ zIndex, breakpoints }: ITheme) => { - return createStyles({ - img: { - zIndex: zIndex?.layer0, - width: "100%", - [breakpoints.between(800, 1400)]: { - marginTop: "20vh", - bottom: 0, +const useStyles = makeStyles( + ({ constants, palette, zIndex, breakpoints }: ITheme) => { + return createStyles({ + wrapper: { + maxWidth: "2560px", + display: "flex", + paddingTop: "5vh", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + [breakpoints.up("xl")]: { + position: "relative", + left: "50%", + transform: "translate(-50%)", + }, }, - [breakpoints.down("md")]: { - position: "absolute", - bottom: 0, + img: { + zIndex: zIndex?.layer0, + width: "100%", + [breakpoints.between(800, 1400)]: { + marginTop: "10vh", + bottom: 0, + }, + [breakpoints.down("md")]: { + position: "absolute", + bottom: 0, + }, }, - }, - title: { - position: "absolute", - top: 200, - width: "100%", - display: "flex", - justify: "center", - alignItems: "center", - zIndex: zIndex?.layer3, - [breakpoints.down("1370")]: { - width: "70%", + title: { + position: "relative", + top: 100, + width: "100%", + display: "flex", + justify: "center", + alignItems: "center", + zIndex: zIndex?.layer3, + [breakpoints.down("1370")]: { + width: "70%", + }, + [breakpoints.down("sm")]: { + top: 75, + }, }, - [breakpoints.down("sm")]: { - top: 120, + button: { + zIndex: zIndex?.layer3, + fontSize: "25px", + marginTop: constants.generalUnit * 4, + color: palette.additional["gray"][3], + position: "relative", + padding: "1.5rem 0", + background: "transparent", + "& > a": { + textDecoration: "none", + }, + "&:hover": { + transition: "ease-in 0.2s", + }, + [breakpoints.up("xl")]: { + marginTop: "5rem", + }, + [breakpoints.down("1400")]: { + position: "absolute", + left: 0, + }, + [breakpoints.down("md")]: { + fontSize: constants.generalUnit * 2, + }, + [breakpoints.down("sm")]: { + padding: "1rem 0", + marginTop: constants.generalUnit, + }, }, - }, - }) -}) + buttonWrapper: { + display: "flex", + }, + }) + }, +) const Landing: React.FC = () => { const wordChoices = [t`faster`, t`easier`, t`better`, t`faster`, t`safer`] @@ -51,25 +98,30 @@ const Landing: React.FC = () => { const classes = useStyles() return (
- +
<Trans>Privacy-first cloud storage just got </Trans>{" "} <span>{words}</span>.{" "} + - - Metal box dimly lit with ChainSafe Logo embossed on it + Metal box dimly lit with ChainSafe Logo embossed on it +
) } diff --git a/packages/files-ui/src/Components/Modules/FileBrowserModule/FileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowserModule/FileBrowser.tsx index c31a8be722..07bdb68efe 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowserModule/FileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowserModule/FileBrowser.tsx @@ -43,6 +43,7 @@ import { Trans } from "@lingui/macro" import FileOrFolderView from "./FileOrFolderView" import { NativeTypes } from "react-dnd-html5-backend" import { useDrop } from "react-dnd" +import { IFileBrowserProps } from "./types" const useStyles = makeStyles( ({ animation, breakpoints, constants, palette, zIndex }: ITheme) => { @@ -185,15 +186,11 @@ const useStyles = makeStyles( }, ) -export interface IFileBrowserProps { - heading?: string - // TODO: once pagination & unique content requests are present, this might change to a passed in function - controls?: boolean -} - const FileBrowserModule: React.FC = ({ heading = "My Files", controls = true, + fileOperations, + folderOperations, }: IFileBrowserProps) => { const classes = useStyles() const { @@ -615,6 +612,8 @@ const FileBrowserModule: React.FC = ({ index={index} file={file} files={files} + fileOperations={fileOperations} + folderOperations={folderOperations} currentPath={currentPath} updateCurrentPath={updateCurrentPath} selected={selected} diff --git a/packages/files-ui/src/Components/Modules/FileBrowserModule/FileOrFolderView.tsx b/packages/files-ui/src/Components/Modules/FileBrowserModule/FileOrFolderView.tsx index 2208cc4425..7db73fda3c 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowserModule/FileOrFolderView.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowserModule/FileOrFolderView.tsx @@ -15,6 +15,9 @@ import { DownloadSvg, DeleteSvg, EditSvg, + IMenuItem, + ExportIcon, + ShareAltIcon, } from "@chainsafe/common-components" import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme" import clsx from "clsx" @@ -26,6 +29,7 @@ import { Trans } from "@lingui/macro" import { useDrag, useDrop } from "react-dnd" import { DragTypes } from "./DragConstants" import { NativeTypes } from "react-dnd-html5-backend" +import { FileOperation } from "./types" const useStyles = makeStyles(({ breakpoints, constants, palette }: ITheme) => { const desktopGridSettings = "50px 69px 3fr 190px 100px 45px !important" @@ -121,6 +125,8 @@ interface IFileOrFolderProps { file: IFile files: IFile[] currentPath: string + fileOperations: FileOperation[] + folderOperations: FileOperation[] updateCurrentPath(path: string): void selected: string[] handleSelect(selected: string): void @@ -144,6 +150,8 @@ const FileOrFolderView: React.FC = ({ index, file, files, + fileOperations, + folderOperations, currentPath, updateCurrentPath, selected, @@ -172,6 +180,64 @@ const FileOrFolderView: React.FC = ({ const classes = useStyles() + const menuOptions: Record = { + rename: { + contents: ( + + + + Rename + + + ), + onClick: () => setEditing(file.cid), + }, + delete: { + contents: ( + + + + Delete + + + ), + onClick: () => deleteFile(file.cid), + }, + download: { + contents: ( + + + + Download + + + ), + onClick: () => downloadFile(file.name), + }, + share: { + contents: ( + + + Move + + ), + onClick: () => console.log, + }, + move: { + contents: ( + + + Share + + ), + onClick: () => console.log, + }, + } + + const menuItems: IMenuItem[] = file.isFolder + ? folderOperations.map((folderOperation) => menuOptions[folderOperation]) + : fileOperations.map((fileOperation) => menuOptions[fileOperation]) + const [, dragMoveRef] = useDrag({ item: { type: DragTypes.MOVABLE_FILE, payload: file }, }) @@ -269,7 +335,9 @@ const FileOrFolderView: React.FC = ({ className={classes.renameInput} name="fileName" inputVariant="minimal" - placeholder="Please enter a file name" + placeholder={`Please enter a ${ + file.isFolder ? "folder" : "file" + } name`} autoFocus={editing === file.cid} /> @@ -309,7 +377,9 @@ const FileOrFolderView: React.FC = ({ label="Name" className={classes.renameInput} name="fileName" - placeholder="Please enter a file name" + placeholder={`Please enter a ${ + file.isFolder ? "folder" : "file" + } name`} autoFocus={editing === file.cid} />