Added opening and closing folders

Fixed some styling issues with Monaco explorer
hopperelec · Jun 4, 2024 · 6f22cf9 · 6f22cf9
1 parent 4d737ee
commit 6f22cf9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/src/lib/components/monaco-viewer/MonacoFolder.svelte b/src/lib/components/monaco-viewer/MonacoFolder.svelte
@@ -13,52 +13,72 @@ export let openFile: (file: MonacoFile) => void;
 export let nesting = 1;
 </script>
 
-<p>{name}</p>
-<ul style:--nesting={nesting}>
-  {#each Object.entries(folder.subFolders) as [subFolderName, subFolder]}
-    <MonacoFolderComponent name={subFolderName} folder={subFolder} {openFile} nesting={nesting+1}/>
-  {/each}
-  {#each folder.files as file}
-    <li>
-      <button type="button" on:click={() => openFile(file)}>
-        <MonacoFilename {file}/>
-      </button>
-    </li>
-  {/each}
-</ul>
+<div id="folder" class:open={folder.open} style:--nesting={nesting} class:root={nesting === 1}>
+  <button type="button" on:click={() => folder.open = !folder.open}>{name}</button>
+  <ul>
+    {#each Object.entries(folder.subFolders) as [subFolderName, subFolder]}
+      <MonacoFolderComponent name={subFolderName} folder={subFolder} {openFile} nesting={nesting+1}/>
+    {/each}
+    {#each folder.files as file}
+      <li>
+        <button type="button" on:click={() => openFile(file)}>
+          <MonacoFilename {file}/>
+        </button>
+      </li>
+    {/each}
+  </ul>
+</div>
 
 <style lang="scss">
+li > button {
+  width: 100%;
+  height: 100%;
+  padding-left: calc(5px + var(--nesting) * 8px);
+}
+
+button:hover {
+  background-color: #2a2d2e;
+}
+
 ul {
+  display: none;
   list-style: none;
   padding: 0;
-
-  & > li > button {
-    width: 100%;
-    height: 100%;
-    padding-left: calc(5px + var(--nesting) * 8px);
-
-    &:hover {
-        background-color: #2a2d2e
-    }
-  }
 }
 
-p {
-  font-size: 11px;
-  font-weight: 700;
-  padding-left: calc(var(--nesting) * 8px);
+#folder {
+  & > button {
+    width: 100%;
+    padding-left: calc(var(--nesting) * 8px);
+    text-align: left;
 
-  /* Roughly re-create the dropdown icon */
-  &::before {
+    /* Roughly re-create the dropdown icon */
+    &::before {
       content: "";
       display: inline-block;
       border: solid white;
-      border-width: 0 1px 1px 0;
+      border-width: 1px 1px 0 0;
       height: 6px;
       width: 6px;
       margin-left: 7px;
       margin-right: 7px;
       transform: translateY(-3px) rotate(45deg);
+    }
+  }
+
+  &.root > button {
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  &.open {
+    & > button::before {
+      border-width: 0 1px 1px 0;
+    }
+
+    & > ul {
+      display: block;
+    }
   }
 }
 </style>
diff --git a/src/lib/components/monaco-viewer/MonacoViewer.svelte b/src/lib/components/monaco-viewer/MonacoViewer.svelte
@@ -222,7 +222,6 @@ h3, span {
 }
 
 #explorer {
-  font-size: 13px;
   border-right: var(--border);
   line-height: 22px;
 }

diff --git a/src/lib/components/monaco-viewer/button-reset.css b/src/lib/components/monaco-viewer/button-reset.css
@@ -6,4 +6,6 @@ button {
     cursor: pointer;
     padding: 0;
     line-height: inherit;
+    font-size: 13px;
+    font-family: inherit;
 }