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==
+
 chalk@2.4.2, 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"
+
 react-scripts@3.4.1:
  version "3.4.1"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"