Presets TAB

Author: Ivan Efimov

locales/en/messages.json

@@ -31,6 +31,9 @@
     "noticeTitle": {
         "message": "Notice"
     },
+    "dontShowAgain": {
+        "message": "Don't show again"
+    },
     "operationNotSupported": {
         "message": "This operation is not supported by your hardware."
     },
@@ -68,6 +71,9 @@
     "close": {
         "message": "Close"
     },
+    "OK": {
+        "message": "OK"
+    },
     "cancel": {
         "message": "Cancel"
     },
@@ -86,6 +92,9 @@
     "permanentExpertMode": {
         "message": "Permanently enable Expert Mode"
     },
+    "warningSettings": {
+        "message": "Show warnings"
+    },
     "rememberLastTab": {
         "message": "Reopen last tab on connect"
     },
@@ -6205,5 +6214,205 @@
     },
     "cordovaExitAppMessage": {
         "message": "Do you really want to close the configurator?"
+    },
+    "dropDownSelectAll": {
+        "message": "[Select all]",
+        "description": "Select all item in the drop down/multiple select"
+    },
+    "dropDownAll": {
+        "message": "All",
+        "description": "Text indicating everything is selected in the drop down/multiple select"
+    },
+    "tabPresets": {
+        "message": "Presets",
+        "description": "Presets tab title"
+    },
+    "presetsReload": {
+        "message": "Reload",
+        "description": "Text on the reload button that appears when there in an error loading presets index"
+    },
+    "presetsAuthor": {
+        "message": "Author:",
+        "description": "Hint text in the presets detailed dialog"
+    },
+    "presetsKeywords": {
+        "message": "Keywords:",
+        "description": "Hint text in the presets detailed dialog"
+    },
+    "presetsVersions": {
+        "message": "Firmware:",
+        "description": "Hint text in the presets detailed dialog"
+    },
+    "presetsOfficial": {
+        "message": "Official",
+        "description": "Hint text in the presets detailed dialog indication preset is official"
+    },
+    "presetsCommunity": {
+        "message": "Community",
+        "description": "Hint text in the presets detailed dialog indication preset is not official but community"
+    },
+    "presetsExperimental": {
+        "message": "Experimental",
+        "description": "Hint text in the presets detailed dialog indication preset is not official but experimental"
+    },
+    "presetsApply": {
+        "message": "Pick",
+        "description": "Button to pick a preset"
+    },
+    "presetsViewOnline": {
+        "message": "View online…",
+        "description": "Link text for opening preset file online"
+    },
+    "presetsOpenDiscussion": {
+        "message": "Discussion…",
+        "description": "Link text for opening preset discussion"
+    },
+    "presetsShowCli": {
+        "message": "Show CLI",
+        "description": "Button to show CLI code of a preset"
+    },
+    "presetsHideCli": {
+        "message": "Hide CLI",
+        "description": "Button to hide CLI code of a preset"
+    },
+    "presetsOptions": {
+        "message": "Options",
+        "description": "Text label for Options drop down select"
+    },
+    "presetsFilterCategory": {
+        "message": "Categories",
+        "description": "UI filter name"
+    },
+    "presetsFilterKeyword": {
+        "message": "Keywords",
+        "description": "UI filter name"
+    },
+    "presetsFilterAuthor": {
+        "message": "Authors",
+        "description": "UI filter name"
+    },
+    "presetsFilterFirmware": {
+        "message": "Firmwares",
+        "description": "UI filter name"
+    },
+    "presetsFilterStatus": {
+        "message": "Status",
+        "description": "UI filter name - official/community/experimental"
+    },
+    "presetsLoadError": {
+        "message": "Error loading presets from the internet",
+        "description": "Error report when failed to load presets index or a specific preset"
+    },
+    "presetsButtonSave": {
+        "message": "Save and Reboot",
+        "description": "A button that saves all appied presets - analog to 'save' command in CLI"
+    },
+    "presetsButtonCancel": {
+        "message": "Cancel",
+        "description": "A button that restarts FC without saving appied presets - analog to 'exit' command in CLI"
+    },
+    "presetsApplyingPresets": {
+        "message": "Applying configuration...",
+        "description": "First label in the progress dialog when applying configuration (presets or user config)"
+    },
+    "presetsPleaseWait": {
+        "message": "Please wait.",
+        "description": "Second label in the progress dialog when applying presets"
+    },
+    "presetsCliErrorsWaring": {
+        "message": "<span class='message-negative'>WARNING!</span><br/>Configuration has been applied with CLI errors.",
+        "description": "Text to show when there are CLI errors after applying presets or user configuration"
+    },
+    "presetsSaveAnyway": {
+        "message": "Save anyway",
+        "description": "Save anyway button on the CLI errors presets dialog"
+    },
+    "presetsWarningDialogTitle": {
+        "message": "WARNING!",
+        "description": "Warning title in the warning dialog in the presets"
+    },
+    "presetsWarningDialogYesButton": {
+        "message": "Agree",
+        "description": "Agree button in the presets warning dialog"
+    },
+    "presetsWarningDialogNoButton": {
+        "message": "Cancel",
+        "description": "Cancel button in the presets warning dialog"
+    },
+    "presetsWiki": {
+        "message": "Presets Wiki",
+        "description": "Button to open Presets Wiki link"
+    },
+    "presetsBackupSave": {
+        "message": "Save backup",
+        "description": "Button to backup current configuration to file"
+    },
+    "presetsBackupLoad": {
+        "message": "Load backup",
+        "description": "Button to load backup from the file"
+    },
+    "presetsLoadingDumpAll": {
+        "message": "Loading current configuration from the flight controller",
+        "description": "Title for the waiting dialog when loading dump all into a file"
+    },
+    "dumpAllNotSavedWarning": {
+        "message": "Error occured while saving current configuration",
+        "description": "Message appears on presets tab when saving current diff all into a file has failed"
+    },
+    "presetSources": {
+        "message": "Preset sources...",
+        "description": "A button to show preset sources dialog"
+    },
+    "presetsSourcesDialogTitle": {
+        "message": "Preset sources",
+        "description": "A button to show preset sources dialog"
+    },
+    "presetsSourcesDialogAddNew": {
+        "message": "Add new source",
+        "description": "A button to show preset sources dialog"
+    },
+    "presetsSourcesDialogDefaultSourceName": {
+        "message": "New Custom Preset Source",
+        "description": "A default preset source (repo) name"
+    },
+    "presetsSourcesDialogSaveSource": {
+        "message": "Save",
+        "description": "Presets tab, sources dialog, button to save new or editable source"
+    },
+    "presetsSourcesDialogResetSource": {
+        "message": "Reset",
+        "description": "Presets tab, sources dialog, button to reset source after modifications"
+    },
+    "presetsSourcesDialogMakeSourceActive": {
+        "message": "Make Active",
+        "description": "Presets tab, sources dialog, button to make selected source active"
+    },
+    "presetsSourcesDialogDeleteSource": {
+        "message": "Delete",
+        "description": "Presets tab, sources dialog, button to delete selected source"
+    },
+    "presetsWarningNotOfficialSource": {
+        "message": "<span class=\"message-negative\">WARNING!</span> A third party preset source is selected.",
+        "description": "Warning message that shows up when a third party preset source is selected"
+    },
+    "presetsWarningBackup": {
+        "message": "Please make sure you backup your current configuration ('$t(presetsBackupSave.message)' button or via CLI if the button is disabled) <strong>before</strong> picking and applying presets. Otherwise there is no way to return to previous configuration after applying presets.",
+        "description": "Warning message that shows up at the top of the presets tab"
+    },
+    "presets_sources_dialog_warning": {
+        "message": "<span class=\"message-negative\">WARNING!</span> Using third party preset sources could be dangerous.<br/>Make sure you add and use only trusted sources. Malicious or bad preset sources will break your drone configuration and can potentially harm your devices.",
+        "description": "Warning message that shows up at the top of the preset sources dialog"
+    },
+    "presetsWarningWrongVersionConfirmation": {
+        "message": "Picked preset requires firmware version $1<br/> Current firmware version is $2",
+        "description": "Warning message that shows up at the top of the preset sources dialog"
+    },
+    "presetsNoPresetsFound": {
+        "message": "No presets found for the given search paramteres",
+        "description": "Message that apprears on presets tab if no presets were found"
+    },
+    "presetsTooManyPresetsFound": {
+        "message": "Reached the maximum limit of the shown presets number",
+        "description": "Message that apprears on presets tab if too many presets found"
     }
 }

