button for progress popover

3 files changed, 25 insertions, 10 deletions

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 9dec0bce4..a1f80710c 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -58,7 +58,7 @@
   background-image: linear-gradient(@origin, @start, @stop);

 }

 

-.transition(@prop: all, @time: 1s, @ease: linear) {

+.transition(@prop: all, @time: 0.25s, @ease: linear) {

   -webkit-transition: @prop @time @ease;

   -moz-transition: @prop @time @ease;

   -o-transition: @prop @time @ease;

@@ -298,27 +298,31 @@ header .logo {
 

 #progress-area {

   position: relative;

+  text-align: center;

   float: right;

   width: 26%;

   margin-right: 15px;

-  text-align: left;

+  line-height: 16px;

 

   .popover {

 //    display: block;

     width: 120%;

     left: -60%; // Half of width

     margin-left: 50%;

-    top: 100%

+    top: 100%;

   }

 

   .popover-title, .popover-content {

     color: @greyDark;

   }

 

+  i.icon-tasks {

+    cursor: pointer;

+  }

+

   .close {

     line-height: 14px;

   }

-

 }

 

 .progress-list {

@@ -343,14 +347,13 @@ header .logo {
       }

     }

   }

-

 }

 

 #globalprogress {

   background-color: @greyDark;

   background-image: none;

   height: 15px;

-  margin: 8px 0 0;

+  margin: 5px 0 0;

   line-height: 15px;

   border-radius: 15px;

   border: 3px solid @grey;

diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 9f7dda044..dd1030220 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -5,6 +5,8 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone) {
         el: 'header',
 
         events: {
+            'click i.icon-tasks': 'show_taskList',
+            'click .popover .close': 'hide_taskList',
             'click .btn-grabber': 'open_grabber'
         },
 
@@ -74,6 +76,15 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone) {
         render: function() {
         },
 
+        show_taskList: function() {
+            // TODO: fix animation
+            this.$('.popover').transit({'opacity': 'show'});
+        },
+
+        hide_taskList: function() {
+            this.$('.popover').transit({'opacity': 'hide'});
+        },
+
         open_grabber: function() {
             var self = this;
             _.requireOnce(['views/linkGrabberModal'], function(modalView) {
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index a0f7aaa05..e4210ec8b 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -79,8 +79,10 @@
                 </div>

 

                 <div id="progress-area" style="margin-top: 16px">

+                    No running tasks

+                    <i class="icon-white icon-tasks pull-right"></i>

                     <div class="progress" id="globalprogress">

-                        <div class="bar" style="width: 48%">downloading... (48%)</div>

+                        <div class="bar" style="width: 48%">48%</div>

                     </div>

 

                     {#                    <div>#}

@@ -92,8 +94,7 @@
                         <div class="popover-inner">

                             <h3 class="popover-title">

                                 Running...

-                                <button type="button" class="close" data-dismiss="popover"

-                                        aria-hidden="true">&times;</button>

+                                <button type="button" class="close" aria-hidden="true">&times;</button>

                             </h3>

                             <div class="popover-content">

                                 <ul class="progress-list">

@@ -112,7 +113,7 @@
                                         Some Download

                                         <span class="pull-right">YouTube</span>

                                         <div class="progress">

-                                            <div class="bar" style="width: 25%"></div>

+                                            <div class="bar" style="width: 45%"></div>

                                         </div>

                                         20 Kb of 23 MB (500 kb/s)

                                         <span class="pull-right">