Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-26 09:45:28 +03:00
Code Issues Wiki Activity

Improve readability of the #header_buttons - simpler structure, black icons, green connect button (#4371)

Browse source 
Refactor header_buttons css for improved readability
This commit is contained in:
sEver 2025-03-09 21:54:01 +01:00 • committed by GitHub
parent 0aebc48dbb
commit f15214ac2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 130 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/css/main.less
View file

@ -43,12 +43,21 @@ a.disabled {
} }
.background_paper { .background_paper {
background-color: var(--surface-200); background-color: var(--surface-200);
background-image: linear-gradient(var(--surface-300) 2px, transparent 2px), background-image:
linear-gradient(var(--surface-300) 2px, transparent 2px),
linear-gradient(90deg, var(--surface-300) 2px, transparent 2px), linear-gradient(90deg, var(--surface-300) 2px, transparent 2px),
linear-gradient(var(--surface-300) 1px, transparent 1px), linear-gradient(var(--surface-300) 1px, transparent 1px),
linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px); linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px; background-size:
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; 75px 75px,
75px 75px,
15px 15px,
15px 15px;
background-position:
-2px -2px,
-2px -2px,
-1px -1px,
-1px -1px;
} }
.standard_input { .standard_input {
padding-left: 3px; padding-left: 3px;
@ -287,21 +296,20 @@ input[type="number"] {
width: fit-content; width: fit-content;
display: none; display: none;
} }
#header_btns { .firmware_flasher_button,
display: flex; .connection_button {
align-items: center;
gap: 2rem;
}
.open_firmware_flasher,
.connect_controls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.firmware_b {
width: 52px; #header_buttons {
height: 52px; display: flex;
a.flash { align-items: center;
gap: 2rem;
a.firmware_flasher_button__link {
display: block;
background-color: var(--primary-500); background-color: var(--primary-500);
border: 1px solid var(--primary-600); border: 1px solid var(--primary-600);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -309,66 +317,62 @@ input[type="number"] {
width: 50px; width: 50px;
border-radius: 100px; border-radius: 100px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
float: left;
transition: none; transition: none;
background-image: url(../images/icons/cf_icon_flasher_white.svg); background-image: url(../images/icons/cf_icon_flasher_black.svg);
background-size: 30px; background-size: 30px;
background-position: center 10px; background-position: center 10px;
&:hover { &:hover {
background-color: var(--primary-400); background-color: var(--primary-400);
} }
} }
a.flash.disabled { a.firmware_flasher_button__link.disabled {
background-color: var(--surface-500); background-color: var(--surface-500);
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
a.flash.active { a.firmware_flasher_button__link.active {
background-color: var(--error-500); background-color: var(--error-500);
border: 1px solid var(--error-600); border: 1px solid var(--error-600);
transition: none; transition: none;
background-image: url(../images/icons/cf_icon_flasher_white.svg);
&:hover { &:hover {
background-color: var(--error-400); background-color: var(--error-400);
} }
} }
}
.connect_b { a.connection_button__link {
width: 52px; display: block;
height: 52px; background-color: var(--primary-action);
a.connect { border: 1px solid var(--primary-action-border);
background-color: var(--primary-500);
border: 1px solid var(--primary-600);
background-repeat: no-repeat; background-repeat: no-repeat;
height: 50px; height: 50px;
width: 50px; width: 50px;
border-radius: 100px; border-radius: 100px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
float: left;
transition: none; transition: none;
background-image: url(../images/icons/cf_icon_usb2_white.svg); background-image: url(../images/icons/cf_icon_usb2_black.svg);
background-size: 44px; background-size: 44px;
background-position: center 6px; background-position: center 6px;
&:hover { &:hover {
background-color: var(--primary-400); background-color: var(--primary-action-hover);
} }
} }
a.connect.disabled { a.connection_button__link.disabled {
background-color: var(--surface-500); background-color: var(--surface-500);
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
a.connect.active { a.connection_button__link.active {
background-color: var(--error-500); background-color: var(--error-500);
border: 1px solid var(--error-600); border: 1px solid var(--error-600);
transition: none; transition: none;
background-image: url(../images/icons/cf_icon_usb1_white.svg); background-image: url(../images/icons/cf_icon_usb1_black.svg);
&:hover { &:hover {
background-color: var(--error-400); background-color: var(--error-400);
} }
} }
} }
.flash_state {
.firmware_flasher_button__label {
white-space: nowrap; white-space: nowrap;
} }
.header-wrapper { .header-wrapper {
@ -2081,22 +2085,11 @@ each(range(12), {
display: block; display: block;
order: 4; order: 4;
} }
#header_btns { #header_buttons {
margin-left: auto; margin-left: auto;
order: 3; order: 3;
gap: 1rem; gap: 1rem;
} }
.firmware_b,
.connect_b {
height: fit-content !important;
width: fit-content !important;
a {
height: 2rem !important;
width: 2rem !important;
background-size: 1.5rem !important;
background-position: center !important;
}
}
.web-port-picker { .web-port-picker {
order: 5; order: 5;
} }
@ -2112,10 +2105,10 @@ each(range(12), {
order: 5; order: 5;
justify-content: space-around; justify-content: space-around;
} }
.flash_state { .firmware_flasher_button__label {
display: none !important; display: none !important;
} }
.connect_state { .connection_button__label {
display: none !important; display: none !important;
} }
#port-picker.reveal { #port-picker.reveal {

4
src/css/theme.css
View file

@ -58,6 +58,10 @@ body {
--warning-600: #e65c00; --warning-600: #e65c00;
--switcherysecond: var(--surface-400); --switcherysecond: var(--surface-400);
--primary-action: var(--success-500);
--primary-action-border: var(--success-600);
--primary-action-hover: var(--success-400);
} }
body.dark-theme { body.dark-theme {

23
src/images/icons/cf_icon_flasher_black.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
<g>
<g>
<path d="M84.7,129.5c0,3.6,2.9,6.5,6.5,6.5c3.6,0,6.5-2.9,6.5-6.5v-10.5h-13L84.7,129.5L84.7,129.5z"/>
<path d="M84.7,14.5v10.5h13V14.5c0-3.6-2.9-6.5-6.5-6.5C87.6,8,84.7,10.9,84.7,14.5z"/>
<path d="M63.5,14.5v10.5h13V14.5c0-3.6-2.9-6.5-6.5-6.5S63.5,10.9,63.5,14.5z"/>
<path d="M63.5,129.5c0,3.6,2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5v-10.5h-13V129.5z"/>
<path d="M42.3,14.5v10.5h13V14.5c0-3.6-2.9-6.5-6.5-6.5S42.3,10.9,42.3,14.5z"/>
<path d="M42.3,129.5c0,3.6,2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5v-10.5h-13V129.5z"/>
<path d="M6,93.2c0,3.6,2.9,6.5,6.5,6.5h10.5v-13H12.5C8.9,86.7,6,89.6,6,93.2z"/>
<path d="M127.5,86.7h-10.5v13h10.5c3.6,0,6.5-2.9,6.5-6.5C134,89.6,131.1,86.7,127.5,86.7z"/>
<path d="M6,72c0,3.6,2.9,6.5,6.5,6.5h10.5v-13H12.5C8.9,65.5,6,68.4,6,72z"/>
<path d="M127.5,65.5h-10.5v13h10.5c3.6,0,6.5-2.9,6.5-6.5C134,68.4,131.1,65.5,127.5,65.5z"/>
<path d="M6,50.8c0,3.6,2.9,6.5,6.5,6.5h10.5v-13H12.5C8.9,44.3,6,47.2,6,50.8z"/>
<path d="M127.5,44.3h-10.5v13h10.5c3.6,0,6.5-2.9,6.5-6.5S131.1,44.3,127.5,44.3z"/>
<path d="M29.3,105.9c0,3.8,3,6.8,6.8,6.8h67.8c3.8,0,6.8-3,6.8-6.8V38.1c0-3.8-3-6.8-6.8-6.8H36.1
c-3.8,0-6.8,3-6.8,6.8V105.9z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
src/images/icons/cf_icon_usb1_black.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
<g>
<g>
<path d="M59.1,20.5h9v6.8h-9V20.5z M72.5,27.3h9v-6.8h-9V27.3z M89.4,40h9.2v39.5h-0.1c0,0.7,0.1,1.5,0.1,2.3
c0,18.3-12.5,28.6-27.9,28.6s-27.8-10.4-27.8-28.6c0-0.7,0.1-1.5,0.1-2.3h-0.1V40H52V12.1h37.4V40z M56.5,40h28.5V16.5H56.5V40z
M77.5,74l9.8-9.8c0.7-0.7,0.7-1.8,0-2.5l-3.4-3.4c-0.7-0.7-1.8-0.7-2.5,0l-9.8,9.8l-9.9-9.9c-0.7-0.7-1.8-0.7-2.5,0l-3.4,3.4
c-0.7,0.7-0.7,1.8,0,2.5l9.8,9.9l-9.8,9.8c-0.7,0.7-0.7,1.8,0,2.5l3.4,3.4c0.7,0.7,1.8,0.7,2.5,0l9.8-9.8l9.8,9.8
c0.7,0.7,1.8,0.7,2.5,0l3.4-3.4c0.7-0.7,0.7-1.8,0-2.5L77.5,74z"/>
</g>
<rect x="66.2" y="104.9" width="9" height="36.8"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 970 B

13
src/images/icons/cf_icon_usb2_black.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
<g>
<g>
<path d="M59.1,21.5h9v6.8h-9V21.5z M72.5,28.3h9v-6.8h-9V28.3z M89.4,41h9.2v39.5h-0.1c0,0.7,0.1,1.5,0.1,2.3
c0,18.3-12.5,28.6-27.9,28.6s-27.8-10.4-27.8-28.6c0-0.7,0.1-1.5,0.1-2.3h-0.1V41H52V13.1h37.4V41z M56.5,41h28.5V17.5H56.5V41z"
/>
</g>
<rect x="66.2" y="105.9" width="9" height="36.8"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 671 B

18
src/index.html
View file

@ -91,18 +91,14 @@
</div> </div>
</div> </div>
</div> </div>
<div id="header_btns"> <div id="header_buttons">
<div class="open_firmware_flasher" id="flashbutton"> <div class="firmware_flasher_button">
<div class="firmware_b"> <a class="firmware_flasher_button__link disabled" href="#"></a>
<a class="flash disabled" href="#"></a> <div class="firmware_flasher_button__label" i18n="flashTab"></div>
</div>
<div class="flash_state" i18n="flashTab"></div>
</div> </div>
<div class="connect_controls" id="connectbutton"> <div class="connection_button">
<div class="connect_b"> <a class="connection_button__link disabled" href="#"></a>
<a class="connect disabled" href="#"></a> <div class="connection_button__label" i18n="connect"></div>
</div>
<div class="connect_state" i18n="connect"></div>
</div> </div>
</div> </div>
<div id="reveal_btn"> <div id="reveal_btn">

4
src/js/Analytics.js
View file

@ -50,8 +50,8 @@ function setupAnalytics(result) {
tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "AppStart", { sessionControl: "start" }); tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "AppStart", { sessionControl: "start" });
$(".connect_b a.connect").removeClass("disabled"); $("a.connection_button__link").removeClass("disabled");
$(".firmware_b a.flash").removeClass("disabled"); $("a.firmware_flasher_button__link").removeClass("disabled");
} }
export function checkSetupAnalytics(callback) { export function checkSetupAnalytics(callback) {

26
src/js/main.js
View file

@ -102,7 +102,7 @@ function startProcess() {
gui_log(i18n.getMessage("infoVersionOs", { operatingSystem: GUI.operating_system })); gui_log(i18n.getMessage("infoVersionOs", { operatingSystem: GUI.operating_system }));
gui_log(i18n.getMessage("infoVersionConfigurator", { configuratorVersion: CONFIGURATOR.getDisplayVersion() })); gui_log(i18n.getMessage("infoVersionConfigurator", { configuratorVersion: CONFIGURATOR.getDisplayVersion() }));
$(".connect_b a.connect").removeClass("disabled"); $("a.connection_button__link").removeClass("disabled");
// with Vue reactive system we don't need to call these, // with Vue reactive system we don't need to call these,
// our view is reactive to model changes // our view is reactive to model changes
// updateTopBarVersion(); // updateTopBarVersion();
@ -131,15 +131,15 @@ function startProcess() {
} }
}); });
$("div.open_firmware_flasher a.flash").on("click", function () { $("a.firmware_flasher_button__link").on("click", function () {
if ($("div#flashbutton a.flash_state").hasClass("active") && $("div#flashbutton a.flash").hasClass("active")) { if ($("a.firmware_flasher_button__label").hasClass("active") && $("a.firmware_flasher_button__link").hasClass("active")) {
$("div#flashbutton a.flash_state").removeClass("active"); $("a.firmware_flasher_button__label").removeClass("active");
$("div#flashbutton a.flash").removeClass("active"); $("a.firmware_flasher_button__link").removeClass("active");
$("#tabs ul.mode-disconnected .tab_landing a").click(); $("#tabs ul.mode-disconnected .tab_landing a").click();
} else { } else {
$("#tabs ul.mode-disconnected .tab_firmware_flasher a").click(); $("#tabs ul.mode-disconnected .tab_firmware_flasher a").click();
$("div#flashbutton a.flash_state").addClass("active"); $("a.firmware_flasher_button__label").addClass("active");
$("div#flashbutton a.flash").addClass("active"); $("a.firmware_flasher_button__link").addClass("active");
} }
}); });
@ -168,10 +168,10 @@ function startProcess() {
if (GUI.allowedTabs.indexOf(tab) < 0 && tab === "firmware_flasher") { if (GUI.allowedTabs.indexOf(tab) < 0 && tab === "firmware_flasher") {
if (GUI.connected_to || GUI.connecting_to) { if (GUI.connected_to || GUI.connecting_to) {
$("a.connect").click(); $("a.connection_button__link").click();
} }
// this line is required but it triggers opening the firmware flasher tab again // this line is required but it triggers opening the firmware flasher tab again
$("div.open_firmware_flasher a.flash").click(); $("a.firmware_flasher_button__link").click();
} else if (GUI.allowedTabs.indexOf(tab) < 0) { } else if (GUI.allowedTabs.indexOf(tab) < 0) {
gui_log(i18n.getMessage("tabSwitchUpgradeRequired", [tabName])); gui_log(i18n.getMessage("tabSwitchUpgradeRequired", [tabName]));
return; return;
@ -182,11 +182,11 @@ function startProcess() {
GUI.tab_switch_cleanup(function () { GUI.tab_switch_cleanup(function () {
// disable active firmware flasher if it was active // disable active firmware flasher if it was active
if ( if (
$("div#flashbutton a.flash_state").hasClass("active") && $("a.firmware_flasher_button__label").hasClass("active") &&
$("div#flashbutton a.flash").hasClass("active") $("a.firmware_flasher_button__link").hasClass("active")
) { ) {
$("div#flashbutton a.flash_state").removeClass("active"); $("a.firmware_flasher_button__label").removeClass("active");
$("div#flashbutton a.flash").removeClass("active"); $("a.firmware_flasher_button__link").removeClass("active");
} }
// disable previously active tab highlight // disable previously active tab highlight
$("li", ui_tabs).removeClass("active"); $("li", ui_tabs).removeClass("active");

24
src/js/serial_backend.js
View file

@ -54,7 +54,7 @@ function disconnectHandler(event) {
} }
export function initializeSerialBackend() { export function initializeSerialBackend() {
$("div.connect_controls a.connect").on("click", connectDisconnect); $("a.connection_button__link").on("click", connectDisconnect);
EventBus.$on("port-handler:auto-select-serial-device", function (device) { EventBus.$on("port-handler:auto-select-serial-device", function (device) {
if ( if (
@ -116,7 +116,7 @@ function connectDisconnect() {
// lock port select & baud while we are connecting / connected // lock port select & baud while we are connecting / connected
PortHandler.portPickerDisabled = true; PortHandler.portPickerDisabled = true;
$("div.connect_controls div.connect_state").text(i18n.getMessage("connecting")); $("div.connection_button__label").text(i18n.getMessage("connecting"));
CONFIGURATOR.virtualMode = selectedPort === "virtual"; CONFIGURATOR.virtualMode = selectedPort === "virtual";
CONFIGURATOR.bluetoothMode = selectedPort.startsWith("bluetooth"); CONFIGURATOR.bluetoothMode = selectedPort.startsWith("bluetooth");
@ -202,8 +202,8 @@ function finishClose(finishedCallback) {
PortHandler.portPickerDisabled = false; PortHandler.portPickerDisabled = false;
// reset connect / disconnect button // reset connect / disconnect button
$("div.connect_controls a.connect").removeClass("active"); $("a.connection_button__link").removeClass("active");
$("div.connect_controls div.connect_state").text(i18n.getMessage("connect")); $("div.connection_button__label").text(i18n.getMessage("connect"));
// reset active sensor indicators // reset active sensor indicators
sensor_status(); sensor_status();
@ -238,8 +238,8 @@ function setConnectionTimeout() {
function resetConnection() { function resetConnection() {
// reset connect / disconnect button // reset connect / disconnect button
$("div#connectbutton div.connect_state").text(i18n.getMessage("connect")); $("div.connection_button__label").text(i18n.getMessage("connect"));
$("div#connectbutton a.connect").removeClass("active"); $("a.connection_button__link").removeClass("active");
CONFIGURATOR.connectionValid = false; CONFIGURATOR.connectionValid = false;
CONFIGURATOR.cliValid = false; CONFIGURATOR.cliValid = false;
@ -634,15 +634,15 @@ function connectCli() {
} }
function onConnect() { function onConnect() {
if ($("div#flashbutton a.flash_state").hasClass("active") || $("div#flashbutton a.flash").hasClass("active")) { if ($("a.firmware_flasher_button__label").hasClass("active") || $("a.firmware_flasher_button__link").hasClass("active")) {
$("div#flashbutton a.flash_state").removeClass("active"); $("a.firmware_flasher_button__label").removeClass("active");
$("div#flashbutton a.flash").removeClass("active"); $("a.firmware_flasher_button__link").removeClass("active");
} }
GUI.timeout_remove("connecting"); // kill connecting timer GUI.timeout_remove("connecting"); // kill connecting timer
$("div#connectbutton div.connect_state").text(i18n.getMessage("disconnect")).addClass("active"); $("div.connection_button__label").text(i18n.getMessage("disconnect")).addClass("active");
$("div#connectbutton a.connect").addClass("active"); $("a.connection_button__link").addClass("active");
$("#tabs ul.mode-disconnected").hide(); $("#tabs ul.mode-disconnected").hide();
$("#tabs ul.mode-connected-cli").show(); $("#tabs ul.mode-connected-cli").show();
@ -815,7 +815,7 @@ export function reinitializeConnection(callback) {
// In virtual mode reconnect when autoconnect is enabled // In virtual mode reconnect when autoconnect is enabled
if (CONFIGURATOR.virtualMode && PortHandler.portPicker.autoConnect) { if (CONFIGURATOR.virtualMode && PortHandler.portPicker.autoConnect) {
return setTimeout(function () { return setTimeout(function () {
$("a.connect").trigger("click"); $("a.connection_button__link").trigger("click");
}, 500); }, 500);
} }

2
src/tabs/presets/presets.js
View file

@ -136,7 +136,7 @@ presets.disconnectCliMakeSure = function () {
GUI.timeout_add( GUI.timeout_add(
"disconnect", "disconnect",
function () { function () {
$("div.connect_controls a.connect").trigger("click"); $("a.connection_button__link").trigger("click");
}, },
500, 500,
); );