diff --git a/src/css/main.less b/src/css/main.less index c19c56bb..866c76e4 100644 --- a/src/css/main.less +++ b/src/css/main.less @@ -43,12 +43,21 @@ a.disabled { } .background_paper { 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(var(--surface-300) 1px, transparent 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-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; + background-size: + 75px 75px, + 75px 75px, + 15px 15px, + 15px 15px; + background-position: + -2px -2px, + -2px -2px, + -1px -1px, + -1px -1px; } .standard_input { padding-left: 3px; @@ -287,21 +296,20 @@ input[type="number"] { width: fit-content; display: none; } -#header_btns { - display: flex; - align-items: center; - gap: 2rem; -} -.open_firmware_flasher, -.connect_controls { +.firmware_flasher_button, +.connection_button { display: flex; flex-direction: column; align-items: center; } -.firmware_b { - width: 52px; - height: 52px; - a.flash { + +#header_buttons { + display: flex; + align-items: center; + gap: 2rem; + + a.firmware_flasher_button__link { + display: block; background-color: var(--primary-500); border: 1px solid var(--primary-600); background-repeat: no-repeat; @@ -309,66 +317,62 @@ input[type="number"] { width: 50px; border-radius: 100px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); - float: left; 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-position: center 10px; &:hover { background-color: var(--primary-400); } } - a.flash.disabled { + a.firmware_flasher_button__link.disabled { background-color: var(--surface-500); pointer-events: none; cursor: default; } - a.flash.active { + a.firmware_flasher_button__link.active { background-color: var(--error-500); border: 1px solid var(--error-600); transition: none; - background-image: url(../images/icons/cf_icon_flasher_white.svg); &:hover { background-color: var(--error-400); } } -} -.connect_b { - width: 52px; - height: 52px; - a.connect { - background-color: var(--primary-500); - border: 1px solid var(--primary-600); + + a.connection_button__link { + display: block; + background-color: var(--primary-action); + border: 1px solid var(--primary-action-border); background-repeat: no-repeat; height: 50px; width: 50px; border-radius: 100px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); - float: left; 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-position: center 6px; &: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); pointer-events: none; cursor: default; } - a.connect.active { + a.connection_button__link.active { background-color: var(--error-500); border: 1px solid var(--error-600); transition: none; - background-image: url(../images/icons/cf_icon_usb1_white.svg); + background-image: url(../images/icons/cf_icon_usb1_black.svg); &:hover { background-color: var(--error-400); } } } -.flash_state { + +.firmware_flasher_button__label { white-space: nowrap; } .header-wrapper { @@ -2081,22 +2085,11 @@ each(range(12), { display: block; order: 4; } - #header_btns { + #header_buttons { margin-left: auto; order: 3; 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 { order: 5; } @@ -2112,10 +2105,10 @@ each(range(12), { order: 5; justify-content: space-around; } - .flash_state { + .firmware_flasher_button__label { display: none !important; } - .connect_state { + .connection_button__label { display: none !important; } #port-picker.reveal { diff --git a/src/css/theme.css b/src/css/theme.css index 61273d8a..d0877004 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -58,6 +58,10 @@ body { --warning-600: #e65c00; --switcherysecond: var(--surface-400); + + --primary-action: var(--success-500); + --primary-action-border: var(--success-600); + --primary-action-hover: var(--success-400); } body.dark-theme { diff --git a/src/images/icons/cf_icon_flasher_black.svg b/src/images/icons/cf_icon_flasher_black.svg new file mode 100644 index 00000000..a646bb9d --- /dev/null +++ b/src/images/icons/cf_icon_flasher_black.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/cf_icon_usb1_black.svg b/src/images/icons/cf_icon_usb1_black.svg new file mode 100644 index 00000000..f8e5cccc --- /dev/null +++ b/src/images/icons/cf_icon_usb1_black.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/src/images/icons/cf_icon_usb2_black.svg b/src/images/icons/cf_icon_usb2_black.svg new file mode 100644 index 00000000..7e165a4e --- /dev/null +++ b/src/images/icons/cf_icon_usb2_black.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/src/index.html b/src/index.html index b22cf214..0705d5ed 100644 --- a/src/index.html +++ b/src/index.html @@ -91,18 +91,14 @@ -
-
-
- -
-
+
+
+ +
-
-
- -
-
+
+ +
diff --git a/src/js/Analytics.js b/src/js/Analytics.js index 034bc028..129c7035 100644 --- a/src/js/Analytics.js +++ b/src/js/Analytics.js @@ -50,8 +50,8 @@ function setupAnalytics(result) { tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "AppStart", { sessionControl: "start" }); - $(".connect_b a.connect").removeClass("disabled"); - $(".firmware_b a.flash").removeClass("disabled"); + $("a.connection_button__link").removeClass("disabled"); + $("a.firmware_flasher_button__link").removeClass("disabled"); } export function checkSetupAnalytics(callback) { diff --git a/src/js/main.js b/src/js/main.js index 069b2f7c..e0423f9a 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -102,7 +102,7 @@ function startProcess() { gui_log(i18n.getMessage("infoVersionOs", { operatingSystem: GUI.operating_system })); 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, // our view is reactive to model changes // updateTopBarVersion(); @@ -131,15 +131,15 @@ function startProcess() { } }); - $("div.open_firmware_flasher a.flash").on("click", function () { - if ($("div#flashbutton a.flash_state").hasClass("active") && $("div#flashbutton a.flash").hasClass("active")) { - $("div#flashbutton a.flash_state").removeClass("active"); - $("div#flashbutton a.flash").removeClass("active"); + $("a.firmware_flasher_button__link").on("click", function () { + if ($("a.firmware_flasher_button__label").hasClass("active") && $("a.firmware_flasher_button__link").hasClass("active")) { + $("a.firmware_flasher_button__label").removeClass("active"); + $("a.firmware_flasher_button__link").removeClass("active"); $("#tabs ul.mode-disconnected .tab_landing a").click(); } else { $("#tabs ul.mode-disconnected .tab_firmware_flasher a").click(); - $("div#flashbutton a.flash_state").addClass("active"); - $("div#flashbutton a.flash").addClass("active"); + $("a.firmware_flasher_button__label").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.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 - $("div.open_firmware_flasher a.flash").click(); + $("a.firmware_flasher_button__link").click(); } else if (GUI.allowedTabs.indexOf(tab) < 0) { gui_log(i18n.getMessage("tabSwitchUpgradeRequired", [tabName])); return; @@ -182,11 +182,11 @@ function startProcess() { GUI.tab_switch_cleanup(function () { // disable active firmware flasher if it was active if ( - $("div#flashbutton a.flash_state").hasClass("active") && - $("div#flashbutton a.flash").hasClass("active") + $("a.firmware_flasher_button__label").hasClass("active") && + $("a.firmware_flasher_button__link").hasClass("active") ) { - $("div#flashbutton a.flash_state").removeClass("active"); - $("div#flashbutton a.flash").removeClass("active"); + $("a.firmware_flasher_button__label").removeClass("active"); + $("a.firmware_flasher_button__link").removeClass("active"); } // disable previously active tab highlight $("li", ui_tabs).removeClass("active"); diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js index 5af43879..0d21f64a 100644 --- a/src/js/serial_backend.js +++ b/src/js/serial_backend.js @@ -54,7 +54,7 @@ function disconnectHandler(event) { } 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) { if ( @@ -116,7 +116,7 @@ function connectDisconnect() { // lock port select & baud while we are connecting / connected 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.bluetoothMode = selectedPort.startsWith("bluetooth"); @@ -202,8 +202,8 @@ function finishClose(finishedCallback) { PortHandler.portPickerDisabled = false; // reset connect / disconnect button - $("div.connect_controls a.connect").removeClass("active"); - $("div.connect_controls div.connect_state").text(i18n.getMessage("connect")); + $("a.connection_button__link").removeClass("active"); + $("div.connection_button__label").text(i18n.getMessage("connect")); // reset active sensor indicators sensor_status(); @@ -238,8 +238,8 @@ function setConnectionTimeout() { function resetConnection() { // reset connect / disconnect button - $("div#connectbutton div.connect_state").text(i18n.getMessage("connect")); - $("div#connectbutton a.connect").removeClass("active"); + $("div.connection_button__label").text(i18n.getMessage("connect")); + $("a.connection_button__link").removeClass("active"); CONFIGURATOR.connectionValid = false; CONFIGURATOR.cliValid = false; @@ -634,15 +634,15 @@ function connectCli() { } function onConnect() { - if ($("div#flashbutton a.flash_state").hasClass("active") || $("div#flashbutton a.flash").hasClass("active")) { - $("div#flashbutton a.flash_state").removeClass("active"); - $("div#flashbutton a.flash").removeClass("active"); + if ($("a.firmware_flasher_button__label").hasClass("active") || $("a.firmware_flasher_button__link").hasClass("active")) { + $("a.firmware_flasher_button__label").removeClass("active"); + $("a.firmware_flasher_button__link").removeClass("active"); } GUI.timeout_remove("connecting"); // kill connecting timer - $("div#connectbutton div.connect_state").text(i18n.getMessage("disconnect")).addClass("active"); - $("div#connectbutton a.connect").addClass("active"); + $("div.connection_button__label").text(i18n.getMessage("disconnect")).addClass("active"); + $("a.connection_button__link").addClass("active"); $("#tabs ul.mode-disconnected").hide(); $("#tabs ul.mode-connected-cli").show(); @@ -815,7 +815,7 @@ export function reinitializeConnection(callback) { // In virtual mode reconnect when autoconnect is enabled if (CONFIGURATOR.virtualMode && PortHandler.portPicker.autoConnect) { return setTimeout(function () { - $("a.connect").trigger("click"); + $("a.connection_button__link").trigger("click"); }, 500); } diff --git a/src/tabs/presets/presets.js b/src/tabs/presets/presets.js index 8502b997..b9833b7b 100644 --- a/src/tabs/presets/presets.js +++ b/src/tabs/presets/presets.js @@ -136,7 +136,7 @@ presets.disconnectCliMakeSure = function () { GUI.timeout_add( "disconnect", function () { - $("div.connect_controls a.connect").trigger("click"); + $("a.connection_button__link").trigger("click"); }, 500, );