Skip to content

Commit f15214a

Browse files
sEversEver
authored
Improve readability of the #header_buttons - simpler structure, black icons, green connect button (#4371)
Refactor header_buttons css for improved readability
1 parent 0aebc48 commit f15214a

File tree

10 files changed

+129
-85
lines changed

10 files changed

+129
-85
lines changed

‎src/css/main.less‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,21 @@ a.disabled {
4343
}
4444
.background_paper {
4545
background-color: var(--surface-200);
46-
background-image: linear-gradient(var(--surface-300) 2px, transparent 2px),
46+
background-image:
47+
linear-gradient(var(--surface-300) 2px, transparent 2px),
4748
linear-gradient(90deg, var(--surface-300) 2px, transparent 2px),
4849
linear-gradient(var(--surface-300) 1px, transparent 1px),
4950
linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px);
50-
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
51-
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
51+
background-size:
52+
75px 75px,
53+
75px 75px,
54+
15px 15px,
55+
15px 15px;
56+
background-position:
57+
-2px -2px,
58+
-2px -2px,
59+
-1px -1px,
60+
-1px -1px;
5261
}
5362
.standard_input {
5463
padding-left: 3px;
@@ -287,88 +296,83 @@ input[type="number"] {
287296
width: fit-content;
288297
display: none;
289298
}
290-
#header_btns {
299+
.firmware_flasher_button,
300+
.connection_button {
291301
display: flex;
302+
flex-direction: column;
292303
align-items: center;
293-
gap: 2rem;
294304
}
295-
.open_firmware_flasher,
296-
.connect_controls {
305+
306+
#header_buttons {
297307
display: flex;
298-
flex-direction: column;
299308
align-items: center;
300-
}
301-
.firmware_b {
302-
width: 52px;
303-
height: 52px;
304-
a.flash {
309+
gap: 2rem;
310+
311+
a.firmware_flasher_button__link {
312+
display: block;
305313
background-color: var(--primary-500);
306314
border: 1px solid var(--primary-600);
307315
background-repeat: no-repeat;
308316
height: 50px;
309317
width: 50px;
310318
border-radius: 100px;
311319
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
312-
float: left;
313320
transition: none;
314-
background-image: url(../images/icons/cf_icon_flasher_white.svg);
321+
background-image: url(../images/icons/cf_icon_flasher_black.svg);
315322
background-size: 30px;
316323
background-position: center 10px;
317324
&:hover {
318325
background-color: var(--primary-400);
319326
}
320327
}
321-
a.flash.disabled {
328+
a.firmware_flasher_button__link.disabled {
322329
background-color: var(--surface-500);
323330
pointer-events: none;
324331
cursor: default;
325332
}
326-
a.flash.active {
333+
a.firmware_flasher_button__link.active {
327334
background-color: var(--error-500);
328335
border: 1px solid var(--error-600);
329336
transition: none;
330-
background-image: url(../images/icons/cf_icon_flasher_white.svg);
331337
&:hover {
332338
background-color: var(--error-400);
333339
}
334340
}
335-
}
336-
.connect_b {
337-
width: 52px;
338-
height: 52px;
339-
a.connect {
340-
background-color: var(--primary-500);
341-
border: 1px solid var(--primary-600);
341+
342+
a.connection_button__link {
343+
display: block;
344+
background-color: var(--primary-action);
345+
border: 1px solid var(--primary-action-border);
342346
background-repeat: no-repeat;
343347
height: 50px;
344348
width: 50px;
345349
border-radius: 100px;
346350
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
347-
float: left;
348351
transition: none;
349-
background-image: url(../images/icons/cf_icon_usb2_white.svg);
352+
background-image: url(../images/icons/cf_icon_usb2_black.svg);
350353
background-size: 44px;
351354
background-position: center 6px;
352355
&:hover {
353-
background-color: var(--primary-400);
356+
background-color: var(--primary-action-hover);
354357
}
355358
}
356-
a.connect.disabled {
359+
a.connection_button__link.disabled {
357360
background-color: var(--surface-500);
358361
pointer-events: none;
359362
cursor: default;
360363
}
361-
a.connect.active {
364+
a.connection_button__link.active {
362365
background-color: var(--error-500);
363366
border: 1px solid var(--error-600);
364367
transition: none;
365-
background-image: url(../images/icons/cf_icon_usb1_white.svg);
368+
background-image: url(../images/icons/cf_icon_usb1_black.svg);
366369
&:hover {
367370
background-color: var(--error-400);
368371
}
369372
}
370373
}
371-
.flash_state {
374+
375+
.firmware_flasher_button__label {
372376
white-space: nowrap;
373377
}
374378
.header-wrapper {
@@ -2081,22 +2085,11 @@ each(range(12), {
20812085
display: block;
20822086
order: 4;
20832087
}
2084-
#header_btns {
2088+
#header_buttons {
20852089
margin-left: auto;
20862090
order: 3;
20872091
gap: 1rem;
20882092
}
2089-
.firmware_b,
2090-
.connect_b {
2091-
height: fit-content !important;
2092-
width: fit-content !important;
2093-
a {
2094-
height: 2rem !important;
2095-
width: 2rem !important;
2096-
background-size: 1.5rem !important;
2097-
background-position: center !important;
2098-
}
2099-
}
21002093
.web-port-picker {
21012094
order: 5;
21022095
}
@@ -2112,10 +2105,10 @@ each(range(12), {
21122105
order: 5;
21132106
justify-content: space-around;
21142107
}
2115-
.flash_state {
2108+
.firmware_flasher_button__label {
21162109
display: none !important;
21172110
}
2118-
.connect_state {
2111+
.connection_button__label {
21192112
display: none !important;
21202113
}
21212114
#port-picker.reveal {

‎src/css/theme.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ body {
5858
--warning-600: #e65c00;
5959

6060
--switcherysecond: var(--surface-400);
61+
62+
--primary-action: var(--success-500);
63+
--primary-action-border: var(--success-600);
64+
--primary-action-hover: var(--success-400);
6165
}
6266

6367
body.dark-theme {

‎src/images/icons/cf_icon_flasher_black.svg‎

Lines changed: 23 additions & 0 deletions
Loading

‎src/images/icons/cf_icon_usb1_black.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/images/icons/cf_icon_usb2_black.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/index.html‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -91,18 +91,14 @@
9191
</div>
9292
</div>
9393
</div>
94-
<div id="header_btns">
95-
<div class="open_firmware_flasher" id="flashbutton">
96-
<div class="firmware_b">
97-
<a class="flash disabled" href="#"></a>
98-
</div>
99-
<div class="flash_state" i18n="flashTab"></div>
94+
<div id="header_buttons">
95+
<div class="firmware_flasher_button">
96+
<a class="firmware_flasher_button__link disabled" href="#"></a>
97+
<div class="firmware_flasher_button__label" i18n="flashTab"></div>
10098
</div>
101-
<div class="connect_controls" id="connectbutton">
102-
<div class="connect_b">
103-
<a class="connect disabled" href="#"></a>
104-
</div>
105-
<div class="connect_state" i18n="connect"></div>
99+
<div class="connection_button">
100+
<a class="connection_button__link disabled" href="#"></a>
101+
<div class="connection_button__label" i18n="connect"></div>
106102
</div>
107103
</div>
108104
<div id="reveal_btn">

‎src/js/Analytics.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ function setupAnalytics(result) {
5050

5151
tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "AppStart", { sessionControl: "start" });
5252

53-
$(".connect_b a.connect").removeClass("disabled");
54-
$(".firmware_b a.flash").removeClass("disabled");
53+
$("a.connection_button__link").removeClass("disabled");
54+
$("a.firmware_flasher_button__link").removeClass("disabled");
5555
}
5656

5757
export function checkSetupAnalytics(callback) {

‎src/js/main.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function startProcess() {
102102
gui_log(i18n.getMessage("infoVersionOs", { operatingSystem: GUI.operating_system }));
103103
gui_log(i18n.getMessage("infoVersionConfigurator", { configuratorVersion: CONFIGURATOR.getDisplayVersion() }));
104104

105-
$(".connect_b a.connect").removeClass("disabled");
105+
$("a.connection_button__link").removeClass("disabled");
106106
// with Vue reactive system we don't need to call these,
107107
// our view is reactive to model changes
108108
// updateTopBarVersion();
@@ -131,15 +131,15 @@ function startProcess() {
131131
}
132132
});
133133

134-
$("div.open_firmware_flasher a.flash").on("click", function () {
135-
if ($("div#flashbutton a.flash_state").hasClass("active") && $("div#flashbutton a.flash").hasClass("active")) {
136-
$("div#flashbutton a.flash_state").removeClass("active");
137-
$("div#flashbutton a.flash").removeClass("active");
134+
$("a.firmware_flasher_button__link").on("click", function () {
135+
if ($("a.firmware_flasher_button__label").hasClass("active") && $("a.firmware_flasher_button__link").hasClass("active")) {
136+
$("a.firmware_flasher_button__label").removeClass("active");
137+
$("a.firmware_flasher_button__link").removeClass("active");
138138
$("#tabs ul.mode-disconnected .tab_landing a").click();
139139
} else {
140140
$("#tabs ul.mode-disconnected .tab_firmware_flasher a").click();
141-
$("div#flashbutton a.flash_state").addClass("active");
142-
$("div#flashbutton a.flash").addClass("active");
141+
$("a.firmware_flasher_button__label").addClass("active");
142+
$("a.firmware_flasher_button__link").addClass("active");
143143
}
144144
});
145145

@@ -168,10 +168,10 @@ function startProcess() {
168168

169169
if (GUI.allowedTabs.indexOf(tab) < 0 && tab === "firmware_flasher") {
170170
if (GUI.connected_to || GUI.connecting_to) {
171-
$("a.connect").click();
171+
$("a.connection_button__link").click();
172172
}
173173
// this line is required but it triggers opening the firmware flasher tab again
174-
$("div.open_firmware_flasher a.flash").click();
174+
$("a.firmware_flasher_button__link").click();
175175
} else if (GUI.allowedTabs.indexOf(tab) < 0) {
176176
gui_log(i18n.getMessage("tabSwitchUpgradeRequired", [tabName]));
177177
return;
@@ -182,11 +182,11 @@ function startProcess() {
182182
GUI.tab_switch_cleanup(function () {
183183
// disable active firmware flasher if it was active
184184
if (
185-
$("div#flashbutton a.flash_state").hasClass("active") &&
186-
$("div#flashbutton a.flash").hasClass("active")
185+
$("a.firmware_flasher_button__label").hasClass("active") &&
186+
$("a.firmware_flasher_button__link").hasClass("active")
187187
) {
188-
$("div#flashbutton a.flash_state").removeClass("active");
189-
$("div#flashbutton a.flash").removeClass("active");
188+
$("a.firmware_flasher_button__label").removeClass("active");
189+
$("a.firmware_flasher_button__link").removeClass("active");
190190
}
191191
// disable previously active tab highlight
192192
$("li", ui_tabs).removeClass("active");

0 commit comments

Comments
 (0)