More info on setup tab 2 (#3385)

* add help and minor layout changes

* add help and minor layout changes

* add help and minor layout changes

* Fix layout

* add disable / enable logic

* small changes

locales/en/messages.json

@@ -867,6 +867,10 @@
     "initialSetupInfoHead": {
         "message": "System info"
     },
+    "initialSetupInfoHeadHelp": {
+        "message": "Shows FC flags for disarming, Battery information, RSSI level and Sensors hardware",
+        "description": "Message that pops up to describe the System info section"
+    },
     "initialSetupBattery": {
         "message": "Battery voltage:"
     },
@@ -1014,32 +1018,50 @@
     "initialSetupGPSHead": {
         "message": "GPS"
     },
+    "initialSetupGPSHeadHelp": {
+        "message": "Shows GPS info, if proper activated in Ports tab, Configuration Tab and GPS tab",
+        "description": "Message that pops up to describe the GPS section"
+    },
     "initialSetupInstrumentsHead": {
         "message": "Instruments"
     },
+    "initialSetupInstrumentsHeadHelp": {
+        "message": "Shows Heading, Pitch and Roll in instruments",
+        "description": "Message that pops up to describe the Instruments section"
+    },
     "initialSetupInfoAPIversion": {
         "message": "MSP API:"
     },
     "initialSetupInfoBuild": {
         "message": "Firmware info"
     },
+    "initialSetupInfoBuildHelp": {
+        "message": "Shows information regarding the build of firmware. The Build Config and Bulid Log links to the cloud information found by the Build key",
+        "description": "Message that pops up to describe the Build / Firmware section"
+    },
     "initialSetupInfoBuildDate": {
         "message": "Build date:"
     },
     "initialSetupInfoBuildInfo": {
         "message": "Build info:"
     },
+    "initialSetupInfoBuildInfoKey": {
+        "message": "Build key"
+    },
     "initialSetupInfoBuildInfoConfig": {
-        "message": "Build config"
+        "message": "Config"
     },
     "initialSetupInfoBuildInfoLog": {
-        "message": "Build log"
+        "message": "Log"
     },
     "initialSetupInfoBuildOptions": {
         "message": "Build Options:"
     },
+    "initialSetupInfoBuildOptionsList": {
+        "message": "Defines used"
+    },
     "initialSetupInfoBuildOptionsEmpty": {
-        "message": "Local Build - no Defines"
+        "message": "Local Build - no Defines used"
     },
     "initialSetupButtonSave": {
         "message": "Save"

src/css/main.less

@@ -628,7 +628,7 @@ input[type="number"] {
 	transition: none;
 	background-image: url(../images/icons/cf_icon_link_grey.svg);
 }
-.armedicon.active {
+.armedicon.active {user-select
 	background-image: url(../images/icons/cf_icon_armed_active.svg);
 }
 .failsafeicon.active {
@@ -1498,7 +1498,6 @@ dialog {
 	color: var(--pushedButton-fontColor);
 	border-radius: 3px;
 }
-
 .danger-button {
 	-webkit-user-drag: none;
 	margin-top: 8px;
@@ -1526,7 +1525,6 @@ dialog {
 	color: #fff;
 	border-radius: 3px;
 }
-
 .small {
 	width: auto;
 	position: relative;
@@ -1731,11 +1729,53 @@ dialog {
 	color: #fff;
 	font-size: 10px;
 }
-.buildKeyInfoClass {
+.buildInfoBtn {
-	background-color: #ffcc3f;
+	position: relative;
-	padding: 2px 5px;
+	margin-bottom: 0px;
-	border-radius: 3px;
+	margin-top: 3px;
-	color: #272727;
+	margin: 4px;
+	float: right;
+	a {
+		padding: 2px 5px 2px 5px;
+		text-align: center;
+		background-color: var(--accent);
+		border-radius: 4px;
+		border: 1px solid #dba718;
+		color: #000;
+		font-weight: 600;
+		font-size: 10px;
+		line-height: 11px;
+		display: block;
+		transition: all ease 0.2s;
+		text-decoration: none;
+		cursor: pointer;
+		&:hover {
+			background-color: var(--hoverButton-background);
+			color: #000;
+			text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+			transition: all ease 0.2s;
+			text-decoration: none;
+		}
+		&:active {
+			background-color: var(--hoverButton-background);
+			transition: all ease 0.0s;
+			box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
+		}
+	}
+	a.disabled {
+		background-color: #f1f1f1;
+		border: 1px solid var(--subtleAccent);
+		color: #ccc;
+	}
+}
+.buildInfoClassOptions {
+	margin-bottom: 0px;
+	margin-top: 3px;
+	float: right;
+	background-color: grey;
+	padding: 2px 5px 2px 5px;
+	border-radius: 4px;
+	color: #fff;
 	font-size: 10px;
 }
 .cf_tooltiptext {

src/js/tabs/setup.js

@@ -338,28 +338,34 @@ setup.initialize = function (callback) {
         };
 
         const showFirmwareInfo = function() {
-            MSP.send_message(MSPCodes.MSP_STATUS_EX, false, false, function() {
             // Firmware info
             msp_api_e.text([FC.CONFIG.apiVersion]);
             build_date_e.text([FC.CONFIG.buildInfo]);
-                if(FC.CONFIG.buildInfo.length > 0) {
+
+            if (FC.CONFIG.buildKey.length > 1) {
                 const buildRoot   = `https://build.betaflight.com/api/builds/${FC.CONFIG.buildKey}`;
-                    const buildConfig = `<span class="buildKeyInfoClass" title="${i18n.getMessage('initialSetupInfoBuildInfoConfig')}: ${FC.CONFIG.buildKey}">
+                const buildConfig = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoConfig')}: ${buildRoot}/json">
-                                         <a href="${buildRoot}/json" target="_blank">${i18n.getMessage('initialSetupInfoBuildInfoConfig')}</a></span>`;
+                                     <a href="${buildRoot}/json" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoConfig')}</a></strong></span>`;
-                    const buildLog =    `<span class="buildKeyInfoClass" title="${i18n.getMessage('initialSetupInfoBuildInfoLog')}: ${FC.CONFIG.buildKey}">
+                const buildLog =    `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoLog')}: ${buildRoot}/log">
-                                         <a href="${buildRoot}/log" target="_blank">${i18n.getMessage('initialSetupInfoBuildInfoLog')}</a></span>`;
+                                     <a href="${buildRoot}/log" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoLog')}</a></strong></span>`;
-                    build_info_e.html(`${buildConfig} &nbsp ${buildLog}`);
+                build_info_e.html(`${buildConfig} &nbsp &nbsp ${buildLog}`);
+                $('.build-info a').removeClass('disabled');
+            } else {
+                $('.build-info a').addClass('disabled');
             }
 
             if (FC.CONFIG.buildOptions.length > 0) {
+                let buildOptions = "";
                 build_opt_e.text = "";
                 for (const buildOption of FC.CONFIG.buildOptions) {
-                        build_opt_e.append(buildOption, ' ');
+                    buildOptions = `${buildOptions} &nbsp ${buildOption}`;
                 }
+                build_opt_e.html(`<span class="buildInfoClassOptions" 
+                                  title="${i18n.getMessage('initialSetupInfoBuildOptions')}${buildOptions}">
+                                  <strong>${i18n.getMessage('initialSetupInfoBuildOptionsList')}</strong></span>`);
             } else {
-                    build_opt_e.text(i18n.getMessage('initialSetupInfoBuildOptionsEmpty'));
+                build_opt_e.html(i18n.getMessage('initialSetupInfoBuildOptionsEmpty'));
             }
-            });
         };
 
         prepareDisarmFlags();

src/tabs/setup.html

@@ -91,6 +91,7 @@
                 <div class="gui_box grey instrumentsbox" align="center">
                     <div class="gui_box_titlebar" align="left">
                         <div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
+                        <div class="helpicon cf_tip" i18n_title="initialSetupInstrumentsHeadHelp"></div>
                     </div>
                     <span id="attitude"></span> <span id="heading"></span>
                 </div>
@@ -113,6 +114,7 @@
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
+                        <div class="helpicon cf_tip" i18n_title="initialSetupGPSHeadHelp"></div>
                     </div>
                     <div class="spacer_box">
                         <table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
@@ -140,6 +142,7 @@
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
+                        <div class="helpicon cf_tip" i18n_title="initialSetupInfoHeadHelp"></div>                    
                     </div>
                     <div class="spacer_box">
                         <table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
@@ -175,6 +178,7 @@
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="initialSetupInfoBuild"></div>
+                        <div class="helpicon cf_tip" i18n_title="initialSetupInfoBuildHelp"></div>
                     </div>
                     <div class="spacer_box">
                         <table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">