Firmware Flasher Tab rework

pull/3/head
skaman82 9 years ago
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…
Cancel
Save