fix: Merge pull request #14 from UniversalDataTool/overhaul-1

Shrink UI Elements

Author: seveibar

package.json

@@ -10,6 +10,7 @@
     "@material-ui/icons": "^4.9.1",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
+    "react-resize-panel": "^0.3.5",
     "react-use-dimensions": "^1.2.1",
     "use-event-callback": "^0.1.0"
   },

src/HeaderButton/index.js

@@ -5,6 +5,7 @@ import Button from "@material-ui/core/Button"
 import { styled } from "@material-ui/core/styles"
 import { useIconDictionary } from "../icon-dictionary.js"
 import { iconMapping } from "../icon-mapping.js"
+import { colors } from "@material-ui/core"
 
 const defaultNameIconMapping = iconMapping
 
@@ -18,19 +19,28 @@ const getIcon = (name, customIconMapping) => {
 
 const StyledButton = styled(Button)({
   textTransform: "none",
-  width: 80,
-  marginLeft: 4,
-  marginRight: 4,
+  width: 60,
+  paddingTop: 8,
+  paddingBottom: 4,
+  marginLeft: 1,
+  marginRight: 1,
 })
 const ButtonInnerContent = styled("div")({
   display: "flex",
   flexDirection: "column",
 })
-const IconContainer = styled("div")({})
+const IconContainer = styled("div")({
+  color: colors.grey[700],
+  height: 20,
+  "& .MuiSvgIcon-root": {
+    width: 18,
+    height: 18,
+  },
+})
 const Text = styled("div")({
   fontWeight: "bold",
-  lineHeight: 1,
-  height: 28,
+  fontSize: 11,
+  color: colors.grey[800],
   display: "flex",
   alignItems: "center",
   justifyContent: "center",

src/IconSidebar/index.js

@@ -23,10 +23,12 @@ type Props = {
   |}>,
 }
 
+const emptyAr = []
+
 export const IconSidebar = ({
-  items = [],
+  items = emptyAr,
   onClickItem,
-  selectedTools,
+  selectedTools = emptyAr,
 }: Props) => {
   const customIconMapping = useIconDictionary()
   return (

src/RightSidebar/index.js

@@ -73,22 +73,28 @@ const InnerSliderContent = styled("div")({
 })
 
 const getInitialExpandedState = () => {
-  return Boolean(window.__REACT_WORKSPACE_LAYOUT_EXPANDED_STATE)
+  try {
+    return JSON.parse(window.localStorage.__REACT_WORKSPACE_LAYOUT_EXPANDED)
+  } catch (e) {
+    return window.innerWidth > 1000 ? true : false
+  }
 }
 
-export const RightSidebar = ({ children, initialExpandedState, height }) => {
+export const RightSidebar = ({ children, initiallyExpanded, height }) => {
   const [expanded, toggleExpanded] = useReducer(
     (state) => !state,
-    initialExpandedState === undefined
+    initiallyExpanded === undefined
       ? getInitialExpandedState()
-      : initialExpandedState
+      : initiallyExpanded
   )
 
   useEffect(() => {
-    if (initialExpandedState !== undefined) {
-      window.__REACT_WORKSPACE_LAYOUT_EXPANDED_STATE = expanded
+    if (initiallyExpanded === undefined) {
+      window.localStorage.__REACT_WORKSPACE_LAYOUT_EXPANDED = JSON.stringify(
+        expanded
+      )
     }
-  }, [initialExpandedState, expanded])
+  }, [initiallyExpanded, expanded])
 
   const containerStyle = useMemo(() => ({ height: height || "100%" }), [height])
 

src/SidebarBox/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, memo } from "react"
+import React, { useState, memo, useCallback } from "react"
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import ExpandIcon from "@material-ui/icons/ExpandMore"
@@ -11,34 +11,47 @@ import classnames from "classnames"
 import useEventCallback from "use-event-callback"
 import Typography from "@material-ui/core/Typography"
 import { useIconDictionary } from "../icon-dictionary.js"
+import ResizePanel from "react-resize-panel"
 
 const useStyles = makeStyles({
-  container: { margin: 8, border: "1px solid #ccc" },
+  container: {
+    borderBottom: `2px solid ${grey[400]}`,
+    "&:first-child": { borderTop: `1px solid ${grey[400]}` },
+  },
   header: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    padding: 8,
+    padding: 4,
     paddingLeft: 16,
-    paddingRight: 16,
+    paddingRight: 12,
+    "& .iconContainer": {
+      color: grey[600],
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "& .MuiSvgIcon-root": {
+        width: 16,
+        height: 16,
+      },
+    },
   },
   title: {
-    fontSize: 14,
-    fontWeight: "bold",
+    fontSize: 11,
     flexGrow: 1,
+    fontWeight: 800,
     paddingLeft: 8,
     color: grey[800],
     "& span": {
       color: grey[600],
-      fontSize: 12,
+      fontSize: 11,
     },
   },
   expandButton: {
     padding: 0,
     width: 30,
     height: 30,
     "& .icon": {
-      marginTop: -6,
       width: 20,
       height: 20,
       transition: "500ms transform",
@@ -57,13 +70,28 @@ const useStyles = makeStyles({
   },
 })
 
+const getExpandedFromLocalStorage = (title) => {
+  try {
+    return JSON.parse(
+      window.localStorage[`__REACT_WORKSPACE_SIDEBAR_EXPANDED_${title}`]
+    )
+  } catch (e) {
+    return false
+  }
+}
+const setExpandedInLocalStorage = (title, expanded) => {
+  window.localStorage[
+    `__REACT_WORKSPACE_SIDEBAR_EXPANDED_${title}`
+  ] = JSON.stringify(expanded)
+}
+
 export const SidebarBox = ({
   icon,
   title,
   subTitle,
   children,
   noScroll = false,
-  expandedByDefault = false,
+  expandedByDefault,
 }) => {
   const classes = useStyles()
   const content = (
@@ -74,14 +102,28 @@ export const SidebarBox = ({
     </div>
   )
 
-  const [expanded, changeExpanded] = useState(expandedByDefault)
+  const [expanded, changeExpandedState] = useState(
+    expandedByDefault === undefined
+      ? getExpandedFromLocalStorage(title)
+      : expandedByDefault
+  )
+  const changeExpanded = useCallback(
+    (expanded) => {
+      changeExpandedState(expanded)
+      setExpandedInLocalStorage(title, expanded)
+    },
+    [changeExpandedState, title]
+  )
+
   const toggleExpanded = useEventCallback(() => changeExpanded(!expanded))
   const customIconMapping = useIconDictionary()
   const TitleIcon = customIconMapping[title.toLowerCase()]
   return (
-    <Paper className={classes.container}>
+    <div className={classes.container}>
       <div className={classes.header}>
-        {icon || <TitleIcon />}
+        <div className="iconContainer">
+          {icon || <TitleIcon className={classes.titleIcon} />}
+        </div>
         <Typography className={classes.title}>
           {title} <span>{subTitle}</span>
         </Typography>
@@ -94,9 +136,18 @@ export const SidebarBox = ({
           content
         ) : null
       ) : (
-        <Collapse in={expanded}>{content}</Collapse>
+        <Collapse in={expanded}>
+          <ResizePanel direction="s" style={{ height: 200 }}>
+            <div
+              className="panel"
+              style={{ display: "flex", overflow: "hidden", height: 500 }}
+            >
+              {content}
+            </div>
+          </ResizePanel>
+        </Collapse>
       )}
-    </Paper>
+    </div>
   )
 }
 

src/Workspace/index.js

@@ -37,6 +37,7 @@ export default ({
   onClickIconSidebarItem,
   headerLeftSide = null,
   iconDictionary = emptyObj,
+  rightSidebarExpanded,
   children,
 }) => {
   const [workContainerRef, workContainerSize] = useDimensions()
@@ -58,7 +59,10 @@ export default ({
           )}
           <WorkContainer ref={workContainerRef}>{children}</WorkContainer>
           {rightSidebarItems.length === 0 ? null : (
-            <RightSidebar height={workContainerSize.height || 0}>
+            <RightSidebar
+              initiallyExpanded={rightSidebarExpanded}
+              height={workContainerSize.height || 0}
+            >
               {rightSidebarItems}
             </RightSidebar>
           )}

src/Workspace/index.stories.js

@@ -3,6 +3,7 @@ import { action } from "@storybook/addon-actions"
 import Workspace from "./"
 import SidebarBox from "../SidebarBox"
 import FeaturedVideoIcon from "@material-ui/icons/FeaturedVideo"
+import PlayIcon from "@material-ui/icons/PlayArrow"
 
 export default {
   title: "Workspace",
@@ -15,6 +16,7 @@ export const Basic = () => (
     headerItems={[{ name: "Prev" }, { name: "Next" }, { name: "Save" }]}
     onClickHeaderItem={action("onClickHeaderItem")}
     onClickIconSidebarItem={action("onClickIconSidebarItem")}
+    rightSidebarExpanded
     iconSidebarItems={[
       {
         name: "Play",
@@ -23,12 +25,15 @@ export const Basic = () => (
       {
         name: "Pause",
         helperText: "Pause Tooltip",
-      }
+      },
     ]}
     rightSidebarItems={[
       <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
         Hello world!
       </SidebarBox>,
+      <SidebarBox icon={<PlayIcon />} title="Playable GIFs">
+        Hello world!
+      </SidebarBox>,
     ]}
   >
     <div

yarn.lock

@@ -4160,6 +4160,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+cash-dom@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-4.1.5.tgz#0ef0cf205bc7603aa4e2dfada5808442a7a0e6ca"
+  integrity sha512-E6MO0A6ms5iZPtexznQXWRkFEvqdPqCmdx/SiJr2PnhOQNhZNfALkLG5t83Hk3J5JELzED7PJuzhMoS2tT64XA==
+
 [email protected], chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -11212,6 +11217,16 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-resize-panel@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/react-resize-panel/-/react-resize-panel-0.3.5.tgz#43aa3450bf5b5a2566b40c4201445ced96c2a905"
+  integrity sha512-iyHOFTrSt+WV4Ilzi81x6KH3FU7VsGP736rmxepwGrgAEATmCvXzZdluTm3NpsptP7aC3hLODmXwnxusyA393A==
+  dependencies:
+    cash-dom "^4.1.5"
+    classnames "^2.2.6"
+    lodash.debounce "^4.0.8"
+    react-draggable "^4.0.3"
+
 [email protected]:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"