Firmware Flasher Tab rework
skaman82
parent
fdfa1dfc9b
commit
1eca67fcbc
|
|
@ -4,19 +4,14 @@
|
|||
}
|
||||
.tab-dataflash .info .progressLabel {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
/* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +26,6 @@
|
|||
width: 12em;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-dataflash .dataflash-info dd {
|
||||
|
|
@ -42,7 +36,6 @@
|
|||
.tab-dataflash .speed {
|
||||
margin-top: 5px;
|
||||
width: 80px;
|
||||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.tab-dataflash .info {
|
||||
|
|
@ -53,7 +46,6 @@
|
|||
width: 120px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-dataflash .info dd {
|
||||
|
|
@ -64,7 +56,6 @@
|
|||
}
|
||||
.tab-dataflash .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
|
@ -72,11 +63,9 @@
|
|||
display: none;
|
||||
}
|
||||
.tab-dataflash .dataflash-contents {
|
||||
margin-top:5px;
|
||||
|
||||
margin-top:5px;
|
||||
border:1px solid silver;
|
||||
background-color:#eee;
|
||||
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
flex-wrap:nowrap;
|
||||
|
|
|
|||
|
|
@ -4,21 +4,62 @@
|
|||
}
|
||||
.tab-firmware_flasher .info .progressLabel {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
|
||||
top: 0;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
/* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
|
||||
}
|
||||
|
||||
|
||||
.red {
|
||||
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 );
|
||||
}
|
||||
|
||||
|
||||
.darkgrey {
|
||||
background-color: #575757;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab-firmware_flasher .spacer_box_title {
|
||||
float:none;}
|
||||
|
||||
.tab-firmware_flasher .info {
|
||||
float:left;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.tab-firmware_flasher .info .progressLabel a {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -66,13 +107,13 @@
|
|||
}
|
||||
.tab-firmware_flasher .options {
|
||||
position: relative;
|
||||
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
|
||||
line-height: 18px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
border: 1px dotted silver;
|
||||
.tab-firmware_flasher td {
|
||||
text-align:left;
|
||||
}
|
||||
.tab-firmware_flasher .options label input {
|
||||
float: left;
|
||||
|
|
@ -83,8 +124,8 @@
|
|||
margin-left: 6px;
|
||||
}
|
||||
.tab-firmware_flasher .options select {
|
||||
height: 20px;
|
||||
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
|
|
@ -97,18 +138,24 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
.tab-firmware_flasher .options .description {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
|
||||
position: relative;
|
||||
left:0px;
|
||||
font-style: italic;
|
||||
color: #818181;
|
||||
}
|
||||
.tab-firmware_flasher .cf_table td:last-child {
|
||||
text-align:left;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.tab-firmware_flasher .options .flash_on_connect_wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-firmware_flasher .options .manual_baud_rate select {
|
||||
width: 70px;
|
||||
width: 75px;
|
||||
margin-left:19px;
|
||||
}
|
||||
|
||||
.tab-firmware_flasher .release_info {
|
||||
|
|
@ -172,22 +219,7 @@
|
|||
.tab-firmware_flasher .git_info p a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.warning {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.warning .title {
|
||||
line-height: 20px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
border-bottom: 1px solid silver;
|
||||
background-color: #cd4c4c;
|
||||
}
|
||||
.warning p {
|
||||
padding: 5px;
|
||||
}
|
||||
.tab-firmware_flasher .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
|
|
@ -229,4 +261,14 @@
|
|||
.tab-firmware_flasher .buttons a.back {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn a.disabled {
|
||||
cursor: default;
|
||||
color: #fff;
|
||||
background-color:#AFAFAF;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
text-shadow: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,37 @@
|
|||
<div class="tab-firmware_flasher toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="options">
|
||||
<div class="option releases">
|
||||
<select name="release">
|
||||
<div class="options gui_box">
|
||||
<div class="spacer">
|
||||
<table class="cf_table" style="margin-top:10px;">
|
||||
<tr>
|
||||
<td><select name="release">
|
||||
<option value="0">Loading ...</option>
|
||||
</select>
|
||||
<span class="description" i18n="firmwareFlasherOnlineReleasesDescription"></span>
|
||||
</div>
|
||||
<div class="option">
|
||||
<label>
|
||||
</select></td>
|
||||
<td><span class="description" i18n="firmwareFlasherOnlineReleasesDescription"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>
|
||||
<input class="updating" type="checkbox" id="toggle" />
|
||||
<span i18n="firmwareFlasherNoReboot"></span>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherNoRebootDescription"></span>
|
||||
</div>
|
||||
<div class="option flash_on_connect_wrapper">
|
||||
<label>
|
||||
</label></td>
|
||||
<td><span class="description" i18n="firmwareFlasherNoRebootDescription"></span></td>
|
||||
</tr>
|
||||
<tr class="option flash_on_connect_wrapper">
|
||||
<td><label>
|
||||
<input class="flash_on_connect" type="checkbox" id="toggle" />
|
||||
<span i18n="firmwareFlasherFlashOnConnect"></span>
|
||||
<span i18n="firmwareFlasherFlashOnConnect"></span></td>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span>
|
||||
</div>
|
||||
<div class="option">
|
||||
<label>
|
||||
<td><span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span></td>
|
||||
</tr>
|
||||
<tr class="option">
|
||||
<td><label>
|
||||
<input class="erase_chip" type="checkbox" id="toggle" />
|
||||
<span i18n="firmwareFlasherFullChipErase"></span>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherFullChipEraseDescription"></span>
|
||||
</div>
|
||||
<div class="option manual_baud_rate">
|
||||
<label>
|
||||
</label></td>
|
||||
<td><span class="description" i18n="firmwareFlasherFullChipEraseDescription"></span></td>
|
||||
</tr>
|
||||
<tr class="option manual_baud_rate">
|
||||
<td><label>
|
||||
<input class="flash_manual_baud" type="checkbox" id="toggle" />
|
||||
<span i18n="firmwareFlasherManualBaud"></span>
|
||||
<select id="flash_manual_baud_rate" title="Baud Rate">
|
||||
|
|
@ -43,18 +45,23 @@
|
|||
<option value="28800">28800</option>
|
||||
<option value="19200">19200</option>
|
||||
</select>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherManualBaudDescription"></span>
|
||||
</div>
|
||||
<div class="option">
|
||||
<label>
|
||||
</label></td>
|
||||
<td><span class="description" i18n="firmwareFlasherManualBaudDescription"></span></td>
|
||||
</tr>
|
||||
<tr class="option noboarder">
|
||||
<td><label>
|
||||
<input class="show_development_releases" type="checkbox" id="toggle" />
|
||||
<span i18n="firmwareFlasherShowDevelopmentReleases"></span>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherShowDevelopmentReleasesDescription"></span>
|
||||
</div>
|
||||
</label></td>
|
||||
<td><span class="description" i18n="firmwareFlasherShowDevelopmentReleasesDescription"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
|
||||
|
||||
|
||||
<div class="git_info">
|
||||
<div class="title" i18n="firmwareFlasherGithubInfoHead"></div>
|
||||
<p>
|
||||
|
|
@ -64,34 +71,48 @@
|
|||
<strong i18n="firmwareFlasherMessage"></strong> <span class="message"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="gui_box">
|
||||
|
||||
<div class="release_info">
|
||||
<div class="title" i18n="firmwareFlasherReleaseSummaryHead"></div>
|
||||
<p>
|
||||
<strong i18n="firmwareFlasherReleaseTarget"></strong> <span class="target"></span><br />
|
||||
<div class="gui_box_titlebar darkgrey"><div class="spacer_box_title" style="text-align:center; color:white;
|
||||
" i18n="firmwareFlasherReleaseSummaryHead"></div>
|
||||
</div>
|
||||
<div class="spacer" style="margin-bottom:10px;"><strong i18n="firmwareFlasherReleaseTarget"></strong> <span class="target"></span><br />
|
||||
<strong i18n="firmwareFlasherReleaseName"></strong> <a i18n_title="firmwareFlasherReleaseUrl" class="name" href="#" target="_blank"></a><br />
|
||||
<strong i18n="firmwareFlasherReleaseFile"></strong> <a i18n_title="firmwareFlasherReleaseFileUrl" class="file" href="#" target="_blank"></a><br />
|
||||
<strong i18n="firmwareFlasherReleaseDate"></strong> <span class="date"></span><br />
|
||||
<strong i18n="firmwareFlasherReleaseStatus"></strong> <span class="status"></span><br />
|
||||
<strong i18n="firmwareFlasherReleaseNotes"></strong> <br />
|
||||
<div class=notes></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning">
|
||||
<div class="title" i18n="firmwareFlasherWarninghead"></div>
|
||||
<p i18n="firmwareFlasherWarningText">
|
||||
<p i18n="firmwareFlasherTargetWarning">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="gui_box">
|
||||
<div class="gui_box_titlebar red"><div class="spacer_box_title" style="text-align:center; color:white;
|
||||
" i18n="firmwareFlasherWarninghead"></div></div>
|
||||
<div class="spacer" style="margin-bottom:10px;"><p i18n="firmwareFlasherWarningText">
|
||||
<p i18n="firmwareFlasherTargetWarning"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="info">
|
||||
<progress class="progress" value="0" min="0" max="100"></progress>
|
||||
<span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
|
||||
</div>
|
||||
<!--div class="buttons">
|
||||
<a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
|
||||
<a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
|
||||
<a class="flash_firmware locked" href="#" i18n="firmwareFlasherFlashFirmware"></a>
|
||||
</div-->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="content_toolbar">
|
||||
<div class="btn"><a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a></div>
|
||||
<div class="btn"><a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a></div>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ elems.forEach(function(html) {
|
|||
$('span.progressLabel').text(chrome.i18n.getMessage('firmwareFlasherLoadFirmwareFile'));
|
||||
$('div.git_info').slideUp();
|
||||
$('div.release_info').slideUp();
|
||||
$('a.flash_firmware').addClass('locked');
|
||||
$('a.flash_firmware').addClass('disabled');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -206,7 +206,7 @@ elems.forEach(function(html) {
|
|||
|
||||
if (parsed_hex) {
|
||||
googleAnalytics.sendEvent('Flashing', 'Firmware', 'local');
|
||||
$('a.flash_firmware').removeClass('locked');
|
||||
$('a.flash_firmware').removeClass('disabled');
|
||||
|
||||
$('span.progressLabel').text('Loaded Local Firmware: (' + parsed_hex.bytes_total + ' bytes)');
|
||||
} else {
|
||||
|
|
@ -227,10 +227,10 @@ elems.forEach(function(html) {
|
|||
*/
|
||||
$('select[name="release"]').change(function(evt){
|
||||
if (evt.target.value=="0") {
|
||||
$("a.load_remote_file").addClass('locked');
|
||||
$("a.load_remote_file").addClass('disabled');
|
||||
}
|
||||
else {
|
||||
$("a.load_remote_file").removeClass('locked');
|
||||
$("a.load_remote_file").removeClass('disabled');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -253,7 +253,7 @@ elems.forEach(function(html) {
|
|||
googleAnalytics.sendEvent('Flashing', 'Firmware', 'online');
|
||||
$('span.progressLabel').html('<a class="save_firmware" href="#" title="Save Firmware">Loaded Online Firmware: (' + parsed_hex.bytes_total + ' bytes)</a>');
|
||||
|
||||
$('a.flash_firmware').removeClass('locked');
|
||||
$('a.flash_firmware').removeClass('disabled');
|
||||
|
||||
if (summary.commit) {
|
||||
$.get('https://api.github.com/repos/cleanflight/cleanflight/commits/' + summary.commit, function (data) {
|
||||
|
|
@ -302,7 +302,7 @@ elems.forEach(function(html) {
|
|||
|
||||
function failed_to_load() {
|
||||
$('span.progressLabel').text(chrome.i18n.getMessage('firmwareFlasherFailedToLoadOnlineFirmware'));
|
||||
$('a.flash_firmware').addClass('locked');
|
||||
$('a.flash_firmware').addClass('disabled');
|
||||
}
|
||||
|
||||
var summary = $('select[name="release"] option:selected').data('summary');
|
||||
|
|
@ -317,7 +317,7 @@ elems.forEach(function(html) {
|
|||
});
|
||||
|
||||
$('a.flash_firmware').click(function () {
|
||||
if (!$(this).hasClass('locked')) {
|
||||
if (!$(this).hasClass('disabled')) {
|
||||
if (!GUI.connect_lock) { // button disabled while flashing is in progress
|
||||
if (parsed_hex != false) {
|
||||
var options = {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue