feat: add sample brushes (#65)

seveibar · web-flow · commit c222cb098a83 · 2020-04-07T14:58:25.000-04:00
diff --git a/package.json b/package.json
@@ -61,7 +61,6 @@
     "spelling": "^2.0.1"
   },
   "dependencies": {
-    "react-scripts": "^3.4.1",
     "@material-ui/styles": "^4.9.0",
     "@semantic-release/git": "^9.0.0",
     "@sentry/browser": "^5.15.4",
@@ -84,9 +83,11 @@
     "react-dropzone": "^10.1.8",
     "react-icons": "^3.9.0",
     "react-image-annotate": "^0.2.4",
+    "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",
     "rfc6902": "^3.0.4",
     "seamless-immutable": "^7.1.4",
+    "seed-random": "^2.2.0",
     "styled-components": "^5.0.0",
     "use-event-callback": "^0.1.0",
     "ytdl-core": "^2.0.1"
diff --git a/src/components/BrushButton/index.js b/src/components/BrushButton/index.js
@@ -0,0 +1,144 @@
+// @flow
+
+import React, { useState, useMemo, useRef, useEffect } from "react"
+import { useLocalStorage } from "react-use"
+import { createPortal } from "react-dom"
+import IconButton from "@material-ui/core/IconButton"
+import BrushIcon from "@material-ui/icons/Brush"
+import ArrowForwardIcon from "@material-ui/icons/ArrowForward"
+import { styled } from "@material-ui/core/styles"
+import * as colors from "@material-ui/core/colors"
+import Button from "@material-ui/core/Button"
+import TextField from "@material-ui/core/TextField"
+import InputAdornment from "@material-ui/core/InputAdornment"
+import AddBoxTwoTone from "@material-ui/icons/AddBoxTwoTone"
+import ExitToAppIcon from "@material-ui/icons/ExitToApp"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import HeaderPopupBox from "../HeaderPopupBox"
+import useEventCallback from "use-event-callback"
+import memoize from "lodash/memoize"
+import getBrushColorPalette from "../../utils/get-brush-color-palette.js"
+
+const Container = styled("div")({ position: "relative" })
+const BrushCircle = styled("div")(({ color }) => ({
+  display: "inline",
+  marginRight: 8,
+  backgroundColor: color[700],
+  width: 24,
+  height: 24,
+  borderRadius: 20,
+}))
+
+const OtherColorContainers = styled("div")({
+  paddingTop: 10,
+  padding: 4,
+  display: "flex",
+  flexWrap: "wrap",
+})
+
+const StyledIconButton = styled(IconButton)(({ iconColor, selected }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: iconColor[700],
+  border: selected ? `4px solid ${iconColor["A200"]}` : "4px solid #fff",
+  boxSizing: "content-box",
+  margin: 4,
+  transition: "transform 200ms linear",
+  "&:hover": {
+    backgroundColor: iconColor[800],
+    transform: "scale(1.2,1.2)",
+  },
+  "&:active": {
+    transition: "transform 100ms linear",
+    transform: "scale(1.4,1.4)",
+  },
+}))
+
+const StyledButton = styled(Button)(({ selected, iconColor }) => ({
+  justifyContent: "flex-start",
+  marginTop: 4,
+  marginBottom: 4,
+  paddingTop: 8,
+  paddingBottom: 8,
+  backgroundColor: selected ? iconColor[50] : "#fff",
+  border: selected ? `2px solid ${iconColor[200]}` : "2px solid #fff",
+  "&:hover": {
+    backgroundColor: selected ? iconColor[100] : "none",
+  },
+}))
+
+export default ({ selectedBrush, onChangeSelectedBrush }) => {
+  const [open, changeOpen] = useState(false)
+  const handleClick = useEventCallback((color) =>
+    memoize(() => onChangeSelectedBrush(color))
+  )
+
+  return (
+    <Container
+      onMouseEnter={() => changeOpen(true)}
+      onMouseLeave={() => changeOpen(false)}
+    >
+      <IconButton>
+        <BrushIcon
+          style={{ color: getBrushColorPalette(selectedBrush)[800] }}
+        />
+      </IconButton>
+      <HeaderPopupBox open={open}>
+        <h1>Sample Brushes</h1>
+        <StyledButton
+          selected={selectedBrush === "complete" || selectedBrush === "blue"}
+          iconColor={colors.blue}
+          fullWidth
+          onClick={handleClick("complete")}
+        >
+          <BrushCircle color={colors.blue} />
+          Complete
+        </StyledButton>
+        <StyledButton
+          selected={
+            selectedBrush === "review" || selectedBrush === "deepOrange"
+          }
+          iconColor={colors.deepOrange}
+          fullWidth
+          onClick={handleClick("review")}
+        >
+          <BrushCircle color={colors.deepOrange} />
+          Review
+        </StyledButton>
+        <OtherColorContainers>
+          <StyledIconButton
+            onClick={handleClick("green")}
+            selected={selectedBrush === "green"}
+            iconColor={colors.green}
+          />
+          <StyledIconButton
+            onClick={handleClick("purple")}
+            selected={selectedBrush === "purple"}
+            iconColor={colors.purple}
+          />
+          <StyledIconButton
+            onClick={handleClick("pink")}
+            selected={selectedBrush === "pink"}
+            iconColor={colors.pink}
+          />
+          <StyledIconButton
+            onClick={handleClick("cyan")}
+            selected={selectedBrush === "cyan"}
+            iconColor={colors.cyan}
+          />
+          <StyledIconButton
+            onClick={handleClick("orange")}
+            selected={selectedBrush === "orange"}
+            iconColor={colors.orange}
+          />
+          <StyledIconButton
+            onClick={handleClick("indigo")}
+            selected={selectedBrush === "indigo"}
+            iconColor={colors.indigo}
+          />
+        </OtherColorContainers>
+      </HeaderPopupBox>
+    </Container>
+  )
+}
diff --git a/src/components/CollaborateButton/index.js b/src/components/CollaborateButton/index.js
@@ -31,6 +31,7 @@ const popupBoxBeforeAndAfter = {
 }
 const PopupBox = styled("div")({
   position: "absolute",
+  zIndex: 10,
   top: 45,
   padding: 16,
   boxSizing: "border-box",
diff --git a/src/components/DesktopApp/index.js b/src/components/DesktopApp/index.js
@@ -39,7 +39,7 @@ export default () => {
     recentItems,
   } = useFileHandler()
 
-  const [oha, changeOHA] = useState()
+  const [selectedBrush, setSelectedBrush] = useState("complete")
   const [errors, addError] = useErrors()
   const { addToast } = useToasts()
 
@@ -111,6 +111,8 @@ export default () => {
           onOpenRecentItem: openRecentItem,
           isDesktop: true,
           onOpenFile: openFile,
+          selectedBrush,
+          onChangeSelectedBrush: setSelectedBrush,
         }}
       >
         {!file ? (
@@ -125,6 +127,7 @@ export default () => {
           <OHAEditor
             key={file.id}
             {...file}
+            selectedBrush={selectedBrush}
             oha={file.content}
             onChangeFileName={(newName) => {
               changeFile(setIn(file, ["fileName"], newName))
diff --git a/src/components/Header/index.story.js b/src/components/Header/index.story.js
@@ -9,14 +9,14 @@ import { action } from "@storybook/addon-actions"
 import Header from "./"
 
 storiesOf("Header", module)
-  .add("Basic", () => (
+  .add("Tabs", () => (
     <Header
       title="Some Header"
-      additionalButtons={[<Button>Switch to Sample Editor</Button>]}
-      tabs={["Settings"]}
+      tabs={["Settings", "Samples", "Label"]}
+      currentTab="Samples"
     />
   ))
-  .add("Tab Test", () => (
+  .add("Sample Color", () => (
     <Header
       title="Some Header"
       tabs={["Settings", "Samples", "Label"]}
diff --git a/src/components/HeaderPopupBox/index.js b/src/components/HeaderPopupBox/index.js
@@ -18,6 +18,7 @@ const popupBoxBeforeAndAfter = {
 }
 const PopupBox = styled("div")({
   position: "absolute",
+  zIndex: 10,
   top: 45,
   padding: 16,
   boxSizing: "border-box",
diff --git a/src/components/HeaderToolbar/index.js b/src/components/HeaderToolbar/index.js
@@ -18,6 +18,7 @@ import GithubIcon from "../Header/GithubIcon"
 import * as colors from "@material-ui/core/colors"
 import IconButton from "@material-ui/core/IconButton"
 import packageJSON from "../../../package.json"
+import BrushButton from "../BrushButton"
 
 const useStyles = makeStyles((theme) => ({
   headerButton: {
@@ -80,6 +81,8 @@ const HeaderToolbar = ({
   onLeaveSession,
   onJoinSession,
   onDownload,
+  selectedBrush,
+  onChangeSelectedBrush,
   isSmall,
 }) => {
   const c = useStyles()
@@ -103,6 +106,12 @@ const HeaderToolbar = ({
             onJoinSession={onJoinSession}
           />
         )}
+        {fileOpen && (
+          <BrushButton
+            selectedBrush={selectedBrush}
+            onChangeSelectedBrush={onChangeSelectedBrush}
+          />
+        )}
         {!isDesktop && fileOpen && <DownloadButton onDownload={onDownload} />}
         <div className={c.grow} />
         {additionalButtons}
diff --git a/src/components/LocalStorageApp/index.js b/src/components/LocalStorageApp/index.js
@@ -36,6 +36,7 @@ export default () => {
     recentItems,
   } = useFileHandler()
   const [errors, addError] = useErrors()
+  const [selectedBrush, setSelectedBrush] = useState("complete")
 
   const onCreateTemplate = useEventCallback((template) => {
     changeFile({
@@ -96,6 +97,8 @@ export default () => {
           onCreateSession: makeSession,
           fileOpen: Boolean(file),
           onDownload,
+          onChangeSelectedBrush: setSelectedBrush,
+          selectedBrush,
         }}
       >
         {!file ? (
@@ -111,6 +114,7 @@ export default () => {
             <OHAEditor
               key={file.id}
               {...file}
+              selectedBrush={selectedBrush}
               inSession={inSession}
               oha={file.content}
               onChangeFileName={(newName) => {
diff --git a/src/components/OHAEditor/index.js b/src/components/OHAEditor/index.js
@@ -66,6 +66,7 @@ export default ({
   onChangeOHA = () => null,
   onFileDrop,
   initialMode = "settings", //= "samples"
+  selectedBrush = "complete",
 }) => {
   const c = useStyles()
   const { addToast } = useToasts()
@@ -247,6 +248,20 @@ export default ({
                 ["taskOutput", singleSampleOHA.sampleIndex],
                 output
               )
+
+              if (
+                singleSampleOHA.taskData[0].brush !== selectedBrush &&
+                !(
+                  singleSampleOHA.taskData[0].brush === undefined &&
+                  selectedBrush === "complete"
+                )
+              ) {
+                newOHA = setIn(
+                  newOHA,
+                  ["taskData", singleSampleOHA.sampleIndex, "brush"],
+                  selectedBrush
+                )
+              }
               changeSingleSampleOHA(
                 setIn(singleSampleOHA, ["taskOutput", relativeIndex], output)
               )
@@ -319,6 +334,7 @@ export default ({
               />
               <SampleGrid
                 count={(oha.taskData || []).length}
+                taskData={oha.taskData || []}
                 completed={(oha.taskOutput || []).map(Boolean)}
                 onClick={(sampleIndex) => {
                   changeSingleSampleOHA({
diff --git a/src/components/SampleGrid/index.js b/src/components/SampleGrid/index.js
@@ -8,14 +8,15 @@ import range from "lodash/range"
 import * as colors from "@material-ui/core/colors"
 import classNames from "classnames"
 import TablePagination from "@material-ui/core/TablePagination"
+import getBrushColorPalette from "../../utils/get-brush-color-palette"
 
 const Container = styled("div")({
   flexWrap: "wrap",
 })
-const SampleDiv = styled("div")({
+const SampleDiv = styled("div")(({ color }) => ({
   margin: 4,
   padding: 4,
-  backgroundColor: colors.grey[300],
+  backgroundColor: color[500],
   display: "inline-flex",
   fontSize: 11,
   textAlign: "center",
@@ -25,15 +26,12 @@ const SampleDiv = styled("div")({
   cursor: "pointer",
   userSelect: "none",
   transition: "box-shadow 200ms ease, transform 200ms ease",
-  "&.completed": {
-    backgroundColor: colors.blue[500],
-    color: "#fff",
-  },
+  color: color.isFaded ? "#000" : "#fff",
   "&.selected": {
-    boxShadow: `0px 0px 2px 1px ${colors.blue[400]}`,
+    boxShadow: `0px 0px 2px 1px ${color["A200"]}`,
     transform: "scale(1.05,1.05)",
   },
-})
+}))
 
 const Sample = memo(
   ({
@@ -44,6 +42,7 @@ const Sample = memo(
     onMouseDown,
     onMouseUp,
     onMouseEnter,
+    brush,
   }) => {
     return (
       <SampleDiv
@@ -52,6 +51,7 @@ const Sample = memo(
         onMouseDown={() => onMouseDown(index)}
         onMouseUp={() => onMouseUp(index)}
         onMouseEnter={() => onMouseEnter(index)}
+        color={getBrushColorPalette(brush)}
       >
         {index}
       </SampleDiv>
@@ -61,12 +61,13 @@ const Sample = memo(
     return (
       p.index === n.index &&
       p.completed === n.completed &&
-      p.selected === n.selected
+      p.selected === n.selected &&
+      p.brush === n.brush
     )
   }
 )
 
-export default ({ count, completed = [], onClick }) => {
+export default ({ count, completed = [], taskData, onClick }) => {
   const [samplesPerPage, changeSamplesPerPage] = useLocalStorage(
     "samplesPerPage",
     100
@@ -118,6 +119,9 @@ export default ({ count, completed = [], onClick }) => {
             key={i}
             index={i}
             completed={completed[i]}
+            brush={
+              completed[i] ? taskData[i].brush || "complete" : "incomplete"
+            }
             selected={selectRange && i >= selectRange[0] && i < selectRange[1]}
             onMouseDown={startSelectRange}
             onMouseEnter={moveSelectRange}
diff --git a/src/components/SamplesView/index.js b/src/components/SamplesView/index.js
diff --git a/src/components/StartingPage/index.js b/src/components/StartingPage/index.js
diff --git a/src/utils/get-brush-color-palette.js b/src/utils/get-brush-color-palette.js

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ const popupBoxBeforeAndAfter = {`
`31`	`31`	`}`
`32`	`32`	`const PopupBox = styled("div")({`
`33`	`33`	`position: "absolute",`
	`34`	`+ zIndex: 10,`
`34`	`35`	`top: 45,`
`35`	`36`	`padding: 16,`
`36`	`37`	`boxSizing: "border-box",`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ const popupBoxBeforeAndAfter = {`
`18`	`18`	`}`
`19`	`19`	`const PopupBox = styled("div")({`
`20`	`20`	`position: "absolute",`
	`21`	`+ zIndex: 10,`
`21`	`22`	`top: 45,`
`22`	`23`	`padding: 16,`
`23`	`24`	`boxSizing: "border-box",`