Improve menu layout

MattTheBanana · Aug 18, 2022 · a570bd0 · a570bd0
1 parent b85cc79
commit a570bd0
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 67 deletions.
diff --git a/dispatch.js b/dispatch.js
@@ -100,6 +100,7 @@ const ACTIONS = {
  DOC_OPEN(args, state) {
  const setPerc = n => {
  document.documentElement.style.setProperty("--docs-percentage", `${n}%`);
+ localStorage.setItem("docs-percentage", `${n}%`);
  };
 
  const perc = getComputedStyle(document.documentElement)

diff --git a/dispatches/init.js b/dispatches/init.js
@@ -108,6 +108,11 @@ export async function init(args, state) {
  const mdRenderer = document.querySelector("markdown-renderer");
  mdRenderer.innerHTML = md;
 
+ if (localStorage.getItem("docs-percentage")) {
+ document.documentElement.style.setProperty("--docs-percentage", localStorage.getItem("docs-percentage"));
+ document.querySelector(".docs").classList.toggle("docs-expanded", localStorage.getItem("docs-percentage").trim() !== "0%");
+ }
+
  dispatch("RENDER");
 
  // switch to mobile mode

diff --git a/index.css b/index.css
@@ -57,7 +57,7 @@ body {
  flex: 1;
 }
 
-.menu-item, .dropdown-list > * {
+.menu-item, .dropdown-list > *, .popout-list > * {
  color: #ffffff;
  padding: 8px 14px;
  display: flex;
@@ -68,72 +68,70 @@ body {
 .menu-item {
  padding-bottom: 16px;
  border-radius: 4px 4px 0 0;
-}
-
-.menu-item:not(.run):hover, .dropdown-list > *:hover {
  cursor: pointer;
- background: var(--bg-floating);
- color: #ffffff;
 }
 
-.dropdown-list > *:hover {
+.menu-item:not(.run):not(.menu-spacer):hover,
+.dropdown-list > *:not(.menu-spacer):hover,
+.popout-list > *:not(.menu-spacer):hover {
  background: var(--accent-darker);
+ color: #ffffff;
 }
 
 .delete-file:hover {
  color: red;
 }
 
-.menu-name {
- box-shadow: inset 0 -6px 0 0 var(--bg-floating);
- font-weight: bold;
- outline: none;
+.menu-spacer {
+ position: relative;
+ cursor: default;
+ padding: 0;
+ padding-bottom: 7px;
 }
 
-.run {
- box-shadow: inset 0 -6px 0 0 transparent;
- background: var(--bg-floating);
- /* margin-left: 60px; L: temp */
+.menu-spacer::after {
+ content: "";
+ height: 1px;
+ width: 100%;
+ background: rgb(87, 87, 87);
  position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- transition: box-shadow 100ms linear;
- cursor: pointer;
-}
-
-.stale-run {
- box-shadow: inset 0 -6px 0 0 var(--pcb-trace);
+ top: 3px;
 }
 
-.stale-run:hover {
- box-shadow: inset 0 -50px 0 0 var(--pcb-trace);
-}
-
-.dropdown-container {
+.dropdown-container, .popout-container {
  position: relative;
 }
 
-.dropdown-list {
+.dropdown-list, .popout-list {
  visibility: hidden;
  position: absolute;
+ width: max-content;
+}
+
+.dropdown-list {
  border-radius: 0 0 4px 4px;
- overflow: hidden; /* this is bad and horrible but it works for now lol */
  top: 99%;
  left: 0;
- width: max-content;
 }
 
-.dropdown-list, .dropdown-list > * {
+.popout-list {
+ border-radius: 0 0 4px 4px;
+ --space: 8px;
+ padding: var(--space);
+ padding-left: calc(var(--space) + 2%);
+ left: calc(99% - var(--space));
+ top: calc(var(--space) * -1);
+}
+
+.dropdown-list > *, .popout-list > * {
  background: var(--bg-floating);
 }
 
-.dropdown-list > * {
- cursor: pointer;
+.dropdown-list > *, .popout-list > * {
  width: 100%;
 }
 
-.dropdown-container:hover .dropdown-list {
+.dropdown-container:hover .dropdown-list, .popout-container:hover .popout-list {
  visibility: visible;
 }
 
@@ -160,6 +158,26 @@ body {
  flex-direction: column;
 }
 
+.run {
+ box-shadow: inset 0 -6px 0 0 transparent;
+ background: var(--bg-floating);
+ /* margin-left: 60px; L: temp */
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: box-shadow 100ms linear;
+ cursor: pointer;
+}
+
+.stale-run {
+ box-shadow: inset 0 -6px 0 0 var(--pcb-trace);
+}
+
+.stale-run:hover {
+ box-shadow: inset 0 -50px 0 0 var(--pcb-trace);
+}
+
 .cm-editor {
  flex: 1;
  overflow: hidden;

diff --git a/view.js b/view.js
@@ -100,9 +100,9 @@ const drawFile = (file, i, state) => {
  state.codemirror.foldRange(index, index+1);
  }
  return html`
- <div style="display: flex;">
- <div style="width:30px;" class="delete-file" @click=${deleteFile}>x</div>
- <div style="width:100%;" @click=${setText}>${name.slice(0, 15)}${name.length > 15 ? "..." : ""}</div>
+ <div style="display: flex; width: 100%;">
+ <div style="flex:1;" @click=${setText}>${name.slice(0, 15)}${name.length > 15 ? "..." : ""}</div>
+ <div style="margin-left: 10px;" class="delete-file" @click=${deleteFile}>x</div>
  </div>
  `
 } 
@@ -176,46 +176,44 @@ afterInput(() => {
  state.codemirror.foldRange(index, index+1);
  }
  return html`
- <div style="display: flex;">
- <div style="width:30px;">+</div>
- <div style="width:100%;" @click=${setText}>new file</div>
- </div>
+ <div @click=${setText}>new game</div>
  `
 } 
 
 const menu = (state) => html`
  <div class="menu">
- <!-- menus: file, community, upload? something similar -->
- <div class=${["menu-item", state.stale ? "stale" : ""].join(" ")} @click=${() => dispatch("SAVE")}>save</div>
  <div class="menu-item dropdown-container">
- files
+ ${state.stale ? 'file*' : 'file'}
  <div class="dropdown-list">
- ${state.savedGames.map((file, i) => drawFile(file, i, state))}
  ${newFile(state)}
+
+ <div class="popout-container">
+ open recent &rsaquo;
+ <div class="popout-list">${state.savedGames.map((file, i) => drawFile(file, i, state))}</div>
+ </div>
+
+ <div @click=${() => dispatch("SAVE")}>${state.stale ? 'save*' : 'save'}</div>
+
+ <div class="menu-spacer" />
+
+ <div class="popout-container">
+ share &rsaquo;
+ <div class="popout-list">
+ <div @click=${e => dispatch("SAVE_TO_FILE")}>as file</div>
+ <div @click=${e => dispatch("GET_URL")}>as link</div>
+ </div>
+ </div>
  </div>
  </div>
- <div class="menu-item dropdown-container">
- share
- <div class="dropdown-list">
- <div @click=${e => dispatch("SAVE_TO_FILE")}>as file</div>
- <div @click=${e => dispatch("GET_URL")}>as link</div>
- </div>
- </div>
- <a 
- class="menu-item dropdown-container" 
- href="https://sprig-gallery.hackclub.dev"
- >
- gallery
+
+ <a class="menu-item" href="https://sprig-gallery.hackclub.dev">
+ explore gallery
  </a>
- <div 
- class="menu-item" 
- @click=${() => dispatch("UPLOAD")}>
- upload
- </div>
- <div 
- class="menu-item docs-trigger">
- ${docsOpenClosed()}-help
+
+ <div class="menu-item" @click=${() => dispatch("UPLOAD")}>
+ upload to device
  </div>
+
  <div 
  class=${["menu-item", "run", state.staleRun ? "stale-run" : ""].join(" ")} 
  @click=${() => dispatch("RUN")}>
@@ -225,6 +223,11 @@ const menu = (state) => html`
 
  <div class="spacer" aria-hidden="true" />
 
+ <div 
+ class="menu-item docs-trigger">
+ ${docsOpenClosed()} help
+ </div>
+
  <a class="menu-item" href="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/hackclub/sprig/">
  <ion-icon name="logo-github" />
  </a>