From c13be3cce4d91cc73aee69080f000334a6c96fa2 Mon Sep 17 00:00:00 2001 From: Mark Haslinghuis Date: Thu, 2 Jan 2025 21:22:05 +0100 Subject: [PATCH 1/3] Execute prettier --- .../EscDshotDirection/EscDshotCommandQueue.js | 37 +- .../EscDshotDirectionComponent.js | 143 +- .../EscDshotDirectionMotorDriver.js | 83 +- src/components/EscDshotDirection/Styles.css | 23 +- .../MotorOutputReorderingCanvas.js | 127 +- .../MotorOutputReorderingComponent.js | 137 +- .../MotorOutputReorderingConfig.js | 266 +- .../MotorOutputReordering/Styles.css | 26 +- .../betaflight-logo/BetaflightLogo.stories.js | 14 +- .../betaflight-logo/BetaflightLogo.vue | 172 +- src/components/data-flash/DataFlash.vue | 51 +- src/components/init.js | 26 +- .../FirmwareVirtualOption.stories.js | 2 +- .../port-picker/FirmwareVirtualOption.vue | 27 +- .../port-picker/PortOverrideOption.stories.js | 2 +- .../port-picker/PortOverrideOption.vue | 58 +- src/components/port-picker/PortPicker.vue | 150 +- .../port-picker/PortsInput.stories.js | 2 +- src/components/port-picker/PortsInput.vue | 323 +- .../quad-status/BatteryIcon.stories.js | 26 +- src/components/quad-status/BatteryIcon.vue | 184 +- .../quad-status/BatteryLegend.stories.js | 10 +- src/components/quad-status/BatteryLegend.vue | 64 +- .../quad-status/BottomStatusIcons.vue | 24 +- .../sensor-status/SensorStatus.stories.js | 2 +- src/components/sensor-status/SensorStatus.vue | 135 +- src/components/status-bar/PortUtilization.vue | 40 +- src/components/status-bar/ReadingStat.vue | 41 +- .../status-bar/StatusBar.stories.js | 10 +- src/components/status-bar/StatusBar.vue | 166 +- .../status-bar/StatusBarVersion.vue | 60 +- src/components/vueI18n.js | 2 +- src/css/dark-theme.less | 2 +- src/css/main.less | 160 +- src/css/opensans_webfontkit/fonts.css | 31 +- src/css/receiver_msp/receiver_msp.less | 164 +- src/css/select2_custom.less | 2 +- src/css/switchery_custom.less | 6 +- src/css/tabs/adjustments.less | 158 +- src/css/tabs/auxiliary.less | 452 +-- src/css/tabs/cli.less | 280 +- src/css/tabs/configuration.less | 38 +- src/css/tabs/failsafe.less | 146 +- src/css/tabs/firmware_flasher.less | 157 +- src/css/tabs/gps.less | 473 +-- src/css/tabs/help.less | 64 +- src/css/tabs/landing.less | 262 +- src/css/tabs/led_strip.less | 1249 ++++--- src/css/tabs/logging.less | 174 +- src/css/tabs/motors.less | 780 ++-- src/css/tabs/onboard_logging.less | 554 +-- src/css/tabs/options.less | 38 +- src/css/tabs/osd.less | 629 ++-- src/css/tabs/pid_tuning.less | 2129 +++++------ src/css/tabs/ports.less | 252 +- src/css/tabs/power.less | 62 +- src/css/tabs/privacy_policy.less | 16 +- src/css/tabs/receiver.less | 620 ++-- src/css/tabs/sensors.less | 127 +- src/css/tabs/servos.less | 710 ++-- src/css/tabs/setup.less | 211 +- src/css/tabs/static_tab.less | 62 +- src/css/tabs/transponder.less | 150 +- src/css/tabs/vtx.less | 130 +- src/css/theme.css | 27 +- src/js/Analytics.js | 52 +- src/js/Beepers.js | 82 +- src/js/BuildApi.js | 47 +- src/js/CliAutoComplete.js | 388 +- src/js/Clipboard.js | 8 +- src/js/ConfigInserter.js | 18 +- src/js/ConfigStorage.js | 80 +- src/js/DarkTheme.js | 22 +- src/js/Features.js | 108 +- src/js/FileSystem.js | 27 +- src/js/GitHubApi.js | 33 +- src/js/LogoManager.js | 127 +- src/js/RateCurve.js | 186 +- src/js/SessionStorage.js | 60 +- src/js/Sponsor.js | 22 +- src/js/TuningSliders.js | 311 +- src/js/VirtualFC.js | 154 +- src/js/browserMain.js | 8 +- src/js/data_storage.js | 28 +- src/js/debug.js | 1472 ++++---- src/js/default_huffman_tree.js | 518 +-- src/js/fc.js | 1121 +++--- src/js/gui.js | 191 +- src/js/gui_log.js | 4 +- src/js/huffman.js | 4 +- src/js/injected_methods.js | 54 +- src/js/jquery.js | 8 +- src/js/jqueryPlugins.js | 16 +- src/js/localization.js | 163 +- src/js/main.js | 384 +- src/js/model.js | 97 +- src/js/msp.js | 496 +-- src/js/msp/MSPCodes.js | 370 +- src/js/msp/MSPConnector.js | 49 +- src/js/msp/MSPHelper.js | 3213 +++++++++-------- src/js/peripherals.js | 17 +- src/js/port_handler.js | 85 +- src/js/port_usage.js | 23 +- src/js/protocols/bluetooth.js | 115 +- src/js/protocols/websocket.js | 23 +- src/js/protocols/webstm32.js | 590 +-- src/js/protocols/webusbdfu.js | 812 +++-- src/js/receiver_msp/receiver_msp.js | 58 +- src/js/sensor_helpers.js | 23 +- src/js/serial_devices.js | 12 +- src/js/tabs/adjustments.js | 158 +- src/js/tabs/auxiliary.js | 385 +- src/js/tabs/cli.js | 216 +- src/js/tabs/configuration.js | 408 ++- src/js/tabs/failsafe.js | 198 +- src/js/tabs/firmware_flasher.js | 923 ++--- src/js/tabs/gps.js | 304 +- src/js/tabs/help.js | 13 +- src/js/tabs/landing.js | 42 +- src/js/tabs/led_strip.js | 782 ++-- src/js/tabs/logging.js | 182 +- src/js/tabs/map.js | 16 +- src/js/tabs/motors.js | 719 ++-- src/js/tabs/onboard_logging.js | 339 +- src/js/tabs/options.js | 243 +- src/js/tabs/osd.js | 2932 +++++++-------- src/js/tabs/pid_tuning.js | 1787 +++++---- src/js/tabs/ports.js | 372 +- src/js/tabs/power.js | 287 +- src/js/tabs/receiver.js | 532 +-- src/js/tabs/sensors.js | 268 +- src/js/tabs/servos.js | 129 +- src/js/tabs/setup.js | 612 ++-- src/js/tabs/setup_osd.js | 29 +- src/js/tabs/static_tab.js | 12 +- src/js/tabs/transponder.js | 314 +- src/js/tabs/vtx.js | 505 +-- src/js/usb_devices.js | 10 +- src/js/utils/AutoBackup.js | 78 +- src/js/utils/AutoDetect.js | 86 +- src/js/utils/DshotCommand.js | 11 +- src/js/utils/EscProtocols.js | 58 +- .../VtxDeviceStatus/Rtc6705DeviceStatus.js | 8 +- .../VtxDeviceStatus/SmartAudioDeviceStatus.js | 11 +- .../VtxDeviceStatus/TrampDeviceStatus.js | 8 +- .../utils/VtxDeviceStatus/VtxDeviceStatus.js | 23 +- .../VtxDeviceStatus/VtxDeviceStatusFactory.js | 31 +- .../VtxDeviceStatus/VtxMspDeviceStatus.js | 8 +- src/js/utils/checkBrowserCompatibilty.js | 34 +- src/js/utils/checkForConfiguratorUpdates.js | 30 +- src/js/utils/common.js | 22 +- src/js/utils/connection.js | 3 +- src/js/utils/css.js | 20 +- src/js/utils/generate_filename.js | 2 +- src/js/utils/isExportModeEnabled.js | 4 +- src/js/utils/showErrorDialog.js | 8 +- src/js/utils/updateTabList.js | 26 +- src/js/utils/window_watchers.js | 12 +- src/js/webSerial.js | 36 +- src/js/workers/hex_parser.js | 34 +- src/tabs/presets/CliEngine.js | 111 +- .../DetailedDialog/PresetsDetailedDialog.js | 103 +- .../DetailedDialog/PresetsDetailedDialog.less | 282 +- src/tabs/presets/FavoritePresets.js | 7 +- src/tabs/presets/PickedPreset.js | 6 +- .../PresetsRepoIndexed/PresetParser.js | 57 +- .../PresetsRepoIndexed/PresetsGithubRepo.js | 4 +- .../PresetsRepoIndexed/PresetsRepoIndexed.js | 85 +- .../presets/SourcesDialog/SourcePanel.css | 4 +- src/tabs/presets/SourcesDialog/SourcePanel.js | 9 +- .../presets/SourcesDialog/SourcesDialog.css | 3 +- .../presets/SourcesDialog/SourcesDialog.js | 45 +- .../presets/TitlePanel/PresetTitlePanel.css | 4 +- .../presets/TitlePanel/PresetTitlePanel.js | 88 +- src/tabs/presets/presets.js | 509 +-- src/tabs/presets/presets.less | 650 ++-- test/js/msp.test.js | 12 +- test/js/msp/MSPHelper.test.js | 54 +- test/tabs/cli.test.js | 27 +- 179 files changed, 20819 insertions(+), 18938 deletions(-) diff --git a/src/components/EscDshotDirection/EscDshotCommandQueue.js b/src/components/EscDshotDirection/EscDshotCommandQueue.js index 7b5b805a45..6ddc68dd77 100644 --- a/src/components/EscDshotDirection/EscDshotCommandQueue.js +++ b/src/components/EscDshotDirection/EscDshotCommandQueue.js @@ -1,22 +1,18 @@ -import MSP from '../../js/msp.js'; +import MSP from "../../js/msp.js"; -class EscDshotCommandQueue -{ - constructor (intervalMs) - { +class EscDshotCommandQueue { + constructor(intervalMs) { this._intervalId = null; this._interval = intervalMs; this._queue = []; this._purging = false; } - pushCommand(command, buffer) - { + pushCommand(command, buffer) { this._queue.push([command, buffer]); } - pushPause(milliseconds) - { + pushPause(milliseconds) { const counter = Math.ceil(milliseconds / this._interval); for (let i = 0; i < counter; i++) { @@ -24,35 +20,30 @@ class EscDshotCommandQueue } } - start() - { + start() { if (null === this._intervalId) { - this._intervalId = setInterval( - () => { this._checkQueue(); }, - this._interval); + this._intervalId = setInterval(() => { + this._checkQueue(); + }, this._interval); } } - stop() - { - if(null !== this._intervalId) { + stop() { + if (null !== this._intervalId) { clearInterval(this._intervalId); this._intervalId = null; } } - stopWhenEmpty() - { + stopWhenEmpty() { this._purging = true; } - clear() - { + clear() { this._queue = []; } - _checkQueue() - { + _checkQueue() { if (0 !== this._queue.length) { const command = this._queue.shift(); diff --git a/src/components/EscDshotDirection/EscDshotDirectionComponent.js b/src/components/EscDshotDirection/EscDshotDirectionComponent.js index 7ca68d3246..e815f7b44e 100644 --- a/src/components/EscDshotDirection/EscDshotDirectionComponent.js +++ b/src/components/EscDshotDirection/EscDshotDirectionComponent.js @@ -6,16 +6,17 @@ import FC from "../../js/fc.js"; import { getMixerImageSrc } from "../../js/utils/common.js"; import $ from "jquery"; -class EscDshotDirectionComponent -{ - constructor(contentDiv, onLoadedCallback, motorConfig) - { +class EscDshotDirectionComponent { + constructor(contentDiv, onLoadedCallback, motorConfig) { this._buttonTimeoutMs = 400; const motorDriverQueueIntervalMs = 100; const motorDriverStopMotorsPauseMs = 400; - this._motorDriver = new EscDshotDirectionMotorDriver(motorConfig, - motorDriverQueueIntervalMs, motorDriverStopMotorsPauseMs); + this._motorDriver = new EscDshotDirectionMotorDriver( + motorConfig, + motorDriverQueueIntervalMs, + motorDriverStopMotorsPauseMs, + ); this._escProtocolIsDshot = motorConfig.escProtocolIsDshot; this._numberOfMotors = motorConfig.numberOfMotors; this._contentDiv = contentDiv; @@ -27,28 +28,30 @@ class EscDshotDirectionComponent this._spinDirectionToggleIsActive = true; this._activationButtonTimeoutId = null; - this._contentDiv.load("./components/EscDshotDirection/Body.html", () => - { + this._contentDiv.load("./components/EscDshotDirection/Body.html", () => { this._initializeDialog(); }); } - static get PUSHED_BUTTON_CLASS() { return "pushed"; } - static get HIGHLIGHTED_BUTTON_CLASS() { return "highlighted"; } - static get RED_TEXT_CLASS() { return "red-text"; } + static get PUSHED_BUTTON_CLASS() { + return "pushed"; + } + static get HIGHLIGHTED_BUTTON_CLASS() { + return "highlighted"; + } + static get RED_TEXT_CLASS() { + return "red-text"; + } - static get _BUTTON_PUSH_DOWN_EVENT_TYPE() - { + static get _BUTTON_PUSH_DOWN_EVENT_TYPE() { return "mousedown"; } - static get _BUTTON_RELEASE_EVENT_TYPE() - { + static get _BUTTON_RELEASE_EVENT_TYPE() { return "mouseup mouseout"; } - _readDom() - { + _readDom() { this._domAgreeSafetyCheckBox = $("#escDshotDirectionDialog-safetyCheckbox"); this._domStartButton = $("#escDshotDirectionDialog-Start"); this._domStartWizardButton = $("#escDshotDirectionDialog-StartWizard"); @@ -83,8 +86,7 @@ class EscDshotDirectionComponent this._secondHintText = i18n.getMessage("escDshotDirectionDialog-SetDirectionHint"); } - _initializeDialog() - { + _initializeDialog() { this._readDom(); this._createMotorButtons(); this._createWizardMotorButtons(); @@ -94,7 +96,7 @@ class EscDshotDirectionComponent this._resetGui(); this._domAgreeSafetyCheckBox.on("change", () => { - const enabled = this._domAgreeSafetyCheckBox.is(':checked'); + const enabled = this._domAgreeSafetyCheckBox.is(":checked"); this._domStartNormalBlock.toggle(enabled); this._domStartWizardBlock.toggle(enabled); }); @@ -116,23 +118,27 @@ class EscDshotDirectionComponent }); const imgSrc = getMixerImageSrc(FC.MIXER_CONFIG.mixer, FC.MIXER_CONFIG.reverseMotorDir, FC.CONFIG.apiVersion); - this._domMixerImg.attr('src', imgSrc); + this._domMixerImg.attr("src", imgSrc); this._onLoadedCallback(); } - _activateNormalReverseButtons(timeoutMs) - { + _activateNormalReverseButtons(timeoutMs) { this._activationButtonTimeoutId = setTimeout(() => { - this._subscribeDirectionSpinButton(this._domSpinNormalButton, - DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_1, this._normalText); - this._subscribeDirectionSpinButton(this._domSpinReverseButton, - DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_2, this._reverseText); + this._subscribeDirectionSpinButton( + this._domSpinNormalButton, + DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_1, + this._normalText, + ); + this._subscribeDirectionSpinButton( + this._domSpinReverseButton, + DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_2, + this._reverseText, + ); }, timeoutMs); } - _deactivateNormalReverseButtons() - { + _deactivateNormalReverseButtons() { if (null !== this._activationButtonTimeoutId) { clearTimeout(this._activationButtonTimeoutId); } @@ -141,8 +147,7 @@ class EscDshotDirectionComponent this._domSpinReverseButton.off(); } - _subscribeDirectionSpinButton(button, direction, buttonText) - { + _subscribeDirectionSpinButton(button, direction, buttonText) { button.on(EscDshotDirectionComponent._BUTTON_PUSH_DOWN_EVENT_TYPE, () => { this._sendCurrentEscSpinDirection(direction); this._motorIsSpinning = true; @@ -168,13 +173,11 @@ class EscDshotDirectionComponent }); } - _sendCurrentEscSpinDirection(direction) - { + _sendCurrentEscSpinDirection(direction) { this._motorDriver.setEscSpinDirection(this._selectedMotor, direction); } - _createMotorButtons() - { + _createMotorButtons() { this._motorButtons = {}; for (let i = 0; i < this._numberOfMotors; i++) { @@ -184,9 +187,10 @@ class EscDshotDirectionComponent this._addMotorButton("All", DshotCommand.ALL_MOTORS); } - _addMotorButton(buttonText, motorIndex) - { - const button = $(``).text(buttonText); + _addMotorButton(buttonText, motorIndex) { + const button = $( + ``, + ).text(buttonText); this._domMotorButtonsBlock.append(button); this._motorButtons[motorIndex] = button; @@ -214,8 +218,7 @@ class EscDshotDirectionComponent }); } - _createWizardMotorButtons() - { + _createWizardMotorButtons() { this._wizardMotorButtons = {}; for (let i = 0; i < this._numberOfMotors; i++) { @@ -223,8 +226,7 @@ class EscDshotDirectionComponent } } - _activateWizardMotorButtons(timeoutMs) - { + _activateWizardMotorButtons(timeoutMs) { this._activationButtonTimeoutId = setTimeout(() => { for (let i = 0; i < this._numberOfMotors; i++) { this._activateWizardMotorButton(i); @@ -232,37 +234,32 @@ class EscDshotDirectionComponent }, timeoutMs); } - _deactivateWizardMotorButtons() - { - if (null !== this._activationButtonTimeoutId) - { + _deactivateWizardMotorButtons() { + if (null !== this._activationButtonTimeoutId) { clearTimeout(this._activationButtonTimeoutId); } for (let i = 0; i < this._numberOfMotors; i++) { - const button = this._wizardMotorButtons[i]; + const button = this._wizardMotorButtons[i]; button.off(); } } - _addWizardMotorButton(buttonText, motorIndex) - { + _addWizardMotorButton(buttonText, motorIndex) { const button = $(``).text(buttonText); this._domWizardMotorButtonsBlock.append(button); this._wizardMotorButtons[motorIndex] = button; } - _activateWizardMotorButton(motorIndex) - { - const button = this._wizardMotorButtons[motorIndex]; + _activateWizardMotorButton(motorIndex) { + const button = this._wizardMotorButtons[motorIndex]; button.on("click", () => { this._wizardMotorButtonClick(button, motorIndex); }); } - _wizardMotorButtonClick(button, motorIndex) - { + _wizardMotorButtonClick(button, motorIndex) { this._deactivateWizardMotorButtons(); const currentlyDown = button.hasClass(EscDshotDirectionComponent.PUSHED_BUTTON_CLASS); @@ -277,8 +274,7 @@ class EscDshotDirectionComponent this._activateWizardMotorButtons(this._buttonTimeoutMs); } - _changeSelectedMotor(newIndex) - { + _changeSelectedMotor(newIndex) { if (this._selectedMotor >= 0) { this._motorButtons[this._selectedMotor].addClass(EscDshotDirectionComponent.PUSHED_BUTTON_CLASS); } @@ -290,29 +286,26 @@ class EscDshotDirectionComponent } } - close() - { + close() { this._motorDriver.stopAllMotorsNow(); this._motorDriver.deactivate(); this._resetGui(); } - _resetGui() - { + _resetGui() { this._toggleMainContent(false); this._domStartNormalBlock.hide(); this._domStartWizardBlock.hide(); - this._domAgreeSafetyCheckBox.prop('checked', false); - this._domAgreeSafetyCheckBox.trigger('change'); + this._domAgreeSafetyCheckBox.prop("checked", false); + this._domAgreeSafetyCheckBox.trigger("change"); this._domSecondActionDiv.toggle(false); this._changeSelectedMotor(-1); this._checkForConfigurationErrors(); } - _checkForConfigurationErrors() - { + _checkForConfigurationErrors() { let anyError = false; this._domWrongProtocolMessage.hide(); @@ -340,17 +333,14 @@ class EscDshotDirectionComponent } } - - _onStartButtonClicked() - { + _onStartButtonClicked() { this._toggleMainContent(true); this._domWizardBlock.toggle(false); this._domNormalDialogBlock.toggle(true); this._motorDriver.activate(); } - _onStartWizardButtonClicked() - { + _onStartWizardButtonClicked() { this._domSpinningWizard.toggle(false); this._domSpinWizardButton.toggle(true); this._toggleMainContent(true); @@ -359,13 +349,15 @@ class EscDshotDirectionComponent this._motorDriver.activate(); } - _onSpinWizardButtonClicked() - { + _onSpinWizardButtonClicked() { for (let i = 0; i < this._numberOfMotors; i++) { this._wizardMotorButtons[i].removeClass(EscDshotDirectionComponent.PUSHED_BUTTON_CLASS); } - this._motorDriver.setEscSpinDirection(DshotCommand.ALL_MOTORS, DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_1); + this._motorDriver.setEscSpinDirection( + DshotCommand.ALL_MOTORS, + DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_1, + ); this._domSpinWizardButton.toggle(false); this._domSpinningWizard.toggle(true); @@ -374,21 +366,18 @@ class EscDshotDirectionComponent this._activateWizardMotorButtons(0); } - _onStopWizardButtonClicked() - { + _onStopWizardButtonClicked() { this._domSpinWizardButton.toggle(true); this._domSpinningWizard.toggle(false); this._motorDriver.stopAllMotorsNow(); this._deactivateWizardMotorButtons(); } - _toggleMainContent(value) - { + _toggleMainContent(value) { this._domWarningContentBlock.toggle(!value); this._domMainContentBlock.toggle(value); this._domConfigErrors.toggle(false); } - } export default EscDshotDirectionComponent; diff --git a/src/components/EscDshotDirection/EscDshotDirectionMotorDriver.js b/src/components/EscDshotDirection/EscDshotDirectionMotorDriver.js index ef2387dde7..4cc2092804 100644 --- a/src/components/EscDshotDirection/EscDshotDirectionMotorDriver.js +++ b/src/components/EscDshotDirection/EscDshotDirectionMotorDriver.js @@ -1,12 +1,10 @@ -import EscDshotCommandQueue from './EscDshotCommandQueue.js'; -import DshotCommand from '../../js/utils/DshotCommand.js'; -import MSPCodes from '../../js/msp/MSPCodes.js'; +import EscDshotCommandQueue from "./EscDshotCommandQueue.js"; +import DshotCommand from "../../js/utils/DshotCommand.js"; +import MSPCodes from "../../js/msp/MSPCodes.js"; import { gui_log } from "../../js/gui_log"; -class EscDshotDirectionMotorDriver -{ - constructor(motorConfig, motorDriverQueueIntervalMs, motorDriverStopMotorsPauseMs) - { +class EscDshotDirectionMotorDriver { + constructor(motorConfig, motorDriverQueueIntervalMs, motorDriverStopMotorsPauseMs) { this._numberOfMotors = motorConfig.numberOfMotors; this._motorStopValue = motorConfig.motorStopValue; this._motorSpinValue = motorConfig.motorSpinValue; @@ -14,8 +12,7 @@ class EscDshotDirectionMotorDriver this._state = []; - for (let i = 0; i < this._numberOfMotors; i++) - { + for (let i = 0; i < this._numberOfMotors; i++) { this._state.push(this._motorStopValue); } @@ -24,45 +21,36 @@ class EscDshotDirectionMotorDriver this._EscDshotCommandQueue = new EscDshotCommandQueue(motorDriverQueueIntervalMs); } - activate() - { + activate() { this._EscDshotCommandQueue.start(); } - deactivate() - { + deactivate() { this._EscDshotCommandQueue.stopWhenEmpty(); } - stopMotor(motorIndex) - { + stopMotor(motorIndex) { this._spinMotor(motorIndex, this._motorStopValue); } - - spinMotor(motorIndex) - { + spinMotor(motorIndex) { this._spinMotor(motorIndex, this._motorSpinValue); } - spinAllMotors() - { + spinAllMotors() { this._spinAllMotors(this._motorSpinValue); } - stopAllMotors() - { + stopAllMotors() { this._spinAllMotors(this._motorStopValue); } - stopAllMotorsNow() - { + stopAllMotorsNow() { this._EscDshotCommandQueue.clear(); this._spinAllMotors(this._motorStopValue); } - setEscSpinDirection(motorIndex, direction) - { + setEscSpinDirection(motorIndex, direction) { let needStopMotor = false; if (DshotCommand.ALL_MOTORS === motorIndex) { @@ -83,23 +71,20 @@ class EscDshotDirectionMotorDriver } } - _pushState() - { + _pushState() { const state = [...this._state]; this._stateStack.push(state); } - _popState() - { + _popState() { const state = this._stateStack.pop(); this._state = [...state]; } - _isAnythingSpinning() - { + _isAnythingSpinning() { let result = false; - for (let i = 0; i < this._numberOfMotors; i++) { + for (let i = 0; i < this._numberOfMotors; i++) { if (this._motorStopValue !== this._state[i]) { result = true; break; @@ -109,13 +94,11 @@ class EscDshotDirectionMotorDriver return result; } - _isMotorSpinning(motorIndex) - { - return (this._motorStopValue !== this._state[motorIndex]); + _isMotorSpinning(motorIndex) { + return this._motorStopValue !== this._state[motorIndex]; } - _sendEscSpinDirection(motorIndex, direction) - { + _sendEscSpinDirection(motorIndex, direction) { const buffer = []; buffer.push8(DshotCommand.dshotCommandType_e.DSHOT_CMD_TYPE_BLOCKING); buffer.push8(motorIndex); @@ -126,22 +109,21 @@ class EscDshotDirectionMotorDriver let logString = ""; if (motorIndex === DshotCommand.ALL_MOTORS) { - logString += i18n.getMessage('motorsText'); + logString += i18n.getMessage("motorsText"); } else { - const motorNumber = motorIndex+1; + const motorNumber = motorIndex + 1; logString += i18n.getMessage(`motorNumber${motorNumber}`); } - logString += ': '; + logString += ": "; if (direction === DshotCommand.dshotCommands_e.DSHOT_CMD_SPIN_DIRECTION_1) { - logString += i18n.getMessage('escDshotDirectionDialog-CommandNormal'); + logString += i18n.getMessage("escDshotDirectionDialog-CommandNormal"); } else { - logString += i18n.getMessage('escDshotDirectionDialog-CommandReverse'); + logString += i18n.getMessage("escDshotDirectionDialog-CommandReverse"); } gui_log(logString); } - _spinMotor(motorIndex, value) - { + _spinMotor(motorIndex, value) { if (DshotCommand.ALL_MOTORS === motorIndex) { this._spinAllMotors(value); } else { @@ -150,26 +132,23 @@ class EscDshotDirectionMotorDriver } } - _spinAllMotors(value) - { - for (let i = 0; i < this._numberOfMotors; i++) { + _spinAllMotors(value) { + for (let i = 0; i < this._numberOfMotors; i++) { this._state[i] = value; } this._sendState(); } - _sendState() - { + _sendState() { const buffer = []; - for (let i = 0; i < this._numberOfMotors; i++) { + for (let i = 0; i < this._numberOfMotors; i++) { buffer.push16(this._state[i]); } this._EscDshotCommandQueue.pushCommand(MSPCodes.MSP_SET_MOTOR, buffer); } - } export default EscDshotDirectionMotorDriver; diff --git a/src/components/EscDshotDirection/Styles.css b/src/components/EscDshotDirection/Styles.css index 5d0f09b9d7..99b9f95a9b 100644 --- a/src/components/EscDshotDirection/Styles.css +++ b/src/components/EscDshotDirection/Styles.css @@ -4,7 +4,7 @@ flex-flow: column; } -.escDshotDirection-Component .regular-button{ +.escDshotDirection-Component .regular-button { -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; @@ -49,7 +49,7 @@ } .escDshotDirectionDialogInformationNotice { - font-size: 1.0em; + font-size: 1em; margin-bottom: 1.5em; margin-top: 1.5em; } @@ -78,23 +78,28 @@ } #escDshotDirectionDialog-MainContent .red-text { - color: #EE0000; + color: #ee0000; } -#escDshotDirectionDialog-ActionHint, #escDshotDirectionDialog-SecondHint, #escDshotDirectionDialog-WizardActionHint { +#escDshotDirectionDialog-ActionHint, +#escDshotDirectionDialog-SecondHint, +#escDshotDirectionDialog-WizardActionHint { margin-top: 10px; } -#escDshotDirectionDialog-ActionHintSafety, #escDshotDirectionDialog-SecondHintSafety { +#escDshotDirectionDialog-ActionHintSafety, +#escDshotDirectionDialog-SecondHintSafety { margin-top: 0px; } -#escDshotDirectionDialog-SelectMotorButtonsWrapper, #escDshotDirectionDialog-WizardMotorButtons { +#escDshotDirectionDialog-SelectMotorButtonsWrapper, +#escDshotDirectionDialog-WizardMotorButtons { margin-left: auto; margin-right: auto; } -#escDshotDirectionDialog-SelectMotorButtonsWrapper .regular-button, #escDshotDirectionDialog-WizardMotorButtons .regular-button { +#escDshotDirectionDialog-SelectMotorButtonsWrapper .regular-button, +#escDshotDirectionDialog-WizardMotorButtons .regular-button { font-size: 15px; line-height: 34px; padding: 0px; @@ -140,7 +145,6 @@ margin-right: 5px; } - .escDshotDirectionErrorTextBlock { margin-top: 12px; font-weight: 500; @@ -150,7 +154,8 @@ display: contents; } -#escDshotDirectionDialog-SpinWizard, #escDshotDirectionDialog-StopWizard { +#escDshotDirectionDialog-SpinWizard, +#escDshotDirectionDialog-StopWizard { margin-left: auto; margin-right: auto; width: 160px; diff --git a/src/components/MotorOutputReordering/MotorOutputReorderingCanvas.js b/src/components/MotorOutputReordering/MotorOutputReorderingCanvas.js index 92cfffc955..1fe5042dd7 100644 --- a/src/components/MotorOutputReordering/MotorOutputReorderingCanvas.js +++ b/src/components/MotorOutputReordering/MotorOutputReorderingCanvas.js @@ -1,9 +1,7 @@ -import MotorOutputReorderConfig from './MotorOutputReorderingConfig'; +import MotorOutputReorderConfig from "./MotorOutputReorderingConfig"; -export default class MotorOutputReorderCanvas -{ - constructor(canvas, droneConfiguration, motorClickCallback, spinMotorCallback) - { +export default class MotorOutputReorderCanvas { + constructor(canvas, droneConfiguration, motorClickCallback, spinMotorCallback) { this._spinMotorCallback = spinMotorCallback; this._canvas = canvas; this._motorClickCallback = motorClickCallback; @@ -24,51 +22,42 @@ export default class MotorOutputReorderCanvas this._ctx = this._canvas[0].getContext("2d"); this._ctx.translate(this._width / 2, this._height / 2); - this._canvas.mousemove((event) => - { + this._canvas.mousemove((event) => { this._onMouseMove(event); }); - this._canvas.mouseleave(() => - { + this._canvas.mouseleave(() => { this._onMouseLeave(); }); - this._canvas.mousedown(() => - { + this._canvas.mousedown(() => { this._onMouseDown(); }); - this._canvas.mouseup(() => - { + this._canvas.mouseup(() => { this._onMouseUp(event); }); - this._canvas.click(() => - { + this._canvas.click(() => { this._onMouseClick(); }); this.startOver(); } - pause() - { + pause() { this._keepDrawing = false; } - startOver() - { + startOver() { this.readyMotors = []; //motors that already being selected for remapping by user this.remappingReady = false; this._motorIndexToSpinOnMouseDown = -1; this._keepDrawing = true; - this._mouse = {x : 0, y: 0}; - window.requestAnimationFrame(() => - { + this._mouse = { x: 0, y: 0 }; + window.requestAnimationFrame(() => { this._drawOnce(); }); } - _drawOnce() - { - this._ctx.clearRect(-this._width / 2, -this._height / 2, this._width, this._height); + _drawOnce() { + this._ctx.clearRect(-this._width / 2, -this._height / 2, this._width, this._height); this._drawBottomMotors(); this._drawFrame(); @@ -77,15 +66,13 @@ export default class MotorOutputReorderCanvas this._drawTopMotors(); if (this._keepDrawing) { - window.requestAnimationFrame(() => - { + window.requestAnimationFrame(() => { this._drawOnce(); }); } } - _onMouseDown() - { + _onMouseDown() { if (this.remappingReady) { this._motorIndexToSpinOnMouseDown = this._getMouseHoverMotorIndex(); @@ -95,8 +82,7 @@ export default class MotorOutputReorderCanvas } } - _onMouseUp() - { + _onMouseUp() { if (-1 !== this._motorIndexToSpinOnMouseDown) { this._motorIndexToSpinOnMouseDown = -1; @@ -106,8 +92,7 @@ export default class MotorOutputReorderCanvas } } - _onMouseClick() - { + _onMouseClick() { const motorIndex = this._getMouseHoverMotorIndex(); if (this._motorClickCallback && -1 !== motorIndex && !this.readyMotors.includes(motorIndex)) { @@ -115,15 +100,13 @@ export default class MotorOutputReorderCanvas } } - _onMouseMove(event) - { + _onMouseMove(event) { const boundingRect = this._canvas[0].getBoundingClientRect(); this._mouse.x = event.clientX - boundingRect.left - this._width / 2; this._mouse.y = event.clientY - boundingRect.top - this._height / 2; } - _onMouseLeave() - { + _onMouseLeave() { this._mouse.x = Number.MIN_SAFE_INTEGER; this._mouse.y = Number.MIN_SAFE_INTEGER; @@ -136,8 +119,7 @@ export default class MotorOutputReorderCanvas } } - _markMotors() - { + _markMotors() { const motors = this._config[this._droneConfiguration].Motors; const mouseHoverMotorIndex = this._getMouseHoverMotorIndex(); @@ -145,7 +127,13 @@ export default class MotorOutputReorderCanvas for (let i = 0; i < this.readyMotors.length; i++) { const motorIndex = this.readyMotors[i]; this._ctx.beginPath(); - this._ctx.arc(motors[motorIndex].x, motors[motorIndex].y, this._config[this._droneConfiguration].PropRadius, 0, 2 * Math.PI); + this._ctx.arc( + motors[motorIndex].x, + motors[motorIndex].y, + this._config[this._droneConfiguration].PropRadius, + 0, + 2 * Math.PI, + ); this._ctx.closePath(); this._ctx.fillStyle = this._config.MotorReadyColor; this._ctx.fill(); @@ -153,7 +141,13 @@ export default class MotorOutputReorderCanvas if (-1 !== mouseHoverMotorIndex && !this.readyMotors.includes(mouseHoverMotorIndex)) { this._ctx.beginPath(); - this._ctx.arc(motors[mouseHoverMotorIndex].x, motors[mouseHoverMotorIndex].y, this._config[this._droneConfiguration].PropRadius, 0, 2 * Math.PI); + this._ctx.arc( + motors[mouseHoverMotorIndex].x, + motors[mouseHoverMotorIndex].y, + this._config[this._droneConfiguration].PropRadius, + 0, + 2 * Math.PI, + ); this._ctx.closePath(); this._ctx.fillStyle = this._config.MotorMouseHoverColor; this._ctx.fill(); @@ -170,15 +164,20 @@ export default class MotorOutputReorderCanvas } this._ctx.beginPath(); - this._ctx.arc(motors[i].x, motors[i].y, this._config[this._droneConfiguration].PropRadius, 0, 2 * Math.PI); + this._ctx.arc( + motors[i].x, + motors[i].y, + this._config[this._droneConfiguration].PropRadius, + 0, + 2 * Math.PI, + ); this._ctx.closePath(); this._ctx.fill(); } } } - _getMouseHoverMotorIndex() - { + _getMouseHoverMotorIndex() { const x = this._mouse.x; const y = this._mouse.y; @@ -194,50 +193,47 @@ export default class MotorOutputReorderCanvas currentDist = dist; result = i; - if ('top' in motors[i]) { + if ("top" in motors[i]) { resultTopMotors = i; } } } - if (resultTopMotors > -1) { // priority for top motors + if (resultTopMotors > -1) { + // priority for top motors result = resultTopMotors; } return result; } - _drawTopMotors() - { + _drawTopMotors() { this._drawMotors(false); } - _drawBottomMotors() - { + _drawBottomMotors() { this._drawMotors(true); this._clipTopMotors(); } - _clipTopMotors() - { + _clipTopMotors() { const motors = this._config[this._droneConfiguration].Motors; for (let i = 0; i < motors.length; i++) { - if ('top' in motors[i]) { + if ("top" in motors[i]) { this._clipSingleMotor(i); } } } - _drawMotors(drawBottom) - { + _drawMotors(drawBottom) { this._ctx.lineWidth = this._config.PropEdgeLineWidth; this._ctx.strokeStyle = this._config.PropEdgeColor; const motors = this._config[this._droneConfiguration].Motors; this._ctx.fillStyle = this._config.PropColor; for (let i = 0; i < motors.length; i++) { - const drawCurrentMotor = 'bottom' in motors[i] === drawBottom; + const drawCurrentMotor = "bottom" in motors[i] === drawBottom; if (drawCurrentMotor) { this._drawSingleMotor(i); @@ -245,8 +241,7 @@ export default class MotorOutputReorderCanvas } } - _clipSingleMotor(motorIndex) - { + _clipSingleMotor(motorIndex) { this._ctx.save(); const motor = this._config[this._droneConfiguration].Motors[motorIndex]; this._ctx.beginPath(); @@ -258,22 +253,19 @@ export default class MotorOutputReorderCanvas this._ctx.restore(); } - _drawSingleMotor(motorIndex) - { + _drawSingleMotor(motorIndex) { this._ctx.beginPath(); this._arcSingleMotor(motorIndex); this._ctx.stroke(); this._ctx.closePath(); } - _arcSingleMotor(motorIndex) - { + _arcSingleMotor(motorIndex) { const motor = this._config[this._droneConfiguration].Motors[motorIndex]; this._ctx.arc(motor.x, motor.y, this._config[this._droneConfiguration].PropRadius, 0, 2 * Math.PI); } - _drawDirectionArrow() - { + _drawDirectionArrow() { this._ctx.beginPath(); this._ctx.moveTo(this._config.DirectionArrowPoints[0].x, this._config.DirectionArrowPoints[0].y); @@ -286,15 +278,14 @@ export default class MotorOutputReorderCanvas this._ctx.fill(); } - _drawFrame() - { + _drawFrame() { this._ctx.beginPath(); this._ctx.lineWidth = this._config[this._droneConfiguration].ArmWidth; this._ctx.lineCap = "round"; this._ctx.strokeStyle = this._config.FrameColor; const motors = this._config[this._droneConfiguration].Motors; - switch(this._droneConfiguration) { + switch (this._droneConfiguration) { case "Quad X": case "Quad +": case "Octo X8": @@ -369,7 +360,7 @@ export default class MotorOutputReorderCanvas this._ctx.moveTo(motors[0].x, motors[0].y); this._ctx.lineTo(motors[0].x, motors[1].y); break; - } + } this._ctx.stroke(); } diff --git a/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js b/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js index 358954f614..90bc950878 100644 --- a/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js +++ b/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js @@ -10,10 +10,8 @@ import { i18n } from "../../js/localization"; import GUI, { TABS } from "../../js/gui"; import $ from "jquery"; -export default class MotorOutputReorderComponent -{ - constructor(contentDiv, onLoadedCallback, droneConfiguration, motorStopValue, motorSpinValue) - { +export default class MotorOutputReorderComponent { + constructor(contentDiv, onLoadedCallback, droneConfiguration, motorStopValue, motorSpinValue) { this._contentDiv = contentDiv; this._onLoadedCallback = onLoadedCallback; this._droneConfiguration = droneConfiguration; @@ -26,94 +24,86 @@ export default class MotorOutputReorderComponent this._currentSpinningMotor = -1; - this._contentDiv.load("./components/MotorOutputReordering/Body.html", () => - { + this._contentDiv.load("./components/MotorOutputReordering/Body.html", () => { this._setupdialog(); }); } - _readDom() - { - this._domAgreeSafetyCheckBox = $('#motorsEnableTestMode-dialogMotorOutputReorder'); - this._domStartButton = $('#dialogMotorOutputReorderAgreeButton'); - this._domStartOverButton = $('#motorsRemapDialogStartOver'); - this._domSaveButton = $('#motorsRemapDialogSave'); - this._domMainContentBlock = $('#dialogMotorOutputReorderMainContent'); - this._domWarningContentBlock = $('#dialogMotorOutputReorderWarning'); - this._domActionHintBlock = $('#motorOutputReorderActionHint'); - this._domCanvas = $('#motorOutputReorderCanvas'); + _readDom() { + this._domAgreeSafetyCheckBox = $("#motorsEnableTestMode-dialogMotorOutputReorder"); + this._domStartButton = $("#dialogMotorOutputReorderAgreeButton"); + this._domStartOverButton = $("#motorsRemapDialogStartOver"); + this._domSaveButton = $("#motorsRemapDialogSave"); + this._domMainContentBlock = $("#dialogMotorOutputReorderMainContent"); + this._domWarningContentBlock = $("#dialogMotorOutputReorderWarning"); + this._domActionHintBlock = $("#motorOutputReorderActionHint"); + this._domCanvas = $("#motorOutputReorderCanvas"); } - _setupdialog() - { + _setupdialog() { i18n.localizePage(); this._readDom(); this._resetGui(); - this._domAgreeSafetyCheckBox.change(() => - { - const enabled = this._domAgreeSafetyCheckBox.is(':checked'); + this._domAgreeSafetyCheckBox.change(() => { + const enabled = this._domAgreeSafetyCheckBox.is(":checked"); this._domStartButton.toggle(enabled); }); - this._domStartButton.click(() => - { + this._domStartButton.click(() => { this._onStartButtonClicked(); }); - this._domStartOverButton.click(() => - { + this._domStartOverButton.click(() => { this._startOver(); }); - this._domSaveButton.click(() => - { + this._domSaveButton.click(() => { this._save(); }); this._onLoadedCallback(); } - close() - { + close() { this._stopAnyMotorJerking(); this._stopMotor(); this._stopUserInteraction(); this._resetGui(); } - _resetGui() - { + _resetGui() { this._domMainContentBlock.hide(); this._domWarningContentBlock.show(); this._domStartButton.hide(); - this._domAgreeSafetyCheckBox.prop('checked', false); + this._domAgreeSafetyCheckBox.prop("checked", false); this._domAgreeSafetyCheckBox.change(); this._showSaveStartOverButtons(false); } - _save() - { - function save_to_eeprom() - { + _save() { + function save_to_eeprom() { MSP.send_message(MSPCodes.MSP_EEPROM_WRITE, false, false, reboot); } - function reboot() - { - gui_log(i18n.getMessage('configurationEepromSaved')); - GUI.tab_switch_cleanup(() => MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false, reinitializeConnection(TABS.motors))); + function reboot() { + gui_log(i18n.getMessage("configurationEepromSaved")); + GUI.tab_switch_cleanup(() => + MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false, reinitializeConnection(TABS.motors)), + ); } FC.MOTOR_OUTPUT_ORDER = Array.from(this._newMotorOutputReorder); - MSP.send_message(MSPCodes.MSP2_SET_MOTOR_OUTPUT_REORDERING, mspHelper.crunch(MSPCodes.MSP2_SET_MOTOR_OUTPUT_REORDERING)); + MSP.send_message( + MSPCodes.MSP2_SET_MOTOR_OUTPUT_REORDERING, + mspHelper.crunch(MSPCodes.MSP2_SET_MOTOR_OUTPUT_REORDERING), + ); save_to_eeprom(); } - _calculateNewMotorOutputReorder() - { + _calculateNewMotorOutputReorder() { this._newMotorOutputReorder = []; for (let i = 0; i < this.motorOutputReorderCanvas.readyMotors.length; i++) { @@ -121,19 +111,16 @@ export default class MotorOutputReorderComponent } } - _remapMotorIndex(motorIndex) - { + _remapMotorIndex(motorIndex) { return FC.MOTOR_OUTPUT_ORDER[this.motorOutputReorderCanvas.readyMotors.indexOf(motorIndex)]; } - _startOver() - { + _startOver() { this._showSaveStartOverButtons(false); this._startUserInteraction(); } - _showSaveStartOverButtons(show) - { + _showSaveStartOverButtons(show) { if (show) { this._domStartOverButton.show(); this._domSaveButton.show(); @@ -143,34 +130,32 @@ export default class MotorOutputReorderComponent } } - _onStartButtonClicked() - { + _onStartButtonClicked() { this._domActionHintBlock.text(i18n.getMessage("motorOutputReorderDialogSelectSpinningMotor")); this._domWarningContentBlock.hide(); this._domMainContentBlock.show(); this._startUserInteraction(); } - _stopUserInteraction() - { + _stopUserInteraction() { if (this.motorOutputReorderCanvas) { this.motorOutputReorderCanvas.pause(); } } - _startUserInteraction() - { + _startUserInteraction() { if (this.motorOutputReorderCanvas) { this.motorOutputReorderCanvas.startOver(); } else { - this.motorOutputReorderCanvas = new MotorOutputReorderCanvas(this._domCanvas, + this.motorOutputReorderCanvas = new MotorOutputReorderCanvas( + this._domCanvas, this._droneConfiguration, - (motorIndex) => - { // motor click callback + (motorIndex) => { + // motor click callback this._onMotorClick(motorIndex); }, - (motorIndex) => - { // motor spin callback + (motorIndex) => { + // motor spin callback let indexToSpin = -1; if (-1 !== motorIndex) { @@ -185,8 +170,7 @@ export default class MotorOutputReorderComponent this._startMotorJerking(0); } - _stopAnyMotorJerking() - { + _stopAnyMotorJerking() { if (-1 !== this._currentJerkingTimeout) { clearTimeout(this._currentJerkingTimeout); this._currentJerkingTimeout = -1; @@ -196,38 +180,31 @@ export default class MotorOutputReorderComponent this._currentJerkingMotor = -1; } - _startMotorJerking(motorIndex) - { + _startMotorJerking(motorIndex) { this._stopAnyMotorJerking(); this._currentJerkingMotor = motorIndex; this._motorStartTimeout(motorIndex); } - _motorStartTimeout(motorIndex) - { + _motorStartTimeout(motorIndex) { this._spinMotor(motorIndex); - this._currentJerkingTimeout = setTimeout(() => - { + this._currentJerkingTimeout = setTimeout(() => { this._motorStopTimeout(motorIndex); }, 250); } - _motorStopTimeout(motorIndex) - { + _motorStopTimeout(motorIndex) { this._spinMotor(-1); - this._currentJerkingTimeout = setTimeout(() => - { + this._currentJerkingTimeout = setTimeout(() => { this._motorStartTimeout(motorIndex); }, 500); } - - _spinMotor(motorIndex) - { + _spinMotor(motorIndex) { this._currentSpinningMotor = motorIndex; const buffer = []; - for (let i = 0; i < this._config[this._droneConfiguration].Motors.length; i++) { + for (let i = 0; i < this._config[this._droneConfiguration].Motors.length; i++) { if (i === motorIndex) { buffer.push16(this._motorSpinValue); } else { @@ -238,17 +215,15 @@ export default class MotorOutputReorderComponent MSP.send_message(MSPCodes.MSP_SET_MOTOR, buffer); } - _stopMotor() - { + _stopMotor() { if (-1 !== this._currentSpinningMotor) { this._spinMotor(-1); } } - _onMotorClick(motorIndex) - { + _onMotorClick(motorIndex) { this.motorOutputReorderCanvas.readyMotors.push(motorIndex); - this._currentJerkingMotor ++; + this._currentJerkingMotor++; if (this._currentJerkingMotor < this._config[this._droneConfiguration].Motors.length) { this._startMotorJerking(this._currentJerkingMotor); diff --git a/src/components/MotorOutputReordering/MotorOutputReorderingConfig.js b/src/components/MotorOutputReordering/MotorOutputReorderingConfig.js index 8db12dd728..df98b29507 100644 --- a/src/components/MotorOutputReordering/MotorOutputReorderingConfig.js +++ b/src/components/MotorOutputReordering/MotorOutputReorderingConfig.js @@ -1,91 +1,80 @@ -export default class MotorOutputReorderConfig -{ - constructor (screenSize) - { - this.FrameColor = 'rgb(186, 186, 186)'; - this.PropEdgeColor = 'rgb(255, 187, 0)'; - this.PropColor = 'rgb(186, 186, 186, 0.4)'; +export default class MotorOutputReorderConfig { + constructor(screenSize) { + this.FrameColor = "rgb(186, 186, 186)"; + this.PropEdgeColor = "rgb(255, 187, 0)"; + this.PropColor = "rgb(186, 186, 186, 0.4)"; this.PropEdgeLineWidth = 3; this.MotorNumberTextFont = `${screenSize * 0.1}px 'Open Sans', 'Segoe UI', Tahoma, sans-serif`; - this.MotorNumberTextColor = 'rgb(0, 0, 0)'; - this.MotorMouseHoverColor = 'rgba(255, 187, 0, 0.4)'; - this.MotorSpinningColor = 'rgba(255, 0, 0, 0.4)'; - this.MotorReadyColor = 'rgba(0,128,0,0.4)'; + this.MotorNumberTextColor = "rgb(0, 0, 0)"; + this.MotorMouseHoverColor = "rgba(255, 187, 0, 0.4)"; + this.MotorSpinningColor = "rgba(255, 0, 0, 0.4)"; + this.MotorReadyColor = "rgba(0,128,0,0.4)"; - this.ArrowColor = 'rgb(182,67,67)'; + this.ArrowColor = "rgb(182,67,67)"; this.DirectionArrowPoints = [ - {x: -0.03 * screenSize, y: 0.11 * screenSize}, - {x: -0.03 * screenSize, y: -0.01 * screenSize}, - {x: -0.07 * screenSize, y: -0.01 * screenSize}, - {x: 0.0 * screenSize, y: -0.13 * screenSize}, - {x: 0.07 * screenSize, y: -0.01 * screenSize}, - {x: 0.03 * screenSize, y: -0.01 * screenSize}, - {x: 0.03 * screenSize, y: 0.11 * screenSize}, + { x: -0.03 * screenSize, y: 0.11 * screenSize }, + { x: -0.03 * screenSize, y: -0.01 * screenSize }, + { x: -0.07 * screenSize, y: -0.01 * screenSize }, + { x: 0.0 * screenSize, y: -0.13 * screenSize }, + { x: 0.07 * screenSize, y: -0.01 * screenSize }, + { x: 0.03 * screenSize, y: -0.01 * screenSize }, + { x: 0.03 * screenSize, y: 0.11 * screenSize }, ]; //=========================================== let frameRadius = 0.28 * screenSize; - this["Quad X"] = - { + this["Quad X"] = { PropRadius: 0.2 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: frameRadius, y: frameRadius}, - {x: frameRadius, y: -frameRadius}, - {x: -frameRadius, y: frameRadius}, - {x: -frameRadius, y: -frameRadius}, + Motors: [ + { x: frameRadius, y: frameRadius }, + { x: frameRadius, y: -frameRadius }, + { x: -frameRadius, y: frameRadius }, + { x: -frameRadius, y: -frameRadius }, ], }; //=========================================== frameRadius = 0.28 * screenSize; - this["Quad X 1234"] = - { + this["Quad X 1234"] = { PropRadius: 0.2 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: -frameRadius, y: -frameRadius}, - {x: frameRadius, y: -frameRadius}, - {x: frameRadius, y: frameRadius}, - {x: -frameRadius, y: frameRadius}, + Motors: [ + { x: -frameRadius, y: -frameRadius }, + { x: frameRadius, y: -frameRadius }, + { x: frameRadius, y: frameRadius }, + { x: -frameRadius, y: frameRadius }, ], }; //=========================================== frameRadius = 0.32 * screenSize; - this["Quad +"] = - { + this["Quad +"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: 0, y: frameRadius}, - {x: frameRadius, y: 0 }, - {x: -frameRadius, y: 0 }, - {x: 0, y: -frameRadius}, + Motors: [ + { x: 0, y: frameRadius }, + { x: frameRadius, y: 0 }, + { x: -frameRadius, y: 0 }, + { x: 0, y: -frameRadius }, ], }; //=========================================== - frameRadius = 0.30 * screenSize; - this["Tricopter"] = - { + frameRadius = 0.3 * screenSize; + this["Tricopter"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: 0, y: frameRadius}, - {x: frameRadius, y: -frameRadius}, - {x: -frameRadius, y: -frameRadius}, + Motors: [ + { x: 0, y: frameRadius }, + { x: frameRadius, y: -frameRadius }, + { x: -frameRadius, y: -frameRadius }, ], }; //=========================================== frameRadius = 0.35 * screenSize; - this["Hex +"] = - { + this["Hex +"] = { PropRadius: 0.14 * screenSize, ArmWidth: 0.1 * screenSize, Motors: [], @@ -94,27 +83,26 @@ export default class MotorOutputReorderConfig let angle = 0; angle = dAngle * 1; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); angle = dAngle * 2; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); angle = -dAngle * 1; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); angle = -dAngle * 2; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); angle = dAngle * 3; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); angle = dAngle * 0; - this["Hex +"].Motors.push({x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius}); + this["Hex +"].Motors.push({ x: Math.sin(angle) * frameRadius, y: Math.cos(angle) * frameRadius }); //=========================================== frameRadius = 0.35 * screenSize; - this["Hex X"] = - { + this["Hex X"] = { PropRadius: 0.14 * screenSize, ArmWidth: 0.1 * screenSize, Motors: [], @@ -122,22 +110,22 @@ export default class MotorOutputReorderConfig dAngle = Math.PI / 3; angle = dAngle * 1; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = -dAngle * 1; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 2; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = -dAngle * 2; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 0; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 3; - this["Hex X"].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this["Hex X"].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); //=========================================== this._addOcto("Octo Flat +", -Math.PI / 2.0, screenSize); @@ -150,146 +138,126 @@ export default class MotorOutputReorderConfig this._addY6(screenSize); } - _addY6(screenSize) - { - const frameRadius = 0.30 * screenSize; - this["Y6"] = - { + _addY6(screenSize) { + const frameRadius = 0.3 * screenSize; + this["Y6"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: 0, y: frameRadius * 0.7, top: true}, - {x: frameRadius * 0.7, y: -frameRadius * 0.7, top: true}, - {x: -frameRadius * 0.7, y: -frameRadius * 0.7, top: true}, - {x: 0, y: frameRadius * 1.1, bottom: true}, - {x: frameRadius * 1.1, y: -frameRadius * 1.1, bottom: true}, - {x: -frameRadius * 1.1, y: -frameRadius * 1.1, bottom: true}, + Motors: [ + { x: 0, y: frameRadius * 0.7, top: true }, + { x: frameRadius * 0.7, y: -frameRadius * 0.7, top: true }, + { x: -frameRadius * 0.7, y: -frameRadius * 0.7, top: true }, + { x: 0, y: frameRadius * 1.1, bottom: true }, + { x: frameRadius * 1.1, y: -frameRadius * 1.1, bottom: true }, + { x: -frameRadius * 1.1, y: -frameRadius * 1.1, bottom: true }, ], }; } - _addY4(screenSize) - { - const frameRadius = 0.30 * screenSize; - this["Y4"] = - { + _addY4(screenSize) { + const frameRadius = 0.3 * screenSize; + this["Y4"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: 0, y: frameRadius * 0.7, top: true}, - {x: frameRadius, y: -frameRadius}, - {x: 0, y: frameRadius * 1.1, bottom: true}, - {x: -frameRadius, y: -frameRadius}, + Motors: [ + { x: 0, y: frameRadius * 0.7, top: true }, + { x: frameRadius, y: -frameRadius }, + { x: 0, y: frameRadius * 1.1, bottom: true }, + { x: -frameRadius, y: -frameRadius }, ], }; } - _addVTailQuad(screenSize) - { - const frameRadius = 0.30 * screenSize; - this["V-tail Quad"] = - { + _addVTailQuad(screenSize) { + const frameRadius = 0.3 * screenSize; + this["V-tail Quad"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: frameRadius * 0.7, y: frameRadius * 0.7}, - {x: frameRadius, y: -frameRadius}, - {x: -frameRadius * 0.7, y: frameRadius * 0.7}, - {x: -frameRadius, y: -frameRadius}, + Motors: [ + { x: frameRadius * 0.7, y: frameRadius * 0.7 }, + { x: frameRadius, y: -frameRadius }, + { x: -frameRadius * 0.7, y: frameRadius * 0.7 }, + { x: -frameRadius, y: -frameRadius }, ], }; } - _addATailQuad(screenSize) - { - const frameRadius = 0.30 * screenSize; - this["A-tail Quad"] = - { + _addATailQuad(screenSize) { + const frameRadius = 0.3 * screenSize; + this["A-tail Quad"] = { PropRadius: 0.15 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: -frameRadius * 0.7, y: frameRadius * 0.7}, - {x: frameRadius, y: -frameRadius}, - {x: frameRadius * 0.7, y: frameRadius * 0.7}, - {x: -frameRadius, y: -frameRadius}, + Motors: [ + { x: -frameRadius * 0.7, y: frameRadius * 0.7 }, + { x: frameRadius, y: -frameRadius }, + { x: frameRadius * 0.7, y: frameRadius * 0.7 }, + { x: -frameRadius, y: -frameRadius }, ], }; } - _addBicopter(screenSize) - { + _addBicopter(screenSize) { const frameRadius = 0.35 * screenSize; - this["Bicopter"] = - { + this["Bicopter"] = { PropRadius: 0.2 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: -frameRadius, y: 0}, - {x: frameRadius, y: 0}, + Motors: [ + { x: -frameRadius, y: 0 }, + { x: frameRadius, y: 0 }, ], }; } - _addOctoX8(screenSize) - { - const frameRadius = 0.20 * screenSize; + _addOctoX8(screenSize) { + const frameRadius = 0.2 * screenSize; const frameRadius2 = 0.28 * screenSize; - this["Octo X8"] = - { + this["Octo X8"] = { PropRadius: 0.12 * screenSize, ArmWidth: 0.1 * screenSize, - Motors: - [ - {x: frameRadius, y: frameRadius, top: true}, - {x: frameRadius, y: -frameRadius, top: true}, - {x: -frameRadius, y: frameRadius, top: true}, - {x: -frameRadius, y: -frameRadius, top: true}, - {x: frameRadius2, y: frameRadius2, bottom: true}, - {x: frameRadius2, y: -frameRadius2, bottom: true}, - {x: -frameRadius2, y: frameRadius2, bottom: true}, - {x: -frameRadius2, y: -frameRadius2, bottom: true}, + Motors: [ + { x: frameRadius, y: frameRadius, top: true }, + { x: frameRadius, y: -frameRadius, top: true }, + { x: -frameRadius, y: frameRadius, top: true }, + { x: -frameRadius, y: -frameRadius, top: true }, + { x: frameRadius2, y: frameRadius2, bottom: true }, + { x: frameRadius2, y: -frameRadius2, bottom: true }, + { x: -frameRadius2, y: frameRadius2, bottom: true }, + { x: -frameRadius2, y: -frameRadius2, bottom: true }, ], }; } - _addOcto(frameName, rotateAngle, screenSize) - { + _addOcto(frameName, rotateAngle, screenSize) { const frameRadius = 0.35 * screenSize; - this[frameName] = - { - PropRadius: 0.10 * screenSize, + this[frameName] = { + PropRadius: 0.1 * screenSize, ArmWidth: 0.1 * screenSize, Motors: [], }; const dAngle = Math.PI / 4; let angle = -dAngle * 2 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 0 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 2 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 4 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = -dAngle * 1 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 1 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = dAngle * 3 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); angle = -dAngle * 3 + rotateAngle; - this[frameName].Motors.push({x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius}); + this[frameName].Motors.push({ x: Math.cos(angle) * frameRadius, y: Math.sin(angle) * frameRadius }); } } diff --git a/src/components/MotorOutputReordering/Styles.css b/src/components/MotorOutputReordering/Styles.css index 9a547d4872..90b0418664 100644 --- a/src/components/MotorOutputReordering/Styles.css +++ b/src/components/MotorOutputReordering/Styles.css @@ -1,7 +1,7 @@ .motorOutputReorderComponent { - display:flex; - height:100%; - flex-flow:column; + display: flex; + height: 100%; + flex-flow: column; } .motorOutputReorderComponentHeader { @@ -9,19 +9,19 @@ } #dialogMotorOutputReorderMainContent { - display:flex; - height:100%; - flex-flow:column; + display: flex; + height: 100%; + flex-flow: column; } #dialogMotorOutputReorderWarning { - display:flex; - height:100%; - flex-flow:column; + display: flex; + height: 100%; + flex-flow: column; } #motorOutputReorderCanvas { - width:100%; + width: 100%; flex-grow: 1; } @@ -40,7 +40,7 @@ } #motorOutputReorderActionHint { - margin-top: 1.0em; + margin-top: 1em; display: inline-block; } @@ -59,7 +59,7 @@ } .motorsRemapDialogRExplanationText { - font-size: 1.0em; + font-size: 1em; margin-bottom: 1.5em; margin-top: 1.5em; } @@ -67,4 +67,4 @@ #motorOutputReorderSaveStartOverButtonsPanel { position: absolute; bottom: 4px; -} \ No newline at end of file +} diff --git a/src/components/betaflight-logo/BetaflightLogo.stories.js b/src/components/betaflight-logo/BetaflightLogo.stories.js index 541b640810..78b7c2a6fe 100644 --- a/src/components/betaflight-logo/BetaflightLogo.stories.js +++ b/src/components/betaflight-logo/BetaflightLogo.stories.js @@ -1,20 +1,20 @@ -import BetaflightLogo from './BetaflightLogo.vue'; +import BetaflightLogo from "./BetaflightLogo.vue"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { - title: 'Logo', - component: BetaflightLogo, + title: "Logo", + component: BetaflightLogo, }; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args const Template = (_args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { BetaflightLogo }, - template: '', + props: Object.keys(argTypes), + components: { BetaflightLogo }, + template: '', }); export const Primary = Template.bind({}); // More on args: https://storybook.js.org/docs/vue/writing-stories/args Primary.args = { - configuratorVersion: '1.0.0', + configuratorVersion: "1.0.0", }; diff --git a/src/components/betaflight-logo/BetaflightLogo.vue b/src/components/betaflight-logo/BetaflightLogo.vue index 54e2cca497..550fe87a60 100644 --- a/src/components/betaflight-logo/BetaflightLogo.vue +++ b/src/components/betaflight-logo/BetaflightLogo.vue @@ -1,118 +1,114 @@ diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue index 38d8a74540..259de55343 100644 --- a/src/components/data-flash/DataFlash.vue +++ b/src/components/data-flash/DataFlash.vue @@ -1,28 +1,22 @@ diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue index 5a57c36377..df19ba7b0b 100644 --- a/src/components/port-picker/PortPicker.vue +++ b/src/components/port-picker/PortPicker.vue @@ -1,26 +1,26 @@ diff --git a/src/components/port-picker/PortsInput.stories.js b/src/components/port-picker/PortsInput.stories.js index bb501b4c10..737934eabd 100644 --- a/src/components/port-picker/PortsInput.stories.js +++ b/src/components/port-picker/PortsInput.stories.js @@ -6,7 +6,7 @@ export default { component: PortsInput, }; -const Template = (_args, {argTypes}) => ({ +const Template = (_args, { argTypes }) => ({ props: Object.keys(argTypes), components: { PortsInput }, template: '', diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue index 876bef8011..ffccc8d553 100644 --- a/src/components/port-picker/PortsInput.vue +++ b/src/components/port-picker/PortsInput.vue @@ -1,186 +1,167 @@ diff --git a/src/components/quad-status/BatteryIcon.stories.js b/src/components/quad-status/BatteryIcon.stories.js index 78dba340d1..b73cc14984 100644 --- a/src/components/quad-status/BatteryIcon.stories.js +++ b/src/components/quad-status/BatteryIcon.stories.js @@ -2,31 +2,31 @@ import BatteryIcon from "./BatteryIcon.vue"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { - title: "Battery Icon", - component: BatteryIcon, + title: "Battery Icon", + component: BatteryIcon, }; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args const Template = (_args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { BatteryIcon }, - template: '', + props: Object.keys(argTypes), + components: { BatteryIcon }, + template: '', }); export const OK = Template.bind({}); OK.args = { - voltage: 16, - vbatmincellvoltage: 3.7, - vbatmaxcellvoltage: 4.2, - vbatwarningcellvoltage: 3.8, + voltage: 16, + vbatmincellvoltage: 3.7, + vbatmaxcellvoltage: 4.2, + vbatwarningcellvoltage: 3.8, }; export const Warning = Template.bind({}); Warning.args = { - ...OK.args, - voltage: 15.1, + ...OK.args, + voltage: 15.1, }; export const Empty = Template.bind({}); Empty.args = { - ...OK.args, - voltage: 14, + ...OK.args, + voltage: 14, }; diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue index 65f190f045..04154890fb 100644 --- a/src/components/quad-status/BatteryIcon.vue +++ b/src/components/quad-status/BatteryIcon.vue @@ -1,133 +1,127 @@ diff --git a/src/components/quad-status/BatteryLegend.stories.js b/src/components/quad-status/BatteryLegend.stories.js index 3d77e30964..9e9252d168 100644 --- a/src/components/quad-status/BatteryLegend.stories.js +++ b/src/components/quad-status/BatteryLegend.stories.js @@ -2,15 +2,15 @@ import BatteryLegend from "./BatteryLegend.vue"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { - title: "Battery Legend", - component: BatteryLegend, + title: "Battery Legend", + component: BatteryLegend, }; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args const Template = (_args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { BatteryLegend }, - template: '', + props: Object.keys(argTypes), + components: { BatteryLegend }, + template: '', }); export const Primary = Template.bind({}); diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue index 8fc9b25b53..06f7c8bb7b 100644 --- a/src/components/quad-status/BatteryLegend.vue +++ b/src/components/quad-status/BatteryLegend.vue @@ -1,46 +1,46 @@ diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue index 1ca600f859..d2aa80afd4 100644 --- a/src/components/quad-status/BottomStatusIcons.vue +++ b/src/components/quad-status/BottomStatusIcons.vue @@ -1,21 +1,9 @@ diff --git a/src/components/status-bar/ReadingStat.vue b/src/components/status-bar/ReadingStat.vue index 936ddefc38..aad0d084a4 100644 --- a/src/components/status-bar/ReadingStat.vue +++ b/src/components/status-bar/ReadingStat.vue @@ -1,31 +1,28 @@ diff --git a/src/components/status-bar/StatusBar.stories.js b/src/components/status-bar/StatusBar.stories.js index d3341891ef..ef9b18b3ea 100644 --- a/src/components/status-bar/StatusBar.stories.js +++ b/src/components/status-bar/StatusBar.stories.js @@ -2,15 +2,15 @@ import StatusBar from "./StatusBar.vue"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { - title: "Status Bar", - component: StatusBar, + title: "Status Bar", + component: StatusBar, }; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args const Template = (_args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { StatusBar }, - template: '', + props: Object.keys(argTypes), + components: { StatusBar }, + template: '', }); export const Primary = Template.bind({}); diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue index 7b58dea24d..f662da9f09 100644 --- a/src/components/status-bar/StatusBar.vue +++ b/src/components/status-bar/StatusBar.vue @@ -1,33 +1,17 @@ diff --git a/src/components/status-bar/StatusBarVersion.vue b/src/components/status-bar/StatusBarVersion.vue index 9bdb0a1c84..23f3c711a6 100644 --- a/src/components/status-bar/StatusBarVersion.vue +++ b/src/components/status-bar/StatusBarVersion.vue @@ -1,44 +1,42 @@ diff --git a/src/components/vueI18n.js b/src/components/vueI18n.js index fa4174bbc1..fdfef9f0e4 100644 --- a/src/components/vueI18n.js +++ b/src/components/vueI18n.js @@ -1,6 +1,6 @@ import Vue from "vue"; import VueI18Next from "@panter/vue-i18next"; -import i18next from 'i18next'; +import i18next from "i18next"; Vue.use(VueI18Next); diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less index f3ce1cf194..373443ebf5 100644 --- a/src/css/dark-theme.less +++ b/src/css/dark-theme.less @@ -32,6 +32,6 @@ body.dark-theme { } .invertable { - filter: invert(1) + filter: invert(1); } } diff --git a/src/css/main.less b/src/css/main.less index 0115b8ea9a..ebee8b28ad 100644 --- a/src/css/main.less +++ b/src/css/main.less @@ -16,7 +16,7 @@ html { } body { height: 100%; - font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; + font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; font-size: 12px; color: var(--text); background-color: var(--surface-200); @@ -43,8 +43,7 @@ a.disabled { } .background_paper { background-color: var(--surface-200); - background-image: - linear-gradient(var(--surface-300) 2px, transparent 2px), + background-image: linear-gradient(var(--surface-300) 2px, transparent 2px), linear-gradient(90deg, var(--surface-300) 2px, transparent 2px), linear-gradient(var(--surface-300) 1px, transparent 1px), linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px); @@ -101,8 +100,10 @@ a.disabled { } } } -input, select, .select2-selection--single { - font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important; +input, +select, +.select2-selection--single { + font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif !important; font-size: unset !important; background-color: var(--surface-300) !important; border: 1px solid var(--surface-500) !important; @@ -129,7 +130,9 @@ input, select, .select2-selection--single { cursor: not-allowed; pointer-events: none; } - &[type="range"], &[type="checkbox"], &[type="radio"] { + &[type="range"], + &[type="checkbox"], + &[type="radio"] { min-width: 0; accent-color: var(--primary-400); } @@ -145,7 +148,8 @@ input, select, .select2-selection--single { font-weight: normal !important; } -select, input[type="checkbox"] { +select, +input[type="checkbox"] { cursor: pointer; } input[type="number"] { @@ -177,7 +181,8 @@ input[type="number"] { padding-bottom: 0; margin-bottom: 0; } - .helpicon, label { + .helpicon, + label { margin: 0 !important; } } @@ -242,7 +247,8 @@ input[type="number"] { gap: 1rem; background-color: var(--surface-200); } -#menu_btn, #reveal_btn { +#menu_btn, +#reveal_btn { display: none; width: 24px; height: 24px; @@ -286,7 +292,8 @@ input[type="number"] { align-items: center; gap: 2rem; } -.open_firmware_flasher, .connect_controls { +.open_firmware_flasher, +.connect_controls { display: flex; flex-direction: column; align-items: center; @@ -375,7 +382,7 @@ input[type="number"] { #sensor-status { border-radius: 0.5rem; background-color: var(--surface-300); - >ul { + > ul { display: flex; } li { @@ -397,7 +404,6 @@ input[type="number"] { } .baroicon { background-image: url(../images/icons/sensor_baro_off.png); - } .sonaricon { background-image: url(../images/icons/sensor_sonar_off.png); @@ -430,7 +436,12 @@ input[type="number"] { color: var(--text); background-image: url(../images/icons/sensor_sonar_on.png); } -.gyroicon, .accicon, .magicon, .gpsicon, .baroicon, .sonaricon { +.gyroicon, +.accicon, +.magicon, +.gpsicon, +.baroicon, +.sonaricon { background-repeat: no-repeat; height: 30px; // margin-top: 3px; @@ -575,9 +586,9 @@ input[type="number"] { padding: 0.5rem; position: relative; bottom: 0; - >* { + > * { user-select: text; - >* { + > * { user-select: text; } } @@ -603,7 +614,7 @@ input[type="number"] { width: 27px; background-repeat: no-repeat; background-image: url(../images/icons/scroll.svg); - opacity: 0.0; + opacity: 0; transition: all ease 0.2s; } #scrollicon.active { @@ -766,8 +777,7 @@ each(@tabIcons, { } } }) - -#cache { + #cache { display: none; } .data-loading { @@ -817,7 +827,7 @@ dialog { } &:active { background-color: var(--primary-500); - transition: all ease 0.0s; + transition: all ease 0s; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } } @@ -943,7 +953,6 @@ dialog { margin-bottom: 0.5rem; border-radius: 0.5rem; padding: 0.5rem; - } .tab_wrapper { padding: 20px 15px 15px 15px; @@ -953,7 +962,7 @@ dialog { padding-bottom: 4rem; height: 100%; position: relative; - >.note { + > .note { margin-bottom: 1rem; } } @@ -970,7 +979,7 @@ dialog { &::before { width: 1.5rem; aspect-ratio: 1; - content: ''; + content: ""; mask: url(../images/corner.svg); background-color: var(--surface-300); position: absolute; @@ -1023,7 +1032,7 @@ dialog { } &:active { background-color: var(--primary-500); - transition: all ease 0.0s; + transition: all ease 0s; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } .helpicon { @@ -1174,7 +1183,30 @@ dialog { border: 1px solid var(--error-500); .gui_box_titlebar { background-color: #dc0000; - background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent); + background-image: linear-gradient( + -45deg, + rgba(255, 255, 255, 0.3) 10%, + transparent 10%, + transparent 20%, + rgba(255, 255, 255, 0.3) 20%, + rgba(255, 255, 255, 0.3) 30%, + transparent 30%, + transparent 40%, + rgba(255, 255, 255, 0.3) 40%, + rgba(255, 255, 255, 0.3) 50%, + transparent 50%, + transparent 60%, + rgba(255, 255, 255, 0.3) 60%, + rgba(255, 255, 255, 0.3) 70%, + transparent 70%, + transparent 80%, + rgba(255, 255, 255, 0.3) 80%, + rgba(255, 255, 255, 0.3) 90%, + transparent 90%, + transparent 100%, + rgba(255, 255, 255, 0.4) 100%, + transparent + ); color: var(--text); } } @@ -1183,7 +1215,30 @@ dialog { border: 1px solid var(--primary-500); .gui_box_titlebar { background-color: var(--primary-500); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent); + background-image: linear-gradient( + -45deg, + rgba(255, 255, 255, 0.3) 10%, + transparent 10%, + transparent 20%, + rgba(255, 255, 255, 0.3) 20%, + rgba(255, 255, 255, 0.3) 30%, + transparent 30%, + transparent 40%, + rgba(255, 255, 255, 0.3) 40%, + rgba(255, 255, 255, 0.3) 50%, + transparent 50%, + transparent 60%, + rgba(255, 255, 255, 0.3) 60%, + rgba(255, 255, 255, 0.3) 70%, + transparent 70%, + transparent 80%, + rgba(255, 255, 255, 0.3) 80%, + rgba(255, 255, 255, 0.3) 90%, + transparent 90%, + transparent 100%, + rgba(255, 255, 255, 0.4) 100%, + transparent + ); color: black; } } @@ -1207,7 +1262,7 @@ dialog { background-color: #e4e4e4; width: calc(100% + 40px); margin-left: -20px; - box-shadow: rgba(0, 0, 0, 0.00) 0 -3px 8px; + box-shadow: rgba(0, 0, 0, 0) 0 -3px 8px; bottom: 0; margin-bottom: 0; .save_btn { @@ -1262,7 +1317,7 @@ dialog { } &:active { background-color: var(--primary-400); - transition: all ease 0.0s; + transition: all ease 0s; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } } @@ -1357,7 +1412,7 @@ dialog { } &:active { background-color: var(--primary-600); - transition: all ease 0.0s; + transition: all ease 0s; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } } @@ -1393,7 +1448,7 @@ table { background-color: var(--error-500); padding: 1px 7px 2px 7px; border-radius: 3px; - color: #FFFFFF; + color: #ffffff; font-size: 11px; margin-left: 3px; } @@ -1401,7 +1456,7 @@ table { background-color: var(--primary-500); padding: 1px 7px 2px 7px; border-radius: 3px; - color: #FFFFFF; + color: #ffffff; font-size: 11px; margin-left: 3px; } @@ -1484,7 +1539,7 @@ table { } &:active { background-color: var(--primary-400); - transition: all ease 0.0s; + transition: all ease 0s; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } } @@ -1517,7 +1572,7 @@ table { border-bottom-right-radius: 5px; } button { - padding: .5em .75em; + padding: 0.5em 0.75em; border-radius: 4px; background-color: #ccc; color: #666; @@ -1668,8 +1723,7 @@ each(range(12), { } } }) - -.grid-box { + .grid-box { display: grid; gap: 1rem; each(range(12), { @@ -1705,7 +1759,9 @@ each(range(12), { .z { background-color: #e24761; } - .x, .y, .z { + .x, + .y, + .z { color: black; } } @@ -1734,7 +1790,8 @@ each(range(12), { } } .axis { - path, line { + path, + line { fill: none; stroke: var(--text); stroke-width: 1px; @@ -2003,7 +2060,8 @@ each(range(12), { order: 3; gap: 1rem; } - .firmware_b, .connect_b { + .firmware_b, + .connect_b { height: fit-content !important; width: fit-content !important; a { @@ -2102,7 +2160,10 @@ each(range(12), { .toolbar_expand_btn { display: block; } - .sm, .md, .lg, .xl { + .sm, + .md, + .lg, + .xl { display: none !important; } @@ -2112,26 +2173,37 @@ each(range(12), { margin-left: 0 !important; margin-right: 0 !important; } - }) - + }); } @media all and (min-width: 576px) and (max-width: 767px) { - .xs, .md, .lg, .xl { + .xs, + .md, + .lg, + .xl { display: none !important; } } @media all and (min-width: 768px) and (max-width: 991px) { - .xs, .sm, .lg, .xl { + .xs, + .sm, + .lg, + .xl { display: none !important; } } @media all and (min-width: 992px) and (max-width: 1139px) { - .xs, .sm, .md, .xl { + .xs, + .sm, + .md, + .xl { display: none !important; } } @media all and (min-width: 1140px) { - .xs, .sm, .md, .lg { + .xs, + .sm, + .md, + .lg { display: none !important; } } diff --git a/src/css/opensans_webfontkit/fonts.css b/src/css/opensans_webfontkit/fonts.css index 6d22a964a4..9c4da2207b 100644 --- a/src/css/opensans_webfontkit/fonts.css +++ b/src/css/opensans_webfontkit/fonts.css @@ -1,46 +1,41 @@ /* Reordered to match the order on https://fonts.google.com/specimen/Open+Sans */ /* Also left a comment for each style not included */ @font-face { - font-family: 'Open Sans'; - src: url('opensans-light-webfont.woff2') format('woff2'), - url('opensans-light-webfont.woff') format('woff'); + font-family: "Open Sans"; + src: url("opensans-light-webfont.woff2") format("woff2"), url("opensans-light-webfont.woff") format("woff"); font-weight: 300; font-style: normal; } /* Light Italic? */ @font-face { - font-family: 'Open Sans'; - src: url('opensans-regular-webfont.woff2') format('woff2'), - url('opensans-regular-webfont.woff') format('woff'); + font-family: "Open Sans"; + src: url("opensans-regular-webfont.woff2") format("woff2"), url("opensans-regular-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: url('opensans-italic-webfont.woff2') format('woff2'), - url('opensans-italic-webfont.woff') format('woff'); + font-family: "Open Sans"; + src: url("opensans-italic-webfont.woff2") format("woff2"), url("opensans-italic-webfont.woff") format("woff"); font-weight: normal; font-style: italic; } @font-face { - font-family: 'Open Sans'; - src: url("opensans-semibold-webfont.woff2") format("woff2"), - url("opensans-semibold-webfont.woff") format("woff"); + font-family: "Open Sans"; + src: url("opensans-semibold-webfont.woff2") format("woff2"), url("opensans-semibold-webfont.woff") format("woff"); font-weight: 600; font-style: normal; } /* Semi-Bold Italic */ @font-face { - font-family: 'Open Sans'; - src: url('opensans-bold-webfont.woff2') format('woff2'), - url('opensans-bold-webfont.woff') format('woff'); + font-family: "Open Sans"; + src: url("opensans-bold-webfont.woff2") format("woff2"), url("opensans-bold-webfont.woff") format("woff"); font-weight: bold; font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: url('opensans-bolditalic-webfont.woff2') format('woff2'), - url('opensans-bolditalic-webfont.woff') format('woff'); + font-family: "Open Sans"; + src: url("opensans-bolditalic-webfont.woff2") format("woff2"), + url("opensans-bolditalic-webfont.woff") format("woff"); font-weight: bold; font-style: italic; } diff --git a/src/css/receiver_msp/receiver_msp.less b/src/css/receiver_msp/receiver_msp.less index fe48a1d405..2780e588a0 100644 --- a/src/css/receiver_msp/receiver_msp.less +++ b/src/css/receiver_msp/receiver_msp.less @@ -1,10 +1,10 @@ body { - font-family: 'Segoe UI', Tahoma, sans-serif; - font-size: 12px; - background-color: var(--surface-100); - color: var(--text); - overflow: hidden; - user-select: none; + font-family: "Segoe UI", Tahoma, sans-serif; + font-size: 12px; + background-color: var(--surface-100); + color: var(--text); + overflow: hidden; + user-select: none; display: flex; flex-direction: column; justify-content: center; @@ -12,63 +12,63 @@ body { padding: 2rem; } .control-gimbals { - padding: 1.5rem; - padding-bottom: 0; - text-align: center; - display: inline-flex; + padding: 1.5rem; + padding-bottom: 0; + text-align: center; + display: inline-flex; } .control-gimbal { - position: relative; - width: 120px; - height: 120px; - background-color: var(--surface-200); - margin-left: 1.5rem; - margin-right: 1.5rem; - margin-bottom: 2rem; - display: inline-block; - border-radius: 5px; - cursor: pointer; + position: relative; + width: 120px; + height: 120px; + background-color: var(--surface-200); + margin-left: 1.5rem; + margin-right: 1.5rem; + margin-bottom: 2rem; + display: inline-block; + border-radius: 5px; + cursor: pointer; } .crosshair { - display: block; - position: absolute; - background-color: var(--surface-500); + display: block; + position: absolute; + background-color: var(--surface-500); } .crosshair-vert { - width: 1px; - height: 100%; - left: 50%; + width: 1px; + height: 100%; + left: 50%; } .crosshair-horz { - height: 1px; - width: 100%; - top: 50%; + height: 1px; + width: 100%; + top: 50%; } .gimbal-label { - display: block; - position: absolute; - text-align: center; + display: block; + position: absolute; + text-align: center; } .gimbal-label-horz { - top: calc(100% + 1rem); - width: 100%; + top: calc(100% + 1rem); + width: 100%; } .gimbal-label-vert { - transform: rotate(-90deg); - top: calc(50% - 0.5em); - width: 100%; - left: calc(-50% - 1.5rem); + transform: rotate(-90deg); + top: calc(50% - 0.5em); + width: 100%; + left: calc(-50% - 1.5rem); } .control-stick { - background-color: var(--primary-500); - width: 20px; - height: 20px; - margin-left: -10px; - margin-top: -10px; - display: block; - border-radius: 100%; - position: absolute; - cursor: pointer; + background-color: var(--primary-500); + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + display: block; + border-radius: 100%; + position: absolute; + cursor: pointer; } .control-sliders { width: 100%; @@ -81,23 +81,23 @@ body { } } .tooltip { - position: absolute; - left: calc(100% + 24px); - top: 0; + position: absolute; + left: calc(100% + 24px); + top: 0; } .slider-label { - position: absolute; - text-align: right; - width: 40px; - left: -65px; + position: absolute; + text-align: right; + width: 40px; + left: -65px; } a { - text-decoration: none; - color: #000; - font-weight: bold; - &:hover { - text-decoration: none; - } + text-decoration: none; + color: #000; + font-weight: bold; + &:hover { + text-decoration: none; + } } .warning { display: flex; @@ -106,34 +106,34 @@ a { } .button-enable { width: fit-content; - a { + a { width: fit-content; - margin-top: 20px; - margin-bottom: 0px; - margin-left: 0px; - background-color: var(--primary-500); - border-radius: 3px; - border: 1px solid var(--primary-600); - color: var(--surface-50); - font-size: 12px; - display: block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; - line-height: 28px; + margin-top: 20px; + margin-bottom: 0px; + margin-left: 0px; + background-color: var(--primary-500); + border-radius: 3px; + border: 1px solid var(--primary-600); + color: var(--surface-50); + font-size: 12px; + display: block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0px; + padding-left: 9px; + padding-right: 9px; + line-height: 28px; &:hover { background-color: var(--primary-400); transition: all ease 0.2s; } - &:active { - background-color: var(--success-500); + &:active { + background-color: var(--success-500); border: 1px solid var(--success-600); - transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); - } - } + transition: all ease 0s; + box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); + } + } } @media all and (max-width: 575px) { diff --git a/src/css/select2_custom.less b/src/css/select2_custom.less index 46fb814f15..f81a906f11 100644 --- a/src/css/select2_custom.less +++ b/src/css/select2_custom.less @@ -45,7 +45,7 @@ } // aria selected -.select2-results__option[aria-selected=true] { +.select2-results__option[aria-selected="true"] { background-color: var(--primary-500) !important; color: var(--surface-100) !important; } diff --git a/src/css/switchery_custom.less b/src/css/switchery_custom.less index 6f818b0971..fe914eb6fb 100644 --- a/src/css/switchery_custom.less +++ b/src/css/switchery_custom.less @@ -11,7 +11,7 @@ user-select: none; box-sizing: content-box; background-clip: content-box; - >small { + > small { height: 14px; width: 14px; } @@ -33,7 +33,7 @@ user-select: none; box-sizing: content-box; background-clip: content-box; - >small { + > small { background: #fff; border-radius: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); @@ -49,7 +49,7 @@ width: 20px; margin-top: -3px; margin-right: 3px; - >small { + > small { height: 10px; width: 10px; } diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less index 3a9ff23139..73d9190710 100644 --- a/src/css/tabs/adjustments.less +++ b/src/css/tabs/adjustments.less @@ -1,93 +1,93 @@ #tab-adjustments-templates { - display: none; + display: none; } .tab-adjustments { - .range { - .marker { - background: var(--primary-200); - } - &:first-child { - border-top: 0px; - } - &:last-child { - border-bottom: 0px; - } - } - .channel-slider { - .noUi-connect { - background: var(--primary-500); - } - } + .range { + .marker { + background: var(--primary-200); + } + &:first-child { + border-top: 0px; + } + &:last-child { + border-bottom: 0px; + } + } + .channel-slider { + .noUi-connect { + background: var(--primary-500); + } + } table { border-radius: 0.5rem; overflow: hidden; } - .adjustments { - width: 100%; - border-spacing: 0px; - thead { - td { - text-align: center; - white-space: nowrap; - padding: 10px 10px; - background-color: var(--surface-300); - color: var(--text); - } - } - } - td { - border-top: 1px solid var(--surface-500); - border-bottom: 1px solid var(--surface-500); + .adjustments { + width: 100%; + border-spacing: 0px; + thead { + td { + text-align: center; + white-space: nowrap; + padding: 10px 10px; + background-color: var(--surface-300); + color: var(--text); + } + } + } + td { + border-top: 1px solid var(--surface-500); + border-bottom: 1px solid var(--surface-500); padding: 0 0.5rem; - } - .adjustment { + } + .adjustment { background-color: var(--surface-300); - &:nth-child(odd) { - background-color: var(--surface-200); - } - td { - text-align: center; - } - .info { - height: 6.5rem; - .enabling { - white-space: nowrap; - } - } - .channelInfo { - .limits { - padding: 0.5rem 0; - } - } - .range { - width: 100%; - padding: 0 1rem; - .channel-slider { - margin-top: -2rem; - } - .marker { - position: absolute; - left: 50%; - top: 27px; - height: 13px; - width: 6px; - margin-left: -3px; - border-radius: 3px; - z-index: 1000; - } - } - } + &:nth-child(odd) { + background-color: var(--surface-200); + } + td { + text-align: center; + } + .info { + height: 6.5rem; + .enabling { + white-space: nowrap; + } + } + .channelInfo { + .limits { + padding: 0.5rem 0; + } + } + .range { + width: 100%; + padding: 0 1rem; + .channel-slider { + margin-top: -2rem; + } + .marker { + position: absolute; + left: 50%; + top: 27px; + height: 13px; + width: 6px; + margin-left: -3px; + border-radius: 3px; + z-index: 1000; + } + } + } } .noUi-target { - border-radius: 0.5rem; + border-radius: 0.5rem; } @media all and (max-width: 575px) { - .tab-adjustments { - .overflow { - overflow: auto; - } - .range { - min-width: 300px; - } - } + .tab-adjustments { + .overflow { + overflow: auto; + } + .range { + min-width: 300px; + } + } } diff --git a/src/css/tabs/auxiliary.less b/src/css/tabs/auxiliary.less index 616f6930e0..2d53f6f350 100644 --- a/src/css/tabs/auxiliary.less +++ b/src/css/tabs/auxiliary.less @@ -1,75 +1,75 @@ .tab-auxiliary { - min-height: 100%; - .help { - padding: 10px; - background-color: #ffcb18; - margin-bottom: 10px; - } - .toolbox { - font-weight: bold; + min-height: 100%; + .help { + padding: 10px; + background-color: #ffcb18; + margin-bottom: 10px; + } + .toolbox { + font-weight: bold; padding: 1rem 0; form { display: flex; gap: 0.5rem; } - } - .range { - .marker { - background: var(--primary-500); - border-radius: 3px; - position: absolute; - left: 50%; - top: 2rem; - height: 1rem; - width: 6px; - margin-left: -3px; - z-index: 1000; - } - position: relative; - padding-top: 1rem; - padding-left: 0; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--surface-500); - &:first-child { - border-top: 0; - } - &:last-child { - border-bottom: 0; - } - >.buttons { - position: absolute; - top: 0; - right: 0; - .a { - padding: 2px; - } - } - .channel { - border: 1px solid var(--surface-500); - border-radius: 3px; - margin-bottom: 3px; - } - .channel-slider { + } + .range { + .marker { + background: var(--primary-500); + border-radius: 3px; + position: absolute; + left: 50%; + top: 2rem; + height: 1rem; + width: 6px; + margin-left: -3px; + z-index: 1000; + } + position: relative; + padding-top: 1rem; + padding-left: 0; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--surface-500); + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } + > .buttons { + position: absolute; + top: 0; + right: 0; + .a { + padding: 2px; + } + } + .channel { + border: 1px solid var(--surface-500); + border-radius: 3px; + margin-bottom: 3px; + } + .channel-slider { width: 100%; margin-right: 1.5rem; - } - } - .channel-slider { - .noUi-connect { - background: var(--primary-500); - border-radius: 0.25rem; - } - } - .mode.on { - .info { - background: var(--primary-500); - color: black; - } - &:nth-child(odd) { - .info { - background: var(--primary-500); - } - } + } + } + .channel-slider { + .noUi-connect { + background: var(--primary-500); + border-radius: 0.25rem; + } + } + .mode.on { + .info { + background: var(--primary-500); + color: black; + } + &:nth-child(odd) { + .info { + background: var(--primary-500); + } + } .buttons { a { background-color: var(--primary-300); @@ -80,17 +80,17 @@ } } } - } - .mode.off { - .info { - background: var(--surface-300); - color: var(--surface-950); - } - &:nth-child(odd) { - .info { - background: var(--surface-300); - } - } + } + .mode.off { + .info { + background: var(--surface-300); + color: var(--surface-950); + } + &:nth-child(odd) { + .info { + background: var(--surface-300); + } + } .buttons { a { background-color: var(--surface-400); @@ -101,11 +101,11 @@ } } } - } - .mode.disabled { - .info { - background: var(--error-transparent-4); - color: var(--text); + } + .mode.disabled { + .info { + background: var(--error-transparent-4); + color: var(--text); .buttons { a { background-color: var(--error-500); @@ -114,69 +114,69 @@ } } } - } - } - .modes { - width: 100%; - } - .mode { - background-color: var(--surface-200); - vertical-align: top; - display: flex; + } + } + .modes { + width: 100%; + } + .mode { + background-color: var(--surface-200); + vertical-align: top; + display: flex; margin-bottom: 0.5rem; border-radius: 0.5rem; overflow: hidden; min-height: 6.5rem; - .name { + .name { padding: 0.5rem; - } - .info { - text-align: center; - width: fit-content; - white-space: nowrap; - position: relative; - background-color: var(--surface-300); + } + .info { + text-align: center; + width: fit-content; + white-space: nowrap; + position: relative; + background-color: var(--surface-300); padding: 0.5rem; - .name { - font-weight: bold; - font-size: 1.0em; - } - .buttons { - a { - padding: 0.25rem 0.5rem; - border-radius: 0.5rem; - cursor: pointer; - margin: 3px; - display: block; - } - } - } - .range { + .name { + font-weight: bold; + font-size: 1em; + } + .buttons { + a { + padding: 0.25rem 0.5rem; + border-radius: 0.5rem; + cursor: pointer; + margin: 3px; + display: block; + } + } + } + .range { display: flex; - .channelInfo { + .channelInfo { padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; - } - } - } - .ranges { + } + } + } + .ranges { width: 100%; - } - .link { - padding-top: 1rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--surface-500); - background-color: var(--surface-200); + } + .link { + padding-top: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--surface-500); + background-color: var(--surface-200); display: flex; gap: 0.5rem; - &:first-child { - border-top: 0; - } - &:last-child { - border-bottom: 0; - } + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } .delete { a { margin-top: 0.35rem; @@ -188,74 +188,74 @@ .linkLogic { margin-top: 0.25rem; } - } - .logic { - border: 1px solid var(--surface-700); - border-radius: 3px; - } - .buttons { - a { - text-align: center; - font-weight: bold; - background-color: var(--surface-400); - color: var(--text); - transition: all ease 0.3s; - &:hover { - background-color: var(--surface-500); - opacity: 1.0; - transition: all ease 0.3s; - } - } - } - .delete { - a { - height: 15px; - width: 15px; - transition: all ease 0.3s; - opacity: 0.3; - position: relative; - margin-right: 5px; - margin-top: -9px; - background-image: url('../../images/icons/close1.svg'); - background-repeat: no-repeat; - background-position: center 100%; - display: block; - &:hover { - transition: all ease 0.3s; - opacity: 0.6; - } - } - } + } + .logic { + border: 1px solid var(--surface-700); + border-radius: 3px; + } + .buttons { + a { + text-align: center; + font-weight: bold; + background-color: var(--surface-400); + color: var(--text); + transition: all ease 0.3s; + &:hover { + background-color: var(--surface-500); + opacity: 1; + transition: all ease 0.3s; + } + } + } + .delete { + a { + height: 15px; + width: 15px; + transition: all ease 0.3s; + opacity: 0.3; + position: relative; + margin-right: 5px; + margin-top: -9px; + background-image: url("../../images/icons/close1.svg"); + background-repeat: no-repeat; + background-position: center 100%; + display: block; + &:hover { + transition: all ease 0.3s; + opacity: 0.6; + } + } + } } #tab-auxiliary-templates { - display: none; + display: none; } @media all and (max-width: 575px) { - .tab-auxiliary { - .mode { - flex-wrap: wrap; + .tab-auxiliary { + .mode { + flex-wrap: wrap; height: fit-content; - .info { - width: 100%; - border-bottom: 0; + .info { + width: 100%; + border-bottom: 0; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; - .name { - text-align: left; - min-height: auto; + .name { + text-align: left; + min-height: auto; margin-right: auto; - } - .buttons { - right: 0; - width: auto; - display: flex; - } + } + .buttons { + right: 0; + width: auto; + display: flex; + } .helpicon { margin-top: 0; } - } + } // offset "add" button for ARM mode since the "link" button is hidden // keeps the layout consistent with other modes &:first-of-type { @@ -263,46 +263,46 @@ margin-left: 2.5rem; } } - .ranges { - width: 100%; - max-width: 100%; - } - .range { - .channelInfo { - display: flex; - margin: 0 10px; - width: 100%; - flex-wrap: wrap; - } - } - } - .range { - display: flex; - height: auto; - flex-wrap: wrap; - .channel-slider { - width: 100%; - margin: 0.5rem 1rem 3.5rem 1rem; - } - } - .limits { - width: 100%; - justify-content: space-between; - display: flex; - } - .delete { - a { - margin-top: 15px; - margin-right: 10px; - position: absolute; - top: 0; - right: 0; - } - } - .link { - height: auto; - display: flex; - padding-bottom: 10px; - } - } + .ranges { + width: 100%; + max-width: 100%; + } + .range { + .channelInfo { + display: flex; + margin: 0 10px; + width: 100%; + flex-wrap: wrap; + } + } + } + .range { + display: flex; + height: auto; + flex-wrap: wrap; + .channel-slider { + width: 100%; + margin: 0.5rem 1rem 3.5rem 1rem; + } + } + .limits { + width: 100%; + justify-content: space-between; + display: flex; + } + .delete { + a { + margin-top: 15px; + margin-right: 10px; + position: absolute; + top: 0; + right: 0; + } + } + .link { + height: auto; + display: flex; + padding-bottom: 10px; + } + } } diff --git a/src/css/tabs/cli.less b/src/css/tabs/cli.less index 02b86c9b8f..413177f464 100644 --- a/src/css/tabs/cli.less +++ b/src/css/tabs/cli.less @@ -1,154 +1,154 @@ .tab-cli { - height: calc(100% - 6rem); - .content_wrapper { - flex-direction: column; - display: flex; - overflow-x: hidden; - overflow-y: hidden; - } - p { - padding: 0; - border: 0 dotted var(--surface-500); - } - .backdrop { - border: 1px solid var(--surface-500); - background-color: rgba(0, 0, 0, 0.75); - margin-top: 0; - flex-grow: 1; - background-image: url("../../images/light-wide-1.svg"); - background-repeat: no-repeat; - background-position: 50% 80%; - background-size: 600px; - border-radius: 5px; - box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80); - width: 100%; - } - .window { - height: 100%; - width: 100%; - padding: 5px; - overflow-y: scroll; - overflow-x: hidden; - font-family: monospace; - color: white; - box-sizing: border-box; - float: left; - .wrapper { - user-select: text; - white-space: pre-wrap; - height: 0px; - >* { - user-select: text; - } - } - .error_message { - color: red; - font-weight: bold; - } - } - textarea[name='commands'] { - -webkit-box-sizing: border-box; - width: 100%; - margin-top: 8px; - height: 22px; - line-height: 20px; - padding-left: 5px; - border: 1px solid var(--surface-500); - resize: none; + height: calc(100% - 6rem); + .content_wrapper { + flex-direction: column; + display: flex; + overflow-x: hidden; + overflow-y: hidden; + } + p { + padding: 0; + border: 0 dotted var(--surface-500); + } + .backdrop { + border: 1px solid var(--surface-500); + background-color: rgba(0, 0, 0, 0.75); + margin-top: 0; + flex-grow: 1; + background-image: url("../../images/light-wide-1.svg"); + background-repeat: no-repeat; + background-position: 50% 80%; + background-size: 600px; + border-radius: 5px; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8); + width: 100%; + } + .window { + height: 100%; + width: 100%; + padding: 5px; + overflow-y: scroll; + overflow-x: hidden; + font-family: monospace; + color: white; + box-sizing: border-box; + float: left; + .wrapper { + user-select: text; + white-space: pre-wrap; + height: 0px; + > * { + user-select: text; + } + } + .error_message { + color: red; + font-weight: bold; + } + } + textarea[name="commands"] { + -webkit-box-sizing: border-box; + width: 100%; + margin-top: 8px; + height: 22px; + line-height: 20px; + padding-left: 5px; + border: 1px solid var(--surface-500); + resize: none; background-color: var(--surface-200); color: var(--surface-900); - } - textarea[name='supportWarningDialogInput'] { - -webkit-box-sizing: border-box; - width: 100%; - margin-top: 8px; - height: 22px; - line-height: 20px; - padding-left: 5px; - border: 1px solid var(--surface-500); - resize: none; - } - #content-watermark { - z-index: 0; - } - .save { - color: white; - } + } + textarea[name="supportWarningDialogInput"] { + -webkit-box-sizing: border-box; + width: 100%; + margin-top: 8px; + height: 22px; + line-height: 20px; + padding-left: 5px; + border: 1px solid var(--surface-500); + resize: none; + } + #content-watermark { + z-index: 0; + } + .save { + color: white; + } } .jBox-container { - textarea#preview { - background-color: rgba(0, 0, 0, 0.75); - width: 100%; - resize: none; - overflow-y: scroll; - overflow-x: hidden; - font-family: monospace; - color: white; - padding: 5px; - margin-bottom: 5px; - } + textarea#preview { + background-color: rgba(0, 0, 0, 0.75); + width: 100%; + resize: none; + overflow-y: scroll; + overflow-x: hidden; + font-family: monospace; + color: white; + padding: 5px; + margin-bottom: 5px; + } } .cli-textcomplete-dropdown { - border: 1px solid var(--surface-500); - background-color: var(--surface-300); - border-radius: 5px; - max-height: 50%; - overflow: auto; - list-style: none; - padding: 0; - margin: 0; - &::-webkit-scrollbar { - width: 6px; - } - &::-webkit-scrollbar-track { - background: lightgrey; - border-radius: 3px; - } - &::-webkit-scrollbar-thumb { - background: grey; - border-radius: 3px; - } - li { - padding: 2px 5px; - } - .active { - background-color: var(--surface-600); - } - a { - &:hover { - cursor: pointer; - } - font-family: monospace; - b { - font-family: monospace; - font-weight: bold; - } - } + border: 1px solid var(--surface-500); + background-color: var(--surface-300); + border-radius: 5px; + max-height: 50%; + overflow: auto; + list-style: none; + padding: 0; + margin: 0; + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-track { + background: lightgrey; + border-radius: 3px; + } + &::-webkit-scrollbar-thumb { + background: grey; + border-radius: 3px; + } + li { + padding: 2px 5px; + } + .active { + background-color: var(--surface-600); + } + a { + &:hover { + cursor: pointer; + } + font-family: monospace; + b { + font-family: monospace; + font-weight: bold; + } + } } @media only screen and (max-width: 1055px) { - .tab-cli { - .content_wrapper { - height: calc(100% - 87px); - } - .content_toolbar { - margin-top: 5px; - } - } + .tab-cli { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } } @media only screen and (max-device-width: 1055px) { - .tab-cli { - .content_wrapper { - height: calc(100% - 87px); - } - .content_toolbar { - margin-top: 5px; - } - } + .tab-cli { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } } @media all and (max-width: 575px) { - .tab-cli { - .backdrop { - background-size: 100%; - } - } + .tab-cli { + .backdrop { + background-size: 100%; + } + } } diff --git a/src/css/tabs/configuration.less b/src/css/tabs/configuration.less index 3f565fff57..ab14554a6c 100644 --- a/src/css/tabs/configuration.less +++ b/src/css/tabs/configuration.less @@ -1,24 +1,24 @@ .tab-configuration { - .alignicon { - width: 15px; - height: 15px; + .alignicon { + width: 15px; + height: 15px; margin: 3px; - } - .pitch { - background-image: url(../../images/icons/cf_icon_pitch.svg); - background-repeat: no-repeat; - background-position: center; - } - .yaw { - background-image: url(../../images/icons/cf_icon_yaw.svg); - background-repeat: no-repeat; - background-position: center; - } - .roll { - background-image: url(../../images/icons/cf_icon_roll.svg); - background-repeat: no-repeat; - background-position: center; - } + } + .pitch { + background-image: url(../../images/icons/cf_icon_pitch.svg); + background-repeat: no-repeat; + background-position: center; + } + .yaw { + background-image: url(../../images/icons/cf_icon_yaw.svg); + background-repeat: no-repeat; + background-position: center; + } + .roll { + background-image: url(../../images/icons/cf_icon_roll.svg); + background-repeat: no-repeat; + background-position: center; + } .board_align_content { display: flex; justify-content: space-between; diff --git a/src/css/tabs/failsafe.less b/src/css/tabs/failsafe.less index 8c62277f2c..1186cfb03a 100644 --- a/src/css/tabs/failsafe.less +++ b/src/css/tabs/failsafe.less @@ -1,90 +1,90 @@ .tab-failsafe { - position: relative; - .modename { - background-color: #828885; - border-radius: 3px; - border: 1px solid #686c6a; - color: #fff !important; - font-weight: 600 !important; - padding-left: 3px; - padding-right: 3px; - margin-right: 3px; - } - .number { + position: relative; + .modename { + background-color: #828885; + border-radius: 3px; + border: 1px solid #686c6a; + color: #fff !important; + font-weight: 600 !important; + padding-left: 3px; + padding-right: 3px; + margin-right: 3px; + } + .number { label { display: flex; width: 100%; align-items: center; gap: 0.5rem; } - span { - margin-left: 0; - } - } - .subline { - width: 100%; - } - .radioarea { - border-radius: 0.5rem; - background-color: var(--surface-300); - margin-bottom: 0; - margin-top: 0.5rem; - min-height: 5rem; - padding: 0.5rem; + span { + margin-left: 0; + } + } + .subline { + width: 100%; + } + .radioarea { + border-radius: 0.5rem; + background-color: var(--surface-300); + margin-bottom: 0; + margin-top: 0.5rem; + min-height: 5rem; + padding: 0.5rem; display: flex; flex-direction: column; justify-content: center; - } - .radiobuttons { - width: fit-content; + } + .radiobuttons { + width: fit-content; display: flex; align-items: center; margin-left: 1rem; height: 5rem; - label { - width: 8rem; - margin-top: -2px; - } - } - .proceduresettings { - padding: 0.5rem; - } - .pro1 { - background-image: url(../../images/icons/cf_failsafe_procedure1.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; - } - .pro2 { - background-image: url(../../images/icons/cf_failsafe_procedure2.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; - } - .pro3 { - background-image: url(../../images/icons/cf_failsafe_procedure3.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; - } - .pro4 { - background-image: url(../../images/icons/cf_failsafe_procedure4.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; - } - .channelprimary { - width: 60%; - } - .channelauxiliary { - width: 60%; - } - .cf_tooltiptext { - display: none; - } - table { - width: 100%; - } + label { + width: 8rem; + margin-top: -2px; + } + } + .proceduresettings { + padding: 0.5rem; + } + .pro1 { + background-image: url(../../images/icons/cf_failsafe_procedure1.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro2 { + background-image: url(../../images/icons/cf_failsafe_procedure2.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro3 { + background-image: url(../../images/icons/cf_failsafe_procedure3.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro4 { + background-image: url(../../images/icons/cf_failsafe_procedure4.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .channelprimary { + width: 60%; + } + .channelauxiliary { + width: 60%; + } + .cf_tooltiptext { + display: none; + } + table { + width: 100%; + } @media all and (max-width: 575px) { .grid-box { &.col2 { diff --git a/src/css/tabs/firmware_flasher.less b/src/css/tabs/firmware_flasher.less index fce2dd3f4d..f17b41840b 100644 --- a/src/css/tabs/firmware_flasher.less +++ b/src/css/tabs/firmware_flasher.less @@ -1,45 +1,45 @@ .tab-firmware_flasher { min-height: 100%; - .build-options-wrapper { - .select2-container { - width: calc(100% - 2rem)!important; - } - .helpicon { - margin-top: 8px; - } - } - .info { - position: relative; - flex-grow: 100; - .progressLabel.valid { - background-color: var(--success-500); - border-radius: 5px; - } - .progressLabel.invalid { - background-color: var(--error-500); - border-radius: 5px; - } - .progressLabel.actionRequired { - background-color: var(--warning-500); - border-radius: 5px; - } - .progress { - width: 100%; - height: 26px; - border-radius: 5px; - border: 1px solid var(--surface-500); - -webkit-appearance: none; - &::-webkit-progress-bar { - background-color: var(--text); - border-radius: 4px; - box-shadow: inset 0px 0px 5px #2f2f2f; - } - &::-webkit-progress-value { - background-color: #F86008; - border-radius: 4px; - } - } - } + .build-options-wrapper { + .select2-container { + width: calc(100% - 2rem) !important; + } + .helpicon { + margin-top: 8px; + } + } + .info { + position: relative; + flex-grow: 100; + .progressLabel.valid { + background-color: var(--success-500); + border-radius: 5px; + } + .progressLabel.invalid { + background-color: var(--error-500); + border-radius: 5px; + } + .progressLabel.actionRequired { + background-color: var(--warning-500); + border-radius: 5px; + } + .progress { + width: 100%; + height: 26px; + border-radius: 5px; + border: 1px solid var(--surface-500); + -webkit-appearance: none; + &::-webkit-progress-bar { + background-color: var(--text); + border-radius: 4px; + box-shadow: inset 0px 0px 5px #2f2f2f; + } + &::-webkit-progress-value { + background-color: #f86008; + border-radius: 4px; + } + } + } .buildProgress { border-radius: 4px; appearance: none; @@ -53,32 +53,34 @@ border-radius: 0 4px 4px 0; } } - ul { - li { - list-style: initial; - list-style-type: circle; - margin-left: 30px; - } - } - .options { - position: relative; - line-height: 18px; - text-align: left; - select { - option.cached { - font-weight: bold; - } - } - .flash_on_connect_wrapper { - display: none; - } - } - .cf_table { - td { + ul { + li { + list-style: initial; + list-style-type: circle; + margin-left: 30px; + } + } + .options { + position: relative; + line-height: 18px; + text-align: left; + select { + option.cached { + font-weight: bold; + } + } + .flash_on_connect_wrapper { + display: none; + } + } + .cf_table { + td { height: 2rem; - } - } - select[name="firmware_version"], select[name="build_type"], .board-select .select2-container { + } + } + select[name="firmware_version"], + select[name="build_type"], + .board-select .select2-container { width: calc(100% - 2rem) !important; max-width: 24rem !important; } @@ -139,17 +141,18 @@ gap: 1rem; } } - .release_info, .build_configuration { - display: none; - } - .default_btn { - width: fit-content; + .release_info, + .build_configuration { + display: none; + } + .default_btn { + width: fit-content; padding-top: 0.25rem; padding-right: 0.25rem; - a { - padding: 0.15rem 0.5rem; - } - } + a { + padding: 0.15rem 0.5rem; + } + } @media all and (max-width: 1455px) { .grid-box { &.col3 { @@ -170,7 +173,7 @@ } } } - &+.content_toolbar { + & + .content_toolbar { width: calc(100% - 3.5rem) !important; } @media all and (max-width: 575px) { @@ -183,7 +186,7 @@ span { height: 18px; padding: 0 1rem !important; - &>div { + & > div { display: none; } } @@ -191,7 +194,7 @@ } } #customDefines { - width: calc(100% - 2rem)!important; + width: calc(100% - 2rem) !important; } #flash_manual_baud_rate { margin-left: 0.5rem; diff --git a/src/css/tabs/gps.less b/src/css/tabs/gps.less index 858affc97e..61b6ecabb9 100644 --- a/src/css/tabs/gps.less +++ b/src/css/tabs/gps.less @@ -1,261 +1,262 @@ -@import 'ol/ol.css'; +@import "ol/ol.css"; #map { - height: 100%; - margin: 0px; - padding: 0px; + height: 100%; + margin: 0px; + padding: 0px; } .tab-gps { - .GPS_signal_strength { - table { - td { + .GPS_signal_strength { + table { + td { padding: 0.25rem; - &:nth-child(2) { - text-align: center; - } - &:nth-child(3) { - text-align: center; - } - &:nth-child(4) { - text-align: left; - padding-left: 10px; - } - } - } - .head { - display: block; - text-align: center; - line-height: 20px; - font-weight: bold; - border-bottom: 1px solid var(--surface-500); - background-color: var(--surface-400); - } - } - meter { - width: 100%; - border-radius: 3px; - } - .GPS_info { - .head { - display: block; - text-align: center; - line-height: 20px; - font-weight: bold; - border-bottom: 1px solid var(--surface-500); - background-color: var(--surface-400); - } + &:nth-child(2) { + text-align: center; + } + &:nth-child(3) { + text-align: center; + } + &:nth-child(4) { + text-align: left; + padding-left: 10px; + } + } + } + .head { + display: block; + text-align: center; + line-height: 20px; + font-weight: bold; + border-bottom: 1px solid var(--surface-500); + background-color: var(--surface-400); + } + } + meter { + width: 100%; + border-radius: 3px; + } + .GPS_info { + .head { + display: block; + text-align: center; + line-height: 20px; + font-weight: bold; + border-bottom: 1px solid var(--surface-500); + background-color: var(--surface-400); + } tr { // align every 2nd td to the right td:nth-child(2n) { text-align: right; } } - } - .gps_map { - height: 460px; - } - .gps_config { - font-size: 11px; - input { - width: 90px; - height: 20px; - margin: 0 10px 5px 0; - padding-left: 5px; - padding-right: 5px; - border: 1px solid var(--surface-500); - border-radius: 3px; - background: var(--surface-200); - color: var(--text); - } - .select { - >div { - &:first-child { - height: 20px; - margin-right: 15px; - margin-left: 3px; - } - } - } - span { - line-height: 20px; - } - .gui_box { - margin-bottom: 10px; - } - td { - &:nth-child(2) { - width: 38px; - } - } - } - dl.features { - dt { - width: 10px; - height: 18px; - line-height: 18px; - input { - margin-top: 2px; - } - } - dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; - } - } - .freelabel { - margin-left: 10px; - position: relative; - } - .spacer_box { - padding-bottom: 10px; - width: calc(100% - 20px); - } - .select { - margin-bottom: 5px; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; - } - } + } + .gps_map { + height: 460px; + } + .gps_config { + font-size: 11px; + input { + width: 90px; + height: 20px; + margin: 0 10px 5px 0; + padding-left: 5px; + padding-right: 5px; + border: 1px solid var(--surface-500); + border-radius: 3px; + background: var(--surface-200); + color: var(--text); + } + .select { + > div { + &:first-child { + height: 20px; + margin-right: 15px; + margin-left: 3px; + } + } + } + span { + line-height: 20px; + } + .gui_box { + margin-bottom: 10px; + } + td { + &:nth-child(2) { + width: 38px; + } + } + } + dl.features { + dt { + width: 10px; + height: 18px; + line-height: 18px; + input { + margin-top: 2px; + } + } + dd { + margin: 0 0 0 20px; + height: 18px; + line-height: 18px; + } + } + .freelabel { + margin-left: 10px; + position: relative; + } + .spacer_box { + padding-bottom: 10px; + width: calc(100% - 20px); + } + .select { + margin-bottom: 5px; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } - #connect { - display: none; - text-align: center; - padding-top: 40%; - a { - font-weight: bold; - margin-top: 10px; - } - } - #waiting { - margin-top: 0px; - display: none; - text-align: center; - padding-top: 0px; - background-image: url(../../images/loading-bars.svg); - background-position: center 40%; - background-size: 15%; - height: 100%; - background-repeat: no-repeat; - width: 100%; - .info { - margin-top: 30%; - } - } - #loadmap { - margin-top: 0px; - display: none; - height: 100%; - width: 100%; - .map { - width: 100%; - height: 400px; - } - .controls { - width: 100%; - height: 33px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - background-color: #D1D1D1; + #connect { + display: none; + text-align: center; + padding-top: 40%; + a { + font-weight: bold; + margin-top: 10px; + } + } + #waiting { + margin-top: 0px; + display: none; + text-align: center; + padding-top: 0px; + background-image: url(../../images/loading-bars.svg); + background-position: center 40%; + background-size: 15%; + height: 100%; + background-repeat: no-repeat; + width: 100%; + .info { + margin-top: 30%; + } + } + #loadmap { + margin-top: 0px; + display: none; + height: 100%; + width: 100%; + .map { + width: 100%; + height: 400px; + } + .controls { + width: 100%; + height: 33px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #d1d1d1; display: flex; justify-content: end; gap: 0.5rem; - button { - background-color: white; - border-radius: 4px; - border: 1px var(--surface-500) solid; - color: grey; - text-align: center; - font-size: 20px; - line-height: 10px; - padding: 6px; - margin-top: 5px; - &:hover { - background-color: var(--surface-500); - } - &:active { - background-color: #e6e6e6; - } - &:first-child { - margin-left: -1px; - margin-right: 5px; - border-bottom-left-radius: 0px; - border-top-left-radius: 0px; - } - &:last-child { - margin-right: 0px; - border-bottom-right-radius: 0px; - border-top-right-radius: 0px; - } - } - } - } - iframe { - height: 400px; - width: 100%; - } + button { + background-color: white; + border-radius: 4px; + border: 1px var(--surface-500) solid; + color: grey; + text-align: center; + font-size: 20px; + line-height: 10px; + padding: 6px; + margin-top: 5px; + &:hover { + background-color: var(--surface-500); + } + &:active { + background-color: #e6e6e6; + } + &:first-child { + margin-left: -1px; + margin-right: 5px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; + } + &:last-child { + margin-right: 0px; + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; + } + } + } + } + iframe { + height: 400px; + width: 100%; + } } meter[value] { - &::-webkit-meter-bar { - background-color: #d2d2d2; - border-radius: 2px; - box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.95); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; - } - &::-webkit-meter-value { - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)), -webkit-linear-gradient(left, #ffbb00, #ffbb00); - border-radius: 2px; - box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset; - } + &::-webkit-meter-bar { + background-color: #d2d2d2; + border-radius: 2px; + box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.95); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; + } + &::-webkit-meter-value { + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)), + -webkit-linear-gradient(left, #ffbb00, #ffbb00); + border-radius: 2px; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset; + } } @media only screen and (max-width: 1455px) { - .tab-gps { - #waiting { - .info { - margin-top: 50%; - } - } - } + .tab-gps { + #waiting { + .info { + margin-top: 50%; + } + } + } } @media only screen and (max-width: 1055px) { - .tab-gps { - iframe { - height: 347px; - width: 100%; - } - .gps_map { - height: 403px; - } - } - .tabs-gps { - #loadmap { - .map { - height: 343px; - } - } - } + .tab-gps { + iframe { + height: 347px; + width: 100%; + } + .gps_map { + height: 403px; + } + } + .tabs-gps { + #loadmap { + .map { + height: 343px; + } + } + } } @media only screen and (max-device-width: 1055px) { - .tab-gps { - iframe { - height: 347px; - width: 100%; - } - .gps_map { - height: 403px; - } - } - .tabs-gps { - #loadmap { - .map { - height: 343px; - } - } - } + .tab-gps { + iframe { + height: 347px; + width: 100%; + } + .gps_map { + height: 403px; + } + } + .tabs-gps { + #loadmap { + .map { + height: 343px; + } + } + } } diff --git a/src/css/tabs/help.less b/src/css/tabs/help.less index e759a84ea7..d7a79f0b55 100644 --- a/src/css/tabs/help.less +++ b/src/css/tabs/help.less @@ -1,37 +1,37 @@ .tab-help { - .gui_box { - min-height: 500px; - margin-bottom: 0; - } - ul { - margin-bottom: 15px; - } - li { - border-top: 1px dotted var(--surface-500); - padding-top: 5px; - padding-bottom: 5px; - background-image: url(../../images/arrow.svg); - background-repeat: no-repeat; - background-position: 0 8px; - background-size: 12px; - span { - margin-left: 17px; - display: block; - a { - color: var(--primary-500); - } - } - } - .subline { - margin-bottom: 5px; - } + .gui_box { + min-height: 500px; + margin-bottom: 0; + } + ul { + margin-bottom: 15px; + } + li { + border-top: 1px dotted var(--surface-500); + padding-top: 5px; + padding-bottom: 5px; + background-image: url(../../images/arrow.svg); + background-repeat: no-repeat; + background-position: 0 8px; + background-size: 12px; + span { + margin-left: 17px; + display: block; + a { + color: var(--primary-500); + } + } + } + .subline { + margin-bottom: 5px; + } } /** (phones) **/ @media all and (max-width: 575px) { - .tab-help { - .gui_box { - min-height: auto; - margin-bottom: 15px; - } - } + .tab-help { + .gui_box { + min-height: auto; + margin-bottom: 15px; + } + } } diff --git a/src/css/tabs/landing.less b/src/css/tabs/landing.less index 195d03187b..633aa891f5 100644 --- a/src/css/tabs/landing.less +++ b/src/css/tabs/landing.less @@ -1,142 +1,144 @@ .tab-landing { display: flex; - min-height: 100%; - background: var(--surface-100) url(../../images/pattern_light.png); - background-size: 300px; - overflow: hidden; - .content_wrapper { + min-height: 100%; + background: var(--surface-100) url(../../images/pattern_light.png); + background-size: 300px; + overflow: hidden; + .content_wrapper { display: flex; flex-direction: column; - padding: 0; - height: unset; - overflow-y: auto; - } - .content_top { - height: 140px; - padding: 20px; - margin-bottom: 15px; - } - .content_mid { - background-color: var(--surface-300); - overflow: hidden; - padding: 0 15px; + padding: 0; + height: unset; + overflow-y: auto; + } + .content_top { + height: 140px; + padding: 20px; + margin-bottom: 15px; + } + .content_mid { + background-color: var(--surface-300); + overflow: hidden; + padding: 0 15px; margin-top: auto; - .column { - .wrap2 { - padding: 10px; - } - } - h2 { - margin-bottom: 5px; - font-size: 13px; - } - h3 { - font-size: 12px; - margin-bottom: 5px; - } - .text2 { - ul { - margin-top: 2px; - } - li { - padding: 2px 0; + .column { + .wrap2 { + padding: 10px; + } + } + h2 { + margin-bottom: 5px; + font-size: 13px; + } + h3 { + font-size: 12px; + margin-bottom: 5px; + } + .text2 { + ul { + margin-top: 2px; + } + li { + padding: 2px 0; list-style: circle; margin-left: 30px; - } - } - .text3 { - .wrap2 { - border: 1px solid var(--surface-300); - border-radius: 5px; - background: var(--surface-400); - min-height: 187px; - font-size: 11px; - } - .donate { - margin-top: 10px; - text-align: center; - } - } - } - .content_foot { - clear: both; - padding: 10px 0 5px; - } - .logowrapper { - margin-left: auto; - margin-right: auto; - margin-top: 5px; - width: 800px; - color: var(--text); - font-size: 14px; - font-weight: 300; - img { - width: 600px; - margin: 5px; - } - span { - font-size: 22px; - font-weight: 300; - } - } - .content_mid_bottom { - padding: 0 15px; - margin-top: 5px; - .logoSocialMedia { - float: left; - width: 40px; - } - img { - height: 30px; - width: 30px; - } - .discordLogo { - padding-top: 3px; - } - .socialMediaText { - margin-top: 0; - margin-left: 5px; - display: inline-block; - font-weight: normal; - font-size: 12px; - } - .socialMediaParagraph { - margin-bottom: 15px; - } - } - .languageSwitcher { - .selected_language { - font-weight: bold; - } - margin-left: auto; - margin-right: auto; - text-align: center; - a { - font-weight: normal; - white-space: nowrap; - &:not(:last-child) { - &:after { - content: ", "; - font-weight: normal; - } - } - } - } + } + } + .text3 { + .wrap2 { + border: 1px solid var(--surface-300); + border-radius: 5px; + background: var(--surface-400); + min-height: 187px; + font-size: 11px; + } + .donate { + margin-top: 10px; + text-align: center; + } + } + } + .content_foot { + clear: both; + padding: 10px 0 5px; + } + .logowrapper { + margin-left: auto; + margin-right: auto; + margin-top: 5px; + width: 800px; + color: var(--text); + font-size: 14px; + font-weight: 300; + img { + width: 600px; + margin: 5px; + } + span { + font-size: 22px; + font-weight: 300; + } + } + .content_mid_bottom { + padding: 0 15px; + margin-top: 5px; + .logoSocialMedia { + float: left; + width: 40px; + } + img { + height: 30px; + width: 30px; + } + .discordLogo { + padding-top: 3px; + } + .socialMediaText { + margin-top: 0; + margin-left: 5px; + display: inline-block; + font-weight: normal; + font-size: 12px; + } + .socialMediaParagraph { + margin-bottom: 15px; + } + } + .languageSwitcher { + .selected_language { + font-weight: bold; + } + margin-left: auto; + margin-right: auto; + text-align: center; + a { + font-weight: normal; + white-space: nowrap; + &:not(:last-child) { + &:after { + content: ", "; + font-weight: normal; + } + } + } + } } -.text1, .text2, .text3 { - margin-top: 15px; - margin-bottom: 15px; - font-weight: normal; - font-size: 12px; +.text1, +.text2, +.text3 { + margin-top: 15px; + margin-bottom: 15px; + font-weight: normal; + font-size: 12px; } @media all and (max-width: 575px) { - .tab-landing { - .logowrapper { - width: auto; - img { - width: auto; - } - } - } + .tab-landing { + .logowrapper { + width: auto; + img { + width: auto; + } + } + } } diff --git a/src/css/tabs/led_strip.less b/src/css/tabs/led_strip.less index 4a21e6e572..0b1bbc2594 100644 --- a/src/css/tabs/led_strip.less +++ b/src/css/tabs/led_strip.less @@ -1,593 +1,680 @@ .tab-led-strip { - .content_wrapper { - position: relative !important; - } - .help { - padding: 10px; - background-color: #ffcb18; - margin-bottom: 10px; - } - .section { - color: #565656; - margin: 20px 0 5px 0; - border-bottom: 1px solid var(--surface-500); - } - .mainGrid { - width: calc((24px + 7px) * 16); - height: calc((24px + 7px) * 16); - float: left; - margin-right: 10px; - border-radius: 3px; - background-color: var(--surface-200); - border: 1px solid var(--surface-500); - .gPoint { - float: left; - border: solid 1px var(--surface-500); - width: 23px; - height: 23px; - margin: 3px; - border-radius: 7px; - background: var(--surface-300); - cursor: pointer; - } - } - .gPoint.function-s { - background: brown; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - .overlay-s { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 16px; - } - } - .gPoint.function-c { - background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: grey; - .overlay-color { - float: left; - height: 15px; - width: 15px; - margin-top: -23px; - margin-left: 4px; - border-radius: 4px; - } - } - .gPoint.function-f { - background: rgb(50, 205, 50); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(50, 205, 50); - } - .gPoint.function-a { - background: rgb(52, 155, 255); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - } - .gPoint.function-l { - background: magenta; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - } - .gPoint.function-r { - background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, white 60%,white 70%,black 70%, black 100%); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: black; - .overlay-color { - float: left; - height: 15px; - width: 15px; - margin-top: -23px; - margin-left: 4px; - border-radius: 4px; - } - } - .gPoint.function-g { - background: green; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - } - .gPoint.function-w { - .overlay-w { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , red 0%, red 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -30px; - margin-left: -9px; - } - } - .gPoint.function-v { - .overlay-v { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , black 0%, black 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 4px; - } - } - .gPoint.function-i { - .overlay-i { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , yellow 0%, yellow 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -30px; - margin-left: 16px; - } - } - .gPoint.function-t { - .overlay-t { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , orange 0%, orange 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: -9px; - } - } - .gPoint.function-o { - .overlay-o { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 16px; - } - } - .gPoint.function-b { - .overlay-b { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , rgb(52, 155, 255) 0%, rgb(52, 155, 255) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -18px; - margin-left: -9px; - } - } - .gPoint.function-y { - .overlay-y { - float: left; - height: 6px; - width: 16px; - background-image: radial-gradient(1px at 8px 50% , rgb(0, 242, 12) 0%, rgb(0, 242, 12) 0% 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -30px; - margin-left: 4px; - } - } - .gPoint.function-p { - background: rgb(0, 128, 85); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - } - .gPoint.function-e { - background: rgb(0, 0, 128); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); - } - .gPoint.function-u { - background: linear-gradient( to bottom right, rgba(191, 0, 255, 0.5) 0%, rgba(0, 179, 255, 0.5) 33%, rgba(0, 4, 255, 0.5) 66%, rgba(191, 0, 255, 0.5) 100%); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: grey; - .overlay-color { - float: left; - height: 15px; - width: 15px; - margin-top: -23px; - margin-left: 4px; - border-radius: 4px; - } - } - .gPoint { - select { - background: #000; - width: 13px; - height: 13px; - } - } - .wire { - text-align: center; - font-size: 12px; - padding-top: 0px; - display: block; - margin-left: -1px; - margin-top: -21px; - width: 24px; - height: 24px; - color: white; - } - button { - text-align: center; - font-weight: bold; - border: 1px solid var(--surface-500); - background-color: var(--surface-400); - border-radius: 3px; - padding: 7px 6px; - margin: 3px 0; - &:hover { - background-color: #acacac; - } - } - .funcWire.btnOn { - background: rgb(15, 171, 22); - } - .w100 { - width: 100%; - } - .w50 { - width: 49%; - } - .select { - .function-c { - background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); - } - .function-f { - background: rgb(50, 205, 50); - } - .function-a { - background: rgb(52, 155, 255); - } - .function-u { - background: linear-gradient( to bottom right, rgba(191, 0, 255, 0.5) 0%, rgba(0, 179, 255, 0.5) 33%, rgba(0, 4, 255, 0.5) 66%, rgba(191, 0, 255, 0.5) 100%); - } - .function-l { - background: magenta; - } - .function-s { - background: brown; - } - .function-g { - background: green; - } - .function-r { - background: #acacac; - } - .functionSelect { - border: 1px solid var(--surface-500); - border-radius: 3px; - background: var(--surface-200); - color: var(--text); - } - } - .header { - color: #c4c4c4; - font-size: 13px; - font-weight: 600; - } - .overlays { - display: inline-block; - margin-top: 5px; - } - .modifiers { - display: inline-block; - margin-top: 5px; - .rainbowOverlay { - margin-top: 1px; - } - .auxSelect { - border: 1px solid var(--surface-500); - border-radius: 3px; - background: var(--surface-200); - color: var(--text); - } - .rainbowSlidersDiv { - display: none; - margin-top: 5px; - .rainbowDeltaSlider, .rainbowFreqSlider { - display: flex; - align-items: center; - input { - width: 150px; - margin-right: 5px; - margin-top: 5px; - } - label { - margin-right: 10px; - margin-top: 5px; - } - } - } - } + .content_wrapper { + position: relative !important; + } + .help { + padding: 10px; + background-color: #ffcb18; + margin-bottom: 10px; + } + .section { + color: #565656; + margin: 20px 0 5px 0; + border-bottom: 1px solid var(--surface-500); + } + .mainGrid { + width: calc((24px + 7px) * 16); + height: calc((24px + 7px) * 16); + float: left; + margin-right: 10px; + border-radius: 3px; + background-color: var(--surface-200); + border: 1px solid var(--surface-500); + .gPoint { + float: left; + border: solid 1px var(--surface-500); + width: 23px; + height: 23px; + margin: 3px; + border-radius: 7px; + background: var(--surface-300); + cursor: pointer; + } + } + .gPoint.function-s { + background: brown; + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + .overlay-s { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + brown 0%, + brown 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -6px; + margin-left: 16px; + } + } + .gPoint.function-c { + background: linear-gradient( + to bottom right, + rgba(255, 0, 0, 0.5) 0%, + rgba(255, 255, 0, 0.5) 15%, + rgba(0, 255, 0, 0.5) 30%, + rgba(0, 255, 255, 0.5) 50%, + rgba(0, 0, 255, 0.5) 65%, + rgba(255, 0, 255, 0.5) 80%, + rgba(255, 0, 0, 0.5) 100% + ); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: grey; + .overlay-color { + float: left; + height: 15px; + width: 15px; + margin-top: -23px; + margin-left: 4px; + border-radius: 4px; + } + } + .gPoint.function-f { + background: rgb(50, 205, 50); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(50, 205, 50); + } + .gPoint.function-a { + background: rgb(52, 155, 255); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-l { + background: magenta; + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-r { + background: radial-gradient( + ellipse at center, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 1) 60%, + white 60%, + white 70%, + black 70%, + black 100% + ); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: black; + .overlay-color { + float: left; + height: 15px; + width: 15px; + margin-top: -23px; + margin-left: 4px; + border-radius: 4px; + } + } + .gPoint.function-g { + background: green; + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-w { + .overlay-w { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + red 0%, + red 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -30px; + margin-left: -9px; + } + } + .gPoint.function-v { + .overlay-v { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + black 0%, + black 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -6px; + margin-left: 4px; + } + } + .gPoint.function-i { + .overlay-i { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + yellow 0%, + yellow 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -30px; + margin-left: 16px; + } + } + .gPoint.function-t { + .overlay-t { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + orange 0%, + orange 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -6px; + margin-left: -9px; + } + } + .gPoint.function-o { + .overlay-o { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + brown 0%, + brown 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -6px; + margin-left: 16px; + } + } + .gPoint.function-b { + .overlay-b { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + rgb(52, 155, 255) 0%, + rgb(52, 155, 255) 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -18px; + margin-left: -9px; + } + } + .gPoint.function-y { + .overlay-y { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient( + 1px at 8px 50%, + rgb(0, 242, 12) 0%, + rgb(0, 242, 12) 0% 2px, + rgba(0, 0, 0, 0.3) 3px, + rgba(0, 0, 0, 0) 4px + ); + margin-top: -30px; + margin-left: 4px; + } + } + .gPoint.function-p { + background: rgb(0, 128, 85); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-e { + background: rgb(0, 0, 128); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-u { + background: linear-gradient( + to bottom right, + rgba(191, 0, 255, 0.5) 0%, + rgba(0, 179, 255, 0.5) 33%, + rgba(0, 4, 255, 0.5) 66%, + rgba(191, 0, 255, 0.5) 100% + ); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); + border-color: grey; + .overlay-color { + float: left; + height: 15px; + width: 15px; + margin-top: -23px; + margin-left: 4px; + border-radius: 4px; + } + } + .gPoint { + select { + background: #000; + width: 13px; + height: 13px; + } + } + .wire { + text-align: center; + font-size: 12px; + padding-top: 0px; + display: block; + margin-left: -1px; + margin-top: -21px; + width: 24px; + height: 24px; + color: white; + } + button { + text-align: center; + font-weight: bold; + border: 1px solid var(--surface-500); + background-color: var(--surface-400); + border-radius: 3px; + padding: 7px 6px; + margin: 3px 0; + &:hover { + background-color: #acacac; + } + } + .funcWire.btnOn { + background: rgb(15, 171, 22); + } + .w100 { + width: 100%; + } + .w50 { + width: 49%; + } + .select { + .function-c { + background: linear-gradient( + to bottom right, + rgba(255, 0, 0, 0.5) 0%, + rgba(255, 255, 0, 0.5) 15%, + rgba(0, 255, 0, 0.5) 30%, + rgba(0, 255, 255, 0.5) 50%, + rgba(0, 0, 255, 0.5) 65%, + rgba(255, 0, 255, 0.5) 80%, + rgba(255, 0, 0, 0.5) 100% + ); + } + .function-f { + background: rgb(50, 205, 50); + } + .function-a { + background: rgb(52, 155, 255); + } + .function-u { + background: linear-gradient( + to bottom right, + rgba(191, 0, 255, 0.5) 0%, + rgba(0, 179, 255, 0.5) 33%, + rgba(0, 4, 255, 0.5) 66%, + rgba(191, 0, 255, 0.5) 100% + ); + } + .function-l { + background: magenta; + } + .function-s { + background: brown; + } + .function-g { + background: green; + } + .function-r { + background: #acacac; + } + .functionSelect { + border: 1px solid var(--surface-500); + border-radius: 3px; + background: var(--surface-200); + color: var(--text); + } + } + .header { + color: #c4c4c4; + font-size: 13px; + font-weight: 600; + } + .overlays { + display: inline-block; + margin-top: 5px; + } + .modifiers { + display: inline-block; + margin-top: 5px; + .rainbowOverlay { + margin-top: 1px; + } + .auxSelect { + border: 1px solid var(--surface-500); + border-radius: 3px; + background: var(--surface-200); + color: var(--text); + } + .rainbowSlidersDiv { + display: none; + margin-top: 5px; + .rainbowDeltaSlider, + .rainbowFreqSlider { + display: flex; + align-items: center; + input { + width: 150px; + margin-right: 5px; + margin-top: 5px; + } + label { + margin-right: 10px; + margin-top: 5px; + } + } + } + } - .brightnessSliderDiv { - .brightnessSlider{ - display: flex; - align-items: center; - input { - width: 150px; - margin-right: 5px; - margin-top: 5px; - } - label { - margin-right: 10px; - margin-top: 5px; - } - } - } + .brightnessSliderDiv { + .brightnessSlider { + display: flex; + align-items: center; + input { + width: 150px; + margin-right: 5px; + margin-top: 5px; + } + label { + margin-right: 10px; + margin-top: 5px; + } + } + } - .colorDefineSliders { - display: inline-block; - position: absolute; - z-index: 10000; - background: var(--surface-200); - padding: 5px; - border-color: #565656; - border-style: solid; - border-radius: 6px; - border-width: 2px; - width: 167px; - } - .color-1 { - background: white; - } - .color-2 { - background: red; - } - .color-3 { - background: orange; - } - .color-4 { - background: yellow; - } - .color-5 { - background: greenyellow; - } - .color-6 { - background: limegreen; - } - .color-7 { - background: palegreen; - } - .color-8 { - background: cyan; - } - .color-9 { - background: lightcyan; - } - .color-10 { - background: dodgerblue; - } - .color-11 { - background: darkviolet; - } - .color-12 { - background: magenta; - } - .color-13 { - background: deeppink; - } - .directions { - button.btnOn { - border-color: #000; - } - .btnOn { - background: #FFF; - color: #000; - } - height: 130px; - position: relative; - display: inline-block; - width: 49%; - button { - position: absolute; - width: 30px; - height: 30px; - } - .dir-n { - top: 0; - left: 32px; - } - .dir-s { - top: 64px; - left: 32px; - } - .dir-e { - left: 64px; - top: 32px; - } - .dir-w { - left: 0; - top: 32px; - } - .dir-u { - right: 10px; - top: 15px; - } - .dir-d { - right: 10px; - top: 54px; - } - } - .colors { - .btnOn { - border-color: #000; - } - button { - &:hover { - border-color: inherit; - border-style: solid; - } - width: 23%; - color: white; - } - height: 130px; - position: relative; - display: inline-block; - width: 49%; - } - .special_colors { - button.btnOn { - border-color: #000; - } - } - .mode_colors { - button.btnOn { - border-color: #000; - } - .modeSelect { - border: 1px solid var(--surface-500); - border-radius: 3px; - background: var(--surface-200); - color: var(--text); - } - } - .indicators { - position: relative; - height: 24px; - span { - width: 0; - height: 0; - position: absolute; - display: none; - font-size: 10px; - font-weight: bold; - } - .north { - top: -9px; - left: 5px; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid rgba(0,0,0,.8); - } - .south { - bottom: -8px; - left: 5px; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 7px solid rgba(0,0,0,.8); - } - .east { - bottom: 7px; - right: -9px; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-left: 7px solid rgba(0,0,0,.8); - } - .west { - bottom: 7px; - left: -9px; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-right: 7px solid rgba(0,0,0,.8); - } - .up { - top: 0px; - left: 2px; - } - .down { - bottom: 17px; - right: 10px; - } - } - .dir-n { - .north { - display: inline; - } - } - .dir-s { - .south { - display: inline; - } - } - .dir-e { - .east { - display: inline; - } - } - .dir-w { - .west { - display: inline; - } - } - .dir-u { - .up { - display: inline; - } - } - .dir-d { - .down { - display: inline; - } - } - .controls { - position: relative; - float: left; - width: 285px; - } - .wires-remaining { - float: right; - text-align: center; - font-size: 14px; - div { - font-size: 40px; - color: var(--primary-500); - margin-bottom: -5px; - margin-top: -10px; - } - } - .wires-remaining.error { - div { - color: #FF5700; - } - } - >.buttons { - margin-top: 10px; - } - .gridSections { - position: absolute; - z-index: -1; - width: 496px; - border: 1px solid var(--surface-500); - margin-top: -1px; - margin-left: -1px; - border-radius: 3px; - .block { - width: 122px; - height: 122px; - float: left; - border: 1px solid var(--surface-500); - } - } - .ui-selected { - box-shadow: inset 0 0 8px rgba(255, 0, 255, 1) !important; - border: solid 1px #000 !important; - } - .ui-selecting { - box-shadow: inset 0 0 30px rgba(255, 0, 255, .7) !important; - border: solid 1px #000 !important; - } - .ui-selectable-helper { - background: rgba(0,0,0,.4); - position: absolute; - z-index: 100; - border: 1px dotted white; - } + .colorDefineSliders { + display: inline-block; + position: absolute; + z-index: 10000; + background: var(--surface-200); + padding: 5px; + border-color: #565656; + border-style: solid; + border-radius: 6px; + border-width: 2px; + width: 167px; + } + .color-1 { + background: white; + } + .color-2 { + background: red; + } + .color-3 { + background: orange; + } + .color-4 { + background: yellow; + } + .color-5 { + background: greenyellow; + } + .color-6 { + background: limegreen; + } + .color-7 { + background: palegreen; + } + .color-8 { + background: cyan; + } + .color-9 { + background: lightcyan; + } + .color-10 { + background: dodgerblue; + } + .color-11 { + background: darkviolet; + } + .color-12 { + background: magenta; + } + .color-13 { + background: deeppink; + } + .directions { + button.btnOn { + border-color: #000; + } + .btnOn { + background: #fff; + color: #000; + } + height: 130px; + position: relative; + display: inline-block; + width: 49%; + button { + position: absolute; + width: 30px; + height: 30px; + } + .dir-n { + top: 0; + left: 32px; + } + .dir-s { + top: 64px; + left: 32px; + } + .dir-e { + left: 64px; + top: 32px; + } + .dir-w { + left: 0; + top: 32px; + } + .dir-u { + right: 10px; + top: 15px; + } + .dir-d { + right: 10px; + top: 54px; + } + } + .colors { + .btnOn { + border-color: #000; + } + button { + &:hover { + border-color: inherit; + border-style: solid; + } + width: 23%; + color: white; + } + height: 130px; + position: relative; + display: inline-block; + width: 49%; + } + .special_colors { + button.btnOn { + border-color: #000; + } + } + .mode_colors { + button.btnOn { + border-color: #000; + } + .modeSelect { + border: 1px solid var(--surface-500); + border-radius: 3px; + background: var(--surface-200); + color: var(--text); + } + } + .indicators { + position: relative; + height: 24px; + span { + width: 0; + height: 0; + position: absolute; + display: none; + font-size: 10px; + font-weight: bold; + } + .north { + top: -9px; + left: 5px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid rgba(0, 0, 0, 0.8); + } + .south { + bottom: -8px; + left: 5px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid rgba(0, 0, 0, 0.8); + } + .east { + bottom: 7px; + right: -9px; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-left: 7px solid rgba(0, 0, 0, 0.8); + } + .west { + bottom: 7px; + left: -9px; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-right: 7px solid rgba(0, 0, 0, 0.8); + } + .up { + top: 0px; + left: 2px; + } + .down { + bottom: 17px; + right: 10px; + } + } + .dir-n { + .north { + display: inline; + } + } + .dir-s { + .south { + display: inline; + } + } + .dir-e { + .east { + display: inline; + } + } + .dir-w { + .west { + display: inline; + } + } + .dir-u { + .up { + display: inline; + } + } + .dir-d { + .down { + display: inline; + } + } + .controls { + position: relative; + float: left; + width: 285px; + } + .wires-remaining { + float: right; + text-align: center; + font-size: 14px; + div { + font-size: 40px; + color: var(--primary-500); + margin-bottom: -5px; + margin-top: -10px; + } + } + .wires-remaining.error { + div { + color: #ff5700; + } + } + > .buttons { + margin-top: 10px; + } + .gridSections { + position: absolute; + z-index: -1; + width: 496px; + border: 1px solid var(--surface-500); + margin-top: -1px; + margin-left: -1px; + border-radius: 3px; + .block { + width: 122px; + height: 122px; + float: left; + border: 1px solid var(--surface-500); + } + } + .ui-selected { + box-shadow: inset 0 0 8px rgba(255, 0, 255, 1) !important; + border: solid 1px #000 !important; + } + .ui-selecting { + box-shadow: inset 0 0 30px rgba(255, 0, 255, 0.7) !important; + border: solid 1px #000 !important; + } + .ui-selectable-helper { + background: rgba(0, 0, 0, 0.4); + position: absolute; + z-index: 100; + border: 1px dotted white; + } } .gridWire { - .wire { - color: rgba(255,255,255,1); - } - background: rgba(15, 171, 22, .5) !important; + .wire { + color: rgba(255, 255, 255, 1); + } + background: rgba(15, 171, 22, 0.5) !important; } .colorDefineSliderValue { - width: 10px; - display: inline-table; - margin-bottom: 5px; + width: 10px; + display: inline-table; + margin-bottom: 5px; } .colorDefineSliderLabel { - width: 10px; - display: inline-table; - margin-bottom: 5px; + width: 10px; + display: inline-table; + margin-bottom: 5px; } @media all and (max-width: 575px) { - .tab-led-strip { - .controls { - width: 100%; - } - } + .tab-led-strip { + .controls { + width: 100%; + } + } } diff --git a/src/css/tabs/logging.less b/src/css/tabs/logging.less index 4a26d9c4ef..2d803bd396 100644 --- a/src/css/tabs/logging.less +++ b/src/css/tabs/logging.less @@ -1,95 +1,95 @@ .tab-logging { - .properties { - margin-top: 10px; - dt { - float: left; - width: 120px; - height: 20px; - line-height: 20px; - font-weight: bold; - input { - vertical-align: middle; - } - } - dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; - color: var(--subtleText); - } - } - .speed { - margin-top: 5px; - width: 80px; - border: 1px solid var(--surface-500); - border-radius: 3px; - } - .info { - margin-top: 10px; - dt { - float: left; - width: fit-content; - height: 20px; - line-height: 20px; - font-weight: bold; - } - dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; - } - } - .fixed_band { - width: 100%; - bottom: 0; - } - .save_btn { - .back { - display: none; - } - } - .back_btn { - display: none; - } + .properties { + margin-top: 10px; + dt { + float: left; + width: 120px; + height: 20px; + line-height: 20px; + font-weight: bold; + input { + vertical-align: middle; + } + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + color: var(--subtleText); + } + } + .speed { + margin-top: 5px; + width: 80px; + border: 1px solid var(--surface-500); + border-radius: 3px; + } + .info { + margin-top: 10px; + dt { + float: left; + width: fit-content; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + } + } + .fixed_band { + width: 100%; + bottom: 0; + } + .save_btn { + .back { + display: none; + } + } + .back_btn { + display: none; + } } @media only screen and (max-width: 1055px) { - .tab-logging { - table { - thead { - tr { - &:first-child { - font-size: 12px; - height: 22px; - } - } - } - } - } + .tab-logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } } @media only screen and (max-device-width: 1055px) { - .tab-logging { - table { - thead { - tr { - &:first-child { - font-size: 12px; - height: 22px; - } - } - } - } - } + .tab-logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } } @media all and (max-width: 575px) { - .tab-logging { - .properties { - dd { - width: 100%; - height: auto; - } - width: auto; - } - } + .tab-logging { + .properties { + dd { + width: 100%; + height: auto; + } + width: auto; + } + } } diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less index 0303282261..7b30090c65 100644 --- a/src/css/tabs/motors.less +++ b/src/css/tabs/motors.less @@ -10,405 +10,405 @@ gap: 1rem; } .danger { - color: var(--text); + color: var(--text); .switchery { margin-right: 0.1rem; } } - .ui-grid-col { - margin-bottom: 0; - } - position: relative; - .groupTitle { - padding: 0 0 5px 0; - margin: 0 0 10px 0; - font-size: 16px; - border-bottom: 1px solid var(--surface-500); - } - .mixerPreview { - svg { - width: 150px; - height: 150px; - margin-left: 15px; - } - } - dl.features { - dt { - width: 10px; - height: 18px; - line-height: 18px; - } - dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; - } - } - .number { - input { - width: 55px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; - } - .disabled { - width: 48px; - padding: 0 5px; - background-color: var(--surface-400); - } - input[readonly] { - background-color: #AFAFAF; - border: none; - pointer-events: none; - opacity: 0.5; - } - span { - margin-left: 0; - } - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; - } - } - .disarm { - .checkbox { - padding-left: 0; - margin-top: -5px; - margin-right: 5px; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - } - margin-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - } - .freelabel { - margin-left: 10px; - position: relative; - } - span { - margin: 0; - } - .spacer_box.mixer_settings { - padding-bottom: 0px; - } - .motor_direction_reversed { - padding-top: 10px; - } - .motor_tool_buttons { - padding-left: 10px; - } - .disarmdelay { - width: 100%; - border-bottom: 1px solid var(--surface-500); - } - .select { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; - } - } - .selectProtocol { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - } - thead { - display: none; - } - .alignicon { - width: 15px; - height: 15px; - margin: 3px; - } - ._3dSettings { - width: 100%; - } - .modelAndGraph { - width: 100%; - } - .btn { - .disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: none; - pointer-events: none; - opacity: 0.5; - } - } - #dialogMotorOutputReorder-closebtn { - margin-right: 0px; - margin-bottom: 0px; - } - dialog { - width: 400px; - height: 440px; - } - #dialogMotorOutputReorderContentWrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - } - #dialogMotorOutputReorderContent { - flex-grow: 1; - } - #escDshotDirectionDialog-closebtn { - margin-right: 0px; - margin-bottom: 0px; - position: absolute; - right: 0px; - bottom: 0px; - } - #escDshotDirectionDialog-ContentWrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - position: relative; - } - #escDshotDirectionDialog-Content { - flex-grow: 1; - } - #dialog-mixer-reset { - width: 400px; - height: fit-content; - } - #dialog-settings-changed { - height: 120px; - } - #dialog-settings-reset-confirmbtn { - margin-bottom: 12px; - position: relative; - } - #dialog-settings-changed-confirmbtn { - margin-right: 0px; - margin-bottom: 0px; - position: absolute; - right: 0px; - bottom: 0px; - } - #dialog-settings-changed-content-wrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - position: relative; - } - #dialog-settings-changed-content { - flex-grow: 1; - } - .plot_control { - margin: 0; + .ui-grid-col { + margin-bottom: 0; + } + position: relative; + .groupTitle { + padding: 0 0 5px 0; + margin: 0 0 10px 0; + font-size: 16px; + border-bottom: 1px solid var(--surface-500); + } + .mixerPreview { + svg { + width: 150px; + height: 150px; + margin-left: 15px; + } + } + dl.features { + dt { + width: 10px; + height: 18px; + line-height: 18px; + } + dd { + margin: 0 0 0 20px; + height: 18px; + line-height: 18px; + } + } + .number { + input { + width: 55px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + } + .disabled { + width: 48px; + padding: 0 5px; + background-color: var(--surface-400); + } + input[readonly] { + background-color: #afafaf; + border: none; + pointer-events: none; + opacity: 0.5; + } + span { + margin-left: 0; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .disarm { + .checkbox { + padding-left: 0; + margin-top: -5px; + margin-right: 5px; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + } + margin-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + } + .freelabel { + margin-left: 10px; + position: relative; + } + span { + margin: 0; + } + .spacer_box.mixer_settings { + padding-bottom: 0px; + } + .motor_direction_reversed { + padding-top: 10px; + } + .motor_tool_buttons { + padding-left: 10px; + } + .disarmdelay { + width: 100%; + border-bottom: 1px solid var(--surface-500); + } + .select { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .selectProtocol { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + } + thead { + display: none; + } + .alignicon { + width: 15px; + height: 15px; + margin: 3px; + } + ._3dSettings { + width: 100%; + } + .modelAndGraph { + width: 100%; + } + .btn { + .disabled { + cursor: default; + color: #fff; + background-color: #afafaf; + border: none; + pointer-events: none; + opacity: 0.5; + } + } + #dialogMotorOutputReorder-closebtn { + margin-right: 0px; + margin-bottom: 0px; + } + dialog { + width: 400px; + height: 440px; + } + #dialogMotorOutputReorderContentWrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + } + #dialogMotorOutputReorderContent { + flex-grow: 1; + } + #escDshotDirectionDialog-closebtn { + margin-right: 0px; + margin-bottom: 0px; + position: absolute; + right: 0px; + bottom: 0px; + } + #escDshotDirectionDialog-ContentWrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + position: relative; + } + #escDshotDirectionDialog-Content { + flex-grow: 1; + } + #dialog-mixer-reset { + width: 400px; + height: fit-content; + } + #dialog-settings-changed { + height: 120px; + } + #dialog-settings-reset-confirmbtn { + margin-bottom: 12px; + position: relative; + } + #dialog-settings-changed-confirmbtn { + margin-right: 0px; + margin-bottom: 0px; + position: absolute; + right: 0px; + bottom: 0px; + } + #dialog-settings-changed-content-wrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + position: relative; + } + #dialog-settings-changed-content { + flex-grow: 1; + } + .plot_control { + margin: 0; background-color: transparent; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - .table { - display: table; - table-layout: fixed; - border-collapse: separate; - border-spacing: 5px; - box-sizing: border-box; - } - .row-container { - display: table-row-group; - } - .motor-button { - a { - background-color: var(--primary-500); - border-radius: 3px; - border: 1px solid #e8b423; - color: #000; - font-size: 10px; - line-height: 17px; - text-transform: uppercase; - letter-spacing: 0.03em; - display: block; - text-align: center; - } - } - .row { - display: table-row; - } - .left-cell { - display: table-cell; - vertical-align: middle; - } - .right-cell { - display: table-cell; - vertical-align: middle; - text-align: right; - width: 95px; - font-size: smaller; - } - select { - width: 100%; - border: 1px solid var(--surface-500); - border-radius: 3px; - } - .value { - padding: 3px; - color: black; - border-radius: 3px; - } - .rms { - background-color: #00D800; - } - } - .power_info { - margin-left: 1em; - .power_text { - font-weight: bold; - } - .power_value { - margin-right: 2em; - margin-left: 1em; - display: inline-block; - text-align: left; - width: 50px; - } - } - svg { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + .table { + display: table; + table-layout: fixed; + border-collapse: separate; + border-spacing: 5px; + box-sizing: border-box; + } + .row-container { + display: table-row-group; + } + .motor-button { + a { + background-color: var(--primary-500); + border-radius: 3px; + border: 1px solid #e8b423; + color: #000; + font-size: 10px; + line-height: 17px; + text-transform: uppercase; + letter-spacing: 0.03em; + display: block; + text-align: center; + } + } + .row { + display: table-row; + } + .left-cell { + display: table-cell; + vertical-align: middle; + } + .right-cell { + display: table-cell; + vertical-align: middle; + text-align: right; + width: 95px; + font-size: smaller; + } + select { + width: 100%; + border: 1px solid var(--surface-500); + border-radius: 3px; + } + .value { + padding: 3px; + color: black; + border-radius: 3px; + } + .rms { + background-color: #00d800; + } + } + .power_info { + margin-left: 1em; + .power_text { + font-weight: bold; + } + .power_value { + margin-right: 2em; + margin-left: 1em; + display: inline-block; + text-align: left; + width: 50px; + } + } + svg { width: 100%; - height: 100%; - } - .grid { - .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; - } - path { - stroke-width: 0; - } - } - .data { - .line { - stroke-width: 2px; - fill: none; - } - } - text { - stroke: none; - fill: var(--text); - font-size: 10px; - } - .motorblock { - margin-bottom: 0; - background-color: var(--surface-200); - } - .title { - padding-bottom: 2px; - text-align: center; - font-weight: bold; - } - .title2 { - padding-bottom: 2px; - text-align: center; - font-size: 12px; - font-weight: 300; - } - .titles { - height: 20px; - li { - text-align: center; - } - .active { - color: green; - } - } - .m-block { - height: 100px; + height: 100%; + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .data { + .line { + stroke-width: 2px; + fill: none; + } + } + text { + stroke: none; + fill: var(--text); + font-size: 10px; + } + .motorblock { + margin-bottom: 0; + background-color: var(--surface-200); + } + .title { + padding-bottom: 2px; + text-align: center; + font-weight: bold; + } + .title2 { + padding-bottom: 2px; + text-align: center; + font-size: 12px; + font-weight: 300; + } + .titles { + height: 20px; + li { + text-align: center; + } + .active { + color: green; + } + } + .m-block { + height: 100px; + width: 100%; + text-align: center; + background-color: var(--surface-300); + border-radius: 0.5rem; + .meter-bar { + position: relative; + width: 100%; + height: 100px; + background-color: var(--surface-300); + border-radius: 0.5rem; + border: 1px solid var(--surface-500); + } + .label { + position: absolute; + width: 100%; + bottom: 45px; + text-align: center; + font-weight: bold; + font-size: 10px; + color: var(--surface-950); + } + .label.rpm_info { + bottom: 28px; + } + .indicator { + .label { + color: white; + } + } + } + .indicator { + position: absolute; + overflow: hidden; width: 100%; - text-align: center; - background-color: var(--surface-300); - border-radius: 0.5rem; - .meter-bar { - position: relative; - width: 100%; - height: 100px; - background-color: var(--surface-300); - border-radius: 0.5rem; - border: 1px solid var(--surface-500); - } - .label { - position: absolute; - width: 100%; - bottom: 45px; - text-align: center; - font-weight: bold; - font-size: 10px; - color: var(--surface-950); - } - .label.rpm_info { - bottom: 28px; - } - .indicator { - .label { - color: white; - } - } - } - .indicator { - position: absolute; - overflow: hidden; - width: 100%; - text-align: center; - border-radius: 2px; - } - .motor_testing { - margin-bottom: 0; - padding: 0; - border: 0; - list-style: none; - outline: none; - .sliders { - input { - cursor: ns-resize; - writing-mode: vertical-lr; - direction:rtl; - height: 6rem !important; + text-align: center; + border-radius: 2px; + } + .motor_testing { + margin-bottom: 0; + padding: 0; + border: 0; + list-style: none; + outline: none; + .sliders { + input { + cursor: ns-resize; + writing-mode: vertical-lr; + direction: rtl; + height: 6rem !important; padding: 0 !important; - } - } - .values { - li { - text-align: center; - font-size: 10px; - } - } - .telemetry { + } + } + .values { + li { + text-align: center; + font-size: 10px; + } + } + .telemetry { margin-bottom: 0.5rem; - .warning { - color: var(--error-500); - } - li { - text-align: center; - font-size: 10px; - } - } - } + .warning { + color: var(--error-500); + } + li { + text-align: center; + font-size: 10px; + } + } + } @media all and (max-width: 1055px) { .grid-box { diff --git a/src/css/tabs/onboard_logging.less b/src/css/tabs/onboard_logging.less index cbdfb0980a..abfdc6efe3 100644 --- a/src/css/tabs/onboard_logging.less +++ b/src/css/tabs/onboard_logging.less @@ -1,339 +1,339 @@ .tab-onboard_logging { - .info { - margin: 0 0 10px 0; - position: relative; - margin-top: 10px; - .progressLabel { - position: absolute; - width: 100%; - height: 26px; - top: 0; - left: 0; - text-align: center; - line-height: 24px; - color: white; - font-weight: bold; - } - dt { - width: 120px; - height: 20px; - line-height: 20px; - font-weight: bold; - } - dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; - } - } - .properties { - margin-top: 10px; - } - .dataflash-info { - overflow: hidden; - dt { - width: 12em; - height: 20px; - line-height: 20px; - font-weight: bold; - } - dd { - display: block; - height: 20px; - line-height: 20px; - } - } - .speed { - margin-top: 5px; - width: 80px; - border: 1px solid var(--surface-500); - } - .buttons { - width: calc(100% - 20px); - position: absolute; - bottom: 10px; - } - .dataflash-progress { - display: none; - } - .dataflash-contents { - margin-top: 15px; - margin-bottom: 26px; - border: 1px solid var(--surface-500); - background-color: var(--surface-300); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - border-radius: 6px; - li { - height: 26px; - position: relative; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); - border-radius: 4px; - div { - position: absolute; - top: 26px; - margin-top: 4px; - text-align: center; - left: 0; - right: 0; - white-space: nowrap; - } - } - } - .sdcard-contents { - margin-top: 15px; - margin-bottom: 26px; - border: 1px solid var(--surface-500); - background-color: var(--surface-300); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - border-radius: 6px; - li { - height: 26px; - position: relative; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); - border-radius: 4px; - div { - position: absolute; - top: 26px; - margin-top: 4px; - text-align: center; - left: 0; - right: 0; - white-space: nowrap; - } - } - } - .dataflash-used { - background-color: var(--primary-500); - border-radius: 4px; - } - .sdcard-other { - background-color: var(--primary-500); - border-radius: 4px; - } - .dataflash-free { - direction: rtl; - } - .sdcard-free { - direction: rtl; - } - progress { - &::-webkit-progress-bar { - background-color: var(--surface-500); - } - &::-webkit-progress-value { - background-color: var(--primary-500); + .info { + margin: 0 0 10px 0; + position: relative; + margin-top: 10px; + .progressLabel { + position: absolute; + width: 100%; + height: 26px; + top: 0; + left: 0; + text-align: center; + line-height: 24px; + color: white; + font-weight: bold; + } + dt { + width: 120px; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + } + } + .properties { + margin-top: 10px; + } + .dataflash-info { + overflow: hidden; + dt { + width: 12em; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + height: 20px; + line-height: 20px; + } + } + .speed { + margin-top: 5px; + width: 80px; + border: 1px solid var(--surface-500); + } + .buttons { + width: calc(100% - 20px); + position: absolute; + bottom: 10px; + } + .dataflash-progress { + display: none; + } + .dataflash-contents { + margin-top: 15px; + margin-bottom: 26px; + border: 1px solid var(--surface-500); + background-color: var(--surface-300); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + border-radius: 6px; + li { + height: 26px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 4px; + div { + position: absolute; + top: 26px; + margin-top: 4px; + text-align: center; + left: 0; + right: 0; + white-space: nowrap; + } + } + } + .sdcard-contents { + margin-top: 15px; + margin-bottom: 26px; + border: 1px solid var(--surface-500); + background-color: var(--surface-300); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + border-radius: 6px; + li { + height: 26px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 4px; + div { + position: absolute; + top: 26px; + margin-top: 4px; + text-align: center; + left: 0; + right: 0; + white-space: nowrap; + } + } + } + .dataflash-used { + background-color: var(--primary-500); + border-radius: 4px; + } + .sdcard-other { + background-color: var(--primary-500); + border-radius: 4px; + } + .dataflash-free { + direction: rtl; + } + .sdcard-free { + direction: rtl; + } + progress { + &::-webkit-progress-bar { + background-color: var(--surface-500); + } + &::-webkit-progress-value { + background-color: var(--primary-500); border-radius: 0 4px 4px 0; - } + } border-radius: 4px; overflow: hidden; height: 24px; - display: block; - width: 100%; - margin: 1em 0; - } - dialog { - width: 40em; - border-radius: 5px; - .buttons { - position: static; - margin-top: 2em; - } - h3 { - margin-bottom: 0.5em; - } - } - .save-flash { - .helpicon { - margin: 4px 0 0 7px; - display: inline-block; - } - } - .require-msc-supported { - display: none; - } - .require-msc-not-supported { - display: inherit; - } - .line { - clear: left; - } - .blackboxDebugModeText { - margin-left: 7px !important; - } - .sdcard-status { - padding-top: 4px; - text-align: center; - } - .sdcard-icon { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); - width: 90px; - height: 90px; - background-image: url(../../images/icons/cf_icon_sdcard.svg); - background-position: 21px 20px; - background-size: 50px 50px; - background-repeat: no-repeat; - background-color: #808080; - border: 1px solid #888888; - border-radius: 45px; - } + display: block; + width: 100%; + margin: 1em 0; + } + dialog { + width: 40em; + border-radius: 5px; + .buttons { + position: static; + margin-top: 2em; + } + h3 { + margin-bottom: 0.5em; + } + } + .save-flash { + .helpicon { + margin: 4px 0 0 7px; + display: inline-block; + } + } + .require-msc-supported { + display: none; + } + .require-msc-not-supported { + display: inherit; + } + .line { + clear: left; + } + .blackboxDebugModeText { + margin-left: 7px !important; + } + .sdcard-status { + padding-top: 4px; + text-align: center; + } + .sdcard-icon { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + width: 90px; + height: 90px; + background-image: url(../../images/icons/cf_icon_sdcard.svg); + background-position: 21px 20px; + background-size: 50px 50px; + background-repeat: no-repeat; + background-color: #808080; + border: 1px solid #888888; + border-radius: 45px; + } } .dataflash-confirm-erase { - .dataflash-erase-progress { - height: 125px; - display: none; - border-radius: 5px; - } + .dataflash-erase-progress { + height: 125px; + display: none; + border-radius: 5px; + } } .dataflash-buttons { - display: inline-block; + display: inline-block; } .dataflash-confirm-erase.erasing { - .dataflash-erase-progress { - display: block; - } - h3 { - display: none; - } - .erase-flash-confirm { - display: none; - } - .dataflash-confirm-erase-note { - display: none; - } + .dataflash-erase-progress { + display: block; + } + h3 { + display: none; + } + .erase-flash-confirm { + display: none; + } + .dataflash-confirm-erase-note { + display: none; + } } .dataflash-saving { - .dataflash-saving-after { - display: none; - } + .dataflash-saving-after { + display: none; + } } .dataflash-saving.done { - .dataflash-saving-before { - display: none; - } - .dataflash-saving-after { - display: block; - } + .dataflash-saving-before { + display: none; + } + .dataflash-saving-after { + display: block; + } } .require-dataflash-present { - display: none; + display: none; } .require-dataflash-supported { - display: none; + display: none; } .require-sdcard-ready { - display: none; + display: none; } .require-sdcard-supported { - display: none; + display: none; } .require-blackbox-supported { - display: none; + display: none; } .require-blackbox-maybe-supported { - display: none; + display: none; } .require-blackbox-unsupported { - display: none; + display: none; } .require-blackbox-config-supported { - display: none; + display: none; } .tab-onboard_logging.dataflash-present { - .require-dataflash-not-present { - display: none; - } - .require-dataflash-present { - display: block; - } + .require-dataflash-not-present { + display: none; + } + .require-dataflash-present { + display: block; + } } .tab-onboard_logging.dataflash-supported { - .require-dataflash-unsupported { - display: none; - } - .require-dataflash-supported { - display: block; - } + .require-dataflash-unsupported { + display: none; + } + .require-dataflash-supported { + display: block; + } } .tab-onboard_logging.sdcard-supported { - .require-sdcard-unsupported { - display: none; - } - .require-sdcard-supported { - display: block; - } + .require-sdcard-unsupported { + display: none; + } + .require-sdcard-supported { + display: block; + } } .tab-onboard_logging.blackbox-config-supported { - .require-blackbox-config-unsupported { - display: none; - } - .require-blackbox-config-supported { - display: block; - } + .require-blackbox-config-unsupported { + display: none; + } + .require-blackbox-config-supported { + display: block; + } } .tab-onboard_logging.sdcard-ready { - .require-sdcard-ready { - display: block; - } - .sdcard-icon { - background-color: #56ac1d; - border: 1px solid #5bbb1b; - } + .require-sdcard-ready { + display: block; + } + .sdcard-icon { + background-color: #56ac1d; + border: 1px solid #5bbb1b; + } } .tab-onboard_logging.blackbox-supported { - .require-blackbox-supported { - display: inherit; - } + .require-blackbox-supported { + display: inherit; + } } .tab-onboard_logging.blackbox-maybe-supported { - .require-blackbox-maybe-supported { - display: block; - } + .require-blackbox-maybe-supported { + display: block; + } } .tab-onboard_logging.blackbox-unsupported { - .require-blackbox-unsupported { - display: block; - } + .require-blackbox-unsupported { + display: block; + } } .require-no-dataflash { - display: block; + display: block; } .tab-onboard_logging.supported { - .require-no-dataflash { - display: none; - } + .require-no-dataflash { + display: none; + } } .tab-onboard_logging.msc-supported { - .require-msc-supported { - display: inherit; - } - .require-msc-not-supported { - display: none; - } + .require-msc-supported { + display: inherit; + } + .require-msc-not-supported { + display: none; + } } .require-msc-not-ready { - display: none; + display: none; } .tab-onboard_logging.msc-not-ready { - .require-msc-not-ready { - display: block; - } + .require-msc-not-ready { + display: block; + } } .tab-onboard_logging.sdcard-error { - .sdcard-icon { - background-color: #e60000; - border: 1px solid #fe0000; - } + .sdcard-icon { + background-color: #e60000; + border: 1px solid #fe0000; + } } .tab-onboard_logging.sdcard-initializing { - .sdcard-icon { - background-color: #64a5f6; - border: 1px solid #68a7ff; - } + .sdcard-icon { + background-color: #64a5f6; + border: 1px solid #68a7ff; + } } diff --git a/src/css/tabs/options.less b/src/css/tabs/options.less index 87123c1810..152424eae4 100644 --- a/src/css/tabs/options.less +++ b/src/css/tabs/options.less @@ -1,21 +1,21 @@ .tab-options { - .freelabel { - margin-left: 10px; - position: relative; - } - .switchery { - float: left; - } - .margin-bottom { - margin-bottom: 10px; - display: grid; - grid-template-columns: fit-content(300px) 1fr; - } - select { - background: var(--surface-200); - color: var(--text); - border: 1px solid var(--surface-500); - border-radius: 3px; - width: fit-content; - } + .freelabel { + margin-left: 10px; + position: relative; + } + .switchery { + float: left; + } + .margin-bottom { + margin-bottom: 10px; + display: grid; + grid-template-columns: fit-content(300px) 1fr; + } + select { + background: var(--surface-200); + color: var(--text); + border: 1px solid var(--surface-500); + border-radius: 3px; + width: fit-content; + } } diff --git a/src/css/tabs/osd.less b/src/css/tabs/osd.less index 1d079a255d..fe6e22e924 100644 --- a/src/css/tabs/osd.less +++ b/src/css/tabs/osd.less @@ -1,25 +1,25 @@ .tab-osd { - .info { - margin: 10px 0 0 0; - position: relative; - width: 100%; - .progressLabel { - position: absolute; - width: 100%; - height: 26px; - top: 0; - left: 0; - text-align: center; - line-height: 24px; - color: white; - font-weight: bold; + .info { + margin: 10px 0 0 0; + position: relative; + width: 100%; + .progressLabel { + position: absolute; + width: 100%; + height: 26px; + top: 0; + left: 0; + text-align: center; + line-height: 24px; + color: white; + font-weight: bold; a { color: white; &:hover { text-decoration: underline; } } - } + } .progress { width: 100%; height: 26px; @@ -32,7 +32,7 @@ box-shadow: inset 0 0 5px #2f2f2f; } &::-webkit-progress-value { - background-color: #F86008; + background-color: #f86008; border-radius: 4px; } } @@ -48,147 +48,147 @@ } .progress.invalid { &::-webkit-progress-bar { - background-color: #A62E32; + background-color: #a62e32; border-radius: 4px; } &::-webkit-progress-value { - background-color: #A62E32; + background-color: #a62e32; border-radius: 4px; } } - } - .spacer_box_title { - .profileOsdHeader { - padding: 0 6px; - } - } + } + .spacer_box_title { + .profileOsdHeader { + padding: 0 6px; + } + } input[type="checkbox"] { width: 18px; height: 18px; } - ul { - li { - list-style: circle; - margin-left: 30px; - } - } - .options { - position: relative; - margin-bottom: 10px; - line-height: 18px; - text-align: left; - label { - input { - margin-top: 2px; - } - span { - font-weight: bold; - margin-left: 6px; - } - } - select { - width: 300px; - height: 20px; - border: 1px solid var(--surface-500); - } - .releases { - select { - width: 280px; - } - } - .description { - position: relative; - left: 0; - font-style: italic; - color: #818181; - } - .flash_on_connect_wrapper { - display: none; - } - .manual_baud_rate { - select { - width: 75px; - margin-left: 19px; - } - } - } - td { - text-align: left; - } - .option.releases { - margin: 0 0 2px 0; - line-height: 20px; - } - .cf_table { - td { - &:last-child { - text-align: left; - } - } - } - .release_info { - display: none; - .title { - line-height: 20px; - text-align: center; - font-weight: bold; - color: white; - border-bottom: 1px solid var(--surface-500); - background-color: #3f4241; - } - .target { - color: blue; - } - p { - padding: 5px; - a { - font-weight: bold; - &:hover { - text-decoration: underline; - } - } - } - .notes { - padding: 5px; - } - } - .btn { - .disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: none; - pointer-events: none; - opacity: 0.5; - } - } - .display-layout { - label { - margin: .25em .1em; - display: inline-block; - } - input { - margin: .1em 1em; - } - input.position { - width: 5em; - border-bottom: 1px solid var(--surface-500); - } - } - .hide { - display: none; - } - .note { - padding: 1em; - } - .col { - display: inline-block; - } - .preview-parent { - position: sticky; - top: 1.5rem; + ul { + li { + list-style: circle; + margin-left: 30px; + } + } + .options { + position: relative; + margin-bottom: 10px; + line-height: 18px; + text-align: left; + label { + input { + margin-top: 2px; + } + span { + font-weight: bold; + margin-left: 6px; + } + } + select { + width: 300px; + height: 20px; + border: 1px solid var(--surface-500); + } + .releases { + select { + width: 280px; + } + } + .description { + position: relative; + left: 0; + font-style: italic; + color: #818181; + } + .flash_on_connect_wrapper { + display: none; + } + .manual_baud_rate { + select { + width: 75px; + margin-left: 19px; + } + } + } + td { + text-align: left; + } + .option.releases { + margin: 0 0 2px 0; + line-height: 20px; + } + .cf_table { + td { + &:last-child { + text-align: left; + } + } + } + .release_info { + display: none; + .title { + line-height: 20px; + text-align: center; + font-weight: bold; + color: white; + border-bottom: 1px solid var(--surface-500); + background-color: #3f4241; + } + .target { + color: blue; + } + p { + padding: 5px; + a { + font-weight: bold; + &:hover { + text-decoration: underline; + } + } + } + .notes { + padding: 5px; + } + } + .btn { + .disabled { + cursor: default; + color: #fff; + background-color: #afafaf; + border: none; + pointer-events: none; + opacity: 0.5; + } + } + .display-layout { + label { + margin: 0.25em 0.1em; + display: inline-block; + } + input { + margin: 0.1em 1em; + } + input.position { + width: 5em; + border-bottom: 1px solid var(--surface-500); + } + } + .hide { + display: none; + } + .note { + padding: 1em; + } + .col { + display: inline-block; + } + .preview-parent { + position: sticky; + top: 1.5rem; - /* please don't copy the generic background image from another project + /* please don't copy the generic background image from another project * and replace the one that @nathantsoi took :) */ .preview { @@ -196,183 +196,181 @@ background-size: cover; background-repeat: no-repeat; } - .gui_box_titlebar { - label { - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - white-space: nowrap; - vertical-align: text-bottom; - } - } - .gui_box_bottombar { - text-align: center; - } - .row { - display: flex; - } - .char { - display: flex; - padding: 0; - margin: 0; - flex: 1 1 auto; - flex-wrap: nowrap; - border: 1px solid transparent; - img { - flex: 1 1 auto; - max-width: 100%; - height: auto; - } - } - .char[draggable="true"] { - cursor: move; - } - - &:active { - - &:before { - content: ''; - position: absolute; - top: 50%; - left: 40%; - border-top: 0.3em dashed var(--gimbalCrosshair); - width: 20%; - transform: translateY(-50%); - pointer-events: none; - } + .gui_box_titlebar { + label { + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + vertical-align: text-bottom; + } + } + .gui_box_bottombar { + text-align: center; + } + .row { + display: flex; + } + .char { + display: flex; + padding: 0; + margin: 0; + flex: 1 1 auto; + flex-wrap: nowrap; + border: 1px solid transparent; + img { + flex: 1 1 auto; + max-width: 100%; + height: auto; + } + } + .char[draggable="true"] { + cursor: move; + } - &:after:extend(.tab-osd .preview:active:before) { - transform: translateY(-50%) rotate(90deg); - } + &:active { + &:before { + content: ""; + position: absolute; + top: 50%; + left: 40%; + border-top: 0.3em dashed var(--gimbalCrosshair); + width: 20%; + transform: translateY(-50%); + pointer-events: none; + } - .char { - border: 1px dashed rgba(55, 55, 55, 0.5) ; - } - } + &:after:extend(.tab-osd .preview:active:before) { + transform: translateY(-50%) rotate(90deg); + } - } - .osd-preview-zoom { - width: max-content !important; - padding-right: 1em; - } - .osd-preview-zoom-group { - display: none; - } - .osd-preview-zoom-selector { - margin-left: 5px; - vertical-align: text-bottom; - } - .char.mouseover { - background: rgba(255,255,255,0.4); - } - .char.dragging { - background: rgba(255,255,255,0.4); - } - .char-label.mouseover { - background: rgba(255,255,255,0.4); - } + .char { + border: 1px dashed rgba(55, 55, 55, 0.5); + } + } + } + .osd-preview-zoom { + width: max-content !important; + padding-right: 1em; + } + .osd-preview-zoom-group { + display: none; + } + .osd-preview-zoom-selector { + margin-left: 5px; + vertical-align: text-bottom; + } + .char.mouseover { + background: rgba(255, 255, 255, 0.4); + } + .char.dragging { + background: rgba(255, 255, 255, 0.4); + } + .char-label.mouseover { + background: rgba(255, 255, 255, 0.4); + } .osd-feature { .gui_box_titlebar { left: 0; } } - .switchable-field { - padding: 3px; - border: 1px solid transparent; - border-bottom: 1px solid var(--surface-500); - input { - border-radius: 3px; - border: 1px solid var(--surface-500); - padding: 2px; - } - input[type=number] { - display: none; - line-height: 23px; - height: 23px; - box-sizing: border-box; - padding-right: 0; - } - label { - margin-left: 5px; - } - &:last-child { - border-bottom: 0; - } - } - .switchable-field.mouseover { - background: var(--surface-200); - border: 1px solid var(--surface-500); - font-weight: 800; - } - .switchable-fields { - margin-top: 5px; - margin-bottom: 8px; - width: 100%; - } - .switchable-field-flex { - display: flex; + .switchable-field { + padding: 3px; + border: 1px solid transparent; + border-bottom: 1px solid var(--surface-500); + input { + border-radius: 3px; + border: 1px solid var(--surface-500); + padding: 2px; + } + input[type="number"] { + display: none; + line-height: 23px; + height: 23px; + box-sizing: border-box; + padding-right: 0; + } + label { + margin-left: 5px; + } + &:last-child { + border-bottom: 0; + } + } + .switchable-field.mouseover { + background: var(--surface-200); + border: 1px solid var(--surface-500); + font-weight: 800; + } + .switchable-fields { + margin-top: 5px; + margin-bottom: 8px; + width: 100%; + } + .switchable-field-flex { + display: flex; gap: 0.5rem; align-items: center; - .switchable-field-description { - display: flex; - flex-direction: row; - min-width: 0; - justify-content: space-between; + .switchable-field-description { + display: flex; + flex-direction: row; + min-width: 0; + justify-content: space-between; align-items: center; - width: 100%; - flex-wrap: wrap; - .osd-variant { - flex-grow: 2; - } - } - } - input { - background: var(--surface-200); - color: var(--text); - border: 1px solid var(--surface-500); - border-radius: 3px; - } - input[type="radio"]:disabled { - cursor: not-allowed; - } - select { - background: var(--surface-200); - color: var(--text); - border: 1px solid var(--surface-500); - border-radius: 3px; - } - select.osd-variant { - max-width: 100%; - } + width: 100%; + flex-wrap: wrap; + .osd-variant { + flex-grow: 2; + } + } + } + input { + background: var(--surface-200); + color: var(--text); + border: 1px solid var(--surface-500); + border-radius: 3px; + } + input[type="radio"]:disabled { + cursor: not-allowed; + } + select { + background: var(--surface-200); + color: var(--text); + border: 1px solid var(--surface-500); + border-radius: 3px; + } + select.osd-variant { + max-width: 100%; + } - .alarms { - label { - display: block; - width: 100%; - border-bottom: 1px solid var(--surface-500); - margin-top: 5px; - padding-bottom: 5px; - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - } - input { - width: 55px; - padding-left: 3px; - height: 18px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 11px; - font-weight: normal; - } - } - .grid-col { - margin: 0px; - } + .alarms { + label { + display: block; + width: 100%; + border-bottom: 1px solid var(--surface-500); + margin-top: 5px; + padding-bottom: 5px; + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + } + input { + width: 55px; + padding-left: 3px; + height: 18px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 11px; + font-weight: normal; + } + } + .grid-col { + margin: 0px; + } #font-logo-preview-container { background: rgba(0, 255, 0, 0.4); margin-bottom: 10px; @@ -392,19 +390,19 @@ ul { li { &:before { - content: '\2022\20'; + content: "\2022\20"; } } li.valid { color: #00a011; &:before { - content: '\2714\20'; + content: "\2714\20"; } } li.invalid { color: #a01100; &:before { - content: '\2715\20'; + content: "\2715\20"; } } } @@ -423,7 +421,7 @@ display: inline-block; position: absolute; right: 1.2em; - top: .8em; + top: 0.8em; } .fontpresets { background: var(--surface-200); @@ -487,5 +485,4 @@ } } } - } diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less index 63f94802b7..3fdaadb7a5 100644 --- a/src/css/tabs/pid_tuning.less +++ b/src/css/tabs/pid_tuning.less @@ -1,847 +1,903 @@ .tab-pid_tuning { - .cf { - tr { - background-color: var(--surface-400); - } - th { - border-right: solid 1px var(--surface-500); - height: 19px; - font-weight: normal; - padding: 4px; - color: var(--text); - text-align: left; - background: var(--surface-300); - &:first-child { - border-top-left-radius: 3px; - } - &:last-child { - border-right: 0; - border-top-right-radius: 3px; - } - } - td { - &:first-child { - border-bottom-left-radius: 3px; - } - &:last-child { - border-bottom-right-radius: 3px; - border-right: 0; - padding-bottom: 0; - } - } - input { - margin: 4px; - width: calc(100% - 10px); - border: 1px solid var(--surface-500); - border-radius: 3px; - } - select { - margin: 4px; - width: calc(100% - 10px); - border: 1px solid var(--surface-500); - } - .throttleCurvePreview { - padding: 0; - } - .rates_logo_bg { - background-color: #ebeced; - } - } - .throttle_curve { - float: right; - width: 100%; - background-size: 200%; - height: 164px; - } - .curves { - float: left; - margin-right: 10px; - } - .rate_curve { - height: 100%; - min-height: 234px; - min-width: 200px; - background-size: 200%; - } - input[type="number"] { - &::-webkit-inner-spin-button { - border: 0; - } - } - table { - float: left; - margin: 0; - border-collapse: collapse; - width: 100%; - table-layout: fixed; - padding: 1px; - border-bottom: 0 solid var(--surface-500); - .inputBackground { - background: white; - } - td { - border-bottom: 0 solid var(--surface-500); - padding: 1px 1px 1px 5px; - border-right: 1px solid var(--surface-500); - } - th { - padding: 0; - border: 0; - height: 10px; - font-weight: normal; - text-overflow: ellipsis; - overflow: hidden; - color: var(--text) - } - tr { - td { - &:first-child { - text-align: left; - padding-left: 5px; - } - &:last-child { - border-right: 0 solid var(--surface-500); - } - text-align: left; - padding-left: 5px; - padding-right: 5px; - } - } - .groupSwitchValue { - display: inline-flex; - .inputValue { - width: 80px; - } - } - input { - display: block; - width: calc(100% - 0px); - height: 20px; - line-height: 20px; - text-align: right; - border: 1px solid var(--surface-500); - border-radius: 3px; - } - select { - text-align-last: right; - border-radius: 3px; - border: 1px solid var(--surface-500); - width: 75px; - } - } - .gui_box { - margin-bottom: 5px; - display: table; - span { - font-style: normal; - font-weight: normal; - line-height: 19px; - font-size: 11px; - } - } - .subtab-filter { - .gui_box { - float: none; - } - table { - input { - width: 77px; - float: right; - box-sizing: border-box; - } - select { - width: 77px; - float: right; - box-sizing: border-box; - } - } - .newFilter { - .helpicon { - margin-right: 2px; - margin-top: 2px; - } - } - .sliderLabels { - tr { - td { - &:first-child { - width: 10%; - } - } - } - input { - width: calc(100% - 14px); - box-sizing: content-box; - } - } - } - .sliderDivider { - padding: 3px; - border-top: 1px solid var(--surface-500); - border-bottom: 1px solid var(--surface-500); - } - .pid_titlebar { - th { - padding: 5px; - text-align: center; - border-right: 1px solid var(--surface-500); - &:first-child { - text-align: left; - border-top-left-radius: 3px; - } - &:last-child { - border-right: none; - border-top-right-radius: 3px; - } - } - color: #fff; - background-color: var(--surface-300); - border-top-left-radius: 3px; - border-top-right-radius: 3px; - height: 20px; - td { - &:first-child { - text-align: left; - } - } - .name-helpicon-flex { - display: flex; - flex-flow: row wrap; - justify-content: space-around; - .helpicon { - margin-right: 0; - } - } - } - #pid_optional { - table { - th { - width: 25%; - } - td { - width: 25%; - } - } - } - #pid_accel { - table { - th { - width: 33%; - } - td { - width: 33%; - } - } - } - table.compensation { - tr { - height: 30px; - border-bottom: 1px solid var(--surface-500); - &:last-child { - border-bottom: none; - } - } - td { - padding-left: 5px; - padding-right: 5px; - &:first-child { - &:not(.filterTable) { - width: 75px; - text-align: center; - vertical-align: top; - padding-top: 4px; - } - } - &:last-child { - width: 100%; - } - } - .helpicon { - margin-top: 3px; - margin-left: auto; - } - .suboption { - margin-left: 2%; - display: flex; - flex-flow: row wrap-reverse; - align-items: center; - padding-bottom: 2px; - select { - width: 80px; - text-align-last: right; - font-size: 1.1em; - box-sizing: border-box; - } - input { - width: 80px; - box-sizing: border-box; - } - label { - margin-left: 5px; - } - } - } - table.filterTable.compensation { - td { - &:first-child { - width: 5%; - } - } - } - table.tpa-settings { - tr { - height: 30px; - } - } - .pidTuningFeatures { - td { - padding: 5px; - width: 20%; - &:first-child { - width: 20%; - padding-bottom: 6px; - padding-top: 5px; - } - &:last-child { - width: 80%; - } - } - .slider { - input { - writing-mode: horizontal-tb; - } - } - } - .rates_type { - table { - select { - text-align-last: left; - } - } - } - .tab-container { - border-bottom: 3px solid var(--primary-500); - border-right-width: 0; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: start; - width: 100%; - >div { - background-color: var(--surface-200); - padding: 6px 12px; - border-right: 1px solid var(--surface-500); - box-sizing: border-box; - text-align: center; - &:first-child { - border-top-left-radius: 4px; - } - &:last-child { - border-top-right-radius: 4px; - } - a { - display: block; - color: var(--text); - } - } - >div.active { - background-color: var(--primary-500); - color: #000; - transition: none; - a { - background-color: var(--primary-500); - color: #000; - transition: none; - } - } - } - .single-field { - display: inline-table; - margin-bottom: 10px; - margin-right: 5px; - .head { - text-align: left; - border-radius: 4px; - background-color: var(--surface-300); - color: var(--text); - height: 19px; - font-weight: normal; - padding: 2px 2px 2px 6px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - } - } - .new_rates { - text-align: center; - td { - &:first-child { - border-bottom-left-radius: 0; - padding-left: 10px; - } - &:last-child { - border-bottom-right-radius: 0; - } - } - } - .top-buttons { - float: right; - } - .fixed_band { - position: absolute; - width: 100%; - bottom: 0; - } - .pid_mode { - .helpicon { - margin-top: 0; - } - } - .pid_titlebar.pid_titlebar_extended { - border-radius: 0; - } - .helpicon { - margin-top: 1px; - } - .number { - .helpicon { - margin-top: 3px; - margin-right: 0; - } - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - float: left; - &:last-child { - padding-bottom: 5px; - border-bottom: 0; - } - input { - width: 50px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--surface-500); - border-radius: 3px; - margin-right: 11px; - font-weight: normal; - } - } - .gui_box_titlebar { - .helpicon { - margin-top: 5px; - margin-right: 5px; - } - } - .spacer_left { - padding-left: 0; - float: right; - width: calc(100% - 20px); - } - .numberspacer { - float: left; - width: 65px; - height: 21px; - } - .resetbt { - width: 200px; - margin-right: 10px; - } - .copyprofilebtn { - width: 150px; - margin-right: 10px; - } - .copyrateprofilebtn { - width: 150px; - margin-right: 10px; - } - .right { - float: right; - } - .pids { - float: left; - width: 25%; - } - .roll { - border-bottom-left-radius: 3px; - } - .pidTuningLevel { - float: left; - } - .borderleft { - border-top-left-radius: 3px; - border-top-right-radius: 3px; - } - .textleft { - width: 25%; - float: left; - text-align: left; - } - .topspacer { - margin-top: 5px; - } - .profile { - min-width: 130px; - select { - border: 1px solid var(--surface-500); - border-radius: 3px; - margin-left: 5px; - margin-right: 5px; - width: calc(100% - 10px); - } - } - .rate_profile { - min-width: 130px; - select { - border: 1px solid var(--surface-500); - border-radius: 3px; - margin-left: 5px; - margin-right: 5px; - width: calc(100% - 10px); - } - } - .controller { - width: 150px; - select { - border: 1px solid var(--surface-500); - margin-left: 5px; - width: calc(100% - 10px); - } - } - .delta { - width: 150px; - select { - border: 1px solid var(--surface-500); - margin-left: 5px; - width: calc(100% - 10px); - } - } - .bracket { - background-image: url(../../images/icons/icon_bracket.svg); - background-repeat: no-repeat; - height: 35px; - width: 14px; - margin-top: -23px; - margin-left: 8px; - } - .rates_preview_cell { - position: relative; - width: 100%; - height: 362px; - } - .rates_preview { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-size: 100%; - } - .pidTuning { - td { - padding: 5px; - width: 40%; - &:first-child { - width: 10%; - padding-bottom: 6px; - padding-top: 5px; - } - &:last-child { - width: 40%; - } - } - tr { - width: 100%; - border-bottom: 1px solid var(--surface-500); - padding: 0; - } - } - .rc_curve { - .cf { - tr { - td { - padding: 0; - } - } - } - } - .rc_curve_bg { - float: left; - } - .new_rates_last-child { - border-bottom: none; - } - .filter { - padding-left: 5px; - } - dialog { - width: 40em; - border-radius: 5px; - .buttons { - position: static; - margin-top: 2em; - } - h3 { - margin-bottom: 0.5em; - } - select { - border: 1px solid var(--surface-500); - margin-left: 5px; - width: 120px; - } - } - .tuningSlider { - -webkit-appearance: none; - width: calc(100% - 14px); - height: 15px; - border: none; - outline: none; - opacity: 0.8; - transition: opacity .2s; - margin: 7px; - background: var(--surface-200); - &:hover { - opacity: 1; - } - &::-webkit-slider-runnable-track { - -webkit-appearance: none; - border: solid 1px var(--surface-500); - border-radius: 4px; - background: linear-gradient(90deg, var(--surface-300) 0%, var(--surface-400) 50%, var(--error-500) 100%); - height: 15px; - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - width: 23px; - height: 23px; - border-radius: 50%; - background: #ffbb2a; - border: solid 1px var(--surface-300); - cursor: pointer; - position: relative; - bottom: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - } - } - .nonExpertModeSliders { - .tuningSlider { - &::-webkit-slider-runnable-track { - background: linear-gradient(90deg, var(--surface-300) 0%, var(--surface-400) 50%, var(--error-500) 100%); - background-size: 55%; - background-position: 44%; - background-repeat: no-repeat; - } - } - } - .disabledSliders { - .tuningSlider { - &::-webkit-slider-runnable-track { - background: linear-gradient(90deg, var(--surface-300) -50%, var(--surface-400) 50%, var(--surface-300) 150%); - background-repeat: no-repeat; - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - width: 23px; - height: 23px; - border-radius: 50%; - background: transparent; - border: solid 1px var(--surface-300); - cursor: pointer; - position: relative; - bottom: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - } - } - } - .sliderLabels { - tr { - border-bottom: 1px solid var(--surface-500); - &:last-child { - border-bottom: none; - } - td { - &:first-child { - text-align: right; - width: 20%; - } - &:nth-child(2) { - text-align: center; - width: 30px; - } - &:last-child { - width: 30px; - } - } - } - span { - color: var(--text); - font-size: 12px; - } - } - .tuningPIDSliders { - .pid_titlebar { - th { - text-align: center; - &:first-child { - width: 6%; - text-align: right; - border-right: none; - } - &:nth-child(2) { - width: 14%; - border-right: none; - } - &:nth-child(3) { - width: 30px; - } - &:last-child { - width: 30px; - } - } - } - } - .tuningFilterSliders { - .pid_titlebar { - th { - text-align: center; - &:first-child { - width: 10%; - border-right: none; - } - &:nth-child(2) { - width: 30px; - } - &:last-child { - width: 30px; - } - } - } - } - .slidersWarning { - text-align: center; - background: #ffa3a3; - border: 1px solid red; - font-weight: 600; - font-size: 12px; - } - .nonExpertModeSlidersNote { - text-align: center; - padding-top: 2px; - padding-bottom: 2px; - } - .expertSettingsDetectedNote { - text-align: center; - padding-top: 2px; - padding-bottom: 2px; - } - .dynamicNotchNyquistWarningNote { - margin: 0; - } - .note-button { - td { - &:nth-child(n) { - padding-left: 7px; - padding-right: 7px; - text-align: center; - } - &:first-child { - width: 75%; - border-right: none; - } - } - .regular-button { - display: block; - overflow-wrap: break-word; - margin: 2px; - } - } - .subtab-rates { - display: flex; - flex-flow: row wrap; - align-items: flex-start; - justify-content: center; - .cf_column { - min-width: 380px; - flex: 1; - } - } - .subtab-pid { - display: flex; - flex-flow: row wrap; - align-items: flex-start; - justify-content: center; - .cf_column { - min-width: 450px; - flex: 1.3; - } - .cf_column_right { - min-width: 300px; - margin-left: 15px; - flex: 1; - } - .note { - flex: 0 0 100%; - } - } - table.filterTable { - table-layout: auto; - } - .rates_logo_div { - margin-top: -10%; - text-align: center; - } - .rates_logo { - width: 80%; - height: 80%; - } - .rates-tab-warning { - display: flex; - flex-flow: row wrap; - } - .float-left { - float: left; - } - .content_wrapper_header { - display: flex; - } - .content_wrapper_header_btns { - margin-left: auto; - } + .cf { + tr { + background-color: var(--surface-400); + } + th { + border-right: solid 1px var(--surface-500); + height: 19px; + font-weight: normal; + padding: 4px; + color: var(--text); + text-align: left; + background: var(--surface-300); + &:first-child { + border-top-left-radius: 3px; + } + &:last-child { + border-right: 0; + border-top-right-radius: 3px; + } + } + td { + &:first-child { + border-bottom-left-radius: 3px; + } + &:last-child { + border-bottom-right-radius: 3px; + border-right: 0; + padding-bottom: 0; + } + } + input { + margin: 4px; + width: calc(100% - 10px); + border: 1px solid var(--surface-500); + border-radius: 3px; + } + select { + margin: 4px; + width: calc(100% - 10px); + border: 1px solid var(--surface-500); + } + .throttleCurvePreview { + padding: 0; + } + .rates_logo_bg { + background-color: #ebeced; + } + } + .throttle_curve { + float: right; + width: 100%; + background-size: 200%; + height: 164px; + } + .curves { + float: left; + margin-right: 10px; + } + .rate_curve { + height: 100%; + min-height: 234px; + min-width: 200px; + background-size: 200%; + } + input[type="number"] { + &::-webkit-inner-spin-button { + border: 0; + } + } + table { + float: left; + margin: 0; + border-collapse: collapse; + width: 100%; + table-layout: fixed; + padding: 1px; + border-bottom: 0 solid var(--surface-500); + .inputBackground { + background: white; + } + td { + border-bottom: 0 solid var(--surface-500); + padding: 1px 1px 1px 5px; + border-right: 1px solid var(--surface-500); + } + th { + padding: 0; + border: 0; + height: 10px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + color: var(--text); + } + tr { + td { + &:first-child { + text-align: left; + padding-left: 5px; + } + &:last-child { + border-right: 0 solid var(--surface-500); + } + text-align: left; + padding-left: 5px; + padding-right: 5px; + } + } + .groupSwitchValue { + display: inline-flex; + .inputValue { + width: 80px; + } + } + input { + display: block; + width: calc(100% - 0px); + height: 20px; + line-height: 20px; + text-align: right; + border: 1px solid var(--surface-500); + border-radius: 3px; + } + select { + text-align-last: right; + border-radius: 3px; + border: 1px solid var(--surface-500); + width: 75px; + } + } + .gui_box { + margin-bottom: 5px; + display: table; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + font-size: 11px; + } + } + .subtab-filter { + .gui_box { + float: none; + } + table { + input { + width: 77px; + float: right; + box-sizing: border-box; + } + select { + width: 77px; + float: right; + box-sizing: border-box; + } + } + .newFilter { + .helpicon { + margin-right: 2px; + margin-top: 2px; + } + } + .sliderLabels { + tr { + td { + &:first-child { + width: 10%; + } + } + } + input { + width: calc(100% - 14px); + box-sizing: content-box; + } + } + } + .sliderDivider { + padding: 3px; + border-top: 1px solid var(--surface-500); + border-bottom: 1px solid var(--surface-500); + } + .pid_titlebar { + th { + padding: 5px; + text-align: center; + border-right: 1px solid var(--surface-500); + &:first-child { + text-align: left; + border-top-left-radius: 3px; + } + &:last-child { + border-right: none; + border-top-right-radius: 3px; + } + } + color: #fff; + background-color: var(--surface-300); + border-top-left-radius: 3px; + border-top-right-radius: 3px; + height: 20px; + td { + &:first-child { + text-align: left; + } + } + .name-helpicon-flex { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + .helpicon { + margin-right: 0; + } + } + } + #pid_optional { + table { + th { + width: 25%; + } + td { + width: 25%; + } + } + } + #pid_accel { + table { + th { + width: 33%; + } + td { + width: 33%; + } + } + } + table.compensation { + tr { + height: 30px; + border-bottom: 1px solid var(--surface-500); + &:last-child { + border-bottom: none; + } + } + td { + padding-left: 5px; + padding-right: 5px; + &:first-child { + &:not(.filterTable) { + width: 75px; + text-align: center; + vertical-align: top; + padding-top: 4px; + } + } + &:last-child { + width: 100%; + } + } + .helpicon { + margin-top: 3px; + margin-left: auto; + } + .suboption { + margin-left: 2%; + display: flex; + flex-flow: row wrap-reverse; + align-items: center; + padding-bottom: 2px; + select { + width: 80px; + text-align-last: right; + font-size: 1.1em; + box-sizing: border-box; + } + input { + width: 80px; + box-sizing: border-box; + } + label { + margin-left: 5px; + } + } + } + table.filterTable.compensation { + td { + &:first-child { + width: 5%; + } + } + } + table.tpa-settings { + tr { + height: 30px; + } + } + .pidTuningFeatures { + td { + padding: 5px; + width: 20%; + &:first-child { + width: 20%; + padding-bottom: 6px; + padding-top: 5px; + } + &:last-child { + width: 80%; + } + } + .slider { + input { + writing-mode: horizontal-tb; + } + } + } + .rates_type { + table { + select { + text-align-last: left; + } + } + } + .tab-container { + border-bottom: 3px solid var(--primary-500); + border-right-width: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: start; + width: 100%; + > div { + background-color: var(--surface-200); + padding: 6px 12px; + border-right: 1px solid var(--surface-500); + box-sizing: border-box; + text-align: center; + &:first-child { + border-top-left-radius: 4px; + } + &:last-child { + border-top-right-radius: 4px; + } + a { + display: block; + color: var(--text); + } + } + > div.active { + background-color: var(--primary-500); + color: #000; + transition: none; + a { + background-color: var(--primary-500); + color: #000; + transition: none; + } + } + } + .single-field { + display: inline-table; + margin-bottom: 10px; + margin-right: 5px; + .head { + text-align: left; + border-radius: 4px; + background-color: var(--surface-300); + color: var(--text); + height: 19px; + font-weight: normal; + padding: 2px 2px 2px 6px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } + .new_rates { + text-align: center; + td { + &:first-child { + border-bottom-left-radius: 0; + padding-left: 10px; + } + &:last-child { + border-bottom-right-radius: 0; + } + } + } + .top-buttons { + float: right; + } + .fixed_band { + position: absolute; + width: 100%; + bottom: 0; + } + .pid_mode { + .helpicon { + margin-top: 0; + } + } + .pid_titlebar.pid_titlebar_extended { + border-radius: 0; + } + .helpicon { + margin-top: 1px; + } + .number { + .helpicon { + margin-top: 3px; + margin-right: 0; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + float: left; + &:last-child { + padding-bottom: 5px; + border-bottom: 0; + } + input { + width: 50px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--surface-500); + border-radius: 3px; + margin-right: 11px; + font-weight: normal; + } + } + .gui_box_titlebar { + .helpicon { + margin-top: 5px; + margin-right: 5px; + } + } + .spacer_left { + padding-left: 0; + float: right; + width: calc(100% - 20px); + } + .numberspacer { + float: left; + width: 65px; + height: 21px; + } + .resetbt { + width: 200px; + margin-right: 10px; + } + .copyprofilebtn { + width: 150px; + margin-right: 10px; + } + .copyrateprofilebtn { + width: 150px; + margin-right: 10px; + } + .right { + float: right; + } + .pids { + float: left; + width: 25%; + } + .roll { + border-bottom-left-radius: 3px; + } + .pidTuningLevel { + float: left; + } + .borderleft { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .textleft { + width: 25%; + float: left; + text-align: left; + } + .topspacer { + margin-top: 5px; + } + .profile { + min-width: 130px; + select { + border: 1px solid var(--surface-500); + border-radius: 3px; + margin-left: 5px; + margin-right: 5px; + width: calc(100% - 10px); + } + } + .rate_profile { + min-width: 130px; + select { + border: 1px solid var(--surface-500); + border-radius: 3px; + margin-left: 5px; + margin-right: 5px; + width: calc(100% - 10px); + } + } + .controller { + width: 150px; + select { + border: 1px solid var(--surface-500); + margin-left: 5px; + width: calc(100% - 10px); + } + } + .delta { + width: 150px; + select { + border: 1px solid var(--surface-500); + margin-left: 5px; + width: calc(100% - 10px); + } + } + .bracket { + background-image: url(../../images/icons/icon_bracket.svg); + background-repeat: no-repeat; + height: 35px; + width: 14px; + margin-top: -23px; + margin-left: 8px; + } + .rates_preview_cell { + position: relative; + width: 100%; + height: 362px; + } + .rates_preview { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: 100%; + } + .pidTuning { + td { + padding: 5px; + width: 40%; + &:first-child { + width: 10%; + padding-bottom: 6px; + padding-top: 5px; + } + &:last-child { + width: 40%; + } + } + tr { + width: 100%; + border-bottom: 1px solid var(--surface-500); + padding: 0; + } + } + .rc_curve { + .cf { + tr { + td { + padding: 0; + } + } + } + } + .rc_curve_bg { + float: left; + } + .new_rates_last-child { + border-bottom: none; + } + .filter { + padding-left: 5px; + } + dialog { + width: 40em; + border-radius: 5px; + .buttons { + position: static; + margin-top: 2em; + } + h3 { + margin-bottom: 0.5em; + } + select { + border: 1px solid var(--surface-500); + margin-left: 5px; + width: 120px; + } + } + .tuningSlider { + -webkit-appearance: none; + width: calc(100% - 14px); + height: 15px; + border: none; + outline: none; + opacity: 0.8; + transition: opacity 0.2s; + margin: 7px; + background: var(--surface-200); + &:hover { + opacity: 1; + } + &::-webkit-slider-runnable-track { + -webkit-appearance: none; + border: solid 1px var(--surface-500); + border-radius: 4px; + background: linear-gradient(90deg, var(--surface-300) 0%, var(--surface-400) 50%, var(--error-500) 100%); + height: 15px; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: 23px; + height: 23px; + border-radius: 50%; + background: #ffbb2a; + border: solid 1px var(--surface-300); + cursor: pointer; + position: relative; + bottom: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + } + .nonExpertModeSliders { + .tuningSlider { + &::-webkit-slider-runnable-track { + background: linear-gradient( + 90deg, + var(--surface-300) 0%, + var(--surface-400) 50%, + var(--error-500) 100% + ); + background-size: 55%; + background-position: 44%; + background-repeat: no-repeat; + } + } + } + .disabledSliders { + .tuningSlider { + &::-webkit-slider-runnable-track { + background: linear-gradient( + 90deg, + var(--surface-300) -50%, + var(--surface-400) 50%, + var(--surface-300) 150% + ); + background-repeat: no-repeat; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: 23px; + height: 23px; + border-radius: 50%; + background: transparent; + border: solid 1px var(--surface-300); + cursor: pointer; + position: relative; + bottom: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + } + } + .sliderLabels { + tr { + border-bottom: 1px solid var(--surface-500); + &:last-child { + border-bottom: none; + } + td { + &:first-child { + text-align: right; + width: 20%; + } + &:nth-child(2) { + text-align: center; + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + span { + color: var(--text); + font-size: 12px; + } + } + .tuningPIDSliders { + .pid_titlebar { + th { + text-align: center; + &:first-child { + width: 6%; + text-align: right; + border-right: none; + } + &:nth-child(2) { + width: 14%; + border-right: none; + } + &:nth-child(3) { + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + } + .tuningFilterSliders { + .pid_titlebar { + th { + text-align: center; + &:first-child { + width: 10%; + border-right: none; + } + &:nth-child(2) { + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + } + .slidersWarning { + text-align: center; + background: #ffa3a3; + border: 1px solid red; + font-weight: 600; + font-size: 12px; + } + .nonExpertModeSlidersNote { + text-align: center; + padding-top: 2px; + padding-bottom: 2px; + } + .expertSettingsDetectedNote { + text-align: center; + padding-top: 2px; + padding-bottom: 2px; + } + .dynamicNotchNyquistWarningNote { + margin: 0; + } + .note-button { + td { + &:nth-child(n) { + padding-left: 7px; + padding-right: 7px; + text-align: center; + } + &:first-child { + width: 75%; + border-right: none; + } + } + .regular-button { + display: block; + overflow-wrap: break-word; + margin: 2px; + } + } + .subtab-rates { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: center; + .cf_column { + min-width: 380px; + flex: 1; + } + } + .subtab-pid { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: center; + .cf_column { + min-width: 450px; + flex: 1.3; + } + .cf_column_right { + min-width: 300px; + margin-left: 15px; + flex: 1; + } + .note { + flex: 0 0 100%; + } + } + table.filterTable { + table-layout: auto; + } + .rates_logo_div { + margin-top: -10%; + text-align: center; + } + .rates_logo { + width: 80%; + height: 80%; + } + .rates-tab-warning { + display: flex; + flex-flow: row wrap; + } + .float-left { + float: left; + } + .content_wrapper_header { + display: flex; + } + .content_wrapper_header_btns { + margin-left: auto; + } } .fancy.header { - background-color: #D6D6D6; - padding-top: 8px; - font-size: 12px; - border-bottom: 1px solid var(--surface-500); - color: #828282; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); - th { - padding-bottom: 4px; - padding-top: 4px; - padding-left: 5px; - } + background-color: #d6d6d6; + padding-top: 8px; + font-size: 12px; + border-bottom: 1px solid var(--surface-500); + color: #828282; + background-image: linear-gradient( + 315deg, + rgba(255, 255, 255, 0.2) 10%, + transparent 10%, + transparent 20%, + rgba(255, 255, 255, 0.2) 20%, + rgba(255, 255, 255, 0.2) 30%, + transparent 30%, + transparent 40%, + rgba(255, 255, 255, 0.2) 40%, + rgba(255, 255, 255, 0.2) 50%, + transparent 50%, + transparent 60%, + rgba(255, 255, 255, 0.2) 60%, + rgba(255, 255, 255, 0.2) 70%, + transparent 70%, + transparent 80%, + rgba(255, 255, 255, 0.2) 80%, + rgba(255, 255, 255, 0.2) 90%, + transparent 90%, + transparent 100%, + rgba(255, 255, 255, 0.2) 100%, + transparent + ); + th { + padding-bottom: 4px; + padding-top: 4px; + padding-left: 5px; + } } .pid_mode { - width: calc(100% - 5px); - height: 18px; - background-color: var(--surface-400); - float: left; - margin: 0; - text-align: left; - line-height: 13px; - padding: 5px 0 0 5px; - font-size: 12px; - border-bottom: 1px solid var(--surface-500); - color: var(--text); - font-weight: normal; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); - >div { - &:first-child { - float: left; - } - } + width: calc(100% - 5px); + height: 18px; + background-color: var(--surface-400); + float: left; + margin: 0; + text-align: left; + line-height: 13px; + padding: 5px 0 0 5px; + font-size: 12px; + border-bottom: 1px solid var(--surface-500); + color: var(--text); + font-weight: normal; + background-image: linear-gradient( + 315deg, + rgba(255, 255, 255, 0.2) 10%, + transparent 10%, + transparent 20%, + rgba(255, 255, 255, 0.2) 20%, + rgba(255, 255, 255, 0.2) 30%, + transparent 30%, + transparent 40%, + rgba(255, 255, 255, 0.2) 40%, + rgba(255, 255, 255, 0.2) 50%, + transparent 50%, + transparent 60%, + rgba(255, 255, 255, 0.2) 60%, + rgba(255, 255, 255, 0.2) 70%, + transparent 70%, + transparent 80%, + rgba(255, 255, 255, 0.2) 80%, + rgba(255, 255, 255, 0.2) 90%, + transparent 90%, + transparent 100%, + rgba(255, 255, 255, 0.2) 100%, + transparent + ); + > div { + &:first-child { + float: left; + } + } } .pid_roll { background-color: #e24761; @@ -852,202 +908,227 @@ .pid_yaw { background-color: #1fb1f0; } -.pid_roll, .pid_pitch, .pid_yaw { +.pid_roll, +.pid_pitch, +.pid_yaw { color: black; } .show { - width: 130px; - margin-right: 3px; + width: 130px; + margin-right: 3px; } .subtab-filter { - table { - tr { - td { - &:first-child { - text-align: right; - padding-left: 5px; - width: 1%; - } - } - } - } - .two_columns { - display: flex; - .two_columns_first { - margin-right: 10px; - height: fit-content; - } - .two_columns_second { - margin-left: 10px; - height: fit-content; - } - } + table { + tr { + td { + &:first-child { + text-align: right; + padding-left: 5px; + width: 1%; + } + } + } + } + .two_columns { + display: flex; + .two_columns_first { + margin-right: 10px; + height: fit-content; + } + .two_columns_second { + margin-left: 10px; + height: fit-content; + } + } } .tabarea { - width: calc(100% - 22px); - position: relative; - padding: 10px; - border: 1px solid var(--surface-500); - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; - border-top: 0 solid var(--surface-500); - background: var(--surface-200); + width: calc(100% - 22px); + position: relative; + padding: 10px; + border: 1px solid var(--surface-500); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border-top: 0 solid var(--surface-500); + background: var(--surface-200); } @media all and (max-width: 575px) { - .tab-pid_tuning { - dialog { - width: calc(100% - 2em); - border-radius: unset; - } - .content_wrapper_header { - flex-wrap: wrap; - } - .profile { - width: calc(50% - 5px); - } - .rate_profile { - width: calc(50% - 5px); - margin-left: 5px; - margin-right: 0; - } - .copyprofilebtn { - width: calc(50% - 5px); - } - .copyrateprofilebtn { - width: calc(50% - 5px); - margin-right: 0; - } - .resetbt { - width: calc(50% - 5px); - } - .show { - width: calc(50% - 5px); - margin-right: 0; - } - .controller { - margin-right: 0; - width: 100%; - } - .content_wrapper_header_btns { - display: flex; - flex-wrap: wrap; - } - .tab-container { - >div { - width: calc(100% / 3); - } - } - .subtab-pid { - .cf_column { - min-width: 100%; - width: 100%; - } - .cf_column_right { - min-width: 100%; - margin-left: 0px; - } - } - .subtab-rates { - .cf_column { - min-width: 100%; - width: 100%; - } - } - .note-button { - td { - &:first-child { - width: 60%; - } - } - } - .spacer_left { - width: 100%; - } - .sliderHeaders { - height: 18px; - background-color: #D6D6D6; - line-height: 13px; - font-size: 12px; - border-bottom: 1px solid var(--surface-500); - color: #828282; - font-weight: normal; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); - span { - color: #828282; - } - } - .sliderLabels { - tr.sliderHeaders { - td { - &:first-child { - text-align: left; - } - } - } - } - .tuningPIDSliders { - .pid_titlebar { - th { - &:last-child { - width: 20%; - } - &:nth-child(2) { - width: 20%; - } - } - } - } - .tuningFilterSliders { - .pid_titlebar { - th { - &:last-child { - width: 20%; - } - &:nth-child(2) { - width: 20%; - } - } - } - } - .pid_titlebar { - th { - div { - .xs { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - } - } - } - .subtab-filter { - .two_columns { - flex-wrap: wrap; - .two_columns_first { - margin-right: 0; - } - .two_columns_second { - margin-left: 0; - } - } - } + .tab-pid_tuning { + dialog { + width: calc(100% - 2em); + border-radius: unset; + } + .content_wrapper_header { + flex-wrap: wrap; + } + .profile { + width: calc(50% - 5px); + } + .rate_profile { + width: calc(50% - 5px); + margin-left: 5px; + margin-right: 0; + } + .copyprofilebtn { + width: calc(50% - 5px); + } + .copyrateprofilebtn { + width: calc(50% - 5px); + margin-right: 0; + } + .resetbt { + width: calc(50% - 5px); + } + .show { + width: calc(50% - 5px); + margin-right: 0; + } + .controller { + margin-right: 0; + width: 100%; + } + .content_wrapper_header_btns { + display: flex; + flex-wrap: wrap; + } + .tab-container { + > div { + width: calc(100% / 3); + } + } + .subtab-pid { + .cf_column { + min-width: 100%; + width: 100%; + } + .cf_column_right { + min-width: 100%; + margin-left: 0px; + } + } + .subtab-rates { + .cf_column { + min-width: 100%; + width: 100%; + } + } + .note-button { + td { + &:first-child { + width: 60%; + } + } + } + .spacer_left { + width: 100%; + } + .sliderHeaders { + height: 18px; + background-color: #d6d6d6; + line-height: 13px; + font-size: 12px; + border-bottom: 1px solid var(--surface-500); + color: #828282; + font-weight: normal; + background-image: linear-gradient( + 315deg, + rgba(255, 255, 255, 0.2) 10%, + transparent 10%, + transparent 20%, + rgba(255, 255, 255, 0.2) 20%, + rgba(255, 255, 255, 0.2) 30%, + transparent 30%, + transparent 40%, + rgba(255, 255, 255, 0.2) 40%, + rgba(255, 255, 255, 0.2) 50%, + transparent 50%, + transparent 60%, + rgba(255, 255, 255, 0.2) 60%, + rgba(255, 255, 255, 0.2) 70%, + transparent 70%, + transparent 80%, + rgba(255, 255, 255, 0.2) 80%, + rgba(255, 255, 255, 0.2) 90%, + transparent 90%, + transparent 100%, + rgba(255, 255, 255, 0.2) 100%, + transparent + ); + span { + color: #828282; + } + } + .sliderLabels { + tr.sliderHeaders { + td { + &:first-child { + text-align: left; + } + } + } + } + .tuningPIDSliders { + .pid_titlebar { + th { + &:last-child { + width: 20%; + } + &:nth-child(2) { + width: 20%; + } + } + } + } + .tuningFilterSliders { + .pid_titlebar { + th { + &:last-child { + width: 20%; + } + &:nth-child(2) { + width: 20%; + } + } + } + } + .pid_titlebar { + th { + div { + .xs { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + } + } + .subtab-filter { + .two_columns { + flex-wrap: wrap; + .two_columns_first { + margin-right: 0; + } + .two_columns_second { + margin-left: 0; + } + } + } } @media only screen and (max-width: 1205px) { - .tab-pid_tuning { - .subtab-pid { - .spacer_left { - width: 100%; - } - } - } + .tab-pid_tuning { + .subtab-pid { + .spacer_left { + width: 100%; + } + } + } } @media only screen and (max-width: 1405px) { - .tab-pid_tuning { - .subtab-rates { - .ratePreview.spacer_left { - width: 100%; - } - } - } + .tab-pid_tuning { + .subtab-rates { + .ratePreview.spacer_left { + width: 100%; + } + } + } } diff --git a/src/css/tabs/ports.less b/src/css/tabs/ports.less index 2c560c693f..fb6d10f8a2 100644 --- a/src/css/tabs/ports.less +++ b/src/css/tabs/ports.less @@ -1,52 +1,55 @@ .tab-ports { - table { - border-collapse: collapse; - border-left: 0; - border-right: 0; - border-top: 0; - td { - padding: 0.25rem; - text-align: center; - &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors { + table { + border-collapse: collapse; + border-left: 0; + border-right: 0; + border-top: 0; + td { + padding: 0.25rem; + text-align: center; + &.functionsCell-configuration, + &.functionsCell-telemetry, + &.functionsCell-peripherals, + &.functionsCell-sensors { select { margin-left: 0.5rem; } } - } - tr { - td { + } + tr { + td { padding: 0.5rem 0; - background-color: var(--surface-200); - &:first-child { - text-align: left; - padding-left: 1rem - } - } - &:nth-child(even) { - select { - background-color: var(--surface-300); - } - } - } - select[name=function-peripherals] { - max-width: 12rem; - } - select[name=function-telemetry] { - max-width: 10rem; - } - thead { - td { - padding: 0.5rem; - background-color: var(--surface-300); - color: var(--text); - &:first-child { - border-top-left-radius: 0.75rem; - } - &:last-child { - border-top-right-radius: 0.75rem; - } - } - } + background-color: var(--surface-200); + &:first-child { + text-align: left; + padding-left: 1rem; + } + } + &:nth-child(even) { + select { + background-color: var(--surface-300); + } + } + } + select[name="function-peripherals"] { + max-width: 12rem; + } + select[name="function-telemetry"] { + max-width: 10rem; + } + thead { + td { + padding: 0.5rem; + background-color: var(--surface-300); + color: var(--text); + &:first-child { + border-top-left-radius: 0.75rem; + } + &:last-child { + border-top-right-radius: 0.75rem; + } + } + } tbody { // first and last td of last tr tr:last-child td:first-child { @@ -56,97 +59,100 @@ border-bottom-right-radius: 0.75rem; } td { - *:first-child { - margin-bottom: 0.25rem; - } + *:first-child { + margin-bottom: 0.25rem; + } } } - } + } } #tab-ports-templates { - display: none; + display: none; } .tab-ports.supported { - .require-support { - display: block; - } - .require-upgrade { - display: none; - } + .require-support { + display: block; + } + .require-upgrade { + display: none; + } } @media only screen and (max-width: 1055px) { - .tab-ports { - table { - thead { - tr { - &:first-child { - font-size: 12px; - height: 22px; - } - } - } - } - } + .tab-ports { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } } @media only screen and (max-device-width: 1055px) { - .tab-ports { - table { - thead { - tr { - &:first-child { - font-size: 12px; - height: 22px; - } - } - } - } - } + .tab-ports { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } } @media all and (max-width: 575px) { - .tab-ports { - .config { - text-align: left; - border-top-left-radius: 5px; - border-left: 0; - } - table { - td { - padding: 0; - } - } - .ports { - select { - margin: 0; - width: 100%; - border: none; - height: 25px; - border-radius: unset; - } - select[name=function-peripherals] { - border-bottom: 1px solid var(--surface-500); - } - select[name=function-telemetry] { - border-bottom: 1px solid var(--surface-500); - } - select[name=function-sensors] { - border-bottom: 1px solid var(--surface-500); - } - thead { - td { + .tab-ports { + .config { + text-align: left; + border-top-left-radius: 5px; + border-left: 0; + } + table { + td { + padding: 0; + } + } + .ports { + select { + margin: 0; + width: 100%; + border: none; + height: 25px; + border-radius: unset; + } + select[name="function-peripherals"] { + border-bottom: 1px solid var(--surface-500); + } + select[name="function-telemetry"] { + border-bottom: 1px solid var(--surface-500); + } + select[name="function-sensors"] { + border-bottom: 1px solid var(--surface-500); + } + thead { + td { font-size: 10px; - width: fit-content; + width: fit-content; padding: 0.5rem; - word-break: break-word; - white-space: unset; - } - } + word-break: break-word; + white-space: unset; + } + } tbody { td { padding: 0.25rem 0.5rem; .switchery-default { margin-bottom: 0.5rem; } - &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors { + &.functionsCell-configuration, + &.functionsCell-telemetry, + &.functionsCell-peripherals, + &.functionsCell-sensors { select { margin-left: 0rem; } @@ -164,14 +170,14 @@ } } } - } - .portIdentifier { - td { - font-size: 12px; - color: var(--text); - font-weight: normal; + } + .portIdentifier { + td { + font-size: 12px; + color: var(--text); + font-weight: normal; background-color: var(--surface-300); - } - } - } + } + } + } } diff --git a/src/css/tabs/power.less b/src/css/tabs/power.less index 4bc4d00b37..35f5570074 100644 --- a/src/css/tabs/power.less +++ b/src/css/tabs/power.less @@ -1,32 +1,32 @@ #tab-power-templates { - display: none; + display: none; } .tab-power { - .battery-state { - .configuration { - border-bottom: 0; - } - } - .label { - width: 25%; - } - .select { - margin-bottom: 0.5rem; + .battery-state { + .configuration { + border-bottom: 0; + } + } + .label { + width: 25%; + } + .select { + margin-bottom: 0.5rem; padding-bottom: 0.5rem; - border-bottom: 1px solid var(--surface-500); - width: 100%; - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; - } - } - .require-support { - display: none; - } - .require-upgrade { - display: block; - } + border-bottom: 1px solid var(--surface-500); + width: 100%; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } @media all and (max-width: 575px) { .grid-box { &.col2 { @@ -36,10 +36,10 @@ } } .tab-power.supported { - .require-support { - display: block; - } - .require-upgrade { - display: none; - } + .require-support { + display: block; + } + .require-upgrade { + display: none; + } } diff --git a/src/css/tabs/privacy_policy.less b/src/css/tabs/privacy_policy.less index 3cdb8b3b4c..61736476fe 100644 --- a/src/css/tabs/privacy_policy.less +++ b/src/css/tabs/privacy_policy.less @@ -1,8 +1,12 @@ .tab-privacy_policy { - p, h1, h2, h3, h4 { - margin-bottom: 10px; - } - li { - margin-bottom: 0px !important; - } + p, + h1, + h2, + h3, + h4 { + margin-bottom: 10px; + } + li { + margin-bottom: 0px !important; + } } diff --git a/src/css/tabs/receiver.less b/src/css/tabs/receiver.less index cd6bc9cfc9..75a0c1460a 100644 --- a/src/css/tabs/receiver.less +++ b/src/css/tabs/receiver.less @@ -1,126 +1,126 @@ .tab-receiver { - .bars { + .bars { display: flex; flex-direction: column; gap: 0.5rem; - font-weight: bold; - ul { + font-weight: bold; + ul { display: flex; gap: 0.5rem; - &:nth-of-type(1) { - .fill { - background-color: #f1453d; - } - } - &:nth-of-type(2) { - .fill { - background-color: #673fb4; - } - } - &:nth-of-type(3) { - .fill { - background-color: #2b98f0; - } - } - &:nth-of-type(4) { - .fill { - background-color: #1fbcd2; - } - } - &:nth-of-type(5) { - .fill { - background-color: #159588; - } - } - &:nth-of-type(6) { - .fill { - background-color: #50ae55; - } - } - &:nth-of-type(7) { - .fill { - background-color: #cdda49; - } - } - &:nth-of-type(8) { - .fill { - background-color: #fdc02f; - } - } - &:nth-of-type(9) { - .fill { - background-color: #fc5830; - } - } - &:nth-of-type(10) { - .fill { - background-color: #785549; - } - } - &:nth-of-type(11) { - .fill { - background-color: #9e9e9e; - } - } - &:nth-of-type(12) { - .fill { - background-color: #617d8a; - } - } - &:nth-of-type(13) { - .fill { - background-color: #cf267d; - } - } - &:nth-of-type(14) { - .fill { - background-color: #7a1464; - } - } - &:nth-of-type(15) { - .fill { - background-color: #3a7a14; - } - } - &:nth-of-type(16) { - .fill { - background-color: #14407a; - } - } - } + &:nth-of-type(1) { + .fill { + background-color: #f1453d; + } + } + &:nth-of-type(2) { + .fill { + background-color: #673fb4; + } + } + &:nth-of-type(3) { + .fill { + background-color: #2b98f0; + } + } + &:nth-of-type(4) { + .fill { + background-color: #1fbcd2; + } + } + &:nth-of-type(5) { + .fill { + background-color: #159588; + } + } + &:nth-of-type(6) { + .fill { + background-color: #50ae55; + } + } + &:nth-of-type(7) { + .fill { + background-color: #cdda49; + } + } + &:nth-of-type(8) { + .fill { + background-color: #fdc02f; + } + } + &:nth-of-type(9) { + .fill { + background-color: #fc5830; + } + } + &:nth-of-type(10) { + .fill { + background-color: #785549; + } + } + &:nth-of-type(11) { + .fill { + background-color: #9e9e9e; + } + } + &:nth-of-type(12) { + .fill { + background-color: #617d8a; + } + } + &:nth-of-type(13) { + .fill { + background-color: #cf267d; + } + } + &:nth-of-type(14) { + .fill { + background-color: #7a1464; + } + } + &:nth-of-type(15) { + .fill { + background-color: #3a7a14; + } + } + &:nth-of-type(16) { + .fill { + background-color: #14407a; + } + } + } .name { width: 5rem; text-align: right; } - .meter { - width: 100%; - } - .meter-bar { - position: relative; - width: 100%; - height: 1rem; - border: 1px solid var(--surface-500); - background-color: var(--surface-200); - border-radius: 0.3rem; - .label { - position: absolute; - width: 50px; - text-align: center; - color: var(--text); - } - .fill { - position: relative; - overflow: hidden; - border-radius: 0.3rem; - width: 50%; - height: 1rem; - background-color: var(--primary-500); - .label { - color: white; - } - } - } - } + .meter { + width: 100%; + } + .meter-bar { + position: relative; + width: 100%; + height: 1rem; + border: 1px solid var(--surface-500); + background-color: var(--surface-200); + border-radius: 0.3rem; + .label { + position: absolute; + width: 50px; + text-align: center; + color: var(--text); + } + .fill { + position: relative; + overflow: hidden; + border-radius: 0.3rem; + width: 50%; + height: 1rem; + background-color: var(--primary-500); + .label { + color: white; + } + } + } + } .sticks { th { width: 33%; @@ -134,9 +134,9 @@ .hybrid_element { position: relative; width: 11rem; - select { - z-index: 3; - position: absolute; + select { + z-index: 3; + position: absolute; border: none !important; height: 1.45rem; min-width: 0 !important; @@ -144,40 +144,40 @@ inset: 0; left: calc(100% - 1.25rem); top: 1px; - } - input { - z-index: 2; - } - } - .rcSmoothing { - table { - select { - width: 90%; - } - input { - width: 90%; - } - .helpicon { - margin-top: 0; - } - } - td { - &:first-child { - width: 120px; - padding: 0.5rem 0; - } - &:last-child { - width: calc(100% - 78px); - } - } - } - .rcInterpolation { - .slider { - input { - appearance: slider-horizontal; - } - } - } + } + input { + z-index: 2; + } + } + .rcSmoothing { + table { + select { + width: 90%; + } + input { + width: 90%; + } + .helpicon { + margin-top: 0; + } + } + td { + &:first-child { + width: 120px; + padding: 0.5rem 0; + } + &:last-child { + width: calc(100% - 78px); + } + } + } + .rcInterpolation { + .slider { + input { + appearance: slider-horizontal; + } + } + } .graphAndLabel { display: flex; flex-wrap: nowrap; @@ -187,170 +187,170 @@ width: 100%; height: 100%; } - .plot_control { + .plot_control { width: 14rem; - margin: 0; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - .table { - display: table; - width: 100%; - table-layout: fixed; - border-collapse: separate; - border-spacing: 5px; - box-sizing: border-box; - padding: 5px 5px 5px 3px; - } - .row-container { - display: table-row-group; - } - .receiver-button { - a { - background-color: var(--primary-500); - border-radius: 0.5rem; - color: #000; - font-size: 10px; - line-height: 1.25rem; - text-transform: uppercase; - letter-spacing: 0.03em; - display: block; - text-align: center; - } - } - .row { - display: table-row; - } - .left-cell { - display: table-cell; - vertical-align: middle; - font-weight: bold; - } - .right-cell { - display: table-cell; - vertical-align: middle; - text-align: right; - font-size: smaller; - } - .value { - padding: 4px; - color: #fff; - border-radius: 3px; - } - .ch1 { - background-color: #F1453D; - } - .ch2 { - background-color: #673FB4; - } - .ch3 { - background-color: #2B98F0; - } - .ch4 { - background-color: #1FBCD2; - } - } - #RX_plot { + margin: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + .table { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + border-spacing: 5px; + box-sizing: border-box; + padding: 5px 5px 5px 3px; + } + .row-container { + display: table-row-group; + } + .receiver-button { + a { + background-color: var(--primary-500); + border-radius: 0.5rem; + color: #000; + font-size: 10px; + line-height: 1.25rem; + text-transform: uppercase; + letter-spacing: 0.03em; + display: block; + text-align: center; + } + } + .row { + display: table-row; + } + .left-cell { + display: table-cell; + vertical-align: middle; + font-weight: bold; + } + .right-cell { + display: table-cell; + vertical-align: middle; + text-align: right; + font-size: smaller; + } + .value { + padding: 4px; + color: #fff; + border-radius: 3px; + } + .ch1 { + background-color: #f1453d; + } + .ch2 { + background-color: #673fb4; + } + .ch3 { + background-color: #2b98f0; + } + .ch4 { + background-color: #1fbcd2; + } + } + #RX_plot { height: 208px; color: var(--text); - .line { - &:nth-child(1) { - stroke: #f1453d; - } - &:nth-child(2) { - stroke: #673fb4; - } - &:nth-child(3) { - stroke: #2b98f0; - } - &:nth-child(4) { - stroke: #1fbcd2; - } - &:nth-child(5) { - stroke: #159588; - } - &:nth-child(6) { - stroke: #50ae55; - } - &:nth-child(7) { - stroke: #cdda49; - } - &:nth-child(8) { - stroke: #fdc02f; - } - &:nth-child(9) { - stroke: #fc5830; - } - &:nth-child(10) { - stroke: #785549; - } - &:nth-child(11) { - stroke: #9e9e9e; - } - &:nth-child(12) { - stroke: #7a6614; - } - &:nth-child(13) { - stroke: #cf267d; - } - &:nth-child(14) { - stroke: #7a1464; - } - &:nth-child(15) { - stroke: #3a7a14; - } - &:nth-child(16) { - stroke: #14407a; - } - } - } - .grid { - .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; - } - path { - stroke-width: 0; - } - } - .line { - stroke-width: 2px; - fill: none; - } - text { - stroke: none; - fill: var(--text); - font-size: 10px; - } - .model_preview_cell { - position: relative; - width: 100%; - height: 11rem; - } - .model_preview { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - .receiver { - select { + .line { + &:nth-child(1) { + stroke: #f1453d; + } + &:nth-child(2) { + stroke: #673fb4; + } + &:nth-child(3) { + stroke: #2b98f0; + } + &:nth-child(4) { + stroke: #1fbcd2; + } + &:nth-child(5) { + stroke: #159588; + } + &:nth-child(6) { + stroke: #50ae55; + } + &:nth-child(7) { + stroke: #cdda49; + } + &:nth-child(8) { + stroke: #fdc02f; + } + &:nth-child(9) { + stroke: #fc5830; + } + &:nth-child(10) { + stroke: #785549; + } + &:nth-child(11) { + stroke: #9e9e9e; + } + &:nth-child(12) { + stroke: #7a6614; + } + &:nth-child(13) { + stroke: #cf267d; + } + &:nth-child(14) { + stroke: #7a1464; + } + &:nth-child(15) { + stroke: #3a7a14; + } + &:nth-child(16) { + stroke: #14407a; + } + } + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .line { + stroke-width: 2px; + fill: none; + } + text { + stroke: none; + fill: var(--text); + font-size: 10px; + } + .model_preview_cell { + position: relative; + width: 100%; + height: 11rem; + } + .model_preview { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + .receiver { + select { width: fit-content; - } - } - table { - width: 100%; - padding: 0; - th { - border-bottom: 1px solid var(--surface-500); - } - td { - border-bottom: 1px solid var(--surface-500); - } - } + } + } + table { + width: 100%; + padding: 0; + th { + border-bottom: 1px solid var(--surface-500); + } + td { + border-bottom: 1px solid var(--surface-500); + } + } @media all and (max-width: 575px) { .grid-box { &.col5 { diff --git a/src/css/tabs/sensors.less b/src/css/tabs/sensors.less index 13282d153b..b5c8e0adae 100644 --- a/src/css/tabs/sensors.less +++ b/src/css/tabs/sensors.less @@ -1,39 +1,40 @@ .tab-sensors { - .info { - margin-bottom: 10px; - margin-top: 8px; - margin-left: 10px; - input { - vertical-align: middle; - margin: 0 5px 0 15px; + .info { + margin-bottom: 10px; + margin-top: 8px; + margin-left: 10px; + input { + vertical-align: middle; + margin: 0 5px 0 15px; width: 18px; height: 18px; - } - .first { - margin: 0 5px 0 0; - } - } - .wrapper { - display: none; + } + .first { + margin: 0 5px 0 0; + } + } + .wrapper { + display: none; .gui_box { display: flex; flex-direction: row-reverse; } - } - .plot_control { + } + .plot_control { width: fit-content; - .title { - font-weight: bold; - margin-bottom: 0.75rem; - } - .helpicon { - margin: 2px 4px; - } + .title { + font-weight: bold; + margin-bottom: 0.75rem; + } + .helpicon { + margin: 2px 4px; + } dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; - dt, dd { + dt, + dd { display: flex; align-items: center; } @@ -44,46 +45,48 @@ min-width: 100%; } } - .x, .y, .z { + .x, + .y, + .z { border-radius: 0.25rem; padding: 0.25rem; text-align: center; } - } - svg { - width: 100%; - } - .grid { - .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; - } - path { - stroke-width: 0; - } - } - .data { - .line { - stroke-width: 2px; - fill: none; - } - } - text { - stroke: none; - fill: var(--text); - font-size: 10px; - } - .line { - &:nth-child(4) { - stroke: #4DA74D; - } - } - .legend { - .item { - &:nth-child(4) { - fill: #4DA74D; - } - } - } + } + svg { + width: 100%; + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .data { + .line { + stroke-width: 2px; + fill: none; + } + } + text { + stroke: none; + fill: var(--text); + font-size: 10px; + } + .line { + &:nth-child(4) { + stroke: #4da74d; + } + } + .legend { + .item { + &:nth-child(4) { + fill: #4da74d; + } + } + } } diff --git a/src/css/tabs/servos.less b/src/css/tabs/servos.less index 7e61aeced0..21601a302e 100644 --- a/src/css/tabs/servos.less +++ b/src/css/tabs/servos.less @@ -1,370 +1,370 @@ .tab-servos { - height: 100%; + height: 100%; - .title { - margin-top: 0; - line-height: 30px; - text-align: center; - font-weight: bold; - border: 1px solid var(--surface-500); - border-bottom: 0; - background-color: var(--surface-300); - color: var(--text); - border-top-right-radius: 5px; - border-top-left-radius: 5px; - } - table { - margin-bottom: 10px; - width: 100%; - border-collapse: collapse; - border-left: 0; - border-right: 0; - border-top: 0; - th { - border-left: 0; - border-right: 0; - border-top: 0; - padding-top: 3px; - padding-bottom: 3px; - text-align: center; - border: 1px solid var(--surface-500); - line-height: 14px; - } - td { - border-top: 0; - border-bottom: 1px solid var(--surface-500); - border-left: 1px solid var(--surface-500); - border-right: 1px solid var(--surface-500); - padding: 6px 5px 7px 5px; - &:nth-child(2) { - width: 140px; - } - &:nth-child(3) { - width: 140px; - } - &:nth-child(4) { - width: 140px; - } - &:nth-child(19) { - width: 110px; - } - } - tr { - &:nth-child(even) { - background-color: var(--surface-200); - } - td { - &:first-child { - text-align: left; - width: 55px; - } - } - } - .main { - font-weight: bold; - text-align: center; - background-color: var(--surface-400); - } - .channel { - width: 40px; - text-align: center; - input { - vertical-align: middle; - } - } - input { - border: 1px solid var(--surface-500); - border-radius: 3px; - } - select { - border: 1px solid var(--surface-500); - border-radius: 3px; - } - input[type="number"] { - display: block; - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - } + .title { + margin-top: 0; + line-height: 30px; + text-align: center; + font-weight: bold; + border: 1px solid var(--surface-500); + border-bottom: 0; + background-color: var(--surface-300); + color: var(--text); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + } + table { + margin-bottom: 10px; + width: 100%; + border-collapse: collapse; + border-left: 0; + border-right: 0; + border-top: 0; + th { + border-left: 0; + border-right: 0; + border-top: 0; + padding-top: 3px; + padding-bottom: 3px; + text-align: center; + border: 1px solid var(--surface-500); + line-height: 14px; + } + td { + border-top: 0; + border-bottom: 1px solid var(--surface-500); + border-left: 1px solid var(--surface-500); + border-right: 1px solid var(--surface-500); + padding: 6px 5px 7px 5px; + &:nth-child(2) { + width: 140px; + } + &:nth-child(3) { + width: 140px; + } + &:nth-child(4) { + width: 140px; + } + &:nth-child(19) { + width: 110px; + } + } + tr { + &:nth-child(even) { + background-color: var(--surface-200); + } + td { + &:first-child { + text-align: left; + width: 55px; + } + } + } + .main { + font-weight: bold; + text-align: center; + background-color: var(--surface-400); + } + .channel { + width: 40px; + text-align: center; + input { + vertical-align: middle; + } + } + input { + border: 1px solid var(--surface-500); + border-radius: 3px; + } + select { + border: 1px solid var(--surface-500); + border-radius: 3px; + } + input[type="number"] { + display: block; + width: 100%; + height: 20px; + line-height: 20px; + text-align: right; + } input[type="checkbox"] { width: 16px; height: 16px; } - } - input[type="number"] { - &::-webkit-inner-spin-button { - border: 0; - } - } - .directions { - .direction { - select { - height: 19px; - line-height: 19px; - } - } - } - .direction { - .name { - float: left; - display: block; - width: 60px; - } - .alternate { - float: left; - display: block; - width: 60px; - } - .first { - float: left; - margin: 2px 10px 0 20px; - } - .second { - float: left; - margin: 2px 10px 0 0; - } - .rate { - width: 110px; - text-align: center; - } - } - .live { - float: left; - margin-top: 0; - span { - float: left; - margin-right: 10px; - } - input { - float: left; - margin: 0 0 0 5px; - } - } - .buttons { - width: calc(100% - 20px); - position: absolute; - bottom: 10px; - } - .require-support { - display: none; - } - .require-upgrade { - display: block; - } - .wide { - width: 120px; - } - .short { - width: 40px; - } - .table_overflow { - overflow: auto; - } - position: relative; - .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); - } - .gui_box_titlebar { - margin-bottom: 0; - } - .gui_box { - margin-bottom: 10px; - font-weight: bold; - span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: var(--text); - font-size: 11px; - } - } - .spacer { - width: calc(100% - 34px); - margin: 10px; - } - .servoblock { - margin-bottom: 0; - background-color: var(--surface-400); - } - .title2 { - padding-bottom: 2px; - text-align: center; - font-size: 12px; - font-weight: 300; - } - .titles { - height: 20px; - li { - float: left; - width: calc((100% / 9) - 10px); - margin-right: 10px; - text-align: center; - } - .active { - color: green; - } - } - .servos { - .titles { - li { - float: right; - width: calc((100% / 8) - 10px); - margin: 0 0 0 10px; - } - } - .m-block { - float: right; - width: calc((100% / 8) - 10px); - margin: 0 0 0 10px; - border-radius: 3px; - } - } - .m-block { - float: left; - width: calc((100% / 9) - 10px); - height: 100px; - margin-right: 10px; - text-align: center; - background-color: var(--surface-300); - border-radius: 3px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - .meter-bar { - position: relative; - width: 100%; - height: 100px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - background-color: var(--surface-300); - border-radius: 3px; - border: 1px solid var(--surface-500); - } - .label { - position: absolute; - width: 100%; - bottom: 45px; - text-align: center; - font-weight: bold; - font-size: 10px; - color: var(--surface-950); - } - .label.rpm_info { - bottom: 28px; - } - .indicator { - .label { - color: white; - } - } - } - .indicator { - position: absolute; - overflow: hidden; - width: 100%; - text-align: center; - border-radius: 2px; - } + } + input[type="number"] { + &::-webkit-inner-spin-button { + border: 0; + } + } + .directions { + .direction { + select { + height: 19px; + line-height: 19px; + } + } + } + .direction { + .name { + float: left; + display: block; + width: 60px; + } + .alternate { + float: left; + display: block; + width: 60px; + } + .first { + float: left; + margin: 2px 10px 0 20px; + } + .second { + float: left; + margin: 2px 10px 0 0; + } + .rate { + width: 110px; + text-align: center; + } + } + .live { + float: left; + margin-top: 0; + span { + float: left; + margin-right: 10px; + } + input { + float: left; + margin: 0 0 0 5px; + } + } + .buttons { + width: calc(100% - 20px); + position: absolute; + bottom: 10px; + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } + .wide { + width: 120px; + } + .short { + width: 40px; + } + .table_overflow { + overflow: auto; + } + position: relative; + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .gui_box_titlebar { + margin-bottom: 0; + } + .gui_box { + margin-bottom: 10px; + font-weight: bold; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: var(--text); + font-size: 11px; + } + } + .spacer { + width: calc(100% - 34px); + margin: 10px; + } + .servoblock { + margin-bottom: 0; + background-color: var(--surface-400); + } + .title2 { + padding-bottom: 2px; + text-align: center; + font-size: 12px; + font-weight: 300; + } + .titles { + height: 20px; + li { + float: left; + width: calc((100% / 9) - 10px); + margin-right: 10px; + text-align: center; + } + .active { + color: green; + } + } + .servos { + .titles { + li { + float: right; + width: calc((100% / 8) - 10px); + margin: 0 0 0 10px; + } + } + .m-block { + float: right; + width: calc((100% / 8) - 10px); + margin: 0 0 0 10px; + border-radius: 3px; + } + } + .m-block { + float: left; + width: calc((100% / 9) - 10px); + height: 100px; + margin-right: 10px; + text-align: center; + background-color: var(--surface-300); + border-radius: 3px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + .meter-bar { + position: relative; + width: 100%; + height: 100px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background-color: var(--surface-300); + border-radius: 3px; + border: 1px solid var(--surface-500); + } + .label { + position: absolute; + width: 100%; + bottom: 45px; + text-align: center; + font-weight: bold; + font-size: 10px; + color: var(--surface-950); + } + .label.rpm_info { + bottom: 28px; + } + .indicator { + .label { + color: white; + } + } + } + .indicator { + position: absolute; + overflow: hidden; + width: 100%; + text-align: center; + border-radius: 2px; + } } .tab-servos.supported { - .require-support { - display: block; - } - .require-upgrade { - display: none; - } + .require-support { + display: block; + } + .require-upgrade { + display: none; + } } @media all and (max-width: 575px) { - .tab-servos { - table { - th { - min-width: 30px; - } - } - .min { - min-width: 60px; - } - .max { - min-width: 60px; - } - .middle { - min-width: 60px; - } - .gui_box { - min-height: auto; - } - .servoblock { - margin-bottom: 15px; - >.spacer { - display: flex; - flex-wrap: wrap; - } - } - .left.motors { - width: 100%; - order: 1; - } - .right.servos { - width: 100%; - order: 3; - margin-top: 15px; - } - .titles { - li { - width: calc((100% - 80px) / 9); - &:last-child { - margin-right: 0; - } - } - } - .m-block { - width: calc((100% - 80px) / 9); - &:last-child { - margin-right: 0; - } - } - .servos { - .m-block { - width: calc((100% - 70px) / 8); - &:last-child { - margin-left: 0; - } - } - .titles { - li { - width: calc((100% - 70px) / 8); - &:last-child { - margin-left: 0; - } - } - } - } - .servo_testing { - .values { - li { - &:last-child { - margin-left: 4px; - } - } - } - } - } + .tab-servos { + table { + th { + min-width: 30px; + } + } + .min { + min-width: 60px; + } + .max { + min-width: 60px; + } + .middle { + min-width: 60px; + } + .gui_box { + min-height: auto; + } + .servoblock { + margin-bottom: 15px; + > .spacer { + display: flex; + flex-wrap: wrap; + } + } + .left.motors { + width: 100%; + order: 1; + } + .right.servos { + width: 100%; + order: 3; + margin-top: 15px; + } + .titles { + li { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + } + .m-block { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + .servos { + .m-block { + width: calc((100% - 70px) / 8); + &:last-child { + margin-left: 0; + } + } + .titles { + li { + width: calc((100% - 70px) / 8); + &:last-child { + margin-left: 0; + } + } + } + } + .servo_testing { + .values { + li { + &:last-child { + margin-left: 4px; + } + } + } + } + } } @media only screen and (max-width: 1055px) { - .tab-servos { - .gui_box { - span { - line-height: 17px; - } - } - } + .tab-servos { + .gui_box { + span { + line-height: 17px; + } + } + } } @media only screen and (max-device-width: 1055px) { - .tab-servos { - .gui_box { - span { - line-height: 17px; - } - } - } + .tab-servos { + .gui_box { + span { + line-height: 17px; + } + } + } } diff --git a/src/css/tabs/setup.less b/src/css/tabs/setup.less index 8cb51921d9..15d78dcf85 100644 --- a/src/css/tabs/setup.less +++ b/src/css/tabs/setup.less @@ -1,41 +1,41 @@ .tab-setup { - #interactive_block { + #interactive_block { position: relative; - background-color: var(--surface-200); - border-radius: 1rem; - border: 2px solid var(--surface-400); - a.reset { - position: absolute; - display: block; - top: 1rem; - right: 1rem; - border-radius: 0.5rem; - bottom: 10px; - height: 28px; - line-height: 28px; - padding: 0 15px 0 15px; - text-align: center; - font-weight: bold; - background-color: var(--surface-400); - z-index: 100; - &:hover { - background-color: var(--surface-500); - } - } - } - .model-and-info { - margin-top: 0.75rem; + background-color: var(--surface-200); + border-radius: 1rem; + border: 2px solid var(--surface-400); + a.reset { + position: absolute; + display: block; + top: 1rem; + right: 1rem; + border-radius: 0.5rem; + bottom: 10px; + height: 28px; + line-height: 28px; + padding: 0 15px 0 15px; + text-align: center; + font-weight: bold; + background-color: var(--surface-400); + z-index: 100; + &:hover { + background-color: var(--surface-500); + } + } + } + .model-and-info { + margin-top: 0.75rem; - #canvas_wrapper { - position: relative; - width: 100%; - height: 100%; - max-height: 32rem; - top: 0; - left: 0; - border-radius: 1rem; - } - } + #canvas_wrapper { + position: relative; + width: 100%; + height: 100%; + max-height: 32rem; + top: 0; + left: 0; + border-radius: 1rem; + } + } @media only screen and (max-width: 1055px) { .grid-box { grid-template-columns: 1fr !important; @@ -64,48 +64,48 @@ } } #accel_calib_running { - display: none; - width: 100%; - position: relative; - padding: 5px 0 5px 0; - text-align: center; - background-color: var(--surface-300); - border-radius: 0.5rem; - border: 1px solid var(--primary-500); - color: var(--primary-500); - font-weight: bold; - font-size: 12px; - line-height: 13px; - transition: all ease 0.2s; - text-decoration: none; + display: none; + width: 100%; + position: relative; + padding: 5px 0 5px 0; + text-align: center; + background-color: var(--surface-300); + border-radius: 0.5rem; + border: 1px solid var(--primary-500); + color: var(--primary-500); + font-weight: bold; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration: none; } #mag_calib_running { - display: none; - width: 100%; - position: relative; - padding: 5px 0 5px 0; - text-align: center; - background-color: var(--surface-300); - border-radius: 0.5rem; - border: 1px solid var(--primary-500); - color: var(--primary-500); - font-weight: bold; - font-size: 12px; - line-height: 13px; - transition: all ease 0.2s; - text-decoration: none; + display: none; + width: 100%; + position: relative; + padding: 5px 0 5px 0; + text-align: center; + background-color: var(--surface-300); + border-radius: 0.5rem; + border: 1px solid var(--primary-500); + color: var(--primary-500); + font-weight: bold; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration: none; } #canvas { - width: 100% !important; - height: 100% !important; + width: 100% !important; + height: 100% !important; } .attitude_info { - position: absolute; - top: 1rem; - left: 1rem; - margin: 0; - font-weight: normal; - color: var(--surface-950); + position: absolute; + top: 1rem; + left: 1rem; + margin: 0; + font-weight: normal; + color: var(--surface-950); dl { display: grid; grid-template-columns: 1fr 1fr; @@ -119,52 +119,51 @@ height: min-content; } .dialogBuildInfoGrid-container { - display: grid; - grid-template-columns: auto auto; - grid-gap: 5px; + display: grid; + grid-template-columns: auto auto; + grid-gap: 5px; } .dialogBuildInfoGrid-item { - padding: 5px 5px 3px 5px; + padding: 5px 5px 3px 5px; user-select: text; } .block.info { - .fields { - padding: 5px 5px 3px 5px; - } - dt { - width: 99px; - height: 20px; - line-height: 20px; - } - dd { - width: 76px; - height: 20px; - line-height: 20px; - margin-left: 99px; - } + .fields { + padding: 5px 5px 3px 5px; + } + dt { + width: 99px; + height: 20px; + line-height: 20px; + } + dd { + width: 76px; + height: 20px; + line-height: 20px; + margin-left: 99px; + } } .block.gps { - width: 185px; - margin-bottom: 10px; - .fields { - padding: 5px 5px 3px 5px; - } - dt { - width: 85px; - height: 20px; - margin-bottom: 2px; - line-height: 20px; - } + width: 185px; + margin-bottom: 10px; + .fields { + padding: 5px 5px 3px 5px; + } + dt { + width: 85px; + height: 20px; + margin-bottom: 2px; + line-height: 20px; + } } .block.instruments { - width: 285px; - align-content: center; - text-align: center; + width: 285px; + align-content: center; + text-align: center; } .buttons { - bottom: 20px; + bottom: 20px; } .disarm-flag { - padding-left: 5px; + padding-left: 5px; } - diff --git a/src/css/tabs/static_tab.less b/src/css/tabs/static_tab.less index 6435cc0f4a..be1f3295a6 100644 --- a/src/css/tabs/static_tab.less +++ b/src/css/tabs/static_tab.less @@ -1,33 +1,33 @@ #tab-static { - background-color: inherit; - background-image: url(../../images/osd-bg-1.jpg); - background-attachment: fixed; - background-size: cover; - background-position: bottom right; - span { - display: block; - font-weight: bold; - padding-top: 16px; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - } - .title { - font-size: 16px; - } - ul { - margin: 5px 0 20px 10px; - } - li { - font-weight: normal; - margin-bottom: 5px; - } - #tab-static-contents { - margin: auto; - padding-top: 10px; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 40px; - background-color: inherit; - max-width: max(60%,650px); - } + background-color: inherit; + background-image: url(../../images/osd-bg-1.jpg); + background-attachment: fixed; + background-size: cover; + background-position: bottom right; + span { + display: block; + font-weight: bold; + padding-top: 16px; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + } + .title { + font-size: 16px; + } + ul { + margin: 5px 0 20px 10px; + } + li { + font-weight: normal; + margin-bottom: 5px; + } + #tab-static-contents { + margin: auto; + padding-top: 10px; + padding-left: 16px; + padding-right: 16px; + padding-bottom: 40px; + background-color: inherit; + max-width: max(60%, 650px); + } } diff --git a/src/css/tabs/transponder.less b/src/css/tabs/transponder.less index 3dd8b499a1..c973d749fd 100644 --- a/src/css/tabs/transponder.less +++ b/src/css/tabs/transponder.less @@ -1,85 +1,85 @@ #tab-transponder-templates { - display: none; + display: none; } .tab-transponder { - .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); - } - .text { - input { - width: 100px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--surface-500); - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; - background: var(--surface-200); - color: var(--text); - } - .disabled { - width: 43px; - padding: 0px 5px; - background-color: var(--surface-400); - } - span { - margin-left: 0px; - } - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--surface-500); - width: 100%; - float: left; - &:last-child { - border-bottom: none; - padding-bottom: 0px; - margin-bottom: 0px; - } - } - input { - float: left; - } - span { - margin: 0px; - } - .textspacer { - float: left; - width: 115px; - height: 21px; - } - .gui_box { - span { - font-style: normal; - line-height: 19px; - color: var(--text); - font-size: 11px; - } - } - select { - min-width: 100px; - border: 1px solid var(--surface-500); - border-radius: 3px; - background: var(--surface-200); - color: var(--text); - } + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .text { + input { + width: 100px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--surface-500); + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + background: var(--surface-200); + color: var(--text); + } + .disabled { + width: 43px; + padding: 0px 5px; + background-color: var(--surface-400); + } + span { + margin-left: 0px; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--surface-500); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0px; + margin-bottom: 0px; + } + } + input { + float: left; + } + span { + margin: 0px; + } + .textspacer { + float: left; + width: 115px; + height: 21px; + } + .gui_box { + span { + font-style: normal; + line-height: 19px; + color: var(--text); + font-size: 11px; + } + } + select { + min-width: 100px; + border: 1px solid var(--surface-500); + border-radius: 3px; + background: var(--surface-200); + color: var(--text); + } } .require-transponder-supported { - display: none; + display: none; } .tab-transponder.transponder-supported { - .require-transponder-unsupported { - display: none; - } - .require-transponder-supported { - display: block; - } + .require-transponder-unsupported { + display: none; + } + .require-transponder-supported { + display: block; + } } .textspacer-small { - margin-bottom: 15px; + margin-bottom: 15px; } diff --git a/src/css/tabs/vtx.less b/src/css/tabs/vtx.less index bb832480b6..70944d2342 100644 --- a/src/css/tabs/vtx.less +++ b/src/css/tabs/vtx.less @@ -1,15 +1,15 @@ .tab-vtx { - .cf_table { - -webkit-border-horizontal-spacing: 1px; - } - .require-support { - display: none; - } - .require-upgrade { - display: block; - } - .select_mode { - .field { + .cf_table { + -webkit-border-horizontal-spacing: 1px; + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } + .select_mode { + .field { display: flex; gap: 0.5rem; margin-bottom: 0 !important; @@ -19,16 +19,16 @@ margin-top: 0; margin-right: 0; } - >span { - display: inline-block; - min-width: 9rem; - &+span { + > span { + display: inline-block; + min-width: 9rem; + & + span { margin-right: auto; } - } + } .label { width: 100%; - >span { + > span { margin-right: auto; } } @@ -42,17 +42,17 @@ display: flex; align-items: center; } - } - } - input.one_digit_input { - width: 28px; - } - input.frequency_input { - width: 64px; - } - .vtx_table_box { - min-width: 750px; - } + } + } + input.one_digit_input { + width: 28px; + } + input.frequency_input { + width: 64px; + } + .vtx_table_box { + min-width: 750px; + } .VTX_info { table { td { @@ -64,40 +64,40 @@ } } } - .table_vtx_bands { - tr { - &:first-child { - td { - text-align: center; - } - } - } - td { - padding: 0.25rem; - text-align: center; - } + .table_vtx_bands { + tr { + &:first-child { + td { + text-align: center; + } + } + } + td { + padding: 0.25rem; + text-align: center; + } input { min-width: 0; padding-right: 0.25rem; } - } - .table_vtx_powerlevels { - tr { - &:first-child { - td { - text-align: center; - } - } - } - td { + } + .table_vtx_powerlevels { + tr { + &:first-child { + td { + text-align: center; + } + } + } + td { padding: 0.25rem; text-align: center; - } - input { - display: block; + } + input { + display: block; min-width: 5rem; } - } + } @media all and (max-width: 575px) { .tab-vtx { .columnsWrapper { @@ -132,12 +132,14 @@ } } } - .content_toolbar{ - .save_lua_btn, .save_file_btn { + .content_toolbar { + .save_lua_btn, + .save_file_btn { display: none; } &.expanded { - .save_lua_btn, .save_file_btn { + .save_lua_btn, + .save_file_btn { display: block; } } @@ -145,13 +147,13 @@ } } .tab-vtx.supported { - .require-support { - display: block; - } - .require-upgrade { - display: none; - } + .require-support { + display: block; + } + .require-upgrade { + display: none; + } } #tab-vtx-templates { - display: none; + display: none; } diff --git a/src/css/theme.css b/src/css/theme.css index 0c1754ad9c..61273d8a42 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -5,17 +5,17 @@ */ body { - --primary-50: #FFFAEB; - --primary-100: #FFF4D6; - --primary-200: #FFE9AD; - --primary-300: #FFDC7A; - --primary-400: #FFCD42; - --primary-500: #FFBB00; - --primary-600: #E6A800; - --primary-700: #CC9600; - --primary-800: #A87B00; - --primary-900: #7A5A00; - --primary-950: #5C4300; + --primary-50: #fffaeb; + --primary-100: #fff4d6; + --primary-200: #ffe9ad; + --primary-300: #ffdc7a; + --primary-400: #ffcd42; + --primary-500: #ffbb00; + --primary-600: #e6a800; + --primary-700: #cc9600; + --primary-800: #a87b00; + --primary-900: #7a5a00; + --primary-950: #5c4300; --primary-transparent-1: rgba(255, 187, 0, 0.1); --primary-transparent-2: rgba(255, 187, 0, 0.2); @@ -37,7 +37,7 @@ body { --text: hsl(0, 0%, 0%); --error-400: #ee2b55; - --error-500: #e2123f; + --error-500: #e2123f; --error-600: #c10f36; --error-transparent-1: rgba(226, 18, 63, 0.1); @@ -46,7 +46,7 @@ body { --error-transparent-4: rgba(226, 18, 63, 0.4); --success-400: #90f042; - --success-500: #70e212; + --success-500: #70e212; --success-600: #5cb10f; --success-transparent-1: rgba(112, 226, 18, 0.1); @@ -60,7 +60,6 @@ body { --switcherysecond: var(--surface-400); } - body.dark-theme { --surface-50: hsl(0, 0%, 4%); --surface-100: #181818; diff --git a/src/js/Analytics.js b/src/js/Analytics.js index df8fa5a522..034bc028fc 100644 --- a/src/js/Analytics.js +++ b/src/js/Analytics.js @@ -1,8 +1,8 @@ -import ShortUniqueId from 'short-unique-id'; -import { set as setConfig, get as getConfig } from './ConfigStorage'; -import GUI from './gui'; -import CONFIGURATOR from './data_storage'; -import $ from 'jquery'; +import ShortUniqueId from "short-unique-id"; +import { set as setConfig, get as getConfig } from "./ConfigStorage"; +import GUI from "./gui"; +import CONFIGURATOR from "./data_storage"; +import $ from "jquery"; let tracking = null; export { tracking }; @@ -11,7 +11,6 @@ export function createAnalytics(settings) { tracking = new Analytics(settings); } - function setupAnalytics(result) { const uid = new ShortUniqueId(); @@ -20,7 +19,7 @@ function setupAnalytics(result) { userId = result.userId; } else { userId = uid.randomUUID(13); - setConfig({ 'userId': userId }); + setConfig({ userId: userId }); } const optOut = !!result.analyticsOptOut; @@ -29,7 +28,7 @@ function setupAnalytics(result) { const settings = { sessionId: uid.randomUUID(16), userId: userId, - appName: CONFIGURATOR.productName, + appName: CONFIGURATOR.productName, appVersion: CONFIGURATOR.version, gitRevision: CONFIGURATOR.gitRevision, os: GUI.operating_system, @@ -46,18 +45,18 @@ function setupAnalytics(result) { } if (typeof process === "object") { - process.on('uncaughtException', logException); + process.on("uncaughtException", logException); } - tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, 'AppStart', { sessionControl: 'start' }); + tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "AppStart", { sessionControl: "start" }); - $('.connect_b a.connect').removeClass('disabled'); - $('.firmware_b a.flash').removeClass('disabled'); + $(".connect_b a.connect").removeClass("disabled"); + $(".firmware_b a.flash").removeClass("disabled"); } export function checkSetupAnalytics(callback) { if (!tracking) { - const result = getConfig(['userId', 'analyticsOptOut', 'checkForConfiguratorUnstableVersions' ]); + const result = getConfig(["userId", "analyticsOptOut", "checkForConfiguratorUnstableVersions"]); setupAnalytics(result); } @@ -67,18 +66,16 @@ export function checkSetupAnalytics(callback) { } class Analytics { - - constructor (settings) { - + constructor(settings) { this.setOptOut(settings.optOut); this._settings = settings; - this._url = 'https://analytics.betaflight.com'; + this._url = "https://analytics.betaflight.com"; this.EVENT_CATEGORIES = { - APPLICATION: 'Application', - FLIGHT_CONTROLLER: 'FlightController', - FLASHING: 'Flashing', + APPLICATION: "Application", + FLIGHT_CONTROLLER: "FlightController", + FLASHING: "Flashing", }; this.sendSettings(); @@ -101,35 +98,34 @@ class Analytics { contentType: "application/json", dataType: "json", }); - } sendSettings() { - this.send('settings', this._settings); + this.send("settings", this._settings); } sendEvent(category, action, options) { - this.send('event', { category: category, action: action, options: options }); + this.send("event", { category: category, action: action, options: options }); } sendChangeEvents(category, changeList) { - this.sendEvent(category, 'Change', { changes: changeList }); + this.sendEvent(category, "Change", { changes: changeList }); } sendSaveAndChangeEvents(category, changeList, tabName) { - this.sendEvent(category, 'Save', { tab: tabName, changes: changeList }); + this.sendEvent(category, "Save", { tab: tabName, changes: changeList }); } sendAppView(viewName) { - this.send('view', viewName); + this.send("view", viewName); } sendTiming(category, timing, value) { - this.send('timing', { category: category, timing: timing, value: value }); + this.send("timing", { category: category, timing: timing, value: value }); } sendException(message) { - this.send('exception', message); + this.send("exception", message); } setOptOut(optOut) { diff --git a/src/js/Beepers.js b/src/js/Beepers.js index 2571ef0dd9..189ae9a98e 100644 --- a/src/js/Beepers.js +++ b/src/js/Beepers.js @@ -1,42 +1,44 @@ -import { bit_check, bit_clear, bit_set } from './bit'; -import $ from 'jquery'; +import { bit_check, bit_clear, bit_set } from "./bit"; +import $ from "jquery"; class Beepers { constructor(config, supportedConditions) { const self = this; const beepers = [ - { bit: 0, name: 'GYRO_CALIBRATED', visible: true }, - { bit: 1, name: 'RX_LOST', visible: true }, - { bit: 2, name: 'RX_LOST_LANDING', visible: true }, - { bit: 3, name: 'DISARMING', visible: true }, - { bit: 4, name: 'ARMING', visible: true }, - { bit: 5, name: 'ARMING_GPS_FIX', visible: true }, - { bit: 6, name: 'BAT_CRIT_LOW', visible: true }, - { bit: 7, name: 'BAT_LOW', visible: true }, - { bit: 8, name: 'GPS_STATUS', visible: true }, - { bit: 9, name: 'RX_SET', visible: true }, - { bit: 10, name: 'ACC_CALIBRATION', visible: true }, - { bit: 11, name: 'ACC_CALIBRATION_FAIL', visible: true }, - { bit: 12, name: 'READY_BEEP', visible: true }, - { bit: 13, name: 'MULTI_BEEPS', visible: false }, - { bit: 14, name: 'DISARM_REPEAT', visible: true }, - { bit: 15, name: 'ARMED', visible: true }, - { bit: 16, name: 'SYSTEM_INIT', visible: true }, - { bit: 17, name: 'USB', visible: true }, - { bit: 18, name: 'BLACKBOX_ERASE', visible: true }, - { bit: 19, name: 'CRASH_FLIP', visible: true }, - { bit: 20, name: 'CAM_CONNECTION_OPEN', visible: true }, - { bit: 21, name: 'CAM_CONNECTION_CLOSE', visible: true }, - { bit: 22, name: 'RC_SMOOTHING_INIT_FAIL', visible: true }, + { bit: 0, name: "GYRO_CALIBRATED", visible: true }, + { bit: 1, name: "RX_LOST", visible: true }, + { bit: 2, name: "RX_LOST_LANDING", visible: true }, + { bit: 3, name: "DISARMING", visible: true }, + { bit: 4, name: "ARMING", visible: true }, + { bit: 5, name: "ARMING_GPS_FIX", visible: true }, + { bit: 6, name: "BAT_CRIT_LOW", visible: true }, + { bit: 7, name: "BAT_LOW", visible: true }, + { bit: 8, name: "GPS_STATUS", visible: true }, + { bit: 9, name: "RX_SET", visible: true }, + { bit: 10, name: "ACC_CALIBRATION", visible: true }, + { bit: 11, name: "ACC_CALIBRATION_FAIL", visible: true }, + { bit: 12, name: "READY_BEEP", visible: true }, + { bit: 13, name: "MULTI_BEEPS", visible: false }, + { bit: 14, name: "DISARM_REPEAT", visible: true }, + { bit: 15, name: "ARMED", visible: true }, + { bit: 16, name: "SYSTEM_INIT", visible: true }, + { bit: 17, name: "USB", visible: true }, + { bit: 18, name: "BLACKBOX_ERASE", visible: true }, + { bit: 19, name: "CRASH_FLIP", visible: true }, + { bit: 20, name: "CAM_CONNECTION_OPEN", visible: true }, + { bit: 21, name: "CAM_CONNECTION_CLOSE", visible: true }, + { bit: 22, name: "RC_SMOOTHING_INIT_FAIL", visible: true }, ]; if (supportedConditions) { self._beepers = []; beepers.forEach(function (beeper) { - if (supportedConditions.some(function (supportedCondition) { - return supportedCondition === beeper.name; - })) { + if ( + supportedConditions.some(function (supportedCondition) { + return supportedCondition === beeper.name; + }) + ) { self._beepers.push(beeper); } }); @@ -74,19 +76,19 @@ class Beepers { const element = template.clone(); destination.append(element); - const inputElement = $(element).find('input'); - const labelElement = $(element).find('div'); - const spanElement = $(element).find('span'); + const inputElement = $(element).find("input"); + const labelElement = $(element).find("div"); + const spanElement = $(element).find("span"); - inputElement.attr('id', `beeper-${i}`); - inputElement.attr('name', self._beepers[i].name); - inputElement.attr('title', self._beepers[i].name); - inputElement.prop('checked', !bit_check(self._beeperDisabledMask, self._beepers[i].bit)); - inputElement.data('bit', self._beepers[i].bit); + inputElement.attr("id", `beeper-${i}`); + inputElement.attr("name", self._beepers[i].name); + inputElement.attr("title", self._beepers[i].name); + inputElement.prop("checked", !bit_check(self._beeperDisabledMask, self._beepers[i].bit)); + inputElement.data("bit", self._beepers[i].bit); labelElement.text(self._beepers[i].name); - spanElement.attr('i18n', `beeper${self._beepers[i].name}`); + spanElement.attr("i18n", `beeper${self._beepers[i].name}`); element.show(); } @@ -95,10 +97,10 @@ class Beepers { updateData(beeperElement) { const self = this; - if (beeperElement.attr('type') === 'checkbox') { - const bit = beeperElement.data('bit'); + if (beeperElement.attr("type") === "checkbox") { + const bit = beeperElement.data("bit"); - if (beeperElement.is(':checked')) { + if (beeperElement.is(":checked")) { self._beeperDisabledMask = bit_clear(self._beeperDisabledMask, bit); } else { self._beeperDisabledMask = bit_set(self._beeperDisabledMask, bit); diff --git a/src/js/BuildApi.js b/src/js/BuildApi.js index af94f8ee67..4b7635394b 100644 --- a/src/js/BuildApi.js +++ b/src/js/BuildApi.js @@ -1,12 +1,11 @@ -import { gui_log } from './gui_log'; +import { gui_log } from "./gui_log"; import { i18n } from "./localization"; import { get as getStorage, set as setStorage } from "./SessionStorage"; -import $ from 'jquery'; +import $ from "jquery"; export default class BuildApi { - - constructor () { - this._url = 'https://build.betaflight.com'; + constructor() { + this._url = "https://build.betaflight.com"; this._cacheExpirationPeriod = 3600 * 1000; } @@ -21,7 +20,7 @@ export default class BuildApi { const cachedCallback = () => { if (cachedData) { - gui_log(i18n.getMessage('buildServerUsingCached', [url])); + gui_log(i18n.getMessage("buildServerUsingCached", [url])); } onSuccess(cachedData); @@ -35,8 +34,8 @@ export default class BuildApi { object[cacheLastUpdateTag] = $.now(); setStorage(object); onSuccess(info); - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [url, `HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [url, `HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } else { @@ -66,10 +65,10 @@ export default class BuildApi { loadTargetHex(path, onSuccess, onFailure) { const url = `${this._url}${path}`; $.get(url, function (data) { - gui_log(i18n.getMessage('buildServerSuccess', [path])); + gui_log(i18n.getMessage("buildServerSuccess", [path])); onSuccess(data); - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [path, `HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [path, `HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } @@ -80,8 +79,8 @@ export default class BuildApi { const url = `${this._url}/api/support/commands`; $.get(url, function (data) { onSuccess(data); - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [url, `HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [url, `HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } @@ -97,11 +96,11 @@ export default class BuildApi { contentType: "text/plain", dataType: "text", - success: function(response) { + success: function (response) { onSuccess(response); }, - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [`HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [`HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } @@ -117,11 +116,11 @@ export default class BuildApi { contentType: "application/json", dataType: "json", - success: function(response) { + success: function (response) { onSuccess(response); }, - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [url, `HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [url, `HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } @@ -131,10 +130,10 @@ export default class BuildApi { requestBuildStatus(key, onSuccess, onFailure) { const url = `${this._url}/api/builds/${key}/status`; $.get(url, function (data) { - gui_log(i18n.getMessage('buildServerSuccess', [url])); + gui_log(i18n.getMessage("buildServerSuccess", [url])); onSuccess(data); - }).fail(xhr => { - gui_log(i18n.getMessage('buildServerFailure', [url, `HTTP ${xhr.status}`])); + }).fail((xhr) => { + gui_log(i18n.getMessage("buildServerFailure", [url, `HTTP ${xhr.status}`])); if (onFailure !== undefined) { onFailure(); } @@ -145,7 +144,7 @@ export default class BuildApi { const url = `${this._url}/api/builds/${key}/json`; $.get(url, function (data) { onSuccess(data); - }).fail(xhr => { + }).fail((xhr) => { if (onFailure !== undefined) { onFailure(); } @@ -176,7 +175,7 @@ export default class BuildApi { const url = `${this._url}/api/configurator/sponsors/${mode}/${page}`; $.get(url, function (data) { onSuccess(data); - }).fail(xhr => { + }).fail((xhr) => { if (onFailure !== undefined) { onFailure(); } diff --git a/src/js/CliAutoComplete.js b/src/js/CliAutoComplete.js index 956a58c966..b3a46630e6 100644 --- a/src/js/CliAutoComplete.js +++ b/src/js/CliAutoComplete.js @@ -1,9 +1,9 @@ -import GUI from './gui'; -import CONFIGURATOR from './data_storage'; -import FC from './fc'; -import semver from 'semver'; -import { tracking } from './Analytics'; -import $ from 'jquery'; +import GUI from "./gui"; +import CONFIGURATOR from "./data_storage"; +import FC from "./fc"; +import semver from "semver"; +import { tracking } from "./Analytics"; +import $ from "jquery"; /** * Encapsulates the AutoComplete logic @@ -13,34 +13,37 @@ import $ from 'jquery'; */ const CliAutoComplete = { configEnabled: false, - builder: { state: 'reset', numFails: 0 }, + builder: { state: "reset", numFails: 0 }, }; -CliAutoComplete.isEnabled = function() { - return this.isBuilding() || (this.configEnabled && FC.CONFIG.flightControllerIdentifier === "BTFL" && this.builder.state !== 'fail'); +CliAutoComplete.isEnabled = function () { + return ( + this.isBuilding() || + (this.configEnabled && FC.CONFIG.flightControllerIdentifier === "BTFL" && this.builder.state !== "fail") + ); }; -CliAutoComplete.isBuilding = function() { - return this.builder.state !== 'reset' && this.builder.state !== 'done' && this.builder.state !== 'fail'; +CliAutoComplete.isBuilding = function () { + return this.builder.state !== "reset" && this.builder.state !== "done" && this.builder.state !== "fail"; }; -CliAutoComplete.isOpen = function() { - return $('.cli-textcomplete-dropdown').is(':visible'); +CliAutoComplete.isOpen = function () { + return $(".cli-textcomplete-dropdown").is(":visible"); }; /** * @param {boolean} force - Forces AutoComplete to be shown even if the matching strategy has less that minChars input */ -CliAutoComplete.openLater = function(force) { +CliAutoComplete.openLater = function (force) { const self = this; - setTimeout(function() { + setTimeout(function () { self.forceOpen = !!force; - self.$textarea.textcomplete('trigger'); + self.$textarea.textcomplete("trigger"); self.forceOpen = false; }, 0); }; -CliAutoComplete.setEnabled = function(enable) { +CliAutoComplete.setEnabled = function (enable) { if (this.configEnabled !== enable) { this.configEnabled = enable; @@ -55,8 +58,8 @@ CliAutoComplete.setEnabled = function(enable) { } }; -CliAutoComplete.initialize = function($textarea, sendLine, writeToOutput) { - tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, 'CliAutoComplete', { configEnabled: this.configEnabled }); +CliAutoComplete.initialize = function ($textarea, sendLine, writeToOutput) { + tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, "CliAutoComplete", { configEnabled: this.configEnabled }); this.$textarea = $textarea; this.forceOpen = false; @@ -65,37 +68,41 @@ CliAutoComplete.initialize = function($textarea, sendLine, writeToOutput) { this.cleanup(); }; -CliAutoComplete.cleanup = function() { - this.$textarea.textcomplete('destroy'); - this.builder.state = 'reset'; +CliAutoComplete.cleanup = function () { + this.$textarea.textcomplete("destroy"); + this.builder.state = "reset"; this.builder.numFails = 0; }; -CliAutoComplete._builderWatchdogTouch = function() { +CliAutoComplete._builderWatchdogTouch = function () { const self = this; this._builderWatchdogStop(); - GUI.timeout_add('autocomplete_builder_watchdog', function() { - if (self.builder.numFails) { - self.builder.numFails++; - self.builder.state = 'fail'; - self.writeToOutput('Failed!
# '); - $(self).trigger('build:stop'); - } else { - // give it one more try - self.builder.state = 'reset'; - self.builderStart(); - } - }, 3000); + GUI.timeout_add( + "autocomplete_builder_watchdog", + function () { + if (self.builder.numFails) { + self.builder.numFails++; + self.builder.state = "fail"; + self.writeToOutput("Failed!
# "); + $(self).trigger("build:stop"); + } else { + // give it one more try + self.builder.state = "reset"; + self.builderStart(); + } + }, + 3000, + ); }; -CliAutoComplete._builderWatchdogStop = function() { - GUI.timeout_remove('autocomplete_builder_watchdog'); +CliAutoComplete._builderWatchdogStop = function () { + GUI.timeout_remove("autocomplete_builder_watchdog"); }; -CliAutoComplete.builderStart = function() { - if (this.builder.state === 'reset') { +CliAutoComplete.builderStart = function () { + if (this.builder.state === "reset") { this.cache = { commands: [], resources: [], @@ -103,20 +110,20 @@ CliAutoComplete.builderStart = function() { settings: [], settingsAcceptedValues: {}, feature: [], - beeper: ['ALL'], + beeper: ["ALL"], mixers: [], }; - this.builder.commandSequence = ['help', 'dump', 'get', 'mixer list']; + this.builder.commandSequence = ["help", "dump", "get", "mixer list"]; this.builder.currentSetting = null; this.builder.sentinel = `# ${Math.random()}`; - this.builder.state = 'init'; - this.writeToOutput('
# Building AutoComplete Cache ... '); + this.builder.state = "init"; + this.writeToOutput("
# Building AutoComplete Cache ... "); this.sendLine(this.builder.sentinel); - $(this).trigger('build:start'); + $(this).trigger("build:start"); } }; -CliAutoComplete.builderParseLine = function(line) { +CliAutoComplete.builderParseLine = function (line) { const cache = this.cache; const builder = this.builder; @@ -137,7 +144,7 @@ CliAutoComplete.builderParseLine = function(line) { if (!this.configEnabled) { // disabled while we were building - this.writeToOutput('Cancelled!
# '); + this.writeToOutput("Cancelled!
# "); this.cleanup(); } else { cache.settings.sort(); @@ -147,21 +154,21 @@ CliAutoComplete.builderParseLine = function(line) { cache.resources = Object.keys(cache.resourcesCount).sort(); this._initTextcomplete(); - this.writeToOutput('Done!
# '); - builder.state = 'done'; + this.writeToOutput("Done!
# "); + builder.state = "done"; } - $(this).trigger('build:stop'); + $(this).trigger("build:stop"); } } else { switch (builder.state) { - case 'parse-help': + case "parse-help": const matchHelp = line.match(/^(\w+)/); if (matchHelp) { cache.commands.push(matchHelp[1]); } break; - case 'parse-dump': + case "parse-dump": const matchDump = line.match(/^resource\s+(\w+)/i); if (matchDump) { const r = matchDump[1].toUpperCase(); // should alread be upper, but to be sure, since we depend on that later @@ -174,7 +181,7 @@ CliAutoComplete.builderParseLine = function(line) { } break; - case 'parse-get': + case "parse-get": const matchGet = line.match(/^(\w+)\s*=/); if (matchGet) { // setting name @@ -185,8 +192,10 @@ CliAutoComplete.builderParseLine = function(line) { if (matchGetSettings !== null && builder.currentSetting) { if (matchGetSettings[1].match(/values/i)) { // Allowed Values - cache.settingsAcceptedValues[builder.currentSetting] = matchGetSettings[2].split(/\s*,\s*/).sort(); - } else if (matchGetSettings[1].match(/range|length/i)){ + cache.settingsAcceptedValues[builder.currentSetting] = matchGetSettings[2] + .split(/\s*,\s*/) + .sort(); + } else if (matchGetSettings[1].match(/range|length/i)) { // "Allowed range" or "Array length", store as string hint cache.settingsAcceptedValues[builder.currentSetting] = matchGetSettings[0]; } @@ -194,10 +203,10 @@ CliAutoComplete.builderParseLine = function(line) { } break; - case 'parse-mixer list': + case "parse-mixer list": const matchMixer = line.match(/:(.+)/); if (matchMixer) { - cache.mixers = ['list'].concat(matchMixer[1].trim().split(/\s+/)); + cache.mixers = ["list"].concat(matchMixer[1].trim().split(/\s+/)); } break; } @@ -207,7 +216,7 @@ CliAutoComplete.builderParseLine = function(line) { /** * Initializes textcomplete with all the autocomplete strategies */ -CliAutoComplete._initTextcomplete = function() { +CliAutoComplete._initTextcomplete = function () { let sendOnEnter = false; const self = this; const $textarea = this.$textarea; @@ -216,24 +225,24 @@ CliAutoComplete._initTextcomplete = function() { let savedMouseoverItemHandler = null; // helper functions - const highlighter = function(anywhere) { - return function(value, term) { - const anywherePrefix = anywhere ? '': '^'; - const termValue = value.replace(new RegExp(`${anywherePrefix}(${term})`, 'gi'), '$1'); + const highlighter = function (anywhere) { + return function (value, term) { + const anywherePrefix = anywhere ? "" : "^"; + const termValue = value.replace(new RegExp(`${anywherePrefix}(${term})`, "gi"), "$1"); return term ? termValue : value; }; }; const highlighterAnywhere = highlighter(true); const highlighterPrefix = highlighter(false); - const searcher = function(term, callback, array, minChars, matchPrefix) { + const searcher = function (term, callback, array, minChars, matchPrefix) { const res = []; if ((minChars !== false && term.length >= minChars) || self.forceOpen || self.isOpen()) { term = term.toLowerCase(); for (let i = 0; i < array.length; i++) { const v = array[i].toLowerCase(); - if (matchPrefix && v.startsWith(term) || !matchPrefix && v.indexOf(term) !== -1) { + if ((matchPrefix && v.startsWith(term)) || (!matchPrefix && v.indexOf(term) !== -1)) { res.push(array[i]); } } @@ -245,11 +254,11 @@ CliAutoComplete._initTextcomplete = function() { // hacky: if we came here because of Tab and there's only one match // trigger Tab again, so that textcomplete should immediately select the only result // instead of showing the menu - $textarea.trigger($.Event('keydown', {keyCode:9})); + $textarea.trigger($.Event("keydown", { keyCode: 9 })); } }; - const contexter = function(text) { + const contexter = function (text) { const val = $textarea.val(); if (val.length === text.length || val[text.length].match(/\s/)) { return true; @@ -257,130 +266,143 @@ CliAutoComplete._initTextcomplete = function() { return false; // do not show autocomplete if in the middle of a word }; - const basicReplacer = function(value) { + const basicReplacer = function (value) { return `$1${value} `; }; // end helper functions // init textcomplete - $textarea.textcomplete([], - { + $textarea + .textcomplete([], { maxCount: 10000, debounce: 0, - className: 'cli-textcomplete-dropdown', - placement: 'top', - onKeydown: function(e) { + className: "cli-textcomplete-dropdown", + placement: "top", + onKeydown: function (e) { // some strategies may set sendOnEnter only at the replace stage, thus we call with timeout // since this handler [onKeydown] is triggered before replace() if (e.which === 13) { - setTimeout(function() { + setTimeout(function () { if (sendOnEnter) { // fake "enter" to run the textarea's handler - $textarea.trigger($.Event('keypress', {which:13})); + $textarea.trigger($.Event("keypress", { which: 13 })); } }, 0); } }, - }, - ) - .on('textComplete:show', function() { - /** - * The purpose of this code is to disable initially the `mouseover` menu item handler. - * Normally, when the menu pops up, if the mouse cursor is in the same area, - * the `mouseover` event triggers immediately and activates the item under - * the cursor. This might be undesirable when using the keyboard. - * - * Here we save the original `mouseover` handler and remove it on popup show. - * Then add `mousemove` handler. If the mouse moves we consider that mouse interaction - * is desired so we reenable the `mouseover` handler - */ - - const textCompleteDropDownElement = $('.textcomplete-dropdown'); - - if (!savedMouseoverItemHandler) { - // save the original 'mouseover' handeler - try { - savedMouseoverItemHandler = $._data(textCompleteDropDownElement[0], 'events').mouseover[0].handler; - } catch (error) { - console.log(error); - } + }) + .on("textComplete:show", function () { + /** + * The purpose of this code is to disable initially the `mouseover` menu item handler. + * Normally, when the menu pops up, if the mouse cursor is in the same area, + * the `mouseover` event triggers immediately and activates the item under + * the cursor. This might be undesirable when using the keyboard. + * + * Here we save the original `mouseover` handler and remove it on popup show. + * Then add `mousemove` handler. If the mouse moves we consider that mouse interaction + * is desired so we reenable the `mouseover` handler + */ + + const textCompleteDropDownElement = $(".textcomplete-dropdown"); + + if (!savedMouseoverItemHandler) { + // save the original 'mouseover' handeler + try { + savedMouseoverItemHandler = $._data(textCompleteDropDownElement[0], "events").mouseover[0].handler; + } catch (error) { + console.log(error); + } - if (savedMouseoverItemHandler) { - textCompleteDropDownElement - .off('mouseover') // initially disable it - .off('mousemove') // avoid `mousemove` accumulation if previous show did not trigger `mousemove` - .on('mousemove', '.textcomplete-item', function(e) { - // the mouse has moved so reenable `mouseover` - $(this).parent() - .off('mousemove') - .on('mouseover', '.textcomplete-item', savedMouseoverItemHandler); - - // trigger the mouseover handler to select the item under the cursor - savedMouseoverItemHandler(e); - }); + if (savedMouseoverItemHandler) { + textCompleteDropDownElement + .off("mouseover") // initially disable it + .off("mousemove") // avoid `mousemove` accumulation if previous show did not trigger `mousemove` + .on("mousemove", ".textcomplete-item", function (e) { + // the mouse has moved so reenable `mouseover` + $(this) + .parent() + .off("mousemove") + .on("mouseover", ".textcomplete-item", savedMouseoverItemHandler); + + // trigger the mouseover handler to select the item under the cursor + savedMouseoverItemHandler(e); + }); + } } - } - }); + }); // textcomplete autocomplete strategies // strategy builder helper - const strategy = function(s) { - return $.extend({ - template: highlighterAnywhere, - replace: basicReplacer, - context: contexter, - index: 2, - }, s); + const strategy = function (s) { + return $.extend( + { + template: highlighterAnywhere, + replace: basicReplacer, + context: contexter, + index: 2, + }, + s, + ); }; - $textarea.textcomplete('register', [ - strategy({ // "command" + $textarea.textcomplete("register", [ + strategy({ + // "command" match: /^(\s*)(\w*)$/, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = false; searcher(term, callback, cache.commands, false, true); }, template: highlighterPrefix, }), - strategy({ // "get" + strategy({ + // "get" match: /^(\s*get\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = true; - searcher(term, function(arr) { - if (term.length > 0 && arr.length > 1) { - // prepend the uncompleted term in the popup - arr = [term].concat(arr); - } - callback(arr); - }, cache.settings, 3); + searcher( + term, + function (arr) { + if (term.length > 0 && arr.length > 1) { + // prepend the uncompleted term in the popup + arr = [term].concat(arr); + } + callback(arr); + }, + cache.settings, + 3, + ); }, }), - strategy({ // "set" + strategy({ + // "set" match: /^(\s*set\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = false; searcher(term, callback, cache.settings, 3); }, }), - strategy({ // "set =" + strategy({ + // "set =" match: /^(\s*set\s+\w*\s*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = false; - searcher('', callback, ['='], false); + searcher("", callback, ["="], false); }, - replace: function(value) { + replace: function (value) { self.openLater(); return basicReplacer(value); }, }), - strategy({ // "set with value" + strategy({ + // "set with value" match: /^(\s*set\s+(\w+))\s*=\s*(.*)$/i, - search: function(term, callback, match) { + search: function (term, callback, match) { const arr = []; const settingName = match[2].toLowerCase(); this.isSettingValueArray = false; @@ -418,46 +440,48 @@ CliAutoComplete._initTextcomplete = function() { isSettingValueArray: false, }), - strategy({ // "resource" + strategy({ + // "resource" match: /^(\s*resource\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = false; let arr = cache.resources; if (semver.gte(FC.CONFIG.flightControllerVersion, "4.0.0")) { - arr = ['show'].concat(arr); + arr = ["show"].concat(arr); } else { - arr = ['list'].concat(arr); + arr = ["list"].concat(arr); } searcher(term, callback, arr, 1); }, - replace: function(value) { + replace: function (value) { if (value in cache.resourcesCount) { self.openLater(); - } else if (value === 'list' || value === 'show') { + } else if (value === "list" || value === "show") { sendOnEnter = true; } return basicReplacer(value); }, }), - strategy({ // "resource index" + strategy({ + // "resource index" match: /^(\s*resource\s+(\w+)\s+)(\d*)$/i, - search: function(term, callback, match) { + search: function (term, callback, match) { sendOnEnter = false; this.savedTerm = term; callback([`<1-${cache.resourcesCount[match[2].toUpperCase()]}>`]); }, - replace: function() { + replace: function () { if (this.savedTerm) { self.openLater(); - return '$1$3 '; + return "$1$3 "; } return undefined; }, - context: function(text) { + context: function (text) { const matchResource = text.match(/^\s*resource\s+(\w+)\s/i); // use this strategy only for resources with more than one index - if (matchResource && (cache.resourcesCount[matchResource[1].toUpperCase()] || 0) > 1 ) { + if (matchResource && (cache.resourcesCount[matchResource[1].toUpperCase()] || 0) > 1) { return contexter(text); } return false; @@ -466,34 +490,35 @@ CliAutoComplete._initTextcomplete = function() { savedTerm: null, }), - strategy({ // "resource pin" + strategy({ + // "resource pin" match: /^(\s*resource\s+\w+\s+(\d*\s+)?)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = !!term; if (term) { - if ('none'.startsWith(term)) { - callback(['none']); + if ("none".startsWith(term)) { + callback(["none"]); } else { - callback(['<pin>']); + callback(["<pin>"]); } } else { - callback(['<pin>', 'none']); + callback(["<pin>", "none"]); } }, - template: function(value, term) { - if (value === 'none') { + template: function (value, term) { + if (value === "none") { return highlighterPrefix(value, term); } return value; }, - replace: function(value) { - if (value === 'none') { + replace: function (value) { + if (value === "none") { sendOnEnter = true; - return '$1none '; + return "$1none "; } return undefined; }, - context: function(text) { + context: function (text) { const m = text.match(/^\s*resource\s+(\w+)\s+(\d+\s)?/i); if (m) { // show pin/none for resources having only one index (it's not needed at the commend line) @@ -508,41 +533,44 @@ CliAutoComplete._initTextcomplete = function() { index: 3, }), - strategy({ // "feature" and "beeper" + strategy({ + // "feature" and "beeper" match: /^(\s*(feature|beeper)\s+(-?))(\w*)$/i, - search: function(term, callback, match) { + search: function (term, callback, match) { sendOnEnter = !!term; let arr = cache[match[2].toLowerCase()]; if (!match[3]) { - arr = ['-', 'list'].concat(arr); + arr = ["-", "list"].concat(arr); } searcher(term, callback, arr, 1); }, - replace: function(value) { - if (value === '-') { + replace: function (value) { + if (value === "-") { self.openLater(true); - return '$1-'; + return "$1-"; } return basicReplacer(value); }, index: 4, }), - strategy({ // "mixer" + strategy({ + // "mixer" match: /^(\s*mixer\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = true; searcher(term, callback, cache.mixers, 1); }, }), ]); - $textarea.textcomplete('register', [ - strategy({ // "resource show all", from BF 4.0.0 onwards + $textarea.textcomplete("register", [ + strategy({ + // "resource show all", from BF 4.0.0 onwards match: /^(\s*resource\s+show\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = true; - searcher(term, callback, ['all'], 1, true); + searcher(term, callback, ["all"], 1, true); }, template: highlighterPrefix, }), @@ -560,19 +588,21 @@ CliAutoComplete._initTextcomplete = function() { diffArgs1.sort(); diffArgs2.sort(); - $textarea.textcomplete('register', [ - strategy({ // "diff arg1" + $textarea.textcomplete("register", [ + strategy({ + // "diff arg1" match: /^(\s*diff\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = true; searcher(term, callback, diffArgs1, 1, true); }, template: highlighterPrefix, }), - strategy({ // "diff arg1 arg2" + strategy({ + // "diff arg1 arg2" match: /^(\s*diff\s+\w+\s+)(\w*)$/i, - search: function(term, callback) { + search: function (term, callback) { sendOnEnter = true; searcher(term, callback, diffArgs2, 1, true); }, diff --git a/src/js/Clipboard.js b/src/js/Clipboard.js index 36f448b289..3e34c66d22 100644 --- a/src/js/Clipboard.js +++ b/src/js/Clipboard.js @@ -1,14 +1,10 @@ // naming BFClipboard to avoid conflict with Clipboard API class BFClipboard { writeText(text, onSuccess, onError) { - navigator.clipboard - .writeText(text) - .then(() => onSuccess?.(text), onError); + navigator.clipboard.writeText(text).then(() => onSuccess?.(text), onError); } readText(onSuccess, onError) { - navigator.clipboard - .readText() - .then((text) => onSuccess?.(text), onError); + navigator.clipboard.readText().then((text) => onSuccess?.(text), onError); } } diff --git a/src/js/ConfigInserter.js b/src/js/ConfigInserter.js index 34616f3a07..a8e0610550 100644 --- a/src/js/ConfigInserter.js +++ b/src/js/ConfigInserter.js @@ -1,10 +1,13 @@ - const CUSTOM_DEFAULTS_POINTER_ADDRESS = 0x08002800; const BLOCK_SIZE = 16384; function seek(firmware, address) { let index = 0; - for (; index < firmware.data.length && address >= firmware.data[index].address + firmware.data[index].bytes; index++) { + for ( + ; + index < firmware.data.length && address >= firmware.data[index].address + firmware.data[index].bytes; + index++ + ) { // empty for loop to increment index } @@ -53,7 +56,7 @@ function generateData(firmware, input, startAddress) { const index = seek(firmware, address); if (index.byteIndex !== undefined) { - throw new Error('Configuration area in firmware not free.'); + throw new Error("Configuration area in firmware not free."); } let inputIndex = 0; @@ -65,7 +68,7 @@ function generateData(firmware, input, startAddress) { data: [], }; - if (firmware.data[index.lineIndex] && (line.address + line.bytes) > firmware.data[index.lineIndex].address) { + if (firmware.data[index.lineIndex] && line.address + line.bytes > firmware.data[index.lineIndex].address) { throw new Error("Aborting data generation, free area too small."); } @@ -84,7 +87,6 @@ function generateData(firmware, input, startAddress) { const CONFIG_LABEL = `Custom defaults inserted in`; export default class ConfigInserter { - insertConfig(firmware, config) { console.time(CONFIG_LABEL); @@ -94,7 +96,11 @@ export default class ConfigInserter { if (!customDefaultsArea || customDefaultsArea.endAddress - customDefaultsArea.startAddress === 0) { return false; } else if (input.length >= customDefaultsArea.endAddress - customDefaultsArea.startAddress) { - throw new Error(`Custom defaults area too small (${customDefaultsArea.endAddress - customDefaultsArea.startAddress} bytes), ${input.length + 1} bytes needed.`); + throw new Error( + `Custom defaults area too small (${ + customDefaultsArea.endAddress - customDefaultsArea.startAddress + } bytes), ${input.length + 1} bytes needed.`, + ); } generateData(firmware, input, customDefaultsArea.startAddress); diff --git a/src/js/ConfigStorage.js b/src/js/ConfigStorage.js index 5d22aa90ee..6d96401e60 100644 --- a/src/js/ConfigStorage.js +++ b/src/js/ConfigStorage.js @@ -6,33 +6,33 @@ import { EventBus } from "../components/eventBus"; * @returns {object} */ export function get(key, defaultValue = null) { - let result = {}; - if (Array.isArray(key)) { - key.forEach(function (element) { - try { - result = { ...result, ...JSON.parse(localStorage.getItem(element)) }; - } catch (e) { - console.error(e); - } - }); - } else { - const keyValue = localStorage.getItem(key); - if (keyValue) { - try { - result = JSON.parse(keyValue); - } catch (e) { - console.error(e); - } + let result = {}; + if (Array.isArray(key)) { + key.forEach(function (element) { + try { + result = { ...result, ...JSON.parse(localStorage.getItem(element)) }; + } catch (e) { + console.error(e); + } + }); + } else { + const keyValue = localStorage.getItem(key); + if (keyValue) { + try { + result = JSON.parse(keyValue); + } catch (e) { + console.error(e); + } + } } - } - // if default value is set and key is not found in localStorage, set default value - if (!Object.keys(result).length && defaultValue !== null) { - console.log('setting default value for', key, defaultValue); - result[key] = defaultValue; - } + // if default value is set and key is not found in localStorage, set default value + if (!Object.keys(result).length && defaultValue !== null) { + console.log("setting default value for", key, defaultValue); + result[key] = defaultValue; + } - return result; + return result; } /** @@ -40,16 +40,16 @@ export function get(key, defaultValue = null) { * @param {object} input object which keys are strings and values are serializable objects */ export function set(input) { - Object.keys(input).forEach(function (element) { - const tmpObj = {}; - tmpObj[element] = input[element]; - try { - localStorage.setItem(element, JSON.stringify(tmpObj)); - EventBus.$emit('config-storage:set', element); - } catch (e) { - console.error(e); - } - }); + Object.keys(input).forEach(function (element) { + const tmpObj = {}; + tmpObj[element] = input[element]; + try { + localStorage.setItem(element, JSON.stringify(tmpObj)); + EventBus.$emit("config-storage:set", element); + } catch (e) { + console.error(e); + } + }); } /** @@ -57,23 +57,23 @@ export function set(input) { * @param {string} item key to remove from storage */ export function remove(item) { - localStorage.removeItem(item); + localStorage.removeItem(item); } /** * Clear localStorage */ export function clear() { - localStorage.clear(); + localStorage.clear(); } /** * @deprecated this is a temporary solution to allow the use of the ConfigStorage module in old way */ const ConfigStorage = { - get, - set, - remove, - clear, + get, + set, + remove, + clear, }; window.ConfigStorage = ConfigStorage; diff --git a/src/js/DarkTheme.js b/src/js/DarkTheme.js index a9acebf85c..3e7a09e976 100644 --- a/src/js/DarkTheme.js +++ b/src/js/DarkTheme.js @@ -1,11 +1,9 @@ import GUI from "./gui"; import windowWatcherUtil from "./utils/window_watchers"; import { checkSetupAnalytics } from "./Analytics"; -import $ from 'jquery'; +import $ from "jquery"; -const css_dark = [ - './css/dark-theme.css', -]; +const css_dark = ["./css/dark-theme.css"]; const DarkTheme = { configSetting: undefined, @@ -16,16 +14,16 @@ DarkTheme.isDarkThemeEnabled = function (callback) { if (this.configSetting === 0) { callback(true); } else if (this.configSetting === 2) { - const isEnabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + const isEnabled = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; callback(isEnabled); } else { callback(false); } }; -DarkTheme.apply = function() { +DarkTheme.apply = function () { const self = this; - this.isDarkThemeEnabled(function(isEnabled) { + this.isDarkThemeEnabled(function (isEnabled) { if (isEnabled) { self.applyDark(); } else { @@ -33,12 +31,12 @@ DarkTheme.apply = function() { } if (chrome.app.window !== undefined) { - windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', isEnabled); + windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), "darkTheme", isEnabled); } }); }; -DarkTheme.autoSet = function() { +DarkTheme.autoSet = function () { if (this.configSetting === 2) { this.apply(); } @@ -52,12 +50,12 @@ DarkTheme.setConfig = function (result) { }; DarkTheme.applyDark = function () { - $('body').addClass('dark-theme'); + $("body").addClass("dark-theme"); this.enabled = true; }; DarkTheme.applyNormal = function () { - $('body').removeClass('dark-theme'); + $("body").removeClass("dark-theme"); this.enabled = false; }; @@ -65,7 +63,7 @@ export function setDarkTheme(enabled) { DarkTheme.setConfig(enabled); checkSetupAnalytics(function (analyticsService) { - analyticsService.sendEvent(analyticsService.EVENT_CATEGORIES.APPLICATION, 'DarkTheme', { enabled: enabled }); + analyticsService.sendEvent(analyticsService.EVENT_CATEGORIES.APPLICATION, "DarkTheme", { enabled: enabled }); }); } diff --git a/src/js/Features.js b/src/js/Features.js index ed3cdc4779..0c82e2512c 100644 --- a/src/js/Features.js +++ b/src/js/Features.js @@ -1,41 +1,41 @@ import { bit_check, bit_set, bit_clear } from "./bit"; -import { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } from './data_storage'; +import { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } from "./data_storage"; import semver from "semver"; import { tracking } from "./Analytics"; -import $ from 'jquery'; +import $ from "jquery"; const Features = function (config) { const self = this; const features = [ - {bit: 0, group: 'rxMode', mode: 'select', name: 'RX_PPM'}, - {bit: 2, group: 'other', name: 'INFLIGHT_ACC_CAL'}, - {bit: 3, group: 'rxMode', mode: 'select', name: 'RX_SERIAL'}, - {bit: 4, group: 'escMotorStop', name: 'MOTOR_STOP'}, - {bit: 5, group: 'other', name: 'SERVO_TILT', haveTip: true, dependsOn: 'SERVOS'}, - {bit: 6, group: 'other', name: 'SOFTSERIAL', haveTip: true}, - {bit: 7, group: 'other', name: 'GPS', haveTip: true, dependsOn: 'GPS'}, - {bit: 9, group: 'other', name: 'SONAR', haveTip: true, dependsOn: 'RANGEFINDER'}, - {bit: 10, group: 'telemetry', name: 'TELEMETRY', haveTip: true, dependsOn: 'TELEMETRY'}, - {bit: 12, group: '3D', name: '3D', haveTip: true}, - {bit: 13, group: 'rxMode', mode: 'select', name: 'RX_PARALLEL_PWM'}, - {bit: 14, group: 'rxMode', mode: 'select', name: 'RX_MSP'}, - {bit: 15, group: 'rssi', name: 'RSSI_ADC'}, - {bit: 16, group: 'other', name: 'LED_STRIP', haveTip: true, dependsOn: 'LED_STRIP'}, - {bit: 17, group: 'other', name: 'DISPLAY', haveTip: true, dependsOn: 'DASHBOARD'}, - {bit: 18, group: 'other', name: 'OSD', haveTip: true, dependsOn: 'OSD'}, - {bit: 20, group: 'other', name: 'CHANNEL_FORWARDING', dependsOn: 'SERVOS'}, - {bit: 21, group: 'other', name: 'TRANSPONDER', haveTip: true, dependsOn: 'TRANSPONDER'}, - {bit: 22, group: 'other', name: 'AIRMODE', haveTip: true}, - {bit: 25, group: 'rxMode', mode: 'select', name: 'RX_SPI'}, - {bit: 27, group: 'escSensor', name: 'ESC_SENSOR'}, - {bit: 28, group: 'antiGravity', name: 'ANTI_GRAVITY', haveTip: true, hideName: true}, + { bit: 0, group: "rxMode", mode: "select", name: "RX_PPM" }, + { bit: 2, group: "other", name: "INFLIGHT_ACC_CAL" }, + { bit: 3, group: "rxMode", mode: "select", name: "RX_SERIAL" }, + { bit: 4, group: "escMotorStop", name: "MOTOR_STOP" }, + { bit: 5, group: "other", name: "SERVO_TILT", haveTip: true, dependsOn: "SERVOS" }, + { bit: 6, group: "other", name: "SOFTSERIAL", haveTip: true }, + { bit: 7, group: "other", name: "GPS", haveTip: true, dependsOn: "GPS" }, + { bit: 9, group: "other", name: "SONAR", haveTip: true, dependsOn: "RANGEFINDER" }, + { bit: 10, group: "telemetry", name: "TELEMETRY", haveTip: true, dependsOn: "TELEMETRY" }, + { bit: 12, group: "3D", name: "3D", haveTip: true }, + { bit: 13, group: "rxMode", mode: "select", name: "RX_PARALLEL_PWM" }, + { bit: 14, group: "rxMode", mode: "select", name: "RX_MSP" }, + { bit: 15, group: "rssi", name: "RSSI_ADC" }, + { bit: 16, group: "other", name: "LED_STRIP", haveTip: true, dependsOn: "LED_STRIP" }, + { bit: 17, group: "other", name: "DISPLAY", haveTip: true, dependsOn: "DASHBOARD" }, + { bit: 18, group: "other", name: "OSD", haveTip: true, dependsOn: "OSD" }, + { bit: 20, group: "other", name: "CHANNEL_FORWARDING", dependsOn: "SERVOS" }, + { bit: 21, group: "other", name: "TRANSPONDER", haveTip: true, dependsOn: "TRANSPONDER" }, + { bit: 22, group: "other", name: "AIRMODE", haveTip: true }, + { bit: 25, group: "rxMode", mode: "select", name: "RX_SPI" }, + { bit: 27, group: "escSensor", name: "ESC_SENSOR" }, + { bit: 28, group: "antiGravity", name: "ANTI_GRAVITY", haveTip: true, hideName: true }, ]; self._features = features; function addFeatureDependsOn(obj, featureName, dependsOn) { - obj.forEach(f => { + obj.forEach((f) => { if (f.name === featureName) { f.dependsOn = dependsOn; } @@ -43,7 +43,7 @@ const Features = function (config) { } if (semver.gte(config.apiVersion, API_VERSION_1_47)) { - addFeatureDependsOn(self._features, 'SOFTSERIAL', 'SOFTSERIAL'); + addFeatureDependsOn(self._features, "SOFTSERIAL", "SOFTSERIAL"); } if (config.buildOptions?.length) { @@ -52,7 +52,10 @@ const Features = function (config) { self._features = []; for (const feature of features) { - if (config.buildOptions.some(opt => opt.includes(feature.dependsOn)) || feature.dependsOn === undefined) { + if ( + config.buildOptions.some((opt) => opt.includes(feature.dependsOn)) || + feature.dependsOn === undefined + ) { self._features.push(feature); } } @@ -61,13 +64,24 @@ const Features = function (config) { // Add TELEMETRY feature if any of the following protocols are used: CRSF, GHST, FPORT, JETI if (semver.gte(config.apiVersion, API_VERSION_1_46)) { let enableTelemetry = false; - if (config.buildOptions.some(opt => opt.includes('CRSF') || opt.includes('GHST') || opt.includes('FPORT') || opt.includes('JETI'))) { + if ( + config.buildOptions.some( + (opt) => + opt.includes("CRSF") || opt.includes("GHST") || opt.includes("FPORT") || opt.includes("JETI"), + ) + ) { enableTelemetry = true; } - const telemetryFeature = self._features.filter(f => f.name === 'TELEMETRY')?.[0]; + const telemetryFeature = self._features.filter((f) => f.name === "TELEMETRY")?.[0]; if (enableTelemetry && !telemetryFeature) { - self._features.push({bit: 10, group: 'telemetry', name: 'TELEMETRY', haveTip: true, dependsOn: 'TELEMETRY'}); + self._features.push({ + bit: 10, + group: "telemetry", + name: "TELEMETRY", + haveTip: true, + dependsOn: "TELEMETRY", + }); } } } @@ -132,7 +146,7 @@ Features.prototype.generateElements = function (featuresElements) { const listElements = []; for (const feature of self._features) { - let feature_tip_html = ''; + let feature_tip_html = ""; const featureName = feature.name; const featureBit = feature.bit; @@ -142,16 +156,18 @@ Features.prototype.generateElements = function (featuresElements) { const newElements = []; - if (feature.mode === 'select') { + if (feature.mode === "select") { if (listElements.length === 0) { newElements.push($('