diff options
author | haslinghuis <mark@numloq.nl> | 2022-05-20 00:21:31 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-20 00:21:31 +0300 |
commit | abdcbc6d30b1ffc4500e9ea2a61b48f5f58d750b (patch) | |
tree | bdf58b60c1a0b4d0f46118af0b3e6d4686ac5b97 | |
parent | 87eec422c39e2b0a8b34c966de9b579036e69f90 (diff) | |
parent | 6120a0754aebf80d9245621a51372a725fa1be91 (diff) |
Merge pull request #2920 from benlumley/improve-osd-elements-rendering
OSD Tab - Improve the way osd elements picker + timer section render/wrap
-rw-r--r-- | src/css/tabs/osd.css | 37 | ||||
-rw-r--r-- | src/js/tabs/osd.js | 15 |
2 files changed, 44 insertions, 8 deletions
diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index f8cc3ea6..46990003 100644 --- a/src/css/tabs/osd.css +++ b/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) { diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js index d949b30d..49731047 100644 --- a/src/js/tabs/osd.js +++ b/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); |