From c8691b220c882b47cdae460131c863cec5aa7fde Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 22 Dec 2012 23:14:59 +0100 Subject: improved dashboard a little --- module/web/static/css/default/dashboard.less | 47 ++++++- module/web/static/css/default/style.less | 6 + module/web/static/img/default/checks_sheet.png | Bin 0 -> 1178 bytes module/web/static/js/views/packageTreeView.js | 186 ++++++++++++------------- module/web/static/js/views/packageView.js | 2 +- module/web/templates/default/dashboard.html | 13 +- 6 files changed, 152 insertions(+), 102 deletions(-) create mode 100644 module/web/static/img/default/checks_sheet.png (limited to 'module') 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 Binary files /dev/null and b/module/web/static/img/default/checks_sheet.png differ 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($('Root: ' + this.tree.get('root').get('name') + ' ')); - el.append($('')); - el.append($(' Add
')); - - var ul = $(''); - packs.each(function(pack) { - ul.append(new packageView({model: pack}).render().el); - }); - - el.append(ul); - el.append($('
Files: ' + files.size() + '
')); - - 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($('Root: ' + this.tree.get('root').get('name') + ' ')); + el.append($('')); + el.append($(' Add
'));*/ + + var ul = $(''); + packs.each(function(pack) { + ul.append(new packageView({model: pack}).render().el); + }); + + el.append(ul); + el.append($('
Files: ' + files.size() + '
')); + + 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 @@ -- cgit v1.2.3