improved dashboard a little

6 files changed, 152 insertions, 102 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index ab62cc657..4f82eb82e 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -60,10 +60,8 @@
 .package-view > div {

   color: @light;

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

-  font-weight: bold;

   border-radius: 5px;

   line-height: 28px;

-  cursor: pointer;

 }

 

 .package-view > div:hover {

@@ -75,10 +73,25 @@
   height: 100%;

   padding-left: 8px;

   padding-right: 8px;

+

+  i {

+    margin-top: 3px;

+  }

+

+  i.pull-right {

+    margin-top: 8px;

+  }

+

+  .badge {

+    margin-right: 4px;

+  }

+

 }

 

 .package-row.first {

   width: 50%;

+  font-weight: bold;

+  cursor: pointer;

 }

 

 .package-row.second {

@@ -87,10 +100,19 @@
   font-size: smaller;

 }

 

+.package-row.third {

+  line-height: 26px;

+}

+

 .package-view a {

   color: @light;

 }

 

+// Box containing the files

+.package-view > ul {

+  .gradient(left, @yellowLighter, @yellowLightest);

+//  box-shadow: 0 0 5px black;

+}

 /*

   File view

 */

@@ -101,7 +123,7 @@
 

 .file-view > div {

   border-radius: 5px;

-  .gradient(top,  @blueLighter, @blueLightest);

+//  .gradient(top,  @blueLighter, @blueLightest);

   line-height: 26px;

 }

 

@@ -119,6 +141,23 @@
 .file-row.first {

   width: 50%;

 }

+

 .file-row.second {

   width: 30%;

-}
\ No newline at end of file
+}

+/*

+FANCY CHECKBOXES

+*/

+.checkbox {

+  display: inline;

+  width: 20px;

+  height: 21px;

+  margin: -1px 4px 0 0;

+  vertical-align: middle;

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

+  cursor: pointer;

+}

+

+.checkbox .checked {

+  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 8fe9aeb0e..f0628b45a 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -36,6 +36,12 @@
 @blueDark: darken(spin(@blue, -5), 10%);

 @blueDarker: darken(spin(@blue, -10), 20%);

 

+@green: #468847;

+@greenLight: lighten(spin(@green, 5), 10%);

+

+@red: #b94a48;

+@redLight: lighten(spin(@red, 5), 10%);

+

 @emph: #FF7637;

 

 /*

diff --git a/module/web/static/img/default/checks_sheet.png b/module/web/static/img/default/checks_sheet.png
new file mode 100644
index 000000000..3cc2b0824
--- /dev/null
+++ b/module/web/static/img/default/checks_sheet.png
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 516c2f5d1..92e4d78a0 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -1,94 +1,94 @@
-define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/packageView', 'views/fileView'],
-    function($, Backbone, _, TreeCollection, packageView, fileView) {
-
-        // Renders whole PackageView
-        return Backbone.View.extend({
-
-            el: '#content',
-
-            events: {
-                'click #add': 'addPackage',
-                'keypress #name': 'addOnEnter',
-                'click #show_active': 'filter'
-            },
-
-            initialize: function() {
-                this.tree = new TreeCollection();
-
-            },
-
-            init: function() {
-                var self = this;
-                this.tree.fetch({success: function() {
-                    self.render();
-                }});
-            },
-
-            render: function() {
-                var packs = this.tree.get('packages'),
-                    files = this.tree.get('files'),
-                    el = this.$('#dashboard');
-
-                el.empty();
-                el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));
-                el.append($('<input id="name" type="text" size="20">'));
-                el.append($('<a id="add" href="#"> Add</a><br>'));
-
-                var ul = $('<ul></ul>');
-                packs.each(function(pack) {
-                    ul.append(new packageView({model: pack}).render().el);
-                });
-
-                el.append(ul);
-                el.append($('<br> Files: ' + files.size() + '<br>'));
-
-                ul = $('<ul></ul>');
-                files.each(function(file) {
-                    ul.append(new fileView({model: file}).render().el);
-                });
-
-                el.append(ul);
-                $('#name').focus();
-
-                return this;
-            },
-
-            addOnEnter: function(e) {
-                if (e.keyCode != 13) return;
-                this.addPackage(e);
-            },
-
-            addPackage: function(e) {
-                var self = this;
-                var settings = {
-                    type: 'POST',
-                    data: {
-                        name: JSON.stringify($('#name').val()),
-                        links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link'])
-                    },
-                    success: function() {
-                        self.tree.fetch({success: function() {
-                            self.render();
-                        }});
-                    }
-                };
-
-                $.ajax('api/addPackage', settings);
-                $('#name').val('');
-            },
-
-            toggle: false,
-
-            filter: function(e) {
-                var self = this;
-                this.tree.get('packages').each(function(item){
-                    if(!self.toggle)
-                       item.trigger('filter:added');
-                    else
-                        item.trigger('filter:removed');
-
-                });
-                self.toggle ^= true;
-            }
-        });
+define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/packageView', 'views/fileView'],

+    function($, Backbone, _, TreeCollection, packageView, fileView) {

+

+        // Renders whole PackageView

+        return Backbone.View.extend({

+

+            el: '#content',

+

+            events: {

+                'click #add': 'addPackage',

+                'keypress #name': 'addOnEnter',

+                'click #show_active': 'filter'

+            },

+

+            initialize: function() {

+                this.tree = new TreeCollection();

+

+            },

+

+            init: function() {

+                var self = this;

+                this.tree.fetch({success: function() {

+                    self.render();

+                }});

+            },

+

+            render: function() {

+                var packs = this.tree.get('packages'),

+                    files = this.tree.get('files'),

+                    el = this.$('#dashboard');

+

+            /*    el.empty();

+                el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));

+                el.append($('<input id="name" type="text" size="20">'));

+                el.append($('<a id="add" href="#"> Add</a><br>'));*/

+

+                var ul = $('<ul></ul>');

+                packs.each(function(pack) {

+                    ul.append(new packageView({model: pack}).render().el);

+                });

+

+                el.append(ul);

+                el.append($('<br> Files: ' + files.size() + '<br>'));

+

+                ul = $('<ul></ul>');

+                files.each(function(file) {

+                    ul.append(new fileView({model: file}).render().el);

+                });

+

+                el.append(ul);

+                $('#name').focus();

+

+                return this;

+            },

