From c8bee03f8c0ca82c3981724e5bc661f630d9ab7e Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 19 Feb 2013 22:13:10 +0100
Subject: integrated new package view

---
 module/web/static/css/default/common.less     |   4 +
 module/web/static/css/default/dashboard.less  | 103 ++++++--------------------
 module/web/static/css/default/style.less      |  40 +++++++---
 module/web/static/js/utils/animations.js      |  69 +++++++++++------
 module/web/static/js/views/fileView.js        |  11 ++-
 module/web/static/js/views/headerView.js      |   7 +-
 module/web/static/js/views/packageTreeView.js |  67 +++++++++++------
 module/web/static/js/views/packageView.js     |  64 +++++++---------
 module/web/static/js/views/selectionView.js   |  49 ++++++++++++
 9 files changed, 234 insertions(+), 180 deletions(-)
 create mode 100644 module/web/static/js/views/selectionView.js

(limited to 'module/web/static')

diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less
index 0d46e2a5b..ba96bb4ed 100644
--- a/module/web/static/css/default/common.less
+++ b/module/web/static/css/default/common.less
@@ -65,4 +65,8 @@
   -o-transition: @prop @time @ease;
   -ms-transition: @prop @time @ease;
   transition: @prop @time @ease;
+}
+
+.default-shadow {
+  box-shadow: 0 0 5px @dark;
 }
\ No newline at end of file
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index accec18a9..a582e7326 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -14,8 +14,6 @@
   line-height: 25px;
   margin: 4px 0;
   border-bottom: 1px dashed @grey;
-//  text-shadow: 1px 0px @grey;
-//  box-shadow: 10px 10px 5px @grey;
 }
 
 /*
@@ -39,11 +37,10 @@
   z-index: -1; // lies under package
   border: 1px solid @grey;
   border-radius: 5px;
-  box-shadow: 4px 4px 5px @dark;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.75);
 }
 
-.package-item {
-  cursor: pointer;
+.package-view {
   padding-bottom: 4px;
   margin: 8px 0;
   position: relative;
@@ -53,8 +50,8 @@
   -moz-hyphens: auto;
   hyphens: auto;
 
-  i.iconf-check-empty {
-    cursor: move;
+  i {
+    cursor: pointer;
   }
 
   .progress {
@@ -87,8 +84,8 @@
   }
 }
 
-.package-info {
-  font-size: small;
+.package-name {
+  cursor: pointer;
 }
 
 .package-indicator {
@@ -101,10 +98,6 @@
   height: @frame-top;
   line-height: @frame-top;
 
-  i {
-    cursor: pointer;
-  }
-
   i:hover {
     color: @green;
   }
@@ -143,35 +136,33 @@
   }
 
 }
+
 /*
-  Package View
+  File View
 */
 
