8000 Fixed file actions buttons states and CSS. · arduino/lab-micropython-editor@689863a · GitHub
[go: up one dir, main page]
Skip to content

Commit 689863a

Browse files
ubidefeoubidefeo
committed
Fixed file actions buttons states and CSS.
Signed-off-by: ubi de feo <me@ubidefeo.com>
1 parent 07c7bc2 commit 689863a

File tree

3 files changed

+26
-19
lines changed

3 files changed

+26
-19
lines changed

‎ui/arduino/main.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,15 @@ button.square {
5757
}
5858
button.inverted:hover,
5959
button.inverted.active {
60-
background: rgba(0, 129, 132, 0.8);
60+
background: rgba(0, 129, 132, 0.8) !important;
6161
}
6262
button.inverted {
63-
background: rgba(0, 129, 132, 1);
63+
background: rgba(0, 129, 132, 1) !important;
6464
}
6565

6666
button[disabled] {
6767
background: rgba(255, 255, 255, 0.2);
68-
cursor: not-allowed;
68+
cursor: default;
6969
}
7070
button[disabled]:hover {
7171
background: rgba(255, 255, 255, 0.2);
@@ -531,13 +531,17 @@ button.small .icon {
531531
align-self: stretch;
532532
}
533533

534+
#file-actions button[disabled], #file-actions button[disabled]:hover {
535+
opacity: 0.4;
536+
}
537+
534538
#file-actions button .icon {
535539
width: 100%;
536540
height: 100%;
537541
}
538542

539543
#file-actions button:hover {
540-
opacity: 0.2;
544+
opacity: 0.5; */
541545
}
542546

543547
.device-header {

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
function Button(args) {
22
const {
3+
first = false,
34
size = '',
5+
square = false,
46
icon = 'connect.svg',
5-
onClick = (e) => false,
7+
onClick = (e) => {console.log(e); false},
68
disabled = false,
79
active = false,
8-
label,
910
tooltip,
10-
background,
11-
first,
12-
square
11+
label,
12+
background
1313
} = args
1414
let tooltipEl = html``
1515
if (tooltip) {
1616
tooltipEl = html`<div class="tooltip">${tooltip}</div>`
1717
}
18-
let activeClass = active ? 'active' : 'inactive'
18+
let activeClass = active ? 'active' : ''
1919
let backgroundClass = background ? 'inverted' : ''
20-
let labelActiveClass = disabled ? 'inactive' : 'active'
2120
let buttonFirstClass = first ? 'first' : ''
2221
let squareClass = square ? 'square' : ''
22+
let labelActiveClass = disabled ? 'inactive' : 'active'
2323
let labelItem = size === 'small' ? '' : html`<div class="label ${labelActiveClass}">${label}</div>`
24+
2425
return html`
25-
<div class="button ${buttonFirstClass}">
26-
<button disabled=${disabled} class="${squareClass}${size} ${activeClass} ${backgroundClass}" onclick=${onClick}>
27-
<img class="icon" src="media/${icon}" />
28-
</button>
29-
${labelItem}
30-
${tooltipEl}
31-
</div>
32-
`
26+
<div class="button ${buttonFirstClass}">
27+
<button disabled=${disabled} class="${squareClass}${size} ${activeClass} ${backgroundClass}" onclick=${onClick}>
28+
<img class="icon" src="media/${icon}" />
29+
</button>
30+
${labelItem}
31+
${tooltipEl}
32+
</div>
33+
`
3334
}

‎ui/arduino/views/components/file-actions.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ function FileActions(state, emit) {
1515
icon: 'arrow-left-white.svg',
1616
size: 'small',
1717
background: 'inverted',
18+
active: true,
1819
disabled: !canUpload({ isConnected, selectedFiles }),
1920
onClick: () => emit('upload-files')
2021
})}
2122
${Button({
2223
icon: 'arrow-right-white.svg',
2324
size: 'small',
2425
background: 'inverted',
26+
active: true,
2527
disabled: !canDownload({ isConnected, selectedFiles }),
2628
onClick: () => emit('download-files')
2729
})}

0 commit comments

Comments
 (0)
0