Make a component for overlays

Author: murilopolese

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>

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', () => {

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
+}