integrated new package view

9 files changed, 234 insertions, 180 deletions

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