mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-25 09:15:49 +03:00
Cordova integration and android platform : - Added cordova directory with required config - Added cordova applications generation in gulpfile - Added cordova development instructions - Used cordova plugins to simulate missing chrome api plugins (chrome.serial and chrome.fileSystem) - Added cordova clipboard support - Added android operating system and Cordova gui mode - Fixed some css and js files to make them working on Android as well as on computers - Added --skipdep argument to accelerate cordova build (gulp task) - Added a webview helper to help people to update the webview app of their device New options tab : - Added options tab replacing the options dropdown - Added option to switch between phones UI and computers UI Mobile interface and global interface improvements : - Simplified the structure of the header with flex css - Made headerbar and tab container responsive (compact headerbar and side menu) - All tabs are adapted to mobile interface (except firmware flasher) - The servos and adjustments tabs are not fully adapted but are "usable" - Improved header bar animation - Improved log expandation animation - Added swipe gesture to toggle side menu Fixes during the development : - Logo position - Dark mode - Auto connection - Error messages (cordova_chromeapi.js) - Responsive grid - Testing - Disconnection - Width of boxes inside the OSD tab - Fixed cli tab - OSD tab - Motor stop switch - White spaces in boxes - Dialogs size - Connect button state - Prevent tablet with a height larger than 575px to switch to computers ui - Fixed logging tab - Fixed code smell - Fixed yarn cordova plugin install issue - Fixed content_wrapper - Fixed vibrations when scrolling - Fixed scrolling bar alignment - Fixed dialogReportProblem height - Fixed rates logo - Fixed auto connection default value (true) - Fixed D to D max - Fixed dialogs Added required messages in locales/en/messages.json file Requested changes
87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
'use strict';
|
|
|
|
const UI_PHONES = {
|
|
background: '#background',
|
|
tabContainer: '.tab_container',
|
|
tabContentContainer: '#tab-content-container',
|
|
headerbar: '.headerbar',
|
|
init: function() {
|
|
const self = this;
|
|
$('#menu_btn').click(function() {
|
|
self.openSideMenu();
|
|
});
|
|
$(this.background).click(function() {
|
|
self.closeSideMenu();
|
|
});
|
|
$('#tabs a').click(function() {
|
|
if ($('.tab_container').hasClass('reveal')) {
|
|
self.closeSideMenu();
|
|
}
|
|
});
|
|
$('#reveal_btn').click(function() {
|
|
self.expandHeader();
|
|
});
|
|
$(`${this.background}, ${this.tabContainer}`).swipe( {
|
|
swipeLeft: function() {
|
|
self.closeSideMenu();
|
|
},
|
|
});
|
|
$('#side_menu_swipe').swipe( {
|
|
swipeRight: function() {
|
|
self.openSideMenu();
|
|
},
|
|
});
|
|
},
|
|
initToolbar: function() {
|
|
$('.toolbar_expand_btn').click(this.expandToolbar);
|
|
},
|
|
openSideMenu: function() {
|
|
$(this.background).fadeIn(300);
|
|
$(this.tabContainer).addClass('reveal');
|
|
},
|
|
closeSideMenu: function() {
|
|
$(this.background).fadeOut(300);
|
|
$(this.tabContainer).removeClass('reveal');
|
|
},
|
|
expandHeader: function() {
|
|
const self = this;
|
|
let expand, headerExpanded, reveal;
|
|
if (GUI.connected_to) {
|
|
expand = 'expand2';
|
|
headerExpanded = 'header_expanded2';
|
|
reveal = '.header-wrapper';
|
|
} else {
|
|
expand = 'expand';
|
|
headerExpanded = 'headerExpanded';
|
|
reveal = '#port-picker';
|
|
}
|
|
if ($(self.headerbar).hasClass(expand)) {
|
|
$(reveal).removeClass('reveal');
|
|
setTimeout(function() {
|
|
$(self.tabContentContainer).removeClass(headerExpanded);
|
|
$(self.headerbar).removeClass(expand);
|
|
}, 100);
|
|
} else {
|
|
$(self.tabContentContainer).addClass(headerExpanded);
|
|
$(self.headerbar).addClass(expand);
|
|
setTimeout(function() {
|
|
$(reveal).addClass('reveal');
|
|
}, 100);
|
|
}
|
|
},
|
|
expandToolbar: function() {
|
|
const toolbar = $('.content_toolbar.xs-compressed');
|
|
if (toolbar.length > 0) {
|
|
if ($('.content_toolbar.xs-compressed').hasClass('expanded')) {
|
|
toolbar.removeClass('expanded');
|
|
} else {
|
|
toolbar.addClass('expanded');
|
|
}
|
|
}
|
|
},
|
|
reset: function() {
|
|
$(this.tabContentContainer).removeClass('header_expanded2 header_expanded');
|
|
$('#port-picker, .header-wrapper').removeClass('reveal');
|
|
$(this.headerbar).removeClass('expand2 expand');
|
|
},
|
|
};
|