Skip to content

Commit 486297e

Browse files
VitroidFPVVitroidFPV
authored
Refactor: Update StatusBar implementation, bring it back to mobile (betaflight#5056)
1 parent ec877c3 commit 486297e

9 files changed

Lines changed: 266 additions & 420 deletions

File tree

‎locales/en/messages.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -748,7 +748,7 @@
748748
"message": "Target"
749749
},
750750
"versionLabelFirmware": {
751-
"message": "Firmware"
751+
"message": "Firmware Version"
752752
},
753753
"versionLabelConfigurator": {
754754
"message": "App Version"

‎src/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<UApp>
2+
<UApp :tooltip="{ delayDuration: 100 }">
33
<div class="app-wrapper">
44
<div id="background" v-show="isRevealed" @click="isRevealed = false"></div>
55
<div id="side_menu_swipe"></div>
@@ -47,6 +47,8 @@
4747
:cycle-time="FC.CONFIG.cycleTime"
4848
:cpu-load="FC.CONFIG.cpuload"
4949
:configurator-version="CONFIGURATOR.getDisplayVersion()"
50+
:firmware-version="FC.CONFIG.flightControllerVersion"
51+
:firmware-target="FC.CONFIG.hardwareName"
5052
></status-bar>
5153
<div id="cache">
5254
<div class="data-loading">

‎src/components/data-flash/DataFlash.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,23 @@
1010
class="dataflash-icon"
1111
:title="$t('sensorDataFlashFreeSpace')"
1212
/>
13-
<div class="dataflash-contents_global">
14-
<div
15-
class="dataflash-free_global"
16-
:class="usageClass"
17-
:style="{
18-
width: indicatorWidth,
19-
}"
20-
>
21-
<span v-if="!compact">
22-
{{ $t("sensorDataFlashFreeSpace") }}
23-
{{ freeSpace }}
24-
</span>
13+
<UTooltip :text="$t('sensorDataFlashFreeSpace')">
14+
<div class="dataflash-contents_global">
15+
<div
16+
class="dataflash-free_global"
17+
:class="usageClass"
18+
:style="{
19+
width: indicatorWidth,
20+
}"
21+
>
22+
<span v-if="!compact">
23+
{{ $t("sensorDataFlashFreeSpace") }}
24+
{{ freeSpace }}
25+
</span>
26+
</div>
2527
</div>
26-
</div>
27-
<span v-if="compact" class="dataflash-free-label">{{ freeSpace }}</span>
28+
<span v-if="compact" class="dataflash-free-label">{{ freeSpace }}</span>
29+
</UTooltip>
2830
</template>
2931
</div>
3032
</template>

