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)