From eb56b0783c6ac5fe78764977fd7dbb77801aeb34 Mon Sep 17 00:00:00 2001
From: Dan Nixon <dan@dan-nixon.com>
Date: Thu, 17 Aug 2017 16:08:19 +0100
Subject: [PATCH] Improve formatting of OSD timer configuration

---
 _locales/en/messages.json |  9 +++++++++
 tabs/osd.css              |  6 +++++-
 tabs/osd.js               | 42 +++++++++++++++++++++++++--------------
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 193ec88b..6dbb6b9e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2458,12 +2458,21 @@
         "message": "Value of timer 2 at time of disarming"
     },
 
+    "osdTimerSource": {
+      "message": "Source:"
+    },
     "osdTimerSourceTooltip": {
         "message": "Select the timer source, this controls the duration/event that the timer measures"
     },
+    "osdTimerPrecision": {
+      "message": "Precision:"
+    },
     "osdTimerPrecisionTooltip": {
         "message": "Select the timer precision, this controls to what precision the time is reported in"
     },
+    "osdTimerAlarm": {
+      "message": "Alarm:"
+    },
     "osdTimerAlarmTooltip": {
         "message": "Select the timer alarm threshold in minutes, when the time exceeds this value the OSD element will blink, setting this to 0 disables the alarm"
     },
diff --git a/tabs/osd.css b/tabs/osd.css
index 2cf70336..58148fd2 100644
--- a/tabs/osd.css
+++ b/tabs/osd.css
@@ -450,10 +450,14 @@ button {
 .timer-option {
   float: none !important;
   padding: 2px;
-  margin-left: 10px;
   display: inline !important;
 }
 
+.timers-container label {
+  margin-left: 15px !important;
+  margin-right: 5px !important;
+}
+
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
   .tab-osd .content_wrapper {
     height: calc(100% - 30px);
diff --git a/tabs/osd.js b/tabs/osd.js
index 7146e7ca..179a08a8 100755
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -1164,49 +1164,61 @@ TABS.osd.initialize = function (callback) {
                   $timerConfig.append('<span>' + (tim.index + 1) + '</span>');
 
                   // Source
-                  var src = $('<select class="timer-option osd_tip" id="' + tim.index + '"></select>');
-                  src.attr('title', chrome.i18n.getMessage('osdTimerSourceTooltip'));
+                  var sourceSpan = $('<span class="osd_tip"></span>');
+                  sourceSpan.attr('title', chrome.i18n.getMessage('osdTimerSourceTooltip'));
+                  sourceSpan.append('<label for="timerSource_' + tim.index + '" class="char-label">' + chrome.i18n.getMessage('osdTimerSource') + '</label>');
+                  var src = $('<select class="timer-option" id="timerSource_' + tim.index + '"></select>');
                   OSD.constants.TIMER_TYPES.forEach(function(e, i) {
                     src.append('<option value="' + i + '">' + e + '</option>');
                   });
                   src[0].selectedIndex = tim.src;
                   src.blur(function(e) {
-                    OSD.data.timers[$(this)[0].id].src = $(this)[0].selectedIndex;
-                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[$(this)[0].id]))
+                    var idx = $(this)[0].id.split("_")[1];
+                    OSD.data.timers[idx].src = $(this)[0].selectedIndex;
+                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[idx]))
                     .then(function() {
                       updateOsdView();
                     });
                   });
-                  $timerConfig.append(src);
+                  sourceSpan.append(src);
+                  $timerConfig.append(sourceSpan);
 
                   // Precision
-                  var precision = $('<select class="timer-option osd_tip" id="' + tim.index + '"></select>');
-                  precision.attr('title', chrome.i18n.getMessage('osdTimerPrecisionTooltip'));
+                  var precisionSpan = $('<span class="osd_tip"></span>');
+                  precisionSpan.attr('title', chrome.i18n.getMessage('osdTimerPrecisionTooltip'));
+                  precisionSpan.append('<label for="timerPrec_' + tim.index + '" class="char-label">' + chrome.i18n.getMessage('osdTimerPrecision') + '</label>');
+                  var precision = $('<select class="timer-option osd_tip" id="timerPrec_' + tim.index + '"></select>');
                   OSD.constants.TIMER_PRECISION.forEach(function(e, i) {
                     precision.append('<option value="' + i + '">' + e + '</option>');
                   });
                   precision[0].selectedIndex = tim.precision;
                   precision.blur(function(e) {
-                    OSD.data.timers[$(this)[0].id].precision = $(this)[0].selectedIndex;
-                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[$(this)[0].id]))
+                    var idx = $(this)[0].id.split("_")[1];
+                    OSD.data.timers[idx].precision = $(this)[0].selectedIndex;
+                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[idx]))
                     .then(function() {
                       updateOsdView();
                     });
                   });
-                  $timerConfig.append(precision);
+                  precisionSpan.append(precision);
+                  $timerConfig.append(precisionSpan);
 
                   // Alarm
-                  var alarm = $('<input class="timer-option osd_tip" name="alarm" type="number" min=0 id="' + tim.index + '"/>');
-                  alarm.attr('title', chrome.i18n.getMessage('osdTimerAlarmTooltip'));
+                  var alarmSpan = $('<span class="osd_tip"></span>');
+                  alarmSpan.attr('title', chrome.i18n.getMessage('osdTimerAlarmTooltip'));
+                  alarmSpan.append('<label for="timerAlarm_' + tim.index + '" class="char-label">' + chrome.i18n.getMessage('osdTimerAlarm') + '</label>');
+                  var alarm = $('<input class="timer-option osd_tip" name="alarm" type="number" min=0 id="timerAlarm_' + tim.index + '"/>');
                   alarm[0].value = tim.alarm;
                   alarm.blur(function(e) {
-                    OSD.data.timers[$(this)[0].id].alarm = $(this)[0].value;
-                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[$(this)[0].id]))
+                    var idx = $(this)[0].id.split("_")[1];
+                    OSD.data.timers[idx].alarm = $(this)[0].value;
+                    MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeTimer(OSD.data.timers[idx]))
                     .then(function() {
                       updateOsdView();
                     });
                   });
-                  $timerConfig.append(alarm);
+                  alarmSpan.append(alarm);
+                  $timerConfig.append(alarmSpan);
 
                   $timers.append($timerConfig);
                 }