From 282df2c7ffc9293f41aa10947da4baca2eb5fc52 Mon Sep 17 00:00:00 2001 From: Ben Lumley Date: Wed, 11 May 2022 10:31:03 +0100 Subject: [PATCH 1/4] Improve the way osd elements render, in particular - stop the labels + variant pickers wrapping under the 3 checkboxes and looking messy --- src/css/tabs/osd.css | 20 +++++++++++++++++++- src/js/tabs/osd.js | 9 ++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index f8cc3ea6..dc744cf5 100644 --- a/src/css/tabs/osd.css +++ b/src/css/tabs/osd.css @@ -423,6 +423,24 @@ button { 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 { font-size: 11px; font-weight: normal; @@ -455,7 +473,7 @@ button { .tab-osd .preview { width: 360px; - float: left; + float: left; position: sticky; top: 0; margin-left: calc((100% - 360px) / 3); diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js index d4e7c718..bf7870b9 100644 --- a/src/js/tabs/osd.js +++ b/src/js/tabs/osd.js @@ -2877,7 +2877,7 @@ TABS.osd.initialize = function(callback) { enabledCount++; } - const $field = $(`
`); + const $field = $(`
`); let desc = null; if (field.desc && field.desc.length) { desc = i18n.getMessage(field.desc); @@ -2917,7 +2917,9 @@ TABS.osd.initialize = function(callback) { } const finalFieldName = titleizeField(field); - $field.append(``); + const $labelAndVariant = $('
'); + $labelAndVariant.append(``); + 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); - $field.append(selectVariant); + $labelAndVariant.append(selectVariant); } 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 $field.name = field.name; insertOrdered($displayFields, $field); From 7d4459316512e938e5448c61a44779470aad523f Mon Sep 17 00:00:00 2001 From: Ben Lumley Date: Wed, 11 May 2022 10:45:31 +0100 Subject: [PATCH 2/4] Also tidy up timers --- src/css/tabs/osd.css | 13 ++++++++++++- src/js/tabs/osd.js | 6 +++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index dc744cf5..5a91e69d 100644 --- a/src/css/tabs/osd.css +++ b/src/css/tabs/osd.css @@ -524,9 +524,20 @@ button { display: inline !important; } +.timers-container .timer-detail { + padding-left: 15px; + padding-top: 10px; + padding-bottom: 10px; +} + .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 bf7870b9..a41b66a2 100644 --- a/src/js/tabs/osd.js +++ b/src/js/tabs/osd.js @@ -2636,7 +2636,7 @@ TABS.osd.initialize = function(callback) { timerTableRow.append(`${tim.index + 1}`); // Source - const sourceTimerTableData = $(''); + const sourceTimerTableData = $(''); sourceTimerTableData.attr('title', i18n.getMessage('osdTimerSourceTooltip')); sourceTimerTableData.append(``); const src = $(``); @@ -2659,7 +2659,7 @@ TABS.osd.initialize = function(callback) { // Precision timerTableRow = $(''); timerTable.append(timerTableRow); - const precisionTimerTableData = $(''); + const precisionTimerTableData = $(''); precisionTimerTableData.attr('title', i18n.getMessage('osdTimerPrecisionTooltip')); precisionTimerTableData.append(``); const precision = $(``); @@ -2683,7 +2683,7 @@ TABS.osd.initialize = function(callback) { // Alarm timerTableRow = $(''); timerTable.append(timerTableRow); - const alarmTimerTableData = $(''); + const alarmTimerTableData = $(''); alarmTimerTableData.attr('title', i18n.getMessage('osdTimerAlarmTooltip')); alarmTimerTableData.append(``); const alarm = $(``); From c35ed2ca898f5075d6ef4f61879c27764f07e47c Mon Sep 17 00:00:00 2001 From: Ben Lumley Date: Wed, 18 May 2022 11:40:21 +0100 Subject: [PATCH 3/4] Fix spacing of timers --- src/css/tabs/osd.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index 5a91e69d..a9724392 100644 --- a/src/css/tabs/osd.css +++ b/src/css/tabs/osd.css @@ -526,8 +526,8 @@ button { .timers-container .timer-detail { padding-left: 15px; - padding-top: 10px; - padding-bottom: 10px; + padding-top: 3px; + padding-bottom: 3px; } .timers-container label { From 6120a0754aebf80d9245621a51372a725fa1be91 Mon Sep 17 00:00:00 2001 From: Ben Lumley Date: Wed, 18 May 2022 11:56:12 +0100 Subject: [PATCH 4/4] Adjust osd variant picker wrapping --- src/css/tabs/osd.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index a9724392..46990003 100644 --- a/src/css/tabs/osd.css +++ b/src/css/tabs/osd.css @@ -429,16 +429,20 @@ button { .tab-osd .switchable-field-flex .switchable-field-description { display: flex; - flex-direction: column; + 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 { - margin-top: 5px; + flex-grow: 2; } .spacer_box_title span {