diff --git a/ui/arduino/main.css b/ui/arduino/main.css index defb54c..ad387c6 100644 --- a/ui/arduino/main.css +++ b/ui/arduino/main.css @@ -8,7 +8,6 @@ } * { - /* box-sizing: border-box; */ -moz-user-select: none; -webkit-user-select: none; user-select: none; @@ -643,3 +642,32 @@ button.small .icon { #code-editor .cm-panel.cm-search [name="close"] { position: relative; } + +#overlay { + position: fixed; + display: flex; + background: rgba(255, 255, 255, 0.5); + align-items: center; + justify-content: center; + transition: all 0.25s; + pointer-events: none; + opacity: 0; +} + +#overlay.open { + width: 100%; + height: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 9999; + pointer-events: all; + cursor: wait; + opacity: 1; +} + +#overlay.open > * { + background: white; + padding: 1em 1.5em; +} diff --git a/ui/arduino/main.js b/ui/arduino/main.js index 6098973..f7d1ef7 100644 --- a/ui/arduino/main.js +++ b/ui/arduino/main.js @@ -19,18 +19,27 @@ function App(state, emit) { ` } + let overlay = html`

` + if (state.diskFiles == null) { emit('load-disk-files') - return html`

Loading files...

` + overlay = html`

Loading files...

` } - if (state.isRemoving) return html`

Removing...

` - if (state.isConnecting) return html`

Connecting...

` - if (state.isLoadingFiles) return html`

Loading files...

` - if (state.isSaving) return html`

Saving file... ${state.savingProgress}

` - if (state.isTransferring) return html`

Transferring file... ${state.transferringProgress}

` + if (state.isRemoving) overlay = html`

Removing...

` + if (state.isConnecting) overlay = html`

Connecting...

` + if (state.isLoadingFiles) overlay = html`

Loading files...

` + if (state.isSaving) overlay = html`

Saving file... ${state.savingProgress}

` + if (state.isTransferring) overlay = html`

Transferring file... ${state.transferringProgress}

` + + const view = state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit) + return html` +

+ ${view} + ${overlay} +

+ ` - return state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit) } window.addEventListener('load', () => { diff --git a/ui/arduino/views/editor.js b/ui/arduino/views/editor.js index fbef046..fd93b08 100644 --- a/ui/arduino/views/editor.js +++ b/ui/arduino/views/editor.js @@ -1,13 +1,11 @@ function EditorView(state, emit) { return html` -

-

- ${Toolbar(state, emit)} - ${Tabs(state, emit)} - ${CodeEditor(state, emit)} - ${ReplPanel(state, emit)} -

- ${ConnectionDialog(state, emit)} +

+ ${Toolbar(state, emit)} + ${Tabs(state, emit)} + ${CodeEditor(state, emit)} + ${ReplPanel(state, emit)}

+ ${ConnectionDialog(state, emit)} ` } diff --git a/ui/arduino/views/file-manager.js b/ui/arduino/views/file-manager.js index a193edd..04626ec 100644 --- a/ui/arduino/views/file-manager.js +++ b/ui/arduino/views/file-manager.js @@ -7,44 +7,42 @@ function FileManagerView(state, emit) { } return html` -

-

- ${Toolbar(state, emit)} -

-

-

-

-

emit('open-connection-dialog')} class="text"> - ${boardFullPath} -

- - +

+ ${Toolbar(state, emit)} +

+

+

+

+

emit('open-connection-dialog')} class="text"> + ${boardFullPath}

- ${BoardFileList(state, emit)} + +

- ${FileActions(state, emit)} -

-

-

-

emit('select-disk-navigation-root')}> - ${diskFullPath} -

- - + ${BoardFileList(state, emit)} +

+ ${FileActions(state, emit)} +

+

+

+

emit('select-disk-navigation-root')}> + ${diskFullPath}

- ${DiskFileList(state, emit)} + +

+ ${DiskFileList(state, emit)}

- ${ConnectionDialog(state, emit)}

+ ${ConnectionDialog(state, emit)} ` } pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy