8000 Rework toolbar and CSS. · arduino/lab-micropython-editor@ea5b620 · GitHub
[go: up one dir, main page]
Skip to content

Commit ea5b620

Browse files
ubidefeoubidefeo
committed
Rework toolbar and CSS.
Signed-off-by: ubi de feo <me@ubidefeo.com>
1 parent 7fbc40c commit ea5b620

File tree

3 files changed

+38
-4
lines changed

3 files changed

+38
-4
lines changed

‎ui/arduino/main.css

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@font-face {
2-
font-family: "RobotoMono", monospace;
2+
font-family: "RobotoMono";
33
src:
4-
url("media/roboto-mono-latin-ext-400-normal.woff"),
5-
url("media/roboto-mono-latin-ext-400-normal.woff2");
4+
url("media/roboto-mono-latin-ext-400-normal.woff2") format("woff2"),
5+
url("media/roboto-mono-latin-ext-400-normal.woff") format("woff");
66
font-weight: normal;
77
font-style: normal;
88
}
@@ -73,6 +73,19 @@ button.small .icon {
7373

7474
.button {
7575
position: relative;
76+
display: flex;
77+
flex-direction: column;
78+
align-content: space-between;
79+
align-items: center;
80+
gap: 10px;
81+
}
82+
.button .label {
83+
text-align: center;
84+
color: #eee;
85+
opacity: 50%;
86+
}
87+
.button .label.active {
88+
opacity: 100%;
7689
}
7790
.button .tooltip {
7891
opacity: 0;
@@ -124,11 +137,21 @@ button.small .icon {
124137
display: flex;
125138
padding: 20px;
126139
align-items: center;
127-
gap: 20px;
140+
gap: 16px;
128141
align-self: stretch;
129142
background: #008184;
130143
}
131144

145+
.separator {
146+
height: 100%;
147+
min-width: 1px;
148+
flex-basis: fit-content;
149+
background: #fff;
150+
position: relative;
151+
margin-left: 0.5em;
152+
margin-right: 0.5em;
153+
}
154+
132155
#tabs {
133156
display: flex;
134157
padding: 10px 10px 0px 60px;

‎ui/arduino/views/components/elements/button.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ function Button(args) {
55
onClick = (e) => false,
66
disabled = false,
77
active = false,
8+
label,
89
tooltip,
910
background
1011
} = args
@@ -14,11 +15,13 @@ function Button(args) {
1415
}
1516
let activeClass = active ? 'active' : ''
1617
let backgroundClass = background ? 'inverted' : ''
18+
let labelActiveClass = disabled ? '' : 'active'
1719
return html`
1820
<div class="button">
1921
<button class="${size} ${activeClass} ${backgroundClass}" onclick=${onClick} disabled=${disabled}>
2022
<img class="icon" src="media/${icon}" />
2123
</button>
24+
<div class="label ${labelActiveClass}">${label}</div>
2225
${tooltipEl}
2326
</div>
2427
`

‎ui/arduino/views/components/toolbar.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ function Toolbar(state, emit) {
1515
<div id="toolbar">
1616
${Button({
1717
icon: state.isConnected ? 'connect.svg' : 'disconnect.svg',
18+
label: state.isConnected ? 'Disconnect' : 'Connect',
1819
tooltip: state.isConnected ? `Disconnect (${metaKeyString}+Shift+D)` : `Connect (${metaKeyString}+Shift+C)`,
1920
onClick: () => state.isConnected ? emit('disconnect') : emit('open-connection-dialog'),
2021
active: state.isConnected
@@ -24,6 +25,7 @@ function Toolbar(state, emit) {
2425
2526
${Button({
2627
icon: 'run.svg',
28+
label: 'Run',
2729
tooltip: `Run (${metaKeyString}+R)`,
2830
disabled: !_canExecute,
2931
onClick: (e) => {
@@ -36,12 +38,14 @@ function Toolbar(state, emit) {
3638
})}
3739
${Button({
3840
icon: 'stop.svg',
41+
label: 'Stop',
3942
tooltip: `Stop (${metaKeyString}+H)`,
4043
disabled: !_canExecute,
4144
onClick: () => emit('stop')
4245
})}
4346
${Button({
4447
icon: 'reboot.svg',
48+
label: 'Reset',
4549
tooltip: `Reset (${metaKeyString}+Shift+R)`,
4650
disabled: !_canExecute,
4751
onClick: () => emit('reset')
@@ -51,13 +55,15 @@ function Toolbar(state, emit) {
5155
5256
${Button({
5357
icon: 'new-file.svg',
58+
label: 'New',
5459
tooltip: `New (${metaKeyString}+N)`,
5560
disabled: state.view != 'editor',
5661
onClick: () => emit('create-new-file')
5762
})}
5863
5964
${Button({
6065
icon: 'save.svg',
66+
label: 'Save',
6167
tooltip: `Save (${metaKeyString}+S)`,
6268
disabled: !_canSave,
6369
onClick: () => emit('save')
@@ -67,12 +73,14 @@ function Toolbar(state, emit) {
6773
6874
${Button({
6975
icon: 'code.svg',
76+
label: 'Editor',
7077
tooltip: `Editor (${metaKeyString}+Alt+1)`,
7178
active: state.view === 'editor',
7279
onClick: () => emit('change-view', 'editor')
7380
})}
7481
${Button({
7582
icon: 'files.svg',
83+
label: 'Files',
7684
tooltip: `Files (${metaKeyString}+Alt+2)`,
7785
active: state.view === 'file-manager',
7886
onClick: () => emit('change-view', 'file-manager')

0 commit comments

Comments
 (0)
0