From 2efa4755d397d86963e80a42f722a99039223cdd Mon Sep 17 00:00:00 2001
From: Dan Nixon <dan@dan-nixon.com>
Date: Thu, 1 Jun 2017 10:30:39 +0100
Subject: [PATCH] Improve styleing of stat selection

Style the stat selection the smae as element selection.

This imporves looks and makes sure tooltips appear in the correct place
(for first in list).
---
 tabs/osd.css  | 12 ++++++------
 tabs/osd.html |  7 ++++---
 tabs/osd.js   |  8 ++++----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/tabs/osd.css b/tabs/osd.css
index 368f4172..6560f3c0 100644
--- a/tabs/osd.css
+++ b/tabs/osd.css
@@ -355,19 +355,19 @@ button {
   top: .8em;
 }
 
-.tab-osd .display-field {
+.tab-osd .switchable-field {
   padding: 3px;
   border: 1px solid transparent;
   border-bottom: 1px solid #ddd;
 }
 
-.tab-osd .display-field.mouseover {
+.tab-osd .switchable-field.mouseover {
   background: #fff;
   border: 1px solid #ccc;
   font-weight: 800;
 }
 
-.tab-osd .display-field input {
+.tab-osd .switchable-field input {
   float: right;
   width: 50px;
   border-radius: 3px;
@@ -378,12 +378,12 @@ button {
 
 }
 
-.tab-osd .display-field label {
+.tab-osd .switchable-field label {
   margin-left: 5px;
 
 }
 
-.tab-osd .display-fields {
+.tab-osd .switchable-fields {
   float: left;
   margin-top: 5px;
   margin-bottom: 8px;
@@ -406,7 +406,7 @@ button {
 }
 
 
-.tab-osd .display-field:last-child {
+.tab-osd .switchable-field:last-child {
   border-bottom: 0px;
 }
 
diff --git a/tabs/osd.html b/tabs/osd.html
index cce894b1..2129fa6c 100755
--- a/tabs/osd.html
+++ b/tabs/osd.html
@@ -22,7 +22,7 @@
                             </div>
                         </div>
                         <div class="spacer_box">
-                            <div class="display-fields"></div>
+                            <div id="element-fields" class="switchable-fields"></div>
                         </div>
                     </div>
                 </div>
@@ -72,13 +72,14 @@
                         </div>
                     </div>
                     <div class="gui_box grey stats-container requires-osd-feature" style="display:none;">
-                        <div class="gui_box_titlebar">
+                        <div class="gui_box_titlebar"
+                             style="margin-bottom: 0px;">
                             <div class="spacer_box_title">
                               Post Flight Status
                             </div>
                         </div>
                         <div class="spacer_box">
-                            <div class="post-flight-stats"></div>
+                            <div id="post-flight-stat-fields" class="switchable-fields"></div>
                         </div>
                     </div>
                     <div class="gui_box grey" style="display:none;">
diff --git a/tabs/osd.js b/tabs/osd.js
index 990321a8..755ea54e 100755
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -950,12 +950,12 @@ TABS.osd.initialize = function (callback) {
               // Post flight status
               if (semver.gte(CONFIG.apiVersion, "1.36.0")) {
                 $('.stats-container').show();
-                var $statsFields = $('.post-flight-stats').empty();
+                var $statsFields = $('#post-flight-stat-fields').empty();
 
                 for (let field of OSD.data.stat_items) {
                   if (!field.name) { continue; }
 
-                  var $field = $('<div class="stat-field field-'+field.index+'"/>');
+                  var $field = $('<div class="switchable-field field-'+field.index+'"/>');
                   var desc = null;
                   if (field.desc && field.desc.length) {
                     desc = chrome.i18n.getMessage(field.desc);
@@ -993,13 +993,13 @@ TABS.osd.initialize = function (callback) {
             }
 
             // display fields on/off and position
-            var $displayFields = $('.display-fields').empty();
+            var $displayFields = $('#element-fields').empty();
             for (let field of OSD.data.display_items) {
               // versioning related, if the field doesn't exist at the current flight controller version, just skip it
               if (!field.name) { continue; }
 
               var checked = field.isVisible ? 'checked' : '';
-              var $field = $('<div class="display-field field-'+field.index+'"/>');
+              var $field = $('<div class="switchable-field field-'+field.index+'"/>');
               var desc = null;
               if (field.desc && field.desc.length) {
                 desc = chrome.i18n.getMessage(field.desc);