8000 Adjusted toolbar colours (hover) and layout. · arduino/lab-micropython-editor@5bf544d · GitHub
[go: up one dir, main page]
Skip to content

Commit 5bf544d

Browse files
ubidefeoubidefeo
committed
Adjusted toolbar colours (hover) and layout.
Signed-off-by: ubi de feo <me@ubidefeo.com>
1 parent 49d3ec8 commit 5bf544d

File tree

3 files changed

+33
-20
lines changed

3 files changed

+33
-20
lines changed

‎ui/arduino/main.css

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ button {
4343
align-items: center;
4444
border: none;
4545
border-radius: 45px;
46-
background: rgba(255, 255, 255, 0.8);
46+
background: rgba(255, 255, 255, 0.6);
4747
cursor: pointer;
4848
transition: all 0.1s;
4949
}
@@ -52,6 +52,9 @@ button.small {
5252
height: 28px;
5353
border-radius: 28px;
5454
}
55+
button.square {
56+
border-radius: 8px;
57+
}
5558
button.inverted:hover,
5659
button.inverted.active {
5760
background: rgba(0, 129, 132, 0.8);
@@ -61,12 +64,18 @@ button.inverted {
6164
}
6265

6366
button[disabled] {
64-
opacity: 0.5;
67+
background: rgba(255, 255, 255, 0.2);
6568
cursor: not-allowed;
6669
}
70+
button[disabled]:hover {
71+
background: rgba(255, 255, 255, 0.2);
72+
}
6773
button:hover, button.active {
6874
background: rgba(255, 255, 255, 1);
6975
}
76+
/* button.inactive:hover {
77+
background: rgba(255, 255, 255, 0.2);
78+
} */
7079

7180
button .icon {
7281
width: 63%;
@@ -85,19 +94,19 @@ button.small .icon {
8594
align-content: space-between;
8695
align-items: center;
8796
gap: 10px;
88-
width: 50px
97+
width: auto
8998
}
9099
.button.first{
91100
width:80px;
92101
}
93102
.button .label {
94103
text-align: center;
95-
color: #eee;
96-
opacity: 0.5;
104+
/* color: #eee; */
105+
color: rgba(255, 255, 255, 0.2);
97106
font-family: "OpenSans", sans-serif;
98107
}
99108
.button .label.active {
100-
opacity: 1;
109+
color: rgba(255, 255, 255, 1);
101110
}
102111
.button .tooltip {
103112
opacity: 0;
@@ -147,7 +156,7 @@ button.small .icon {
147156

148157
#toolbar {
149158
display: flex;
150-
padding: 20px;
159+
padding: 16px 10px 10px 10px;
151160
align-items: center;
152161
gap: 16px;
153162
align-self: stretch;

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,25 @@ function Button(args) {
88
label,
99
tooltip,
1010
background,
11-
first
11+
first,
12+
square
1213
} = args
1314
let tooltipEl = html``
1415
if (tooltip) {
1516
tooltipEl = html`<div class="tooltip">${tooltip}</div>`
1617
}
17-
let activeClass = active ? 'active' : ''
18+
let activeClass = active ? 'active' : 'inactive'
1819
let backgroundClass = background ? 'inverted' : ''
19-
let labelActiveClass = disabled ? '' : 'active'
20+
let labelActiveClass = disabled ? 'inactive' : 'active'
2021
let buttonFirstClass = first ? 'first' : ''
22+
let squareClass = square ? 'square' : ''
23+
let labelItem = size === 'small' ? '' : html`<div class="label ${labelActiveClass}">${label}</div>`
2124
return html`
2225
<div class="button ${buttonFirstClass}">
23-
<button class="${size} ${activeClass} ${backgroundClass}" onclick=${onClick} disabled=${disabled}>
26+
<button disabled=${disabled} class="${squareClass}${size} ${activeClass} ${backgroundClass}" onclick=${onClick}>
2427
<img class="icon" src="media/${icon}" />
2528
</button>
26-
<div class="label ${labelActiveClass}">${label}</div>
29+
${labelItem}
2730
${tooltipEl}
2831
</div>
2932
`

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,13 @@ function Toolbar(state, emit) {
2121
active: state.isConnected,
2222
first: true
2323
})}
24-
24+
${Button({
25+
icon: 'reboot.svg',
26+
label: 'Reset',
27+
tooltip: `Reset (${metaKeyString}+Shift+R)`,
28+
disabled: !_canExecute,
29+
onClick: () => emit('reset')
30+
})}
2531
<div class="separator"></div>
2632
2733
${Button({
@@ -44,13 +50,6 @@ function Toolbar(state, emit) {
4450
disabled: !_canExecute,
4551
onClick: () => emit('stop')
4652
})}
47-
${Button({
48-
icon: 'reboot.svg',
49-
label: 'Reset',
50-
tooltip: `Reset (${metaKeyString}+Shift+R)`,
51-
disabled: !_canExecute,
52-
onClick: () => emit('reset')
53-
})}
5453
5554
<div class="separator"></div>
5655
@@ -77,13 +76,15 @@ function Toolbar(state, emit) {
7776
label: 'Editor',
7877
tooltip: `Editor (${metaKeyString}+Alt+1)`,
7978
active: state.view === 'editor',
79+
square: true,
8080
onClick: () => emit('change-view', 'editor')
8181
})}
8282
${Button({
8383
icon: 'files.svg',
8484
label: 'Files',
8585
tooltip: `Files (${metaKeyString}+Alt+2)`,
8686
active: state.view === 'file-manager',
87+
square: true,
8788
onClick: () => emit('change-view', 'file-manager')
8889
})}
8990
</div>

0 commit comments

Comments
 (0)
0