‎src/components/quad-status/BatteryIcon.vue‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="battery-icon" :class="{ 'battery-icon--compact': compact }">
2+
<div class="battery-icon shrink-0" :class="{ 'battery-icon--compact': compact }">
33
<div class="quad-status-contents">
44
<div class="battery-status" :class="classes" :style="{ width: batteryWidth + '%' }" />
55
</div>
@@ -97,23 +97,15 @@ export default defineComponent({
9797
9898
<style scoped>
9999
.quad-status-contents {
100-
display: inline-block;
101-
margin-top: 10px;
102-
margin-left: 14px;
100+
position: absolute;
101+
top: 10px;
102+
left: 14px;
103103
height: 10px;
104104
width: 31px;
105105
}
106106
107-
.quad-status-contents progress::-webkit-progress-bar {
108-
height: 12px;
109-
background-color: var(--surface-300);
110-
}
111-
112-
.quad-status-contents progress::-webkit-progress-value {
113-
background-color: #bcf;
114-
}
115-
116107
.battery-icon {
108+
position: relative;
117109
background-image: url(../../images/icons/cf_icon_bat_grey.svg);
118110
background-size: contain;
119111
background-position: center;
@@ -159,8 +151,8 @@ export default defineComponent({
159151
}
160152
161153
.battery-icon--compact .quad-status-contents {
162-
margin-top: 8px;
163-
margin-left: 10px;
154+
top: 8px;
155+
left: 11px;
164156
width: 26px;
165157
height: 8px;
166158
}

‎src/components/quad-status/BottomStatusIcons.vue‎

Lines changed: 11 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
<template>
22
<div class="bottomStatusIcons" :class="{ 'bottomStatusIcons--compact': compact }">
33
<UTooltip :text="$t('mainHelpArmed')">
4-
<div class="armedicon" :class="{ active: setActiveArmed }" />
4+
<UIcon
5+
name="i-lucide-triangle-alert"
6+
class="size-4"
7+
:class="setActiveArmed ? 'text-primary' : 'text-muted'"
8+
/>
59
</UTooltip>
610
<UTooltip :text="$t('mainHelpFailsafe')">
7-
<div class="failsafeicon" :class="{ active: setFailsafeActive }" />
11+
<UIcon
12+
name="i-lucide-shield-alert"
13+
class="size-4"
14+
:class="setFailsafeActive ? 'text-primary' : 'text-muted'"
15+
/>
816
</UTooltip>
917
<UTooltip :text="$t('mainHelpLink')">
10-
<div class="linkicon" :class="{ active: setActiveLink }" />
18+
<UIcon name="i-lucide-link" class="size-4" :class="setActiveLink ? 'text-primary' : 'text-muted'" />
1119
</UTooltip>
1220
</div>
1321
</template>
@@ -51,66 +59,6 @@ const setActiveLink = computed(() => performance.now() - props.lastReceivedTimes
5159
border-bottom-left-radius: 5px;
5260
border-bottom-right-radius: 5px;
5361
}
54-
button {
55-
padding: 0.5em 0.75em;
56-
border-radius: 4px;
57-
background-color: #ccc;
58-
color: #666;
59-
border: 1px solid var(--surface-500);
60-
font-weight: 600;
61-
font-size: 10pt;
62-
cursor: pointer;
63-
}
64-
button.active {
65-
background-color: var(--primary-500);
66-
border: 1px solid #dba718;
67-
color: #000;
68-
}
69-
.armedicon {
70-
margin-left: 8px;
71-
margin-right: 8px;
72-
margin-top: 6px;
73-
height: 18px;
74-
width: 18px;
75-
opacity: 0.8;
76-
background-size: contain;
77-
background-position: center;
78-
transition: none;
79-
background-image: url(../../images/icons/cf_icon_armed_grey.svg);
80-
}
81-
.failsafeicon {
82-
margin-left: 8px;
83-
margin-right: 8px;
84-
margin-top: 6px;
85-
height: 18px;
86-
width: 18px;
87-
opacity: 0.8;
88-
background-size: contain;
89-
background-position: center;
90-
transition: none;
91-
background-image: url(../../images/icons/cf_icon_failsafe_grey.svg);
92-
}
93-
.linkicon {
94-
margin-left: 8px;
95-
margin-right: 8px;
96-
margin-top: 6px;
97-
height: 18px;
98-
width: 18px;
99-
opacity: 0.8;
100-
background-size: contain;
101-
background-position: center;
102-
transition: none;
103-
background-image: url(../../images/icons/cf_icon_link_grey.svg);
104-
}
105-
.armedicon.active {
106-
background-image: url(../../images/icons/cf_icon_armed_active.svg);
107-
}
108-
.failsafeicon.active {
109-
background-image: url(../../images/icons/cf_icon_failsafe_active.svg);
110-
}
111-
.linkicon.active {
112-
background-image: url(../../images/icons/cf_icon_link_active.svg);
113-
}
11462
11563
.bottomStatusIcons--compact {
11664
height: auto;
@@ -123,12 +71,4 @@ button.active {
12371
align-items: center;
12472
gap: 0.5rem;
12573
}
126-
127-
.bottomStatusIcons--compact .armedicon,
128-
.bottomStatusIcons--compact .failsafeicon,
129-
.bottomStatusIcons--compact .linkicon {
130-
margin: 0;
131-
height: 16px;
132-
width: 16px;
133-
}
13474
</style>

0 commit comments

Comments
 (0)