Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-23 16:25:22 +03:00
Code Issues Wiki Activity

Quad status (#3533)

Browse source 
* BottomStatus Vue component

* refactor sugestions
This commit is contained in:
Emil 2023-07-31 01:48:16 +03:00 • committed by GitHub
parent 4087f0cfba
commit 15265b3714
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 139 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/quad-status/BottomStatusIcons.stories.js Normal file
View file

@ -0,0 +1,16 @@
import BottomStatusIcons from "./BottomStatusIcons";
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
title: "Bottom status icons",
component: BottomStatusIcons,
};
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { BottomStatusIcons },
template: '<bottom-status-icons v-bind="$props" />',
});
export const Primary = Template.bind({});

123
src/components/quad-status/BottomStatusIcons.vue Normal file
View file

@ -0,0 +1,123 @@
<template>
<div class="bottomStatusIcons">
<div
i18n_title="mainHelpArmed"
class="armedicon cf_tip i18n_title-replaced"
:class="{ active: setActiveArmed }"
/>
<div
i18n_title="mainHelpFailsafe"
class="failsafeicon cf_tip i18n_title-replaced"
:class="{ active: setFailsafeActive }"
/>
<div
i18n_title="mainHelpLink"
class="linkicon cf_tip i18n_title-replaced"
:class="{ active: setActiveLink }"
/>
</div>
</template>
<script>
import { bit_check } from "../../js/bit";
export default {
props: {
lastReceivedTimestamp: { type: Number, default: 0 },
mode: { type: Number, default: 0 },
auxConfig: { type: Array, default: null },
},
computed: {
setActiveArmed() {
return (
this.auxConfig?.length &&
this.auxConfig?.includes("ARM") &&
bit_check(this.mode, this.auxConfig?.indexOf("ARM"))
);
},
setFailsafeActive() {
return (
this.auxConfig?.length &&
this.auxConfig?.includes("FAILSAFE") &&
bit_check(this.mode, this.auxConfig?.indexOf("FAILSAFE"))
);
},
setActiveLink() {
return (performance.now() - this.lastReceivedTimestamp < 300);
},
},
};
</script>
<style scoped>
.bottomStatusIcons {
display: flex;
justify-content: space-between;
background-color: #272727;
height: 31px;
max-width: 105px;
margin-top: 2px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
button {
padding: 0.5em 0.75em;
border-radius: 4px;
background-color: #ccc;
color: #666;
border: 1px solid var(--subtleAccent);
font-weight: 600;
font-size: 10pt;
cursor: pointer;
}
button.active {
background-color: var(--accent);
border: 1px solid #dba718;
color: #000;
}
.armedicon {
margin-left: 8px;
margin-right: 8px;
margin-top: 6px;
height: 18px;
width: 18px;
opacity: 0.8;
background-size: contain;
background-position: center;
transition: none;
background-image: url(../../images/icons/cf_icon_armed_grey.svg);
}
.failsafeicon {
margin-left: 8px;
margin-right: 8px;
margin-top: 6px;
height: 18px;
width: 18px;
opacity: 0.8;
background-size: contain;
background-position: center;
transition: none;
background-image: url(../../images/icons/cf_icon_failsafe_grey.svg);
}
.linkicon {
margin-left: 8px;
margin-right: 8px;
margin-top: 6px;
height: 18px;
width: 18px;
opacity: 0.8;
background-size: contain;
background-position: center;
transition: none;
background-image: url(../../images/icons/cf_icon_link_grey.svg);
}
.armedicon.active {
background-image: url(../../images/icons/cf_icon_armed_active.svg);
}
.failsafeicon.active {
background-image: url(../../images/icons/cf_icon_failsafe_active.svg);
}
.linkicon.active {
background-image: url(../../images/icons/cf_icon_link_active.svg);
}
</style>