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

Improve the way osd elements render, in particular - stop the labels + variant pickers wrapping under the 3 checkboxes and looking messy

Browse source
This commit is contained in:
Ben Lumley 2022-05-11 10:31:03 +01:00
parent d359bcf58f
commit 282df2c7ff
2 changed files with 25 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -423,6 +423,24 @@ button {
width: 100%; width: 100%;
} }
.tab-osd .switchable-field-flex {
display: flex;
}
.tab-osd .switchable-field-flex .switchable-field-description {
display: flex;
flex-direction: column;
/*
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;
}
.tab-osd .switchable-field-flex .switchable-field-description .osd-variant {
margin-top: 5px;
}
.spacer_box_title span { .spacer_box_title span {
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
@ -455,7 +473,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);

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

@ -2877,7 +2877,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);
@ -2917,7 +2917,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) {
@ -2941,7 +2943,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()]) {
@ -2961,6 +2963,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);