+

+            addOnEnter: function(e) {

+                if (e.keyCode != 13) return;

+                this.addPackage(e);

+            },

+

+            addPackage: function(e) {

+                var self = this;

+                var settings = {

+                    type: 'POST',

+                    data: {

+                        name: JSON.stringify($('#name').val()),

+                        links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link'])

+                    },

+                    success: function() {

+                        self.tree.fetch({success: function() {

+                            self.render();

+                        }});

+                    }

+                };

+

+                $.ajax('api/addPackage', settings);

+                $('#name').val('');

+            },

+

+            toggle: false,

+

+            filter: function(e) {

+                var self = this;

+                this.tree.get('packages').each(function(item){

+                    if(!self.toggle)

+                       item.trigger('filter:added');

+                    else

+                        item.trigger('filter:removed');

+

+                });

+                self.toggle ^= true;

+            }

+        });

     });
\ No newline at end of file
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index efbf6b76e..154e7af77 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -8,7 +8,7 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
         className: 'package-view',
         template: _.compile($("#template-package").html()),
         events: {
-            'click .package-header': 'load',
+            'click .package-row.first': 'load',
             'click .delete': 'delete'
         },
 
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 8275011f0..0d2b65565 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -15,20 +15,25 @@
     <script type="text/template" id="template-package">

         <div class="package-header">

             <div class="package-row first">

+                <span class="checkbox"></span>

+                <i class="icon-folder-close icon-white"></i>&nbsp;

                 Package <%= pid %>: <%= name %>

+

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

             </div>

             <div class="package-row second">

                 <span>

-                <%= stats.linkstotal %> Files (xy / z /t)

+                <%= stats.linksdone %> / <%= stats.linkstotal %>

                 </span>

                 <span class="pull-right">

                     <%= formatSize stats.sizedone %> / <%= formatSize stats.sizetotal %>

                 </span>

             </div>

 

-            <div class="package-row third">

-                <a class="delete"> Delete</a>

-                <a class="show-dialog"> Show</a>

+            <div class="package-row third pull-right">

+                <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag</span>

+                <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag2</span>

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

             </div>

         </div>

     </script>