Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-22 15:55:33 +03:00
Code Issues Wiki Activity

Change font presets to new dropdown UI.

Browse source
This commit is contained in:
Richard Cooper 2018-08-01 22:46:51 +01:00
parent 4d582f45c8
commit 40cf566771
3 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/css/tabs/osd.css
View file

@ -402,13 +402,17 @@ button {
cursor: pointer;
}
.fontbuttons {
.fontpresets_wrapper {
display: inline-block;
position: absolute;
right: 1.2em;
top: .8em;
}
.fontpresets {
border: 1px solid #cccccc;
}
.tab-osd .switchable-field {
padding: 3px;
border: 1px solid transparent;

32
src/js/tabs/osd.js
View file

@ -910,7 +910,7 @@ OSD.constants = {
{ file: "default", name: "Default" },
{ file: "bold", name: "Bold" },
{ file: "large", name: "Large" },
{ file: "extra_large", name: "X-Large" },
{ file: "extra_large", name: "Extra Large" },
{ file: "betaflight", name: "Betaflight" },
{ file: "digital", name: "Digital" },
{ file: "clarity", name: "Clarity" },
@ -1471,17 +1471,18 @@ TABS.osd.initialize = function (callback) {
}
$('#content').load("./tabs/osd.html", function () {
// Generate font type buttons
var fontbuttons = $('.fontbuttons');
// Generate font type select element
var fontselect = $('.fontpresets');
OSD.constants.FONT_TYPES.forEach(function(e, i) {
var button = $('<button>', {
var option = $('<option>', {
"data-font-file": e.file,
value: e.file,
text: e.name
});
fontbuttons.append($(button));
fontselect.append($(option));
});
var fontbuttons = $('.fontpresets_wrapper');
fontbuttons.append($('<button>', { class: "load_font_file", i18n: "osdSetupOpenFont" }));
// must invoke before i18n.localizePage() since it adds translation keys for expected logo size
@ -1975,12 +1976,10 @@ TABS.osd.initialize = function (callback) {
// init structs once, also clears current font
FONT.initData();
var $fontPicker = $('.fontbuttons button');
$fontPicker.click(function(e) {
if (!$(this).data('font-file')) { return; }
$fontPicker.removeClass('active');
$(this).addClass('active');
$.get('./resources/osd/' + $(this).data('font-file') + '.mcm', function(data) {
var $fontpresets = $('.fontpresets')
$fontpresets.change(function(e) {
var $font = $('.fontpresets option:selected');
$.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
FONT.parseMCMFontFile(data);
FONT.preview($preview);
LogoManager.drawPreview();
@ -1989,10 +1988,15 @@ TABS.osd.initialize = function (callback) {
});
// load the first font when we change tabs
$fontPicker.first().click();
var $font = $('.fontpresets option:selected');
$.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
FONT.parseMCMFontFile(data);
FONT.preview($preview);
LogoManager.drawPreview();
updateOsdView();
});
$('button.load_font_file').click(function() {
$fontPicker.removeClass('active');
FONT.openFontFile().then(function() {
FONT.preview($preview);
LogoManager.drawPreview();

6
src/tabs/osd.html
View file

@ -124,7 +124,11 @@
<h1 class="tab_title" i18n="osdSetupFontPresets" />
<!-- Font preview and list -->
<div class="content_wrapper font-preview"></div>
<div class="fontbuttons"></div>
<div class="fontpresets_wrapper">
<label>Select Font Preset</label>
<select class="fontpresets"></select>
<span> Or </span>
</div>
<!-- Boot logo setup -->
<h1 class="tab_title" i18n="osdSetupCustomLogoTitle" />
<div id="font-logo-preview-container" class="content_wrapper">