Merge lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

* give oem, core, and framework (but not app) type snaps a clear label
* add a pretty downloaded file size to snap lists
* fix some position issues with lists

* give oem, core, and framework (but not app) type snaps a clear label
* add a pretty downloaded file size to snap lists
* fix some position issues with lists

[Sergio Schvezov (sergiusens)]

review: Approve

=== modified file 'package.json'
--- package.json	2015-05-27 15:32:21 +0000
+++ package.json	2015-05-27 15:32:22 +0000
@@ -38,7 +38,7 @@
     "normalize.css": "^3.0.3",
     "postcss-bem-linter": "git://github.com/necolas/postcss-bem-linter",
     "postcss-custom-media": "^3.0.0",
-    "pretty-bytes": "^1.0.4",
+    "pretty-bytes": "^2.0.1",
     "vinyl-buffer": "~1.0.0",
     "vinyl-source-stream": "~1.1.0",
     "watchify": "~3.1.2"

=== modified file 'www/src/css/icon.css'
--- www/src/css/icon.css	2015-05-27 15:32:21 +0000
+++ www/src/css/icon.css	2015-05-27 15:32:22 +0000
@@ -15,6 +15,7 @@
   background-repeat:no-repeat;
   background-position:50% 50%;
   background-size:100% 100%;
+  z-index:10;
 }
 
 .b-icon img {

=== modified file 'www/src/css/snap.css'
--- www/src/css/snap.css	2015-05-27 15:32:21 +0000
+++ www/src/css/snap.css	2015-05-27 15:32:22 +0000
@@ -63,5 +63,5 @@
 }
 
 .b-snap__tab-content {
-  padding:1.3em 3em 1.3em;
+  padding:1.3em 0;
 }

=== modified file 'www/src/css/snaplist.css'
--- www/src/css/snaplist.css	2015-05-27 15:32:21 +0000
+++ www/src/css/snaplist.css	2015-05-27 15:32:22 +0000
@@ -5,10 +5,8 @@
 
 .b-snaplist__item {
   cursor: pointer;
-  font-size:0;
 }
 
-
 /** grid style **/
 
 .b-snaplist_grid {
@@ -19,6 +17,13 @@
 .b-snaplist_grid .b-snaplist__item {
   flex: 0 1 auto;
   padding:7px;
+  font-size:0;
+}
+
+.b-snaplist_grid .b-snaplist__item * {
+  font-size: 12px;
+  color:#999;
+  text-align: center;
 }
 
 .b-snaplist_grid .b-snaplist__name {
@@ -26,8 +31,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size:12px;
-  color:#999;
   margin-top:4px;
 }
 
@@ -36,7 +39,22 @@
   width:90px;
 }
 
-.b-snaplist_grid .b-snaplist__name ~ * {
+.b-snaplist_grid :not(.b-snaplist__item-app) .b-icon::after {
+  content: attr(data-type);
+  position:absolute;
+  width:100%;
+  bottom:0;
+  left:0;
+  right:0;
+  background: rgba(221,72,20,0.8);
+  color:#fff;
+  z-index:0;
+  padding:3px 0 5px;
+  text-transform:uppercase;
+  font-size:10px;
+}
+
+.b-snaplist_grid .b-snaplist__size ~ * {
   display:none;
 }
 
@@ -88,6 +106,7 @@
   background-image: url(/public/images/icon-mask-on-white.png);
 }
 
+
 .b-snaplist_row .b-icon img {
   display:block;
   width: 40px;

=== modified file 'www/src/js/templates/snap-detail.hbs'
--- www/src/js/templates/snap-detail.hbs	2015-05-27 15:32:21 +0000
+++ www/src/js/templates/snap-detail.hbs	2015-05-27 15:32:22 +0000
@@ -0,0 +1,9 @@
+{{#if description}}
+<p>{{ description }}</p>
+{{/if}}
+{{#if prettyInstalledSize}}
+<p>Installed size: {{prettyInstalledSize}}</p>
+{{/if}}
+{{#if prettyDownloadSize}}
+<p>Download size: {{prettyDownloadSize}}</p>
+{{/if}}

=== modified file 'www/src/js/templates/snap-layout.hbs'
--- www/src/js/templates/snap-layout.hbs	2015-05-27 15:32:21 +0000
+++ www/src/js/templates/snap-layout.hbs	2015-05-27 15:32:22 +0000
@@ -16,4 +16,6 @@
   </div>
 </div>
 <div class="region-menu"></div>
-<div class="region-tab"></div>
+<div class="b-layout__container">
+  <div class="region-tab"></div>
+</div>

=== modified file 'www/src/js/templates/snaplist-item.hbs'
--- www/src/js/templates/snaplist-item.hbs	2015-05-27 15:32:21 +0000
+++ www/src/js/templates/snaplist-item.hbs	2015-05-27 15:32:22 +0000
@@ -1,11 +1,12 @@
-<div class="b-icon">
+<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__size" title="Installed file size">{{ prettyInstalledSize }}</div>
 <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__type">{{ type }}</div>
 <div class="b-snaplist__actions">
   {{> installer}}
 </div>

=== modified file 'www/src/js/views/snaplist-item.js'
--- www/src/js/views/snaplist-item.js	2015-05-08 14:53:07 +0000
+++ www/src/js/views/snaplist-item.js	2015-05-27 15:32:22 +0000
@@ -13,7 +13,14 @@
 
 module.exports = Marionette.ItemView.extend({
 
-  className: 'b-snaplist__item',
+  className: function() {
+    var type = this.model.get('type');
+    var className = 'b-snaplist__item';
+    if (type) {
+      className += ' b-snaplist__item-' + type;
+    }
+    return className;
+  },
 
   template: function(model) {
     return template(model);

=== modified file 'www/tests/snapItemViewSpec.js'
--- www/tests/snapItemViewSpec.js	2015-05-05 14:40:14 +0000
+++ www/tests/snapItemViewSpec.js	2015-05-27 15:32:22 +0000
@@ -1,10 +1,15 @@
 var Backbone = require('backbone');
+var Snap = require('../src/js/models/snap.js');
 var SnapItemView = require('../src/js/views/snaplist-item.js');
 
 describe('SnapItemView', function() {
 
   beforeEach(function() {
-    this.view = new SnapItemView();
+    this.view = new SnapItemView({
+      model: new Snap({
+        id: 'foo'
+      })
+    });
   });
 
   afterEach(function() {
@@ -16,4 +21,11 @@
     expect(this.view).toEqual(jasmine.any(Backbone.View));
   });
 
+  it('should have a b-snaplist className with type modifier when present in model', function() {
+    this.view.model.unset('type');
+    expect(this.view.className()).toBe('b-snaplist__item');
+    this.view.model.set('type', 'foo');
+    expect(this.view.className()).toBe('b-snaplist__item b-snaplist__item-foo');
+  });
+
 });