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)
ChainSafe · Dec 2, 2020 · 68048c6 · 68048c6
1 parent 03103b3
commit 68048c6
Show file tree

Hide file tree

Showing 11 changed files with 300 additions and 117 deletions.
diff --git 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 <michael@chainsafe.io>",
   "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
@@ -252,4 +252,4 @@ const MenuDropdown: React.FC<IMenuDropdownProps> = ({
 
 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
@@ -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<IProgressBarProps> = ({
   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 (
     <div className={clsx(className, classes.root, size)} {...rest}>
-      <div
-        className={clsx(classes.progressBar, size, classes[state], variant)}
-      />
+      {progressValue == -1 ? (
+        <div className={clsx(classes.slider, size)}>
+          <div className={clsx(variant, size, classes.line)}></div>
+          <div className={clsx(variant, size, classes.subline, "inc")}></div>
+          <div className={clsx(variant, size, classes.subline, "dec")}></div>
+        </div>
+      ) : (
+        <div
+          className={clsx(classes.progressBar, size, classes[state], variant)}
+        />
+      )}
     </div>
   )
 }

diff --git 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}
       />
+      <button onClick={() => setProgress(-1)}>Indeterminant</button>
       <button onClick={() => setProgress(progress + 10)}>add 10</button>
       <button onClick={() => setProgress(progress - 10)}>reduce 10</button>
     </>

diff --git 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
@@ -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 (
     <Section>
-      <Grid
-        container
-        xs={12}
-        spacing={2}
-        justifyContent="center"
-        alignItems="center"
-      >
+      <div className={classes.wrapper}>
         <Grid item xs={12} className={classes.title}>
           <Title>
             <Trans>Privacy-first cloud storage just got </Trans>{" "}
             <span>{words}</span>.{" "}
           </Title>
+          <div className={classes.buttonWrapper}>
+            <Button variant="outline" size="large" className={classes.button}>
+              <a
+                target="__blank"
+                rel="noopenernoreferrer"
+                href="https://app.files.chainsafe.io"
+              >
+                Sign up
+              </a>
+            </Button>
+          </div>
         </Grid>
-      </Grid>
-      <img
-        className={classes.img}
-        src="/assets/box.png"
-        alt="Metal box dimly lit with ChainSafe Logo embossed on it"
-      ></img>
+        <img
+          className={classes.img}
+          src="/assets/box.png"
+          alt="Metal box dimly lit with ChainSafe Logo embossed on it"
+        ></img>
+      </div>
     </Section>
   )
 }

diff --git 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<IFileBrowserProps> = ({
   heading = "My Files",
   controls = true,
+  fileOperations,
+  folderOperations,
 }: IFileBrowserProps) => {
   const classes = useStyles()
   const {
@@ -615,6 +612,8 @@ const FileBrowserModule: React.FC<IFileBrowserProps> = ({
                 index={index}
                 file={file}
                 files={files}
+                fileOperations={fileOperations}
+                folderOperations={folderOperations}
                 currentPath={currentPath}
                 updateCurrentPath={updateCurrentPath}
                 selected={selected}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -252,4 +252,4 @@ const MenuDropdown: React.FC<IMenuDropdownProps> = ({

		export default MenuDropdown

		export { IMenuDropdownProps }
		export { IMenuItem, IMenuDropdownProps }