speedybac
/
inav-configurator
mirror of https://github.com/iNavFlight/inav-configurator
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Log bar upgrade to show scroll functionality to user

Browse Source
pull/3/head
skaman82 9 years ago
parent 71b9e6dad4
commit ba23917ef7
5 changed files with 80 additions and 9 deletions
Show Stats Download Patch File Download Diff File

32
images/icons/scroll.svg
Unescape Escape View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M84,41c0.5,0.5,1.3,0.5,1.7,0
c0.5-0.5,0.5-1.3,0-1.7L71.9,25.6c-0.5-0.5-1.3-0.5-1.7,0L56.3,39.3c-0.5,0.5-0.5,1.3,0,1.7c0.5,0.5,1.3,0.5,1.7,0l13-12.5L84,41z"
/>
</g>
<g>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M58,100.1c-0.5-0.5-1.3-0.5-1.7,0
c-0.5,0.5-0.5,1.3,0,1.7l13.9,13.7c0.5,0.5,1.3,0.5,1.7,0l13.9-13.6c0.5-0.5,0.5-1.3,0-1.7c-0.5-0.5-1.3-0.5-1.7,0L71,112.6
L58,100.1z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M20.4,77.3c1.9,1.1,4.6,2.1,7.4,2.1
c4.2,0,6.7-2.2,6.7-5.5c0-3-1.7-4.7-6-6.4c-5.2-1.8-8.5-4.5-8.5-9c0-5,4.1-8.7,10.4-8.7c3.3,0,5.7,0.8,7.1,1.6l-1.1,3.4
c-1-0.6-3.2-1.5-6.1-1.5c-4.4,0-6,2.6-6,4.8c0,3,2,4.5,6.4,6.2c5.4,2.1,8.2,4.7,8.2,9.4c0,4.9-3.7,9.2-11.2,9.2
c-3.1,0-6.5-0.9-8.2-2L20.4,77.3z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M61,81.5c-1.1,0.6-3.5,1.3-6.6,1.3
c-6.9,0-11.5-4.7-11.5-11.8c0-7.1,4.9-12.2,12.4-12.2c2.5,0,4.7,0.6,5.8,1.2l-1,3.2c-1-0.6-2.6-1.1-4.9-1.1c-5.3,0-8.1,3.9-8.1,8.7
c0,5.3,3.4,8.6,8,8.6c2.4,0,4-0.6,5.1-1.1L61,81.5z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M65.9,66.5c0-2.7,0-5-0.2-7.2h3.7l0.1,4.5h0.2
c1-3.1,3.6-5,6.4-5c0.5,0,0.8,0,1.2,0.1v4c-0.4-0.1-0.9-0.1-1.4-0.1c-3,0-5,2.2-5.6,5.4c-0.1,0.6-0.2,1.2-0.2,2v12.3H66v-16H65.9z"
/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M101.9,70.6c0,8.5-5.9,12.2-11.5,12.2
c-6.2,0-11-4.6-11-11.8c0-7.7,5-12.2,11.4-12.2C97.4,58.8,101.9,63.6,101.9,70.6z M83.6,70.9c0,5,2.9,8.9,7,8.9c4,0,7-3.8,7-8.9
c0-3.9-2-8.9-6.9-8.9C85.7,61.9,83.6,66.5,83.6,70.9z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M107.2,48.6h4.2v33.8h-4.2V48.6z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" d="M118.4,48.6h4.2v33.8h-4.2V48.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

44
main.css
Unescape Escape View File

@ -301,6 +301,35 @@ input[type="number"]::-webkit-inner-spin-button {
overflow-y: hidden; /* scroll*/
}
#scrollicon {
position:fixed;
right:10px;
top:113px;
height:27px;
width:27px;
background-image:url(images/icons/scroll.svg);
background-repeat:no-repeat;
background-size:100%;
opacity:0.0;
transition: all ease 1s;
}
#scrollicon.active {
height:110px;
margin-top:10px;
margin-right:20px;
width:110px;
opacity:0.15;
background-image:url(images/icons/scroll.svg);
background-size:80%;
transition: all ease 1s;
}
#log.active {
overflow-y: scroll; /* scroll*/
}
@ -908,9 +937,14 @@ background-color:#e60000;
}
.logswitch {
position:relative;
position:fixed;
right: 7px;
margin-top:-1px;
float:right;
background-color:rgba(255,0,4,1.00);
padding:5px;}
padding:5px;
z-index:10;
}
.logswitch a {
color:#656565;
}

6
main.html
Unescape Escape View File

@ -90,7 +90,7 @@
<body>
<div id="main-wrapper">
<div class="headerbar">
<div class="logswitch"><a href="#" id="showlog">Show Log</a></div>
<div id="logo"></div>
<div id="port-picker">
@ -176,7 +176,9 @@
</div> </div>
<div class="clear-both"></div>
<div id="log">
<div class="logswitch"><a href="#" id="showlog">Show Log</a></div>
<div id="log"><div id="scrollicon"></div>
<div class="wrapper">
</div>
</div>

2
main.js
Unescape Escape View File

@ -366,11 +366,13 @@ $("#showlog").on('click', function() {
if ( state ) {
$("#log").animate({height: 27}, 800);
$("#log").removeClass('active');
$("#scrollicon").removeClass('active');
state = false;
}else{
$("#log").animate({height: 111}, 800);
$("#log").addClass('active');
$("#scrollicon").addClass('active');
state = true;
}

5
tabs/setup.html
Unescape Escape View File

@ -2,8 +2,9 @@
<div class="tab_setup"> <!-- should be the first DIV on each tab -->
<div class="tab_wrapper">
<div class="cf_column full" style="margin-bottom:10px;"><div class="tab_title">Configuration
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
<div class="cf_column full" style="margin-bottom:10px;">
<div class="tab_title">Setup
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
</div>
</div>

Write Preview
Loading…
Cancel
Save