refactor: simplification

2022-04-09 19:41:44 -05:00 · 2022-04-09 19:41:44 -05:00 · 38d39633c9
commit 38d39633c9
parent 66eaab7b8f
11 changed files with 181 additions and 232 deletions
--- a/packages/core/src/components/persea/global.scss
+++ b/packages/core/src/components/persea/global.scss
@ -1,4 +1,3 @@
-@import './scss/colors.scss';
@import './scss/reset.scss';
@import './scss/tabs.scss';

@ -9,7 +8,7 @@ html {
  background-color: #212121;
  color: #FFFFFF;
  --background-color-active: rgba(0, 120, 255, 0.5);
-  --color-active: #{$color-active};
+  --color-active: rgb(0, 99, 112);
  --message-font-family: verdana, arial, helvetica, sans-serif;
  --system-font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
  --title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
@ -36,65 +35,13 @@ code {
  font-family: monospace;
 }

-label, .label {
-  background-color: rgba(255, 255, 255, 0.075);
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  font-family: var(--thick-title-font-family);
-  font-size: 1em;
-  min-height: 3em;
-  padding: 1em;
-  user-select: none;
-  &:nth-of-type(2n+1) {
-    background-color: rgba(0, 0, 0, 0.15);
-  }
-  &.above {
-    flex-direction: column;
-    > div:first-child {
-      width: 100%;
-      margin-bottom: 1.25em;
-      margin-top: 1em;
-    }
-  }
-  // non-inline
-  flex-direction: column;
-  width: 100%;
-  > div:first-child {
-    font-size: 0.7em;
-    text-transform: uppercase;
-    opacity: 1;
-    margin-bottom: 1em;
-  }
-  &.inline {
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-    > div:first-child {
-      flex-grow: 1;
-      margin: auto 0;
-    }
-  }
-  .center {
-    text-align: center;
-  }
-  .vertical {
-    padding: 0.5em 1em 0.5em 0;
-    writing-mode: vertical-rl;
-    + * {
-      flex-grow: 1;
-    }
-  }
-}
-
 [contenteditable] {
  cursor: text;
 }

-a {
-  color: lighten($color-active, 20%);
-}
+// a {
+//   color: lighten($color-active, 20%);
+// }

 input, textarea {
  background: #333;
@ -104,21 +51,21 @@ input, textarea {
  padding: 0.5em;
 }

-textarea {
-  overflow: hidden;
-  resize: none;
-}
+// textarea {
+//   overflow: hidden;
+//   resize: none;
+// }

-fieldset {
-  background-color: #151515;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-  display: inline-block;
-  margin: 0 0 1em 0;
-  padding: 0.5em;
-  position: relative;
-  top: -0.5em;
-  width: 100%;
-}
+// fieldset {
+//   background-color: #151515;
+// 	border: 1px solid rgba(255, 255, 255, 0.1);
+//   display: inline-block;
+//   margin: 0 0 1em 0;
+//   padding: 0.5em;
+//   position: relative;
+//   top: -0.5em;
+//   width: 100%;
+// }

 button, .button {
  background-color: rgba(0, 0, 0, 0.25);
@ -156,15 +103,23 @@ select {
 }

 *:focus {
-  box-shadow: 0 0 2px 0 $color-active;
+  box-shadow: 0 0 2px 0 var(--color-active);
  outline: none;
  z-index: 1;
 }

-.muted {
-  color: $color-muted;
+label, .label {
+  background-color: rgba(255, 255, 255, 0.075);
+  color: #ffffff;
+  font-family: var(--thick-title-font-family);
+  font-size: 1em;
+  user-select: none;
 }

+// .muted {
+//   color: $color-muted;
+// }
+
@font-face {
  font-family: 'LatoLight';
  src: url('./fonts/Lato-Light.woff') format('woff');
--- a/packages/core/src/components/persea/scss/colors.scss
+++ b/packages/core/src/components/persea/scss/colors.scss
@ -1,4 +0,0 @@
-$color-active: rgb(0, 99, 112);
-$color-muted: #bbbbbb;
-$color-owner: #d65130;
-$color-unread: rgb(180, 0, 0);
--- a/packages/core/src/components/persea/scss/graphics.scss
+++ b/packages/core/src/components/persea/scss/graphics.scss
@ -1,8 +0,0 @@
-@mixin shadow-border($size, $color, $radius: $size) {
-  box-shadow:
-    -#{$size} -#{$size} $radius $color,
-       $size     $size  $radius $color,
-    -#{$size}    $size  $radius $color,
-       $size  -#{$size} $radius $color
-  ;
-}
--- a/packages/core/src/components/persea/sidebar/index.jsx
+++ b/packages/core/src/components/persea/sidebar/index.jsx
@ -13,12 +13,13 @@ import styles from './index.module.scss';

 function Sidebar({expanded, setExpanded}) {
  const flecks = useFlecks();
-  const sidebarImplementations = flecks.invokeMerge('@persea/core.sidebar');
+  // Sidebar panels.
+  const sidebarPanels = flecks.invokeMerge('@persea/core.sidebar');
  const [sidebar, setSidebar] = useLocalStorage(
    '@persea/core/sidebar',
-    Object.keys(sidebarImplementations).shift(),
+    Object.keys(sidebarPanels).shift(),
  );
-  const Icons = Object.entries(sidebarImplementations)
+  const Icons = Object.entries(sidebarPanels)
    .map(([key, {Icon}]) => (
      <IconComponent
        className={Icon}
@ -36,7 +37,7 @@ function Sidebar({expanded, setExpanded}) {
        }}
      />
    ));
-  const {Content} = sidebarImplementations[sidebar];
+  const {Content} = sidebarPanels[sidebar];
  return (
    <div className={classnames(styles.sidebar, expanded && styles.expanded)}>
      <IconsComponent Icons={Icons} />
--- a/packages/core/src/sidebar/organization/content.module.scss
+++ b/packages/core/src/sidebar/organization/content.module.scss
@ -1,6 +1,3 @@
-.content {
-}
-
 .empty {
  p {
    font-family: var(--message-font-family);
--- a/packages/core/src/sidebar/organization/icon_document.svg
+++ b/packages/core/src/sidebar/organization/icon_document.svg
@ -4,44 +4,44 @@
 	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
 <g>
 	<g>
-		
+
 			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
 			36.766,12.169 9.352,12.169 9.352,60.169 48.504,60.169 48.504,23.907 		"/>
-		
+
 			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
 			36.766,23.907 48.504,23.907 36.766,12.169 		"/>
 	</g>
 	<g>
-		
+
 			<polygon fill="#8CAEDC" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
 			45.103,3.831 17.689,3.831 17.689,51.831 56.841,51.831 56.841,15.569 		"/>
-		
+
 			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
 			45.103,15.569 56.841,15.569 45.103,3.831 		"/>
 	</g>
 </g>
 <g>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="15.787" x2="37.931" y2="15.787"/>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="20.288" x2="50.919" y2="20.288"/>
-	
+
 		<rect x="23.644" y="15.787" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
 </g>
 <g>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="25.581" x2="37.931" y2="25.581"/>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="30.082" x2="50.919" y2="30.082"/>
-	
+
 		<rect x="23.644" y="25.581" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
 </g>
 <g>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="36.515" x2="37.931" y2="36.515"/>
-	
+
 		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="41.015" x2="50.919" y2="41.015"/>
-	
+
 		<rect x="23.644" y="36.515" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
 </g>
 <line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="23.644" y1="9.7" x2="37.931" y2="9.7"/>
--- a/packages/core/src/sidebar/organization/organization/actions.jsx
+++ b/packages/core/src/sidebar/organization/organization/actions.jsx
@ -1,24 +1,26 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import {PropTypes, React} from '@flecks/react';

+import styles from './actions.module.scss';
+
 const OrganizationActions = ({
  collapseAll,
 }) => (
-  <div className="organization-actions">
+  <div className={styles.organizationActions}>
    <button
-      className="button new-file"
+      className={styles.newFile}
      label="New resource"
      title="New resource"
      type="button"
    />
    <button
-      className="button new-folder"
+      className={styles.newFolder}
      label="New directory"
      title="New directory"
      type="button"
    />
    <button
-      className="button collapse-all"
+      className={styles.collapseAll}
      label="Collapse all"
      onMouseDown={collapseAll}
      title="Collapse all"
--- a/packages/core/src/sidebar/organization/organization/actions.module.scss
+++ b/packages/core/src/sidebar/organization/organization/actions.module.scss
@ -0,0 +1,23 @@
+.organizationActions {
+  line-height: 0;
+  min-width: 4em;
+  button {
+    background-color: transparent;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: none;
+    margin: 0;
+    margin-right: 0.25em;
+    width: 1em;
+    height: 1em;
+    &.collapseAll {
+      background-image: url('./img/collapse-all.svg');
+    }
+    &.newFile {
+      background-image: url('./img/new-file.svg');
+    }
+    &.newFolder {
+      background-image: url('./img/new-folder.svg');
+    }
+  }
+}
--- a/packages/core/src/sidebar/organization/organization/index.jsx
+++ b/packages/core/src/sidebar/organization/organization/index.jsx
@ -19,14 +19,13 @@ import {

 import useLocalStorage from '../../../hooks/use-local-storage';
 import OrganizationActions from './actions';
-import './index.scss';
+import styles from './index.module.scss';

 const normalizeDisplayName = (displayName) => (
  displayName.startsWith('HotExported') ? displayName.slice(11) : displayName
 );

 const Organization = ({
-  className,
  label,
  resourcePaths,
  uuid,
@ -34,7 +33,7 @@ const Organization = ({
  const dispatch = useDispatch();
  const current = useSelector(currentResourceSelector);
  const flecks = useFlecks();
-  const [collapsed, setCollapsed] = useLocalStorage('@persea/core/collapsed', {});
+  const [expanded, setExpanded] = useLocalStorage('@persea/core.expanded', {});
  const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
    const parts = resourcePath.split('/');
    parts.shift();
@ -43,12 +42,9 @@ const Organization = ({
      let index = walk.nodes.findIndex(({label}) => label === part);
      if (-1 === index) {
        index = walk.nodes.length;
-        const path = join('/project', uuid, resourcePath);
        walk.nodes.push({
          ...(isFile ? {} : {nodes: []}),
-          classNames: {
-            collapsed: undefined === collapsed[path] ? true : collapsed[path],
-          },
+          styles,
          label: part,
          value: join(uuid, resourcePath),
        });
@ -62,34 +58,30 @@ const Organization = ({
      .forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
    return tree.nodes;
  };
-  const path = join('/project', uuid);
  return (
-    <div className={classnames('organization', className)}>
+    <div className={styles.organization}>
      <Tree
        activate={({value, nodes}) => {
-          const path = join('/project', value);
          if (!nodes) {
-            const parts = path.split('/');
-            parts.splice(1, 2);
+            const parts = value.split('/');
+            parts.splice(0, 1);
            dispatch(setCurrentResource(parts.join('/')));
          }
          else {
-            const next = createNextState(collapsed, (draft) => {
+            const next = createNextState(expanded, (draft) => {
              /* eslint-disable no-param-reassign */
-              if (path in draft) {
-                delete draft[path];
+              if (value in draft) {
+                delete draft[value];
              }
              else {
-                draft[path] = false;
+                draft[value] = true;
              }
              /* eslint-enable no-param-reassign */
            });
-            setCollapsed(next);
+            setExpanded(next);
          }
        }}
-        classNames={{
-          collapsed: undefined === collapsed[path] ? true : collapsed[path],
-        }}
+        styles={styles}
        indent={0.5}
        isActive={(value) => {
          if (!uuid || !current) {
@ -97,6 +89,7 @@ const Organization = ({
          }
          return value === join(uuid, current);
        }}
+        isCollapsed={(value) => !(value in expanded)}
        label={label}
        nodes={nodesFromResourcePaths(label, uuid, resourcePaths)}
        renderLabel={({label, nodes, value}) => {
@ -105,32 +98,34 @@ const Organization = ({
            .find(({matcher}) => value.match(matcher))
            .Component;
          return (
-            <div className={classnames('label', 'inline')}>
-              {!nodes && <div className={`icon ${normalizeDisplayName(displayName)}`} />}
-              <span className="text">{label}</span>
+            <div className={classnames(styles.label, styles.inline)}>
+              {!nodes && (
+                <div
+                  className={classnames(styles.icon, styles[normalizeDisplayName(displayName)])}
+                />
+              )}
+              <span className={styles.text}>{label}</span>
              {value === uuid && (
                <OrganizationActions
                  collapseAll={(event) => {
                    event.stopPropagation();
-                    setCollapsed({});
+                    setExpanded({});
                  }}
                />
              )}
            </div>
          );
        }}
+        sort={Tree.fileSort}
        value={uuid}
      />
    </div>
  );
 };

-Organization.defaultProps = {
-  className: '',
-};
+Organization.defaultProps = {};

 Organization.propTypes = {
-  className: PropTypes.string,
  label: PropTypes.string.isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,
--- a/packages/core/src/sidebar/organization/organization/index.module.scss
+++ b/packages/core/src/sidebar/organization/organization/index.module.scss
@ -0,0 +1,82 @@
+.organization {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: 0.2s left;
+  width: 100%;
+  .indent {
+    padding-left: 0.35em;
+  }
+  > .tree > .node > .item .label {
+    > div {
+      display: none;
+    }
+    > .text {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &:hover > .tree > .node > .item .label > div {
+    display: block;
+  }
+}
+
+.label {
+  background-color: transparent;
+  color: #ffffff;
+  display: flex;
+  font-family: var(--thick-title-font-family);
+  font-size: 1em;
+  padding: 0.25em 0;
+  user-select: none;
+  &.inline {
+    font-size: 0.85em;
+    justify-content: flex-start;
+    > div:first-child.icon {
+      background-size: cover;
+      flex-grow: unset;
+      margin-right: 0.5em;
+      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: 0 0.5em;
+  }
+  &.collapsed {
+    &.parent > .item .label:before {
+      color: #999;
+      content: "\25B8";
+    }
+  }
+}
--- a/packages/core/src/sidebar/organization/organization/index.scss
+++ b/packages/core/src/sidebar/organization/organization/index.scss
@ -1,94 +0,0 @@
-.organization {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: 0.2s left;
-  width: 100%;
-  .indent {
-    padding-left: 0.35em;
-  }
-  > .tree > .node > .item .label > .text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .label {
-    background-color: transparent;
-    &.inline {
-      font-size: 0.85em;
-      justify-content: flex-start;
-      > div:first-child.icon {
-        background-size: cover;
-        flex-grow: unset;
-        margin-right: 0.5em;
-        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";
-      }
-    }
-  }
-}
-
-.organization-actions {
-  display: none;
-  line-height: 0;
-  min-width: 4em;
-  .organization: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');
-    }
-  }
-}