-.package-view {
-  margin-bottom: 3px;
+.file-list {
+  list-style: none;
+  margin: 0;
 }
 
-.package-view > div {
+.file-view {
+  margin-bottom: 3px;
   color: @light;
   .gradient(top, @blue, @blueLight); //  background-color: @blue;
   border-radius: 5px;
   line-height: 28px;
+  &:hover {
+    .gradient(top, @blue, @blueDark);
+  }
 }
 
-.package-view > div:hover {
-  .gradient(top, @blue, @blueDark);
-}
-
-.package-row {
+.file-row {
   display: inline-block;
   height: 100%;
   padding-left: 8px;
   padding-right: 8px;
 
-  .name {
-    cursor: pointer;
-  }
-
   i {
     margin-top: 3px;
   }
@@ -179,15 +170,10 @@
   i.pull-right {
     margin-top: 8px;
   }
-
-  .badge {
-    margin-right: 4px;
-  }
-
 }
 
-.package-row.first {
-  width: 40%;
+.file-row.first {
+  width: 50%;
   font-weight: bold;
 
   i {
@@ -196,63 +182,20 @@
 
 }
 
-.package-row.second {
+.file-row.second {
   width: 20%;
   .gradient(top, @blueDark, @blueDarker);
   font-size: smaller;
 }
 
-.package-row.third {
-  line-height: 26px;
-
-}
-
-.package-view a {
+.file-view a {
   color: @light;
 }
 
-// Box containing the files
-.package-view > ul {
-  overflow: hidden;
-  .gradient(left, @light, @greenLight); //  box-shadow: 0 0 5px black;
-}
-
-/*
-  File view
-*/
-
-.file-view {
-  margin-top: 3px;
-}
-
-.file-view > div {
-  border-radius: 5px; //  .gradient(top,  @blueLighter, @blueLightest);
-  line-height: 26px;
-}
-
-.file-view > div:hover {
-  .gradient(top, @blue, @blueLight)
-}
-
-.file-row {
-  display: inline-block;
-  height: 100%;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-.file-row.first {
-  width: 50%;
-}
-
-.file-row.second {
-  width: 30%;
-}
-
 /*
 FANCY CHECKBOXES
 */
-.checkbox {
+.file-view .checkbox {
   display: inline;
   width: 20px;
   height: 21px;
@@ -262,6 +205,6 @@ FANCY CHECKBOXES
   cursor: pointer;
 }
 
-.checkbox.checked {
+.file-view .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 964895f38..7db464c92 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -145,8 +145,8 @@ header:before {
   bottom: 0;
   left: 0;
   background-color: transparent;
-  box-shadow: 0 0 5px black;
   z-index: -1;
+  .default-shadow;
 }
 
 header div.left {
@@ -309,22 +309,38 @@ header .logo {
   font-family: sans-serif
 }
 
-/*
-   Actionbar
-*/
-
-#notifications-area {
-  display: inline-block;
-  width: 100%;
-  padding: 4px 0 6px 0;
-  text-align: center;
+.header-area {
+  display: none; // hidden by default
+  overflow: hidden;
+  position: absolute;
   line-height: 18px;
-  font-size: small;
+  top: @header-height;
+  padding: 4px 10px 6px 10px;
+  text-align: center;
+  border-radius: 0 0 6px 6px;
   color: @light;
   background-color: @greyDark;
-  border-radius: 0 0 6px 6px;
+  .default-shadow;
+}
+
+#notification-area {
+  .header-area;
+  left: 140px;
+}
+
+#selection-area {
+  .header-area;
+  left: 50%;
+  bottom: -28px;
+  min-width: 15%;
+//  color: @dark;
+//  background-color: @light;
 }
 
+/*
+   Actionbar
+*/
+
 .nav > li > a:hover {
   color: @blue;
 }
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 657bd2bec..245614ea7 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -4,6 +4,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
     // Important function to have slide animations
     jQuery.fn.appendWithHeight = function(element, hide) {
         var o = jQuery(this[0]);
+        element = jQuery(element);
 
         // TODO: additionally it could be placed out of viewport first
         // The real height can only be retrieved when element is on DOM and display:true
@@ -24,6 +25,50 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         return this;
     };
 
+    // Shortcut to have a animation when element is added
+    jQuery.fn.appendWithAnimation = function(element, animation) {
+        var o = jQuery(this[0]);
+        if (animation === true)
+            o.hide();
+
+        o.append(element);
+
+        if (animation === true)
+            o.fadeIn();
+
+        return this;
+    };
+
+    // calculate the height and write it to data, better used on invisible elements
+    jQuery.fn.calculateHeight = function() {
+        var o = jQuery(this[0]);
+        var height = o.height();
+        if (!height) {
+            var display = o.css('display');
+            o.css('visibility', 'hidden');
+            o.show();
+            height = o.height();
+
+            o.css('display', display);
+            o.css('visibility', '');
+        }
+
+        o.data('height', height);
+        return this;
+    };
+
+    jQuery.fn.slideOut = function() {
+        var o = jQuery(this[0]);
+        o.animate({height: o.data('height'), opacity: 'show'});
+        return this;
+    };
+
+    jQuery.fn.slideIn = function() {
+        var o = jQuery(this[0]);
+        o.animate({height: 0, opacity: 'hide'});
+        return this;
+    };
+
     // TODO: sloppy chaining
     //
     // in functions not possible without previous out
@@ -42,7 +87,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         if (!this.data('height')) {
             var height = this.height();
             this.css({height: height});
-            this.data('height', height)
+            this.data('height', height);
         }
         this.transition({
             height: '0px',
@@ -52,28 +97,6 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
 
     };
 
-    jQuery.fn.slideIn = function(speed, easing, callback) {
-        var height = this.data('height') || '100%';
-        this.transition({
-            height: height,
-            opacity: 'show'
-        }, speed, easing, callback);
-
-    };
-
-    jQuery.fn.slideOut = function(speed, easing, callback) {
-        if (!this.data('height')) {
-            var height = this.height();
-            this.css({height: height, overflow: 'hidden'});
-            this.data('height', height)
-        }
-        this.transition({
-            height: '0px',
-            opacity: 'hide'
-        }, speed, easing, callback);
-
-    };
-
     jQuery.fn._transit = jQuery.fn.transit;
 
     // Overriding transit plugin to support hide and show
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 7e8f899a9..86f7b33d2 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -9,7 +9,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
 //        template: _.template($("#template-file").html()),
         template: _.compile($("#template-file").html()),
         events: {
-
+            'click .checkbox': 'select'
         },
 
         initialize: function() {
@@ -25,6 +25,15 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
         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');
         }
 
     });
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 7effcf79d..43c66b99f 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,4 +1,4 @@
-define(['jquery', 'backbone', 'flot'], function($, Backbone) {
+define(['jquery', 'underscore', 'backbone', 'flot'], function($, _, Backbone) {
     // Renders the header with all information
     return Backbone.View.extend({
 
@@ -12,9 +12,14 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone) {
 
         // Will hold the link grabber
         grabber: null,
+        notifications: null,
+        selections: null,
 
         initialize: function() {
 
+            this.notifications = this.$('#notification-area').calculateHeight();
+            this.selections = this.$('#selection-area').calculateHeight();
+
             var totalPoints = 100;
             var data = [];
 
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 8791a93f2..41db0dc2c 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -1,5 +1,6 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'views/packageView', 'views/fileView'],
-    function($, Backbone, _, App, TreeCollection, packageView, fileView) {
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+    'views/packageView', 'views/fileView', 'views/selectionView'],
+    function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView) {
 
         // Renders whole PackageView
         return Backbone.View.extend({
@@ -12,17 +13,27 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
 
             // <ul> holding the packages
             packageUL: null,
+            // <ul> displaying the files
+            fileUL: null,
+            // current open model
+            opened: null,
+            // Current open files
+            files: null,
 
             initialize: function() {
                 var self = this;
                 this.tree = new TreeCollection();
 
+                var view = new selectionView(this.tree);
+
                 // When package is added we reload the data
                 App.vent.on('package:added', function() {
                     console.log('Package tree caught, package:added event');
                     self.tree.fetch();
                 });
 
+                App.vent.on('dashboard:loading', _.bind(this.loading, this));
+                App.vent.on('dashboard:show', _.bind(this.show, this));
             },
 
             init: function() {
@@ -37,29 +48,19 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
                         console.log('Package ' + pack.get('pid') + ' added to tree');
                         self.appendPackage(pack, 0, true);
 
-                    })
+                    });
                 }});
             },
 
             render: function() {
-                var packs = this.tree.get('packages'),
-                    files = this.tree.get('files'),
-                    el = this.$('#dashboard');
-
-                el.empty();
+                var packs = this.tree.get('packages');
+                this.files = this.tree.get('files');
 
-                this.packageUL = $('<ul></ul>');
+                this.packageUL = this.$('.package-list');
                 packs.each(_.bind(this.appendPackage, this));
 
-                el.append(this.packageUL);
-                el.append($('<br> Files: ' + files.size() + '<br>'));
-
-                var ul = $('<ul></ul>');
-                files.each(function(file) {
-                    ul.append(new fileView({model: file}).render().el);
-                });
-
-                el.append(ul);
+                this.fileUL = this.$('.file-list');
+                this.files.each(_.bind(this.appendFile, this));
 
                 return this;
             },
@@ -68,19 +69,37 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
             // Append a package to the list, index, animate it
             appendPackage: function(pack, i, animation) {
                 var el = new packageView({model: pack}).render().el;
-                if (animation == true)
-                    $(el).hide();
+                this.packageUL.appendWithAnimation(el, animation);
+            },
 
-                this.packageUL.append(el);
+            appendFile: function(file, i, animation) {
+                var el = new fileView({model: file}).render().el;
+                this.fileUL.appendWithAnimation(el, animation);
+            },
 
-                if (animation == true)
-                    $(el).fadeIn();
+            loading: function(model) {
+                // nothing to load when it is already open
+//                if (this.opened === model)
+//                    return;
+                // TODO: do not rerender already opened
+                this.opened = model;
+                this.files = null;
+//                this.fileUL.fadeOut();
+                this.fileUL.empty();
             },
 
+            failure: function() {
+                // TODO
+            },
+
+            show: function(files) {
+                this.files = files;
+                files.each(_.bind(this.appendFile, this));
+                this.fileUL.fadeIn();
+            },
 
             // TODO: remove this debug stuff
             toggle: false,
-
             filter: function(e) {
                 var self = this;
                 this.tree.get('packages').each(function(item) {
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 2c1541c7f..38b335dc9 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
-    function($, itemView, _, fileView) {
+define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
+    function($, App, itemView, _) {
 
         // Renders a single package item
         return itemView.extend({
@@ -8,14 +8,14 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
             className: 'package-view',
             template: _.compile($("#template-package").html()),
             events: {
-                'click .package-row .name': 'expand',
-                'click .btn-remove': 'delete',
-                'click .checkbox': 'select'
+                'click .package-name': 'open',
+                'click .iconf-trash': 'delete',
+                'click .select': 'select'
             },
 
+            // Ul for child packages (unused)
             ul: null,
-
-            // File views visible
+            // Currently unused
             expanded: false,
 
             initialize: function() {
@@ -30,34 +30,9 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
             },
 
             // Render everything, optional only the fileViews
-            render: function(fileOnly) {
-                var container = this.$('.package-header');
-                if (!container.length)
-                    this.$el.html(this.template(this.model.toJSON()));
-                else if (!fileOnly)
-                    container.replaceWith(this.template(this.model.toJSON()));
-
-                // TODO: could be done in template
-                if (this.model.get('checked'))
-                    this.$('.checkbox').addClass('checked');
-                else
-                    this.$('.checkbox').removeClass('checked');
-
-                // Only create this views a single time
-                if (!this.ul && this.model.isLoaded()) {
-                    console.log('Rendered content of package ' + this.model.get('pid'));
-                    var ul = $('<ul></ul>');
-                    ul.addClass('file-items');
+            render: function() {
+                this.$el.html(this.template(this.model.toJSON()));
 
-                    this.model.get('files').each(function(file) {
-                        ul.append(new fileView({model: file}).render().el);
-                    });
-
-                    // Hide the element when not expanded
-                    this.$el.appendWithHeight(ul, !this.expanded);
-
-                    this.ul = ul;
-                }
                 return this;
             },
 
@@ -67,9 +42,11 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
                     self.destroy();
                 });
 
-                // TODO destroy the fileViews ?
+                // TODO: display other package
             },
 
+
+            // TODO
             // Toggle expanding of packages
             expand: function(e) {
                 e.preventDefault();
@@ -88,13 +65,22 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
                 }
             },
 
+            open: function(e) {
+                var self = this;
+                App.vent.trigger('dashboard:loading', this.model);
+                this.model.fetch({silent: true, success: function() {
+                    console.log('Package ' + self.model.get('pid') + ' loaded');
+                    App.vent.trigger('dashboard:show', self.model.get('files'));
+                }});
+            },
+
             select: function(e) {
                 e.preventDefault();
-                var checked = this.$('.checkbox').hasClass('checked');
+                var checked = this.$('.select').hasClass('iconf-check');
                 // toggle class immediately, so no re-render needed
-                this.model.set('checked', !checked, {silent: true});
-                this.$('.checkbox').toggleClass('checked');
+                this.model.set('selected', !checked, {silent: true});
+                this.$('.select').toggleClass('iconf-check').toggleClass('iconf-check-empty');
+                App.vent.trigger('package:selection');
             }
-
         });
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
new file mode 100644
index 000000000..5cb22b776
--- /dev/null
+++ b/module/web/static/js/views/selectionView.js
@@ -0,0 +1,49 @@
+define(['jquery', 'backbone', 'underscore', 'app'],
+    function($, Backbone, _, App) {
+
+        // Renders context actions for selection packages and files
+        return Backbone.View.extend({
+            el: '#selection-area',
+            template: _.compile($("#template-select").html()),
+
+            // available packages
+            tree: null,
+            // selected files
+            files: null,
+            // needed to know when slide down
+            current: 0,
+
+            initialize: function(tree) {
+                this.tree = tree;
+                this.files = tree.get('files');
+
+                App.vent.on('dashboard:show', _.bind(this.set_files, this));
+                App.vent.on('package:selection', _.bind(this.render, this));
+                App.vent.on('file:selection', _.bind(this.render, this));
+            },
+
+            render: function() {
+                var files = 0;
+                if (this.files)
+                    files = this.files.where({selected: true}).length;
+
+                var packs = this.tree.get('packages').where({selected: true}).length;
+
+                if (files + packs > 0)
+                    this.$el.html(this.template({files: files, packs: packs}));
+
+                if (files + packs > 0 && this.current === 0)
+                    this.$el.slideOut();
+                else if (files + packs === 0 && this.current > 0)
+                    this.$el.slideIn();
+
+                this.current = files + packs;
+
+            },
+
+            set_files: function(files) {
+                this.files = files;
+                this.render();
+            }
+        });
+    });
\ No newline at end of file
-- 
cgit v1.2.3