Merge lp:~stephen-stewart/snapweb/remote-and-local-collections-with-sorting-and-filtering into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

* add sorting
* allow user to change list style
* split out collections

* add sorting
* allow user to change list style
* split out collections

[Sergio Schvezov (sergiusens)]

review: Approve

=== added file 'www/src/css/button.css'
--- www/src/css/button.css	1970-01-01 00:00:00 +0000
+++ www/src/css/button.css	2015-05-27 15:47:41 +0000
@@ -0,0 +1,50 @@
+/** @define b-button; weak */
+
+.b-button__group {
+  display:flex;
+}
+
+.b-button__group + .b-button__group {
+  margin-left:8px;
+}
+
+.b-button__group > * {
+  padding:3px 10px;
+}
+
+.b-button__group .b-button {
+  border:1px solid #ccc;
+  border-radius:3px;
+  background-color:#efefef;
+  color:#666;
+  user-select: none;
+  cursor: pointer;
+}
+
+.b-button__group .b-button_active {
+  background-color:#fff;
+}
+
+.b-button__group .b-button:hover {
+  background-color:#fff;
+}
+
+.b-button__group .b-button:nth-of-type(1) {
+  border-right:none;
+  border-top-right-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.b-button__group .b-button:nth-last-of-type(1) {
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
+}
+
+.b-button__group .b-button:not(:nth-of-type(1)):not(:nth-last-of-type(1)) {
+  border-right:none;
+  border-radius:0;
+}
+
+.b-button__group .b-button:nth-of-type(1):nth-last-of-type(1) {
+  border-radius:3px;
+}

=== modified file 'www/src/css/headline.css'
--- www/src/css/headline.css	2015-05-27 15:47:41 +0000
+++ www/src/css/headline.css	2015-05-27 15:47:41 +0000
@@ -3,7 +3,13 @@
 .b-headline {
 }
 
+.b-headline .b-layout__container {
+  display:flex;
+  align-items: baseline;
+}
+
 .b-headline__h1 {
+  flex:1;
   font-size:18px;
   font-weight:400;
   margin:20px 15px 5px 15px;

=== modified file 'www/src/css/snaplist.css'
--- www/src/css/snaplist.css	2015-05-27 15:47:41 +0000
+++ www/src/css/snaplist.css	2015-05-27 15:47:41 +0000
@@ -7,6 +7,12 @@
   cursor: pointer;
 }
 
+.b-snaplist__actions {
+  display:flex;
+  font-size: 11px;
+  justify-content: flex-end;
+}
+
 /** grid style **/
 
 .b-snaplist_grid {
@@ -54,7 +60,10 @@
   font-size:10px;
 }
 
-.b-snaplist_grid .b-snaplist__size ~ * {
+.b-snaplist_grid .b-snaplist__version,
+.b-snaplist_grid .b-snaplist__type,
+.b-snaplist_grid .b-snaplist__origin,
+.b-snaplist_grid .b-snaplist__actions {
   display:none;
 }
 
@@ -79,7 +88,7 @@
 /** row style **/
 
 .b-snaplist_row {
-  margin:3em;
+  margin:1em 0;
 }
 
 .b-snaplist_row .b-snaplist__item {

=== modified file 'www/src/js/collections/snaplist.js'
--- www/src/js/collections/snaplist.js	2015-04-24 11:15:41 +0000
+++ www/src/js/collections/snaplist.js	2015-05-27 15:47:41 +0000
@@ -7,5 +7,8 @@
 
 module.exports = Backbone.Collection.extend({
   url: CONF.PACKAGES,
-  model: Snap
+  model: Snap,
+  comparator: function(model) {
+    return model.get('name');
+  }
 });

=== modified file 'www/src/js/controllers/store.js'
--- www/src/js/controllers/store.js	2015-04-24 11:15:41 +0000
+++ www/src/js/controllers/store.js	2015-05-27 15:47:41 +0000
@@ -2,14 +2,14 @@
 var Marionette = require('backbone.marionette');
 var Radio = require('backbone.radio');
 var StoreLayoutView = require('../views/store.js');
-var Bask = require('../collections/snaplist.js');
+var Snaplist = require('../collections/snaplist.js');
 
 module.exports = {
   index: function() {
     var chan = Radio.channel('root');
-    var storeBask = new Bask();
+    var storeSnaplist = new Snaplist();
 
-    storeBask.fetch({
+    storeSnaplist.fetch({
       success: function(snaplist) {
         var view =  new StoreLayoutView({
           collection: snaplist

=== modified file 'www/src/js/templates/home.hbs'
--- www/src/js/templates/home.hbs	2015-05-27 15:47:41 +0000
+++ www/src/js/templates/home.hbs	2015-05-27 15:47:41 +0000
@@ -1,6 +1,1 @@
-<div class="b-headline">
-  <div class="b-layout__container">
-    <h1 class="b-headline__h1">Installed snaps</h1>
-  </div>
-</div>
 <div class="region-installed"></div>

=== added file 'www/src/js/templates/snaplist.hbs'
--- www/src/js/templates/snaplist.hbs	1970-01-01 00:00:00 +0000
+++ www/src/js/templates/snaplist.hbs	2015-05-27 15:47:41 +0000
@@ -0,0 +1,23 @@
+{{#if title}}
+<div class="b-headline">
+  <div class="b-layout__container">
+    <h1 class="b-headline__h1">{{ title }}</h1>
+    <div class="b-snaplist__actions">
+      {{#if canSort}}
+      <div class="b-button__group">
+        <div id="sortAlpha" class="b-button b-button_small{{#if isAlpha}} b-button_active{{/if}}">A-Z</div>
+        <div id="sortBytes" class="b-button b-button_small{{#unless isAlpha}} b-button_active{{/unless}}">kB</div>
+      </div>
+      {{/if}}
+      {{#if canStyle}}
+      <div class="b-button__group">
+        <div id="styleGrid" class="b-button b-button_small{{#if isGrid}} b-button_active{{/if}}">Grid</div>
+        <div id="styleRow" class="b-button b-button_small{{#unless isGrid}} b-button_active{{/unless}}">Row</div>
+      </div>
+      {{/if}}
+    </div>
+  </div>
+</div>
+{{/if}}
+<div class="b-snaplist b-snaplist_{{#if isGrid}}grid{{else}}row{{/if}}">
+</div>

=== modified file 'www/src/js/templates/store.hbs'
--- www/src/js/templates/store.hbs	2015-05-27 15:47:41 +0000
+++ www/src/js/templates/store.hbs	2015-05-27 15:47:41 +0000
@@ -1,1 +1,1 @@
-<div class="region-product"></div>
+<div class="region-snaplist"></div>

=== added file 'www/src/js/templates/storelist-item.hbs'
--- www/src/js/templates/storelist-item.hbs	1970-01-01 00:00:00 +0000
+++ www/src/js/templates/storelist-item.hbs	2015-05-27 15:47:41 +0000
@@ -0,0 +1,11 @@
+<div class="b-icon" data-type="{{type}}">
+  <img src="{{ icon }}" width="90" height="90">
+</div>
+<div class="b-snaplist__name">{{ name }}</div>
+{{!-- only name is shown in grid view, everything after is hidden --}}
+<div class="b-snaplist__version">{{ version }}</div>
+<div class="b-snaplist__type">{{ type }}</div>
+<div class="b-snaplist__origin">{{ origin }}</div>
+<div class="b-snaplist__actions">
+  {{> installer}}
+</div>

=== modified file 'www/src/js/views/home.js'
--- www/src/js/views/home.js	2015-05-27 15:47:41 +0000
+++ www/src/js/views/home.js	2015-05-27 15:47:41 +0000
@@ -1,7 +1,7 @@
 // home view
 var Backbone = require('backbone');
 var Marionette = require('backbone.marionette');
-var BaskView = require('./snaplist.js');
+var SnapListView = require('./snaplist.js');
 var template = require('../templates/home.hbs');
 
 module.exports = Backbone.Marionette.LayoutView.extend({
@@ -14,9 +14,15 @@
 
   onBeforeShow: function() {
     // TODO if collection empty use emptyView
-    this.showChildView('installedRegion', new BaskView({
-      collection: this.collection,
-      style: 'grid'
+    this.showChildView('installedRegion', new SnapListView({
+      model: new Backbone.Model({
+        title: 'Installed snaps',
+        isGrid: true,
+        isAlpha: true,
+        canSort: true,
+        canStyle: true
+      }),
+      collection: this.collection
     }));
   },
 

=== modified file 'www/src/js/views/snaplist.js'
--- www/src/js/views/snaplist.js	2015-05-08 20:03:48 +0000
+++ www/src/js/views/snaplist.js	2015-05-27 15:47:41 +0000
@@ -1,21 +1,72 @@
 // snaplist view
 var _ = require('lodash');
+var $ = require('jquery');
 var Backbone = require('backbone');
+Backbone.$ = $;
 var Marionette = require('backbone.marionette');
 var SnaplistItemView = require('../views/snaplist-item.js');
 var EmptySnaplistView = require('./empty-snaplist.js');
+var template = require('../templates/snaplist.hbs');
 var CONF = require('../config.js');
 
-module.exports = Marionette.CollectionView.extend({
-
-  className: function() {
-    var style = this.options.style || 'row';
-
-    if (style === 'row') {
-      return 'b-snaplist b-snaplist_row';
-    } else if (style === 'grid') {
-      return 'b-snaplist b-snaplist_grid';
-    }
+module.exports = Marionette.CompositeView.extend({
+
+  childViewContainer: '.b-snaplist',
+
+  template : function(model) {
+    return template(model);
+  },
+
+  ui: {
+    'sortAlpha': '#sortAlpha',
+    'sortBytes': '#sortBytes',
+    'styleRow': '#styleRow',
+    'styleGrid': '#styleGrid'
+  },
+
+  events: {
+    'click @ui.sortBytes':  'sortBytes',
+    'click @ui.sortAlpha':  'sortAlpha',
+    'click @ui.styleRow':   'styleRow',
+    'click @ui.styleGrid':  'styleGrid'
+  },
+
+  sortAlpha: function() {
+    this.model.set('isAlpha', true);
+    this.viewComparator = function(model) {
+      return model.get('name');
+    };
+    this.render();
+  },
+
+  sortBytes: function() {
+    this.model.set('isAlpha', false);
+    this.viewComparator = function(model) {
+      return -model.get('installed_size');
+    };
+    this.render();
+  },
+
+  styleGrid: function() {
+    this.model.set('isGrid', true);
+
+    this.$('.b-snaplist')
+    .removeClass('b-snaplist_row')
+    .addClass('b-snaplist_grid');
+
+    this.$('#styleRow').removeClass('b-button_active');
+    this.$('#styleGrid').addClass('b-button_active');
+  },
+
+  styleRow: function() {
+    this.model.set('isGrid', false);
+
+    this.$('.b-snaplist')
+    .removeClass('b-snaplist_grid')
+    .addClass('b-snaplist_row');
+
+    this.$('#styleGrid').removeClass('b-button_active');
+    this.$('#styleRow').addClass('b-button_active');
   },
 
   childView: SnaplistItemView,

=== modified file 'www/src/js/views/store.js'
--- www/src/js/views/store.js	2015-04-24 20:47:44 +0000
+++ www/src/js/views/store.js	2015-05-27 15:47:41 +0000
@@ -1,22 +1,31 @@
 // store layout view
 var Backbone = require('backbone');
 var Marionette = require('backbone.marionette');
-var BaskView = require('./snaplist.js');
+var StorelistView = require('./storelist.js');
 var template = require('../templates/store.hbs');
 
 module.exports = Backbone.Marionette.LayoutView.extend({
 
+  className: 'b-layout__container',
+
   template : function() {
     return template();
   },
 
   onBeforeShow: function() {
-    this.showChildView('productRegion', new BaskView({
+    this.showChildView('store', new StorelistView({
+      model: new Backbone.Model({
+        title: 'Store snaps',
+        isGrid: false,
+        isAlpha: true,
+        canSort: false,
+        canStyle: true
+      }),
       collection: this.collection
     }));
   },
 
   regions: {
-    productRegion: '.region-product'
+    store: '.region-snaplist'
   }
 });

=== added file 'www/src/js/views/storelist-item.js'
--- www/src/js/views/storelist-item.js	1970-01-01 00:00:00 +0000
+++ www/src/js/views/storelist-item.js	2015-05-27 15:47:41 +0000
@@ -0,0 +1,10 @@
+// store list item view
+
+var SnapListItemView = require('./snaplist-item.js');
+var template = require('../templates/storelist-item.hbs');
+
+module.exports = SnapListItemView.extend({
+  template: function(model) {
+    return template(model);
+  }
+});

=== added file 'www/src/js/views/storelist.js'
--- www/src/js/views/storelist.js	1970-01-01 00:00:00 +0000
+++ www/src/js/views/storelist.js	2015-05-27 15:47:41 +0000
@@ -0,0 +1,7 @@
+// storelist view
+var Snaplist = require('./snaplist.js');
+var StorelistItemView = require('./storelist-item.js');
+
+module.exports = Snaplist.extend({
+  childView: StorelistItemView
+});