refactor: ui

packages/core/src/components/persea/index.jsx

@@ -19,19 +19,21 @@ import history from './history';
 const Persea = React.memo(() => {
   const isLoggedIn = useSelector(userIdSelector);
   return (
+    <div className="persea">
       <ConnectedRouter history={history}>
         <Switch>
           <Route path="/login">
             {isLoggedIn ? <Redirect to="/" /> : Login}
           </Route>
           <Route path="/dashboard" component={Dashboard} />
-        <Route path="/project/:uuid" component={ProjectRoute} />
+          <Route path="/project/:uuid:uri(/*)?" component={ProjectRoute} />
         </Switch>
         <Route exact path="/">
           <Redirect to="/dashboard" />
         </Route>
         {!isLoggedIn && <Redirect to="/login" />}
       </ConnectedRouter>
+    </div>
   );
 });
 

packages/core/src/components/persea/index.scss

@@ -111,11 +111,6 @@ label, .label {
   min-height: 3em;
   padding: 1em;
   user-select: none;
-  // @media(min-width: 20em) {
-  //   align-items: center;
-  //   flex-direction: row;
-  //   justify-content: space-between;
-  // }
   &:nth-of-type(2n+1) {
     background-color: rgba(0, 0, 0, 0.15);
   }
@@ -178,38 +173,6 @@ textarea {
   resize: none;
 }
 
-.grow-wrap {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-.grow-wrap::after {
-  /* Note the weird space! Needed to preventy jumpy behavior */
-  content: attr(data-replicated-value) " ";
-
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
-
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
-}
-.grow-wrap > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
-
-  /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: hidden;
-}
-.grow-wrap > textarea,
-.grow-wrap::after {
-  /* Identical styling required!! */
-  border: 1px solid black;
-  padding: 0.5rem;
-  font: inherit;
-
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
-}
-
 fieldset {
   background-color: #151515;
 	border: 1px solid rgba(255, 255, 255, 0.1);
@@ -233,6 +196,11 @@ button, .button {
   &:hover {
     background-color: rgba(255, 255, 255, 0.05);
   }
+  .active {
+    box-shadow: 0px 0px 5px #00e1ff inset;
+    background-color: #006370;
+    border: 2px solid #006370;
+  }
 }
 
 button, input[type="checkbox"], input[type="checkbox"] + label {
@@ -289,8 +257,7 @@ img {
   image-rendering: pixelated;
 }
 
-button.active {
+.persea {
-  box-shadow: 0px 0px 5px #00e1ff inset;
+  height: 100vh;
-  background-color: #006370;
+  width: 100vw;
-  border: 2px solid #006370;
 }

packages/core/src/components/project/bottom/index.jsx

@@ -0,0 +1,34 @@
+import {
+  classnames,
+  hot,
+  React,
+} from '@latus/react';
+
+import {locals} from './index.module.scss';
+
+function Bottom() {
+  const buttons = [
+    <button className={classnames(locals.organization)} type="button">
+      <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
+        <path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
+      </svg>
+    </button>,
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button className={classnames(locals.resource, 'active')} type="button" />,
+  ];
+  return (
+    <div className={locals.bottom}>
+      <div className={locals.buttons}>
+        {buttons}
+      </div>
+    </div>
+  );
+}
+
+Bottom.defaultProps = {};
+
+Bottom.displayName = 'Bottom';
+
+Bottom.propTypes = {};
+
+export default hot(module)(Bottom);

packages/core/src/components/project/bottom/index.module.scss

@@ -0,0 +1,46 @@
+.bottom {
+  height: 3rem;
+  width: 100%;
+}
+
+.buttons {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: space-around;
+
+  button {
+    background-color: transparent;
+    border: 2px transparent;
+    height: 2em;
+    padding: 0.5rem;
+    width: 2em;
+
+    &:focus, &:hover {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:global(.active) {
+      border-bottom: 1px solid #009fb4;
+    }
+
+    svg {
+      fill: #999;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+button.side {
+  padding: 0.35rem;
+}
+
+button.resource {
+  background-image: url('./map.png');
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding: 0.25rem;
+}

packages/core/src/components/project/bottom/settings.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m113.147 53.166h-2.175v-22.456c0-16.934-13.777-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v22.456c-22.985-1.145-43.857 15.46-43.857 39.432v123.282c0 24.002 20.867 40.512 43.856 39.431v225.979c0 16.934 13.776 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-225.979c22.21.781 41.606-16.895 41.606-39.431v-42.882c0-9.434-15.078-9.883-15.078.002 0 14.287.078 28.588.078 42.88 0 13.471-10.959 24.431-24.431 24.431h-68.098c-13.471 0-24.431-10.96-24.431-24.431v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432 0 13.466-.078 26.941-.078 40.402 0 9.459 15.078 9.869 15.078.004v-40.406c0-21.743-17.689-39.432-39.431-39.432zm-17.175 428.124c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-225.979h31.498zm-31.498-450.58c0-8.662 7.047-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v22.456h-31.498z"/><path d="m290.612 255.094h-3.3v-224.384c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v224.384c-22.604-.988-42.731 16.189-42.731 39.431v123.283c0 23.349 20.118 40.263 42.731 39.432v24.051c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-24.051c22.604.988 42.731-16.189 42.731-39.432v-123.284c0-21.742-17.689-39.43-39.431-39.43zm-49.799-224.384c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v224.384h-31.498zm31.499 450.58c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-24.051h31.498zm42.731-63.482c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.284c0-13.471 10.959-24.431 24.431-24.431h68.099c13.471 0 24.431 10.96 24.431 24.431z"/><path d="m466.952 139.191h-3.3v-108.481c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v108.481c-22.604-.988-42.731 16.19-42.731 39.432v123.282c0 23.349 20.118 40.263 42.731 39.432v139.953c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-44.29c0-9.697-15-9.697-15 0v44.29c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-139.953h31.498v52.663c0 9.697 15 9.697 15 0v-52.663c22.604.988 42.731-16.189 42.731-39.432v-123.282c0-21.742-17.689-39.432-39.431-39.432zm-49.799-108.481c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v108.481h-31.498zm74.23 271.195c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432z"/><path d="m102.347 100.484h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 146.738h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 192.993h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 302.412h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 348.666h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 394.921h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 186.51h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 232.764h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 279.019h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/></g></svg>

packages/core/src/components/project/index.jsx

@@ -1,47 +1,66 @@
-import './index.scss';
+import {
-
+  useResourceController,
+} from '@avocado/resource-persea';
 import {
   classnames,
+  hot,
+  IconPages,
   PropTypes,
   React,
   Route,
-  useEffect,
+  useParams,
   useRef,
   useState,
 } from '@latus/react';
+import {
+  useSelector,
+} from '@latus/redux';
 
+import {structureSelector} from '../../state/projects';
 import ResourceRoute from '../resource/route';
-import Sidebar from './sidebar';
+import Organization from './organization';
 
-function Project({structure: {label, resourcePaths}, uuid}) {
+import {locals} from './index.module.scss';
+
+function Project({uuid}) {
+  const {uri} = useParams();
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
   const ref = useRef();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const {label, resourcePaths} = useSelector((state) => structureSelector(state, uuid));
-  useEffect(() => {
+  const iconPages = [];
-    const {current} = ref;
+  // Organization
-    const onSwipeLeft = () => {
+  iconPages.push({
-      setIsSidebarOpen(false);
+    Icon: (
-    };
+      <svg viewBox="0 0 512 512">
-    const onSwipeRight = () => {
+        <path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
-      setIsSidebarOpen(true);
+      </svg>
-    };
+    ),
-    current.addEventListener('swipeleft', onSwipeLeft);
+    Page: (
-    current.addEventListener('swiperight', onSwipeRight);
+      <Organization
-    return () => {
-      current.removeEventListener('swipeleft', onSwipeLeft);
-      current.removeEventListener('swiperight', onSwipeRight);
-    };
-  }, [ref]);
-  return (
-    <div className="project" ref={ref}>
-      <Sidebar
-        className={classnames({open: isSidebarOpen})}
         label={label}
         uuid={uuid}
         resourcePaths={resourcePaths}
       />
-      <div className="resource-container">
+    ),
+  });
+  const {className} = useResourceController(uri);
+  // Resource
+  iconPages.push({
+    Icon: (
+      <div className={classnames(locals.resource, className)} />
+    ),
+    Page: (
       <Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
-      </div>
+    ),
+  });
+  return (
+    <div className={locals.project} ref={ref}>
+      <IconPages
+        iconsAreBelow={false}
+        iconPages={iconPages}
+        index={currentPageIndex}
+        onIndexChanged={setCurrentPageIndex}
+      />
     </div>
   );
 }
@@ -54,8 +73,7 @@ export const propTypes = PropTypes.shape({
 Project.displayName = 'Project';
 
 Project.propTypes = {
-  structure: propTypes.isRequired,
   uuid: PropTypes.string.isRequired,
 };
 
-export default Project;
+export default hot(module)(Project);

packages/core/src/components/project/index.scss

@@ -1,14 +0,0 @@
-.project {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  .resource-container {
-    background-color: rgba(0, 0, 0, 0.2);
-    flex-grow: 1;
-    overflow: auto;
-  }
-}
-
-[class*="ResizePanel-module_ResizeHandleHorizontal"] {
-  display: none;
-}

packages/core/src/components/project/route/index.jsx

@@ -4,15 +4,12 @@ import {join} from 'path';
 
 import {Resource} from '@avocado/resource';
 import {PropTypes, React} from '@latus/react';
-import {useSelector} from '@latus/redux';
 
-import {structureSelector} from '../../../state/projects';
 import Project from '../index';
 
 const ProjectRoute = ({match: {params: {uuid}}}) => {
-  const structure = useSelector((state) => structureSelector(state, uuid));
   Resource.root = join('/projects', uuid);
-  return <Project uuid={uuid} structure={structure} />;
+  return <Project uuid={uuid} />;
 };
 
 ProjectRoute.displayName = 'ProjectRoute';

packages/core/src/components/project/sidebar/index.scss

@@ -1,98 +0,0 @@
-.sidebar {
-  background-color: #222;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  left: -100vw;
-  position: absolute;
-  transition: 0.2s left;
-  width: 100%;
-  z-index: 100;
-  &.open {
-    left: 0;
-  }
-  @media(min-width: 90rem) {
-    position: static;
-    width: 30rem;
-  }
-  > .tree > .node > .item .label > .text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .label.inline {
-    justify-content: flex-start;
-    > div:first-child.icon {
-      background-size: cover;
-      flex-grow: unset;
-      margin-right: 0.125em;
-      width: 1em;
-      height: 1em;
-      &.AudioComponent {
-        background-image: url('./img/sound.png');
-      }
-      &.Binary {
-        background-image: url('./img/question.png');
-      }
-      &.EntityComponent {
-        background-image: url('./img/joystick.png');
-      }
-      &.ImageComponent {
-        background-image: url('./img/image.png');
-      }
-      &.RoomComponent {
-        background-image: url('./img/map.png');
-      }
-      &.ScriptComponent {
-        background-image: url('./img/script.png');
-      }
-      &.SoundComponent {
-        background-image: url('./img/music.png');
-      }
-      &.TextComponent {
-        background-image: url('./img/note.png');
-      }
-    }
-  }
-  .node {
-    &.parent > .item .label:before {
-      color: #999;
-      content: "\25BE";
-      margin-right: 0.25em;
-    }
-    &.collapsed {
-      &.parent > .item .label:before {
-        color: #999;
-        content: "\25B8";
-      }
-    }
-  }
-}
-
-.sidebar-actions {
-  display: none;
-  line-height: 0;
-  min-width: 4em;
-  .sidebar:hover & {
-    display: block;
-  }
-  button {
-    background-color: transparent;
-    background-size: cover;
-    background-repeat: no-repeat;
-    border: none;
-    margin: 0;
-    margin-right: 0.25em;
-    width: 1em;
-    height: 1em;
-    &.collapse-all {
-      background-image: url('./img/collapse-all.svg');
-    }
-    &.new-file {
-      background-image: url('./img/new-file.svg');
-    }
-    &.new-folder {
-      background-image: url('./img/new-folder.svg');
-    }
-  }
-}