Skip to content

Commit

Permalink
Style: UI Refresh (#3956)
Browse files Browse the repository at this point in the history 
* Style: Use new color system

* Fix: sonarcloud issues, remove testing parts

* Fix: Remove double variables

* Style: First POC of UI refresh - Setup tab

* Style Fix: Prevent tab-specific breakpoints from escaping

* Style: Remove calc() for main layout

* Fix: Break into mobile UI along CSS, update mobile tabs

* Style: Refresh Ports tab

* Style: Refresh Configuration tab

* Style: Reposition StatusBar, add a bit of spacing

* Style: Remove text shadows

* Style: Fix overlapping select styles

* Fix: Remove import for deleted files, fixes builds

* Style: Refresh Power & Battery tab

* Style: Prevent OSD tab styles from escaping

* Style: Refresh Failsafe tab

* Style: Refresh Modes tab

* Style: Add back td height

* Style: Refresh Adjustments tab

* Style: Refresh Motors tab

* Style: Catch up main.less to various changes

* Style: Refresh VTX tab

* Style: Refresh OSD tab

* Style: Refresh Receiver tab

* Chore: Clean up SonarCloud issues

* Chore: Clean up more SonarCloud issues

* Style: Refresh Blackbox tab

* Style: Refresh headerbar

* Style: Refresh Options tab

* Style: Refresh Firmware Flasher tab

* Style: Adjust detect feature, add breakpoint

* Fix: Use updated i18n in button

* Style: Refresh MSP Radio Emulator

* Style: Fix Radio Emulator breakpoint

* Style: Fix Radio Emulator layout

* Style: Refresh headerbar

* Style: Refresh Sensors tab

* Style: More consistent select elements

* Style: Refresh GPS tab

* Style: Fix motors tab layout

* Style: Various fixes, align more toolbars

* Style: Refresh CLI tab

* Style: Clean up VTX tab styling

* Style: Fix sensor status color
  • Loading branch information
@VitroidFPV
VitroidFPV authored Jun 19, 2024
1 parent 913d170 commit eecc858
Show file tree
Hide file tree
Showing 84 changed files with 3,488 additions and 6,309 deletions.
8 changes: 4 additions & 4 deletions locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3427,7 +3427,7 @@
"message": "Select build type to see available boards."
},
"firmwareFlasherOnlineSelectBoardDescription": {
"message": "Select or auto-detect your board to see available online firmware releases - Select the correct firmware appropriate for your board."
"message": "Select or detect your board to see available online firmware releases - Select the correct firmware appropriate for your board."
},
"firmwareFlasherOnlineSelectBoardHint": {
"message": "Betaflight configurator supports flashing of Unified Targets with the respective board specific configurations in one step.<br><br>The concept of Unified Targets means that the same firmware .hex file can be used for all boards using the same MCU.<br><br>Betaflight 4.4 introduces <strong>Cloud Build</strong><br><br>With <strong>Cloud Build</strong> we need to define hardware options present on your build.<br><br>To make the different boards work with the same firmware, a specific configuration file is deployed alongside the firmware when a Unified Target is flashed.<br><br>With Local build you can load a unified target configuration file or chose a board before loading a firmware .hex file.<br><br>If you encounter problems using the firmware, please consider joining Discord or open an <a href=\"https://github.com/betaflight/betaflight/issues\" target=\"_blank\" rel=\"noopener noreferrer\">issue</a>."
Expand All @@ -3442,7 +3442,7 @@
"message": "Flash on connect"
},
"firmwareFlasherFlashOnConnectDescription": {
"message": "Attempt to flash the board automatically (triggered by newly detected serial port).<br /><br /><span class=\"message-negative\">WARNING</span>: this function disables the auto-detect and backup feature."
"message": "Attempt to flash the board automatically (triggered by newly detected serial port).<br /><br /><span class=\"message-negative\">WARNING</span>: this function disables the detect and backup features."
},
"firmwareFlasherFullChipErase": {
"message": "Full chip erase"
Expand Down Expand Up @@ -3620,10 +3620,10 @@
"message": "Continue"
},
"firmwareFlasherDetectBoardButton": {
"message": "Auto-detect"
"message": "Detect"
},
"firmwareFlasherDetectBoardDescriptionHint": {
"message": "Auto-detect only works when not in DFU mode and when MSP communication is working. Sometimes you have to retry a few times or even reconnect USB. Try connecting as normal first as you could have forgotten to apply custom defaults. Please reboot after flashing - replug your USB."
"message": "Detect only works when not in DFU mode and when MSP communication is working. Sometimes you have to retry a few times or even reconnect USB. Try connecting as normal first as you could have forgotten to apply custom defaults. Please reboot after flashing - replug your USB."
},
"firmwareFlasherDetectBoardQuery": {
"message": "Query board information to preselect right firmware"
Expand Down
21 changes: 14 additions & 7 deletions src/components/betaflight-logo/BetaflightLogo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,23 @@ export default {
.logo {
height: 70px;
width: 240px;
background-image: url(../../images/light-wide-2.svg);
background-image: url(../../images/dark-wide-2.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
position: relative;
margin-top: -25px;
}
.dark-theme .logo {
background-image: url(../../images/light-wide-2.svg);
}
.logo_text {
position: absolute;
left: 80px;
top: 49px;
color: #949494;
opacity: 0.5;
color: var(--text);
font-size: 10px;
min-width: 210px;
display: flex;
flex-direction: column;
}
Expand All @@ -70,17 +71,20 @@ export default {
.logo {
height: 24px;
width: 150px;
background-image: url(../../images/light-wide-2-compact.svg);
background-image: url(../../images/dark-wide-2-compact.svg);
background-position: left center;
order: 2;
margin-top: 0;
}
.dark-theme .logo {
background-image: url(../../images/light-wide-2-compact.svg);
}
.logo_text {
display: none !important;
}
.tab_container .logo {
display: block;
background-image: url(../../images/light-wide-2.svg);
background-image: url(../../images/dark-wide-2.svg);
background-repeat: no-repeat;
background-position: center 20px;
background-position-x: 12px;
Expand All @@ -91,6 +95,9 @@ export default {
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.dark-theme .tab_container .logo {
background-image: url(../../images/light-wide-2.svg);
}
.tab_container .logo .logo_text {
display: flex !important;
left: 82px;
Expand Down
4 changes: 1 addition & 3 deletions src/components/data-flash/DataFlash.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,10 @@ export default {
rgba(0, 0, 0, 0.55)
);
padding-top: 5px;
text-shadow: 0 1px #000000;
}
.noflash_global {
color: #868686;
text-align: center;
text-shadow: 0 1px #000000;
margin-top: 2px;
}
Expand All @@ -105,7 +103,7 @@ export default {
border-radius: 2px;
width: 25%;
display: block;
background-color: var(--accent);
background-color: var(--primary-500);
}
.dataflash-contents_global div span {
position: absolute;
Expand Down
193 changes: 18 additions & 175 deletions src/components/port-picker/FirmwareVirtualOption.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<template>
<div
id="firmware-virtual-option"
:style="{ display: isVirtual ? 'block' : 'none' }"
>
<div class="dropdown dropdown-dark">
<select
id="firmware-version-dropdown"
:value="value"
class="dropdown-select"
:title="$t('virtualMSPVersion')"
@input="$emit('input', $event.target.value)"
>
<option
v-for="(version, index) in firmwareVersions"
Expand All @@ -24,179 +23,23 @@

<script>
export default {
props: {
value: {
type: String,
default: "1.46.0",
props: {
isVirtual: {
type: Boolean,
default: true,
},
},
data() {
return {
firmwareVersions: [
{ value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
{ value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
{ value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
{ value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
{ value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
{ value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
],
};
},
},
data() {
return {
firmwareVersions: [
{ value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
{ value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
{ value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
],
};
},
};
</script>

<style scoped>
#firmware-virtual-option {
height: 76px;
width: 180px;
margin-right: 15px;
margin-top: 0px;
display: block;
}
.dropdown {
display: inline-block;
position: relative;
overflow: hidden;
height: 20px;
background: #fff;
background-image: -webkit-linear-gradient(
top,
transparent,
rgba(0, 0, 0, 0.06)
);
background-image: -moz-linear-gradient(
top,
transparent,
rgba(0, 0, 0, 0.06)
);
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: linear-gradient(
to bottom,
transparent,
rgba(0, 0, 0, 0.06)
);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
width: 99%;
margin-bottom: 7px;
border: 1px solid;
border-color: #ccc #ccc #ccc;
border-radius: 3px;
}
.dropdown:before,
.dropdown:after {
content: "";
position: absolute;
z-index: 2;
top: 7px;
right: 7px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
margin-top: -2px;
}
.dropdown:after {
margin-top: 5px;
border-top-style: solid;
border-bottom: none;
}
.dropdown-select {
position: relative;
overflow: visible;
width: 100%;
margin-top: 0px;
padding: 1px 8px 6px 5px;
height: 23px;
line-height: 20px;
font-size: 12px;
color: #62717a;
text-shadow: 0 1px white;
/* Fallback for IE 8 */
background: #f2f2f2;
/* "transparent" doesn't work with Opera */
background: rgba(0, 0, 0, 0) !important;
border: 0;
border-radius: 0;
-webkit-appearance: none;
appearance: "none";
}
.dropdown-select:focus {
z-index: 3;
width: 90%;
color: #4fa619;
outline: 0px solid #49aff2;
outline: 0px solid -webkit-focus-ring-color;
outline-offset: 5px;
height: 25px;
}
.dropdown-select > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
background: #f2f2f2;
border-radius: 3px;
cursor: pointer;
}
.dropdown-dark {
background: #636363; /* NEW2 */
background: #3e403f; /* NEW */
border-color: #111 #0a0a0a black;
background-image: -webkit-linear-gradient(
top,
transparent,
rgba(0, 0, 0, 0.4)
);
background-image: -moz-linear-gradient(
top,
transparent,
rgba(0, 0, 0, 0.4)
);
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
background-image: linear-gradient(
to bottom,
transparent,
rgba(0, 0, 0, 0.4)
);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
0 1px 1px rgba(0, 0, 0, 0.2);
color: #a6a6a6;
text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
}
.dropdown-dark:before {
border-bottom-color: #aaa;
}
.dropdown-dark:after {
border-top-color: #aaa;
}
.dropdown-dark .dropdown-select {
color: #a6a6a6;
text-shadow: 0 1px black;
width: calc(100% - 10px);
/* Fallback for IE 8 */
background: #444;
}
.dropdown-dark .dropdown-select:focus {
color: #fff;
}
.dropdown-dark .dropdown-select > option {
background: #56ab1a;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}
</style>
Loading

0 comments on commit eecc858

Please sign in to comment.