From 9a8389790a0f084dad285ab3047d655c675e3147 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Tue, 25 Dec 2012 14:40:21 +0100 Subject: improved add dialog + package view --- module/web/static/css/default/dashboard.less | 32 ++++++++++++++-- module/web/static/css/default/style.less | 56 ++++++++++++++++++++-------- module/web/static/js/views/packageView.js | 20 ++++++---- 3 files changed, 80 insertions(+), 28 deletions(-) (limited to 'module/web/static') diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index e60a21dfb..0c749eb36 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -110,18 +110,42 @@ .package-row.third { line-height: 26px; + } .package-view a { color: @light; } +// Tag area with different effect on hover +.tag-area { + display: inline-block; + + .badge i { + cursor: pointer; + &:hover { + background-position: -312px 0; // Remove icon + } + } + + .badge-ghost { + visibility: hidden; + cursor: pointer; + opacity: 0.5; + } + + &:hover .badge-ghost { + visibility: visible; + } + +} + // Box containing the files .package-view > ul { overflow: hidden; - .gradient(left, @light, @greenLight); -// box-shadow: 0 0 5px black; + .gradient(left, @light, @greenLight); // box-shadow: 0 0 5px black; } + /* File view */ @@ -131,8 +155,7 @@ } .file-view > div { - border-radius: 5px; -// .gradient(top, @blueLighter, @blueLightest); + border-radius: 5px; // .gradient(top, @blueLighter, @blueLightest); line-height: 26px; } @@ -154,6 +177,7 @@ .file-row.second { width: 30%; } + /* FANCY CHECKBOXES */ diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index e1b4e417e..7ad764542 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -161,27 +161,32 @@ a:hover { } .btn-yellow { - background-color: hsl(51, 99%, 55%) !important; + background-color: hsl(53, 96%, 44%) !important; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#feeb80), to(#fddb1a)); - background-image: -moz-linear-gradient(top, #feeb80, #fddb1a); - background-image: -ms-linear-gradient(top, #feeb80, #fddb1a); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feeb80), color-stop(100%, #fddb1a)); - background-image: -webkit-linear-gradient(top, #feeb80, #fddb1a); - background-image: -o-linear-gradient(top, #feeb80, #fddb1a); - background-image: linear-gradient(#feeb80, #fddb1a); - border-color: #fddb1a #fddb1a hsl(51, 99%, 50%); - color: #333 !important; + background-image: -khtml-gradient(linear, left top, left bottom, from(#fbe64b), to(#dbc204)); + background-image: -moz-linear-gradient(top, #fbe64b, #dbc204); + background-image: -ms-linear-gradient(top, #fbe64b, #dbc204); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbe64b), color-stop(100%, #dbc204)); + background-image: -webkit-linear-gradient(top, #fbe64b, #dbc204); + background-image: -o-linear-gradient(top, #fbe64b, #dbc204); + background-image: linear-gradient(#fbe64b, #dbc204); + border-color: #dbc204 #dbc204 hsl(53, 96%, 39%); + color: #fff !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); -webkit-font-smoothing: antialiased; + + .caret { + border-bottom-color: #FFFFFF; + border-top-color: #FFFFFF; + } + } /* Header */ -header { -// background-color: @greyDark; +header { // background-color: @greyDark; background: url("../../img/default/bgpatterndark.png") repeat; height: @header-height; position: fixed; @@ -319,8 +324,7 @@ header .logo { #speedgraph { float: right; width: 14%; - height: 60px; - // similiar as header_box + height: 60px; // similiar as header_box margin: 8px 8px 0 8px; font-family: sans-serif } @@ -341,8 +345,7 @@ header .logo { /* Footer */ -footer { -// background-color: @greyDark; +footer { // background-color: @greyDark; background: url("../../img/default/bgpatterndark.png") repeat; color: @grey; height: @footer-height; @@ -425,4 +428,25 @@ footer h2 { background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); z-index: 50; opacity: 0; +} + +div.modal-header { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + background-color: @blueDark; + color: #FFFFFF; + + .close { + color: @light; + } + +} + +div.modal-body { + max-height: 100%; +} + +div.modal { + width: 600px; + } \ 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 22cc846ef..844c6fa0a 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -9,10 +9,12 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], template: _.compile($("#template-package").html()), events: { 'click .package-row .name': 'expand', - 'click .icon-remove': 'delete', + 'click .btn-remove': 'delete', 'click .checkbox': 'select' }, + ul: null, + // File views visible expanded: false, @@ -32,7 +34,7 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], var container = this.$('.package-header'); if (!container.length) this.$el.html(this.template(this.model.toJSON())); - else if(!fileOnly) + else if (!fileOnly) container.replaceWith(this.template(this.model.toJSON())); // TODO: could be done in template @@ -42,18 +44,19 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], this.$('.checkbox').removeClass('checked'); // Only create this views a single time - var ul = this.$('ul'); - if (!ul.length && this.model.isLoaded()) { + if (!this.ul && this.model.isLoaded()) { console.log('Rendered content of package ' + this.model.get('pid')); - ul = $(''); + var ul = $(''); + ul.addClass('file-items'); - if(!this.expanded) + if (!this.expanded) ul.hide(); this.model.get('files').each(function(file) { ul.append(new fileView({model: file}).render().el); }); this.$el.append(ul); + this.ul = ul; } return this; }, @@ -73,15 +76,16 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], e.preventDefault(); var self = this; + // this assumes the ul was created after item was rendered if (!this.expanded) { this.model.fetch({silent: true, success: function() { self.render(true); - self.$('ul').show(); + self.ul.show(); self.expanded = true; }}); } else { this.expanded = false; - this.$('ul').hide(); + this.ul.hide(); } }, -- cgit v1.2.3