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

Refactor pid-tuning -> tabs

Browse source
This commit is contained in:
Anisotropic 2019-10-04 18:39:33 +03:00
parent aa47d04fdb
commit af68114367
4 changed files with 63 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/css/tabs-dark/pid_tuning-dark.css
View file

@ -56,29 +56,11 @@
color: white; color: white;
} }
.tab-pid_tuning .tab_container { .tab-pid_tuning .tab-container > div {
background-color: #393b3a;
}
.tab-pid_tuning .tab_container td {
background-color: #535655; background-color: #535655;
border-right: 1px solid #393b3a; border-right: 1px solid #393b3a;
} }
.tab-pid_tuning .tab_container td:last-child {
background-color: #535655;
}
.tab-pid_tuning .tab_container td.active {
background-color: #ffbb2a;
color: black;
}
.tab-pid_tuning .tab_container td.active a {
background-color: #ffbb2a;
color: black;
}
.fancy.header { .fancy.header {
background-color: #393b3a; background-color: #393b3a;
} }

58
src/css/tabs/pid_tuning.css
View file

@ -264,47 +264,45 @@
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
} }
.tab-pid_tuning .tab_container { .tab-pid_tuning .tab-container {
float: left; border-bottom: 3px solid var(--accent);
width: 408px;
height: 29px;
border-right-width: 0px; border-right-width: 0px;
background: #fff; display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 29px;
justify-content: start;
width: 100%;
} }
.tab-pid_tuning .tab_container td { .tab-pid_tuning .tab-container > div {
display: flex;
justify-content: center;
align-items: center;
background-color: #2e2e2e; background-color: #2e2e2e;
padding-left: 8px; padding: 0 12px;
border-right: 1px solid white; border-right: 1px solid white;
} }
.tab-pid_tuning .tab_container td:first-child { .tab-pid_tuning .tab-container > div:first-child {
border-top-left-radius: 5px; border-top-left-radius: 4px;
} }
.tab-pid_tuning .tab_container td:last-child { .tab-pid_tuning .tab-container > div:last-child {
border-top-right-radius: 5px; border-top-right-radius: 4px;
background-color: #2e2e2e;
} }
.tab-pid_tuning .tab_container td a { .tab-pid_tuning .tab-container > div a {
display: block;
white-space: nowrap;
color: #999999; color: #999999;
} }
.tab-pid_tuning .tab_container td.active { .tab-pid_tuning .tab-container > div.active,
.tab-pid_tuning .tab-container > div.active a {
background-color: var(--accent); background-color: var(--accent);
color: #000; color: #000;
transition: none; transition: none;
height: 27px;
padding-left: 8px;
}
.tab-pid_tuning .tab_container td.active a {
background-color: var(--accent);
color: #000;
text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
} }
.tab-pid_tuning .single-field { .tab-pid_tuning .single-field {
@ -700,26 +698,16 @@
height: fit-content; height: fit-content;
} }
.tab-pid_tuning .tabboarder {
background-color: var(--accent);
float: left;
width: 100%;
height: 3px;
margin-bottom: 10px;
}
.tabarea { .tabarea {
float: left;
width: calc(100% - 22px); width: calc(100% - 22px);
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
padding: 10px; padding: 10px;
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
margin-top: -10px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-top: 0px solid var(--subtleAccent); border-top: 0px solid var(--subtleAccent);
background: #f9f9f9; background: #f9f9f9;
} }
.tab-pid_tuning dialog { .tab-pid_tuning dialog {

16
src/js/tabs/pid_tuning.js
View file

@ -112,7 +112,7 @@ TABS.pid_tuning.initialize = function (callback) {
$('.pid_filter input[name="yawLowpassFrequency"]').val(FILTER_CONFIG.yaw_lowpass_hz); $('.pid_filter input[name="yawLowpassFrequency"]').val(FILTER_CONFIG.yaw_lowpass_hz);
} else { } else {
$('.tab-pid_tuning .subtab-filter').hide(); $('.tab-pid_tuning .subtab-filter').hide();
$('.tab-pid_tuning .tab_container').hide(); $('.tab-pid_tuning .tab-container').hide();
$('.pid_tuning input[name="rc_rate_yaw"]').hide(); $('.pid_tuning input[name="rc_rate_yaw"]').hide();
} }
@ -922,18 +922,18 @@ TABS.pid_tuning.initialize = function (callback) {
const el = $('.tab-pid_tuning .subtab-' + name); const el = $('.tab-pid_tuning .subtab-' + name);
el[name == subtabName ? 'show' : 'hide'](); el[name == subtabName ? 'show' : 'hide']();
} }
$('.tab-pid_tuning .tab_container td').removeClass('active'); $('.tab-pid_tuning .tab-container .tab').removeClass('active');
$('.tab-pid_tuning .tab_container .' + subtabName).addClass('active'); $('.tab-pid_tuning .tab-container .' + subtabName).addClass('active');
self.activeSubtab = subtabName; self.activeSubtab = subtabName;
} }
activateSubtab(self.activeSubtab); activateSubtab(self.activeSubtab);
$('.tab-pid_tuning .tab_container .pid').on('click', () => activateSubtab('pid')); $('.tab-pid_tuning .tab-container .pid').on('click', () => activateSubtab('pid'));
$('.tab-pid_tuning .tab_container .rates').on('click', () => activateSubtab('rates')); $('.tab-pid_tuning .tab-container .rates').on('click', () => activateSubtab('rates'));
$('.tab-pid_tuning .tab_container .filter').on('click', () => activateSubtab('filter')); $('.tab-pid_tuning .tab-container .filter').on('click', () => activateSubtab('filter'));
function loadProfilesList() { function loadProfilesList() {
var numberOfProfiles = 3; var numberOfProfiles = 3;
@ -1698,8 +1698,8 @@ TABS.pid_tuning.initRatesPreview = function () {
this.keepRendering = true; this.keepRendering = true;
this.model = new Model($('.rates_preview'), $('.rates_preview canvas')); this.model = new Model($('.rates_preview'), $('.rates_preview canvas'));
$('.tab-pid_tuning .tab_container .rates').on('click', $.proxy(this.model.resize, this.model)); $('.tab-pid_tuning .tab-container .rates').on('click', $.proxy(this.model.resize, this.model));
$('.tab-pid_tuning .tab_container .rates').on('click', $.proxy(this.updateRatesLabels, this)); $('.tab-pid_tuning .tab-container .rates').on('click', $.proxy(this.updateRatesLabels, this));
$(window).on('resize', $.proxy(this.model.resize, this.model)); $(window).on('resize', $.proxy(this.model.resize, this.model));
$(window).on('resize', $.proxy(this.updateRatesLabels, this)); $(window).on('resize', $.proxy(this.updateRatesLabels, this));

25
src/tabs/pid_tuning.html
View file

@ -47,22 +47,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab_container"> <div class="tab-container">
<table> <div class="tab pid active">
<tr> <a href="#" i18n="pidTuningSubTabPid" />
<td class="pid active"> </div>
<a href="#" i18n="pidTuningSubTabPid" /> <div class="tab rates">
</td> <a href="#" i18n="pidTuningSubTabRates" />
<td class="rates"> </div>
<a href="#" i18n="pidTuningSubTabRates" /> <div class="tab filter">
</td> <a href="#" i18n="pidTuningSubTabFilter" />
<td class="filter"> </div>
<a href="#" i18n="pidTuningSubTabFilter" />
</td>
</tr>
</table>
</div> </div>
<div class="tabboarder"></div>
<div class="tabarea"> <div class="tabarea">
<form name="pid-tuning" id="pid-tuning"> <form name="pid-tuning" id="pid-tuning">
<div class="subtab-pid"> <div class="subtab-pid">