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

OSD Tab - Improve the way osd elements picker + timer section render/wrap

Author: haslinghuis

src/css/tabs/osd.css

@@ -423,6 +423,28 @@ button {
   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 {
   font-size: 11px;
   font-weight: normal;
@@ -455,7 +477,7 @@ button {
 
 .tab-osd .preview {
   width: 360px;
-  float: left; 
+  float: left;
   position: sticky;
   top: 0;
   margin-left: calc((100% - 360px) / 3);
@@ -506,9 +528,20 @@ button {
   display: inline !important;
 }
 
+.timers-container .timer-detail {
+    padding-left: 15px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
 .timers-container label {
-  margin-left: 15px !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) {

src/js/tabs/osd.js

@@ -2640,7 +2640,7 @@ TABS.osd.initialize = function(callback) {
                                 timerTableRow.append(`<td>${tim.index + 1}</td>`);
 
                                 // Source
-                                const sourceTimerTableData = $('<td class="osd_tip"></td>');
+                                const sourceTimerTableData = $('<td class="timer-detail osd_tip"></td>');
                                 sourceTimerTableData.attr('title', i18n.getMessage('osdTimerSourceTooltip'));
                                 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>`);
@@ -2663,7 +2663,7 @@ TABS.osd.initialize = function(callback) {
                                 // Precision
                                 timerTableRow = $('<tr />');
                                 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.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>`);
@@ -2687,7 +2687,7 @@ TABS.osd.initialize = function(callback) {
                                 // Alarm
                                 timerTableRow = $('<tr />');
                                 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.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}"/>`);
@@ -2881,7 +2881,7 @@ TABS.osd.initialize = function(callback) {
                             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;
                         if (field.desc && field.desc.length) {
                             desc = i18n.getMessage(field.desc);
@@ -2921,7 +2921,9 @@ TABS.osd.initialize = function(callback) {
                         }
 
                         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) {
@@ -2945,7 +2947,7 @@ TABS.osd.initialize = function(callback) {
 
                             selectVariant.val(field.variant);
 
-                            $field.append(selectVariant);
+                            $labelAndVariant.append(selectVariant);
                         }
 
                         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
                         $field.name = field.name;
                         insertOrdered($displayFields, $field);