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

Merge pull request #2920 from benlumley/improve-osd-elements-rendering

Browse source 
OSD Tab - Improve the way osd elements picker + timer section render/wrap
This commit is contained in:
haslinghuis 2022-05-19 23:21:31 +02:00 • committed by GitHub
commit abdcbc6d30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/css/tabs/osd.css
View file

@ -423,6 +423,28 @@ button {
width: 100%; width: 100%;
} }
.tab-osd .switchable-field-flex {
display: flex;
}
.tab-osd .switchable-field-flex .switchable-field-description {
display: flex;
flex-direction: row;
/*
min width here is counterintuitive/seems to do nothing. but important, stops the variant selects overflowing
see https: //stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container
*/
min-width: 0;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
}
.tab-osd .switchable-field-flex .switchable-field-description .osd-variant {
flex-grow: 2;
}
.spacer_box_title span { .spacer_box_title span {
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
@ -455,7 +477,7 @@ button {
.tab-osd .preview { .tab-osd .preview {
width: 360px; width: 360px;
float: left; float: left;
position: sticky; position: sticky;
top: 0; top: 0;
margin-left: calc((100% - 360px) / 3); margin-left: calc((100% - 360px) / 3);
@ -506,9 +528,20 @@ button {
display: inline !important; display: inline !important;
} }
.timers-container .timer-detail {
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
}
.timers-container label { .timers-container label {
margin-left: 15px !important;
margin-right: 5px !important; margin-right: 5px !important;
display: inline-block;
width: 80px;
}
.timers-container input, .timers-container select {
width: 150px;
} }
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {

15
src/js/tabs/osd.js
View file

@ -2640,7 +2640,7 @@ TABS.osd.initialize = function(callback) {
timerTableRow.append(`<td>${tim.index + 1}</td>`); timerTableRow.append(`<td>${tim.index + 1}</td>`);
// Source // Source
const sourceTimerTableData = $('<td class="osd_tip"></td>'); const sourceTimerTableData = $('<td class="timer-detail osd_tip"></td>');
sourceTimerTableData.attr('title', i18n.getMessage('osdTimerSourceTooltip')); sourceTimerTableData.attr('title', i18n.getMessage('osdTimerSourceTooltip'));
sourceTimerTableData.append(`<label for="timerSource_${tim.index}" class="char-label">${i18n.getMessage('osdTimerSource')}</label>`); sourceTimerTableData.append(`<label for="timerSource_${tim.index}" class="char-label">${i18n.getMessage('osdTimerSource')}</label>`);
const src = $(`<select class="timer-option" id="timerSource_${tim.index}"></select>`); const src = $(`<select class="timer-option" id="timerSource_${tim.index}"></select>`);
@ -2663,7 +2663,7 @@ TABS.osd.initialize = function(callback) {
// Precision // Precision
timerTableRow = $('<tr />'); timerTableRow = $('<tr />');
timerTable.append(timerTableRow); timerTable.append(timerTableRow);
const precisionTimerTableData = $('<td class="osd_tip"></td>'); const precisionTimerTableData = $('<td class="timer-detail osd_tip"></td>');
precisionTimerTableData.attr('title', i18n.getMessage('osdTimerPrecisionTooltip')); precisionTimerTableData.attr('title', i18n.getMessage('osdTimerPrecisionTooltip'));
precisionTimerTableData.append(`<label for="timerPrec_${tim.index}" class="char-label">${i18n.getMessage('osdTimerPrecision')}</label>`); precisionTimerTableData.append(`<label for="timerPrec_${tim.index}" class="char-label">${i18n.getMessage('osdTimerPrecision')}</label>`);
const precision = $(`<select class="timer-option osd_tip" id="timerPrec_${tim.index}"></select>`); const precision = $(`<select class="timer-option osd_tip" id="timerPrec_${tim.index}"></select>`);
@ -2687,7 +2687,7 @@ TABS.osd.initialize = function(callback) {
// Alarm // Alarm
timerTableRow = $('<tr />'); timerTableRow = $('<tr />');
timerTable.append(timerTableRow); timerTable.append(timerTableRow);
const alarmTimerTableData = $('<td class="osd_tip"></td>'); const alarmTimerTableData = $('<td class="timer-detail osd_tip"></td>');
alarmTimerTableData.attr('title', i18n.getMessage('osdTimerAlarmTooltip')); alarmTimerTableData.attr('title', i18n.getMessage('osdTimerAlarmTooltip'));
alarmTimerTableData.append(`<label for="timerAlarm_${tim.index}" class="char-label">${i18n.getMessage('osdTimerAlarm')}</label>`); alarmTimerTableData.append(`<label for="timerAlarm_${tim.index}" class="char-label">${i18n.getMessage('osdTimerAlarm')}</label>`);
const alarm = $(`<input class="timer-option osd_tip" name="alarm" type="number" min=0 id="timerAlarm_${tim.index}"/>`); const alarm = $(`<input class="timer-option osd_tip" name="alarm" type="number" min=0 id="timerAlarm_${tim.index}"/>`);
@ -2881,7 +2881,7 @@ TABS.osd.initialize = function(callback) {
enabledCount++; enabledCount++;
} }
const $field = $(`<div class="switchable-field field-${field.index}"></div>`); const $field = $(`<div class="switchable-field switchable-field-flex field-${field.index}"></div>`);
let desc = null; let desc = null;
if (field.desc && field.desc.length) { if (field.desc && field.desc.length) {
desc = i18n.getMessage(field.desc); desc = i18n.getMessage(field.desc);
@ -2921,7 +2921,9 @@ TABS.osd.initialize = function(callback) {
} }
const finalFieldName = titleizeField(field); const finalFieldName = titleizeField(field);
$field.append(`<label for="${field.name}" class="char-label">${finalFieldName}</label>`); const $labelAndVariant = $('<div class="switchable-field-description"></div>');
$labelAndVariant.append(`<label for="${field.name}" class="char-label">${finalFieldName}</label>`);
if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44) && field.variants && field.variants.length > 0) { if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44) && field.variants && field.variants.length > 0) {
@ -2945,7 +2947,7 @@ TABS.osd.initialize = function(callback) {
selectVariant.val(field.variant); selectVariant.val(field.variant);
$field.append(selectVariant); $labelAndVariant.append(selectVariant);
} }
if (field.positionable && field.isVisible[OSD.getCurrentPreviewProfile()]) { if (field.positionable && field.isVisible[OSD.getCurrentPreviewProfile()]) {
@ -2965,6 +2967,7 @@ TABS.osd.initialize = function(callback) {
); );
} }
$field.append($labelAndVariant);
// Insert in alphabetical order, with unknown fields at the end // Insert in alphabetical order, with unknown fields at the end
$field.name = field.name; $field.name = field.name;
insertOrdered($displayFields, $field); insertOrdered($displayFields, $field);