package.json

@@ -64,6 +64,7 @@
     "jquery-ui-npm": "^1.12.0",
     "lru_map": "^0.3.3",
     "marked": "^0.8.0",
+    "multiple-select": "^1.5.2",
     "nw-vue-devtools-prebuilt": "^0.0.10",
     "object-hash": "^2.0.3",
     "select2": "^4.0.13",
@@ -125,7 +126,7 @@
     "temp": "^0.9.1",
     "vinyl-source-stream": "^2.0.0",
     "vue-template-compiler": "^2.6.12",
-    "yarn": "^1.22.0"
+    "yarn": "^1.22.17"
   },
   "optionalDependencies": {
     "gulp-appdmg": "^1.0.3"

src/css/dark-theme.css

@@ -111,6 +111,11 @@ dialog {
     border: 1px solid #ffbb2a;
 }
 
+.standard_input {
+    background: var(--boxBackground);
+    color: white;
+}
+
 #quad-status_wrapper {
     color: #393b3a;
 }

src/css/main.css

@@ -78,6 +78,18 @@ a.disabled {
     background-position: center;
 }
 
+.standard_input {
+    padding-left: 3px;
+    height: 20px;
+    line-height: 20px;
+    text-align: left;
+    border-radius: 3px;
+    font-size: 12px;
+    font-weight: normal;
+    border: 1px solid var(--subtleAccent);
+    background: var(--boxBackground);
+}
+
 /* Help-Icon  */
 .helpicon {
     float: right;
@@ -740,8 +752,19 @@ input[type="number"]::-webkit-inner-spin-button {
     background-image: url(../images/icons/cf_icon_link_active.svg);
 }
 
+/** Header (not phones) **/
+@media not all and (max-width: 575px) {
+    .visible-on-phone-only {
+        display: none !important;
+    }
+}
+
 /** Header (phones) **/
 @media all and (max-width: 575px) {
+    .visible-on-desktop-only {
+        display: none !important;
+    }
+
     .headerbar {
         height: 56px;
         background: rgba(0, 0, 0, 0.15);
@@ -1541,10 +1564,67 @@ dialog .dialog_toolbar .btn a.disabled {
     opacity: 0.5;
 }
 
+.dialogYesNo .dialogYesNoContent {
+    margin-bottom: 12px;
+    margin-top: 12px;
+    white-space: pre-line;
+}
+
+.dialogYesNo .dialogYesNo-yesButton, .dialogYesNo .dialogYesNo-noButton {
+    margin: 0px;
+}
+
+.dialogYesNo .dialogYesNo-yesButton {
+    margin-right: 12px;
+}
+
+.dialogYesNo {
+    width: fit-content;
+    max-width: 400px;
+}
+
+.dialogWait {
+    width: fit-content;
+    max-width: 500px;
+    min-width: 300px;
+}
+
+.dialogWait .data-loading {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100px;
+    height: 100px;
+}
+
+.dialogWait .dialogWaitTitle {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 16px;
+    width: fit-content;
+}
+
+.dialogInformation .dialogInformationContent {
+    margin-bottom: 12px;
+    margin-top: 12px;
+    white-space: pre-line;
+}
+
+.dialogInformation .dialogInformation-confirmButton {
+    margin: 0px;
+}
+
+.dialogInformation {
+    width: fit-content;
+    max-width: 400px;
+}
+
 @media all and (max-width: 575px) {
     dialog {
         position: fixed;
-        width: calc(100% - 2em) !important;
+        width: calc(100% - 2em - 2px) !important; /* 2px - border */
+        max-width: unset;
         height: auto !important;
         bottom: 0;
         top: 56px;
@@ -2348,7 +2428,6 @@ input {
 .noUi-connect {
     box-shadow: none;
 }
-
 /** Responsive grid **/
 @media all and (max-width: 575px) {
     .sm, .md, .lg, .xl {

src/css/tabs/firmware_flasher.css

@@ -200,7 +200,7 @@
     cursor: default;
     color: #fff;
     background-color: #AFAFAF;
-    border: none;
+    border: 1px solid #AFAFAF;
     pointer-events: none;
     text-shadow: none;
     opacity: 0.5;

src/css/tabs/options.css

@@ -7,6 +7,8 @@
 }
 .tab-options .margin-bottom {
     margin-bottom: 10px;
+    display: grid;
+    grid-template-columns: fit-content(300px) 1fr;
 }
 .tab-options select {
     background: var(--boxBackground);