Make a component for overlays

murilopolese · murilopolese · commit 83d5d595d1e7 · 2024-04-22T14:07:36.000+02:00
diff --git a/ui/arduino/index.html b/ui/arduino/index.html
@@ -30,6 +30,7 @@
     <script type="text/javascript" src="views/components/repl-panel.js" charset="utf-8"></script>
     <script type="text/javascript" src="views/components/tabs.js" charset="utf-8"></script>
     <script type="text/javascript" src="views/components/toolbar.js" charset="utf-8"></script>
+    <script type="text/javascript" src="views/components/overlay.js" charset="utf-8"></script>
 
     <!-- Views -->
     <script type="text/javascript" src="views/editor.js" charset="utf-8"></script>
diff --git a/ui/arduino/main.js b/ui/arduino/main.js
@@ -19,27 +19,26 @@ function App(state, emit) {
     `
   }
 
-  let overlay = html`<div id="overlay" class="closed"></div>`
-
-  if (state.diskFiles == null) {
-    emit('load-disk-files')
-    overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
+  if (state.view == 'file-manager') {
+    return html`
+      <div id="app">
+        ${FileManagerView(state, emit)}
+        ${Overlay(state, emit)}
+      </div>
+    `
+  } else {
+    return html`
+      <div id="app">
+        ${EditorView(state, emit)}
+        ${Overlay(state, emit)}
+      </div>
+    `
   }
-
-  if (state.isRemoving) overlay = html`<div id="overlay" class="open"><p>Removing...</p></div>`
-  if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
-  if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
-  if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
-  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
-
-  const view = state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
   return html`
     <div id="app">
-      ${view}
-      ${overlay}
+      ${Overlay(state, emit)}
     </div>
   `
-
 }
 
 window.addEventListener('load', () => {
diff --git a/ui/arduino/views/components/overlay.js b/ui/arduino/views/components/overlay.js
@@ -0,0 +1,16 @@
+function Overlay(state, emit) {
+  let overlay = html`<div id="overlay" class="closed"></div>`
+
+  if (state.diskFiles == null) {
+    emit('load-disk-files')
+    overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
+  }
+
+  if (state.isRemoving) overlay = html`<div id="overlay" class="open"><p>Removing...</p></div>`
+  if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
+  if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
+  if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
+  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
+
+  return overlay
+}
