added sample title, removed some unnecessary styling

Author: seveibar

package.json

@@ -18,7 +18,7 @@
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-material-workspace-layout": "^0.1.14",
+    "react-material-workspace-layout": "^0.1.16",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",

src/MainLayout/icon-dictionary.js

@@ -16,6 +16,7 @@ import {
   faSearch,
   faMask,
 } from "@fortawesome/free-solid-svg-icons"
+import FullscreenIcon from "@material-ui/icons/Fullscreen"
 
 const faStyle = { marginTop: 4, width: 16, height: 16, marginBottom: 4 }
 
@@ -62,6 +63,7 @@ export const iconDictionary = {
   "show-mask": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faMask} />
   ),
+  window: FullscreenIcon,
 }
 
 export default iconDictionary

src/MainLayout/index.js

@@ -202,14 +202,16 @@ export const MainLayout = ({
           allowFullscreen
           iconDictionary={iconDictionary}
           headerLeftSide={[
-            state.annotationType === "video" && (
+            state.annotationType === "video" ? (
               <KeyframeTimeline
                 currentTime={state.currentVideoTime}
                 duration={state.videoDuration}
                 onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
                 keyframes={state.keyframes}
               />
-            ),
+            ) : activeImage ? (
+              <div className={classes.headerTitle}>{activeImage.name}</div>
+            ) : null,
           ].filter(Boolean)}
           headerItems={[
             { name: "Prev" },

src/MainLayout/styles.js

@@ -18,34 +18,9 @@ export default {
       bottom: 0,
     },
   },
-  workspace: {
-    backgroundColor: grey[200],
-    flexGrow: 1,
-    display: "flex",
-    flexDirection: "row",
-    height: "100%",
-    overflow: "hidden",
-  },
-  iconToolsContainer: { display: "flex" },
-  imageCanvasContainer: {
-    display: "flex",
-    flexGrow: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  noImageSelected: {
+  headerTitle: {
     fontWeight: "bold",
-    fontSize: 32,
-    color: grey[500],
-  },
-  sidebarContainer: {
-    width: 300,
-    flexShrink: 0,
-    overflowY: "auto",
-    backgroundColor: grey[100],
-    borderLeft: `1px solid ${grey[300]}`,
-    zIndex: 9,
-    height: "100%",
-    boxShadow: "0px 0px 5px rgba(0,0,0,0.1)",
+    color: grey[700],
+    paddingLeft: 16,
   },
 }

yarn.lock

@@ -14522,10 +14522,10 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-material-workspace-layout@^0.1.14:
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.14.tgz#7a50fb18c89c14fd23353d5ad2c23d8e61fbfd70"
-  integrity sha512-muYUkTr27dSvSQ+NU0DmPjxYkI+DrDBWz0xwC189SN4+ANCE1V4Ul3wMkbeXSqxEk/9oRFkMae0+4ygHBkGi8A==
+react-material-workspace-layout@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.16.tgz#fa51c8a52e19cc3f8cc1627d69f761851447621e"
+  integrity sha512-knxP+1dYMueWdpp/LZoTt23P5LJjtoexZsKBTgRZFMZwvc1uXSK3u2Lwxf6jw5AMI55mrTrWNhB7aqOpzROtjA==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"