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).
10.3.x-maintenance
Dan Nixon 2017-06-01 10:30:39 +01:00
parent beecf9868c
commit 2efa4755d3
3 changed files with 14 additions and 13 deletions

View File

@ -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;
}

View File

@ -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;">

View File

@ -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);