Skip to content

Commit 2893099

Browse files
murilopolesemurilopolese
authored
Merge pull request #109 from arduino/feature/overlay
Transparent overlay instead of DOM overwrite
2 parents 54524d1 + 88f3b93 commit 2893099

File tree

4 files changed

+81
-48
lines changed

4 files changed

+81
-48
lines changed

‎ui/arduino/main.css

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
}
99

1010
* {
11-
/* box-sizing: border-box; */
1211
-moz-user-select: none;
1312
-webkit-user-select: none;
1413
user-select: none;
@@ -643,3 +642,32 @@ button.small .icon {
643642
#code-editor .cm-panel.cm-search [name="close"] {
644643
position: relative;
645644
}
645+
646+
#overlay {
647+
position: fixed;
648+
display: flex;
649+
background: rgba(255, 255, 255, 0.5);
650+
align-items: center;
651+
justify-content: center;
652+
transition: all 0.25s;
653+
pointer-events: none;
654+
opacity: 0;
655+
}
656+
657+
#overlay.open {
658+
width: 100%;
659+
height: 100%;
660+
top: 0;
661+
bottom: 0;
662+
left: 0;
663+
right: 0;
664+
z-index: 9999;
665+
pointer-events: all;
666+
cursor: wait;
667+
opacity: 1;
668+
}
669+
670+
#overlay.open > * {
671+
background: white;
672+
padding: 1em 1.5em;
673+
}

‎ui/arduino/main.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,27 @@ function App(state, emit) {
1919
`
2020
}
2121

22+
let overlay = html`<div id="overlay" class="closed"></div>`
23+
2224
if (state.diskFiles == null) {
2325
emit('load-disk-files')
24-
return html`<div id="app"><p>Loading files...</p></div>`
26+
overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
2527
}
2628

27-
if (state.isRemoving) return html`<div id="app"><p>Removing...</p></div>`
28-
if (state.isConnecting) return html`<div id="app"><p>Connecting...</p></div>`
29-
if (state.isLoadingFiles) return html`<div id="app"><p>Loading files...</p></div>`
30-
if (state.isSaving) return html`<div id="app"><p>Saving file... ${state.savingProgress}</p></div>`
31-
if (state.isTransferring) return html`<div id="app"><p>Transferring file... ${state.transferringProgress}</p></div>`
29+
if (state.isRemoving) overlay = html`<div id="overlay" class="open"><p>Removing...</p></div>`
30+
if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
31+
if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
32+
if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
33+
if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
34+
35+
const view = state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
36+
return html`
37+
<div id="app">
38+
${view}
39+
${overlay}
40+
</div>
41+
`
3242

33-
return state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
3443
}
3544

3645
window.addEventListener('load', () => {

‎ui/arduino/views/editor.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
function EditorView(state, emit) {
22
return html`
3-
<div id="app">
4-
<div class="working-area">
5-
${Toolbar(state, emit)}
6-
${Tabs(state, emit)}
7-
${CodeEditor(state, emit)}
8-
${ReplPanel(state, emit)}
9-
</div>
10-
${ConnectionDialog(state, emit)}
3+
<div class="working-area">
4+
${Toolbar(state, emit)}
5+
${Tabs(state, emit)}
6+
${CodeEditor(state, emit)}
7+
${ReplPanel(state, emit)}
118
</div>
9+
${ConnectionDialog(state, emit)}
1210
`
1311
}

‎ui/arduino/views/file-manager.js

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,42 @@ function FileManagerView(state, emit) {
77
}
88

99
return html`
10-
<div id="app">
11-
<div class="working-area">
12-
${Toolbar(state, emit)}
13-
<div id="file-manager">
14-
<div id="board-files">
15-
<div class="device-header">
16-
<img class="icon" src="media/${state.isConnected?'connect':'disconnect'}.svg" />
17-
<div onclick=${() => emit('open-connection-dialog')} class="text">
18-
<span>${boardFullPath}</span>
19-
</div>
20-
<button disabled=${!state.isConnected} onclick=${() => emit('create-folder', 'board')}>
21-
<img class="icon" src="media/new-folder.svg" />
22-
</button>
23-
<button disabled=${!state.isConnected} onclick=${() => emit('create-file', 'board')}>
24-
<img class="icon" src="media/new-file.svg" />
25-
</button>
10+
<div class="working-area">
11+
${Toolbar(state, emit)}
12+
<div id="file-manager">
13+
<div id="board-files">
14+
<div class="device-header">
15+
<img class="icon" src="media/${state.isConnected?'connect':'disconnect'}.svg" />
16+
<div onclick=${() => emit('open-connection-dialog')} class="text">
17+
<span>${boardFullPath}</span>
2618
</div>
27-
${BoardFileList(state, emit)}
19+
<button disabled=${!state.isConnected} onclick=${() => emit('create-folder', 'board')}>
20+
<img class="icon" src="media/new-folder.svg" />
21+
</button>
22+
<button disabled=${!state.isConnected} onclick=${() => emit('create-file', 'board')}>
23+
<img class="icon" src="media/new-file.svg" />
24+
</button>
2825
</div>
29-
${FileActions(state, emit)}
30-
<div id="disk-files">
31-
<div class="device-header">
32-
<img class="icon" src="media/computer.svg" />
33-
<div class="text" onclick=${() => emit('select-disk-navigation-root')}>
34-
<span>${diskFullPath}</span>
35-
</div>
36-
<button onclick=${() => emit('create-folder', 'disk')}>
37-
<img class="icon" src="media/new-folder.svg" />
38-
</button>
39-
<button onclick=${() => emit('create-file', 'disk')}>
40-
<img class="icon" src="media/new-file.svg" />
41-
</button>
26+
${BoardFileList(state, emit)}
27+
</div>
28+
${FileActions(state, emit)}
29+
<div id="disk-files">
30+
<div class="device-header">
31+
<img class="icon" src="media/computer.svg" />
32+
<div class="text" onclick=${() => emit('select-disk-navigation-root')}>
33+
<span>${diskFullPath}</span>
4234
</div>
43-
${DiskFileList(state, emit)}
35+
<button onclick=${() => emit('create-folder', 'disk')}>
36+
<img class="icon" src="media/new-folder.svg" />
37+
</button>
38+
<button onclick=${() => emit('create-file', 'disk')}>
39+
<img class="icon" src="media/new-file.svg" />
40+
</button>
4441
</div>
42+
${DiskFileList(state, emit)}
4543
</div>
4644
</div>
47-
${ConnectionDialog(state, emit)}
4845
</div>
46+
${ConnectionDialog(state, emit)}
4947
`
5048
}

0 commit comments

Comments
 (0)
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

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy