improved file view, added default plugin icon

13 files changed, 209 insertions, 100 deletions

diff --git a/module/web/pyload_app.py b/module/web/pyload_app.py
index 185c773a3..9f3c2413a 100644
--- a/module/web/pyload_app.py
+++ b/module/web/pyload_app.py
@@ -96,6 +96,12 @@ def serve_template(path):
         print e
         return HTTPError(404, "Not Found")
 
+@route('/icons/<path:path>')
+def serve_icon(path):
+    # TODO
+    return redirect('/static/img/icon.png')
+    # return static_file(path, root=join("tmp", "icons"))
+
 @route('/favicon.ico')
 def favicon():
     return static_file("favicon.ico", root=join(PROJECT_DIR, "static", "img"))
diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less
index ba96bb4ed..97cc20463 100644
--- a/module/web/static/css/default/common.less
+++ b/module/web/static/css/default/common.less
@@ -39,9 +39,11 @@
 
 @green: #468847;
 @greenLight: lighten(spin(@green, 5), 10%);
+@greenDark: darken(spin(@green, -5), 10%);
 
 @red: #b94a48;
 @redLight: lighten(spin(@red, 5), 10%);
+@redDark: darken(spin(@red, -5), 10%);
 
 @emph: #FF7637;
 
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index 72758959c..12d833168 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -156,14 +156,38 @@
 }

 

 .file-view {

+  position: relative;

   margin-bottom: 3px;

   color: @light;

   .gradient(top, @blue, @blueLight); //  background-color: @blue;

   border-radius: 5px;

   line-height: 28px;

+

   &:hover {

     .gradient(top, @blue, @blueDark);

   }

+

+  &.selected {

+    .gradient(top, @yellow, @yellowDark);

+    color: @dark;

+

+    .iconf-chevron-down:hover {

+      color: @light;

+    }

+

+  }

+

+  img {

+    padding: 0 2px;

+    height: 24px;

+    width: 24px;

+  }

+

+  .iconf-chevron-down:hover {

+    cursor: pointer;

+    color: @yellow;

+  }

+

 }

 

 .file-row {

@@ -185,22 +209,36 @@
   width: 50%;

   font-weight: bold;

 

-  .icon-file {

+  .icon-white {

     cursor: move;

   }

 

 }

 

 .file-row.second {

+  color: @light;

+  font-size: small;

   width: 20%;

   .gradient(top, @blueDark, @blueDarker);

-  font-size: smaller;

 }

 

-.file-view a {

-  color: @light;

+.file-row.third {

+  font-size: small;

+

+  .dropdown-menu {

+    font-size: medium;

+  }

+

 }

 

+//.file-row.finished {

+//  .gradient(top, @green, @greenLight);

+//}

+//

+//.file-row.failed {

+//  .gradient(top, @red, @redLight);

+//}

+

 /*

 FANCY CHECKBOXES

 */

@@ -214,6 +252,6 @@ FANCY CHECKBOXES
   cursor: pointer;

 }

 

-.file-view .checkbox.checked {

+.file-view.selected .checkbox {

   background: url(../../img/default/checks_sheet.png) -21px top no-repeat;

 }

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 7c857227f..c009a3920 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -271,6 +271,10 @@ header .logo {
   font-size: small;

 

   li {

+    background-repeat: no-repeat;

+    background-size: 32px 32px;

+    background-position: 0px 8px;

+    padding-left: 38px;

 

     &:not(:last-child) {

       margin-bottom: 5px;

diff --git a/module/web/static/css/fontawesome.css b/module/web/static/css/fontawesome.css
index ca7a8ed83..d8cb66237 100644
--- a/module/web/static/css/fontawesome.css
+++ b/module/web/static/css/fontawesome.css
@@ -268,52 +268,63 @@ ul.icons li [class*=" iconf-"] {
   .btn .iconf-spin.iconf-large {
     height: .75em;
   }
-}.iconf-search:before		{ content: "\f021"; }
-.iconf-user:before		{ content: "\f022"; }
-.iconf-ok:before		{ content: "\f023"; }
-.iconf-remove:before		{ content: "\f024"; }
-.iconf-cog:before		{ content: "\f025"; }
-.iconf-trash:before		{ content: "\f026"; }
-.iconf-repeat:before		{ content: "\f027"; }
-.iconf-refresh:before		{ content: "\f028"; }
-.iconf-list-alt:before		{ content: "\f029"; }
-.iconf-lock:before		{ content: "\f02a"; }
-.iconf-tag:before		{ content: "\f02b"; }
-.iconf-tags:before		{ content: "\f02c"; }
-.iconf-list:before		{ content: "\f02d"; }
-.iconf-pencil:before		{ content: "\f02e"; }
-.iconf-edit:before		{ content: "\f02f"; }
-.iconf-share:before		{ content: "\f030"; }
-.iconf-check:before		{ content: "\f031"; }
-.iconf-play:before		{ content: "\f032"; }
-.iconf-pause:before		{ content: "\f033"; }
-.iconf-stop:before		{ content: "\f034"; }
-.iconf-eye-open:before		{ content: "\f035"; }
-.iconf-eye-close:before		{ content: "\f036"; }
-.iconf-check-empty:before		{ content: "\f037"; }
-.iconf-globe:before		{ content: "\f038"; }
-.iconf-tasks:before		{ content: "\f039"; }
-.iconf-filter:before		{ content: "\f03a"; }
-.iconf-plus-sign:before		{ content: "\f03b"; }
-.iconf-chevron-left:before		{ content: "\f03c"; }
-.iconf-chevron-right:before		{ content: "\f03d"; }
-.iconf-chevron-up:before		{ content: "\f03e"; }
-.iconf-chevron-down:before		{ content: "\f03f"; }
-.iconf-key:before		{ content: "\f040"; }
-.iconf-cogs:before		{ content: "\f041"; }
-.iconf-signout:before		{ content: "\f042"; }
-.iconf-signin:before		{ content: "\f043"; }
-.iconf-wrench:before		{ content: "\f044"; }
-.iconf-inbox:before		{ content: "\f045"; }
-.iconf-share:before		{ content: "\f046"; }
-.iconf-hdd:before		{ content: "\f047"; }
-.iconf-group:before		{ content: "\f048"; }
-.iconf-cloud:before		{ content: "\f049"; }
-.iconf-carret-left:before		{ content: "\f04a"; }
-.iconf-sort-down:before		{ content: "\f04b"; }
-.iconf-sort-up:before		{ content: "\f04c"; }
-.iconf-sitemap:before		{ content: "\f04d"; }
-.iconf-folder-open:before		{ content: "\f04e"; }
-.iconf-folder-open-alt:before		{ content: "\f04f"; }
-.iconf-folder-close:before		{ content: "\f050"; }
-.iconf-folder-close-alt:before		{ content: "\f051"; }
+}.iconf-music:before		{ content: "\f021"; }
+.iconf-search:before		{ content: "\f022"; }
+.iconf-user:before		{ content: "\f023"; }
+.iconf-film:before		{ content: "\f024"; }
+.iconf-file:before		{ content: "\f025"; }
+.iconf-download-alt:before		{ content: "\f026"; }
+.iconf-download:before		{ content: "\f027"; }
+.iconf-inbox:before		{ content: "\f028"; }
+.iconf-ok:before		{ content: "\f029"; }
+.iconf-remove:before		{ content: "\f02a"; }
+.iconf-cog:before		{ content: "\f02b"; }
+.iconf-trash:before		{ content: "\f02c"; }
+.iconf-repeat:before		{ content: "\f02d"; }
+.iconf-refresh:before		{ content: "\f02e"; }
+.iconf-list-alt:before		{ content: "\f02f"; }
+.iconf-lock:before		{ content: "\f030"; }
+.iconf-tag:before		{ content: "\f031"; }
+.iconf-tags:before		{ content: "\f032"; }
+.iconf-print:before		{ content: "\f033"; }
+.iconf-list:before		{ content: "\f034"; }
+.iconf-picture:before		{ content: "\f035"; }
+.iconf-pencil:before		{ content: "\f036"; }
+.iconf-edit:before		{ content: "\f037"; }
+.iconf-share:before		{ content: "\f038"; }
+.iconf-check:before		{ content: "\f039"; }
+.iconf-play:before		{ content: "\f03a"; }
+.iconf-pause:before		{ content: "\f03b"; }
+.iconf-stop:before		{ content: "\f03c"; }
+.iconf-eye-open:before		{ content: "\f03d"; }
+.iconf-eye-close:before		{ content: "\f03e"; }
+.iconf-bar-chart:before		{ content: "\f03f"; }
+.iconf-check-empty:before		{ content: "\f040"; }
+.iconf-globe:before		{ content: "\f041"; }
+.iconf-tasks:before		{ content: "\f042"; }
+.iconf-filter:before		{ content: "\f043"; }
+.iconf-plus-sign:before		{ content: "\f044"; }
+.iconf-chevron-left:before		{ content: "\f045"; }
+.iconf-chevron-right:before		{ content: "\f046"; }
+.iconf-chevron-up:before		{ content: "\f047"; }
+.iconf-chevron-down:before		{ content: "\f048"; }
+.iconf-key:before		{ content: "\f049"; }
+.iconf-cogs:before		{ content: "\f04a"; }
+.iconf-signout:before		{ content: "\f04b"; }
+.iconf-signin:before		{ content: "\f04c"; }
+.iconf-wrench:before		{ content: "\f04d"; }
+.iconf-inbox:before		{ content: "\f04e"; }
+.iconf-share:before		{ content: "\f04f"; }
+.iconf-hdd:before		{ content: "\f050"; }
+.iconf-group:before		{ content: "\f051"; }
+.iconf-cloud:before		{ content: "\f052"; }
+.iconf-save:before		{ content: "\f053"; }
+.iconf-carret-left:before		{ content: "\f054"; }
+.iconf-sort-down:before		{ content: "\f055"; }
+.iconf-sort-up:before		{ content: "\f056"; }
+.iconf-sitemap:before		{ content: "\f057"; }
+.iconf-file-alt:before		{ content: "\f058"; }
+.iconf-folder-open:before		{ content: "\f059"; }
+.iconf-folder-open-alt:before		{ content: "\f05a"; }
+.iconf-folder-close:before		{ content: "\f05b"; }
+.iconf-folder-close-alt:before		{ content: "\f05c"; }
diff --git a/module/web/static/fonts/fontawesome-webfont.eot b/module/web/static/fonts/fontawesome-webfont.eot
index 93036359a..003be9855 100644
--- a/module/web/static/fonts/fontawesome-webfont.eot
+++ b/module/web/static/fonts/fontawesome-webfont.eot
diff --git a/module/web/static/fonts/fontawesome-webfont.ttf b/module/web/static/fonts/fontawesome-webfont.ttf
index 6ac56d409..6a4169e81 100644
--- a/module/web/static/fonts/fontawesome-webfont.ttf
+++ b/module/web/static/fonts/fontawesome-webfont.ttf
diff --git a/module/web/static/fonts/fontawesome-webfont.woff b/module/web/static/fonts/fontawesome-webfont.woff
index f877b672a..04af9711a 100644
--- a/module/web/static/fonts/fontawesome-webfont.woff
+++ b/module/web/static/fonts/fontawesome-webfont.woff
diff --git a/module/web/static/fonts/fontawesome.txt b/module/web/static/fonts/fontawesome.txt
index c60ebeef4..7279cf794 100644
--- a/module/web/static/fonts/fontawesome.txt
+++ b/module/web/static/fonts/fontawesome.txt
@@ -1,7 +1,13 @@
 # List of icons needed for font-awesome
 # name, uni from http://icnfnt.com/
+music 001
 search 002
 user 007
+film 008
+file 016
+download-alt 019
+download 01a
+inbox 01c
 ok 00c
 remove 00d
 cog 013
@@ -12,7 +18,9 @@ list-alt 022
 lock 023
 tag 02b
 tags 02c
+print 02f
 list 03a
+picture 03e
 pencil 040
 edit 044
 share 045
@@ -22,6 +30,7 @@ pause 04c
 stop 04d
 eye-open 06e
 eye-close 070
+bar-chart 080
 check-empty 096
 globe 0ac
 tasks 0ae
@@ -41,10 +50,12 @@ share 045
 hdd 0a0
 group 0c0
 cloud 0c2
+save 0c7
 carret-left 0d9
 sort-down 0dd
 sort-up 0de
 sitemap 0e8
+file-alt 0f6
 folder-open 07c
 folder-open-alt 115
 folder-close 07b
diff --git a/module/web/static/img/icon.png b/module/web/static/img/icon.png
new file mode 100644
index 000000000..1ab4ca081
--- /dev/null
+++ b/module/web/static/img/icon.png
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index c7b87e871..ef1f5bba8 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,38 +1,63 @@
 define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
     function($, Backbone, _, App, ItemView) {
 
-    // Renders single file item
-    return ItemView.extend({
+        // Renders single file item
+        return ItemView.extend({
 
-        tagName: 'li',
-        className: 'file-view',
+            tagName: 'li',
+            className: 'file-view',
 //        template: _.template($("#template-file").html()),
-        template: _.compile($("#template-file").html()),
-        events: {
-            'click .checkbox': 'select'
-        },
-
-        initialize: function() {
-            this.listenTo(this.model, 'change', this.render);
-            this.listenTo(this.model, 'remove', this.destroy);
-        },
-
-        onDestroy: function() {
-        },
-
-        render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
-            return this;
-        },
-
-        select: function(e) {
-            e.preventDefault();
-            var checked = this.$('.checkbox').hasClass('checked');
-            // toggle class immediately, so no re-render needed
-            this.model.set('selected', !checked, {silent: true});
-            this.$('.checkbox').toggleClass('checked');
-            App.vent.trigger('file:selection');
-        }
-
-    });
-});
\ No newline at end of file
+            template: _.compile($("#template-file").html()),
+            events: {
+                'click .checkbox': 'select'
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'remove', this.destroy);
+            },
+
+            onDestroy: function() {
+            },
+
+            render: function() {
+                var data = this.model.toJSON();
+                if (data.download) {
+                    var status = data.download.status;
+                    // TODO: remove hardcoded states
+                    if (status === 1 || status === 11)
+                        data.offline = true;
+                    else if (status === 7)
+                        data.failed = true;
+                    else if (status === 2)
+                        data.online = true;
+                    else if (status === 9)
+                        data.waiting = true;
+                    else if (status === 10)
+                        data.downloading = true;
+                    else if (status === 5 || status === 6)
+                        data.finished = true;
+                }
+
+                this.$el.html(this.template(data));
+                if (this.model.get('selected'))
+                    this.$el.addClass('selected');
+                else
+                    this.$el.removeClass('selected');
+
+                this.$('.iconf-chevron-down').dropdown();
+
+                return this;
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$el.hasClass('selected');
+                // toggle class immediately, so no re-render needed
+                this.model.set('selected', !checked, {silent: true});
+                this.$el.toggleClass('selected');
+                App.vent.trigger('file:selection');
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 6ec187440..77789e790 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -101,7 +101,7 @@
                             </h3>

                             <div class="popover-content">

                                 <ul class="progress-list">

-                                    <li>

+                                    <li style="background-image: url('icons/sdf')">

                                         Some Download

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

 

@@ -113,7 +113,7 @@
                                             50%

                                         </span>

                                     </li>

-                                    <li>

+                                    <li style="background-image: url('icons/sdf')">

                                         Some Download

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

 

diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 5c15186df..c7bcb3783 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -38,7 +38,7 @@
                 <i class="iconf-chevron-down" data-toggle="dropdown">

                 </i>

                 <ul class="dropdown-menu">

-                    <li><a href="#"><i class="iconf-share"></i> Show</a></li>

+                    <li><a href="#"><i class="iconf-folder-open-alt"></i> Open</a></li>

                     <li><a href="#"><i class="iconf-edit"></i> Details</a></li>

                     <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>

                     <li><a href="#"><i class="iconf-refresh"></i> Recheck</a></li>

@@ -60,26 +60,38 @@
 

     <script type="text/template" id="template-file">

         <div class="file-row first">

-            <%= if selected %>

-            <i class="checkbox checked"></i>

-            <% else %>

             <i class="checkbox"></i>

-            <%/if%>

-

-            <i class="icon-file icon-white"></i>&nbsp;

+            <i class="iconf-file-alt icon-white"></i>&nbsp;

             <span class="name">

             <% name %>

             </span>

         </div>

+        <%= if finished %>

+        <div class="file-row second finished">

+        <% else %> <%= if failed %>

+        <div class="file-row second failed">

+        <% download.error %>

+        <% else %>

         <div class="file-row second">

+        <%/if%><%/if%>

             <% download.statusmsg %>

-                <span class="pull-right">

-                    Size: <% formatSize size %>

-                </span>

         </div>

 

         <div class="file-row third pull-right">

-            <% download.plugin %>

+            {#  TODO: file type as icon  #}

+            <% formatSize size %>

+            <i class="iconf-music"></i>

+            <img src="icons/<% download.plugin %>"/>

+            <% download.plugin %>&nbsp;

+            <i class="iconf-chevron-down" data-toggle="dropdown"></i>

+            <ul class="dropdown-menu">

+                <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>

+                <li><a href="#"><i class="iconf-refresh"></i> Restart</a></li>

+                <li><a href="#"><i class="iconf-download"></i> Download</a></li>

+                <li><a href="#"><i class="iconf-share"></i> Share</a></li>

+                <li class="divider"></li>

+                <li><a>Addons</a></li>

+            </ul>

         </div>

     </script>