Merge lp:~stephen-stewart/snapweb/success-and-failure-messaging-view into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

add a failure view

[John Lenton (chipaca)]

review: Approve

=== added file 'www/src/css/alert.css'
--- www/src/css/alert.css	1970-01-01 00:00:00 +0000
+++ www/src/css/alert.css	2015-05-05 15:24:24 +0000
@@ -0,0 +1,31 @@
+.b-alert {
+  position: relative;
+  width: 600px;
+  margin: 0 auto;
+  background-color: rgb(255, 255, 255);
+  border-radius: 0px;
+  border: 4px solid #DADADA;
+  padding: 1em 2em;
+  border-top: none;
+  color: #dd4814;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.b-alert__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.b-alert__close a {
+  text-decoration:none;
+  color: #ccc;
+  display:block;
+  width:40px;
+  height:40px;
+  text-align:right;
+  padding:6px 10px
+}

=== added file 'www/src/css/base.css'
--- www/src/css/base.css	1970-01-01 00:00:00 +0000
+++ www/src/css/base.css	2015-05-05 15:24:24 +0000
@@ -0,0 +1,25 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  font: normal 300 15px/1.4 'Ubuntu', 'Arial', 'libra sans', sans-serif;
+  background-color:white;
+  color:#333;
+}
+
+body {
+  background: url('../images/image-background-paper.png') repeat-y fixed 50% 0 #f7f7f7;
+}
+
+a {
+  color:#dd4814;
+}
+
+h1 {
+  font-weight:300;
+}

=== modified file 'www/src/css/install.css'
--- www/src/css/install.css	2015-05-05 15:24:24 +0000
+++ www/src/css/install.css	2015-05-05 15:24:24 +0000
@@ -28,6 +28,12 @@
   cursor:progress;
 }
 
+.b-installer__message {
+  margin-top:4px;
+  text-align:center;
+  font-size:12px;
+}
+
 .b-installer__progress {
   background: white;
   border-radius:10px;

=== modified file 'www/src/css/snap.css'
--- www/src/css/snap.css	2015-05-05 15:24:24 +0000
+++ www/src/css/snap.css	2015-05-05 15:24:24 +0000
@@ -25,7 +25,6 @@
 }
 
 .b-snap__actions {
-  display:flex;
   flex: 1;
 }
 

=== modified file 'www/src/js/app.js'
--- www/src/js/app.js	2015-05-05 15:24:24 +0000
+++ www/src/js/app.js	2015-05-05 15:24:24 +0000
@@ -9,17 +9,17 @@
 if (window.__agent) {
   window.__agent.start(Backbone, Marionette);
 }
-var MainView = require('./views/layout-main.js');
+var LayoutView = require('./views/layout.js');
 var router = require('./routers/router.js');
 
 var webdm = new Marionette.Application();
-var mainView = new MainView();
-mainView.render();
+var layout = new LayoutView();
+layout.render();
+
+$(document).ready(function() {
+  webdm.start();
+});
 
 webdm.on('start', function() {
   Backbone.history.start({pushState: true});
 });
-
-$(document).ready(function() {
-  webdm.start();
-});

=== modified file 'www/src/js/models/snap.js'
--- www/src/js/models/snap.js	2015-05-05 15:24:24 +0000
+++ www/src/js/models/snap.js	2015-05-05 15:24:24 +0000
@@ -50,7 +50,6 @@
       var status = model.get('status') || opts.xhr.status;
       model.set({
         'status': model.previous('status'),
-        'isError': true,
         'message': response.statusText
       });
     });

=== added file 'www/src/js/templates/alerts.hbs'
--- www/src/js/templates/alerts.hbs	1970-01-01 00:00:00 +0000
+++ www/src/js/templates/alerts.hbs	2015-05-05 15:24:24 +0000
@@ -0,0 +1,6 @@
+<div class="b-alert__message b-alert__message--error">
+    ERROR: {{ message }}
+</div>
+<div class="b-alert__close">
+  <a href="#">✕</a>
+</div>

=== renamed file 'www/src/js/templates/layout-main.hbs' => 'www/src/js/templates/layout.hbs'
--- www/src/js/templates/layout-main.hbs	2015-05-05 15:24:24 +0000
+++ www/src/js/templates/layout.hbs	2015-05-05 15:24:24 +0000
@@ -1,3 +1,4 @@
+<div class="b-layout__alerts"></div>
 <div class="b-layout__banner"></div>
 <div class="b-layout__main"></div>
 <div class="b-layout__footer"></div>

=== modified file 'www/src/js/templates/snap-layout.hbs'
--- www/src/js/templates/snap-layout.hbs	2015-05-05 15:24:24 +0000
+++ www/src/js/templates/snap-layout.hbs	2015-05-05 15:24:24 +0000
@@ -11,9 +11,8 @@
       {{#if installActionString}}
       <div class="b-installer__button">{{ installActionString }} {{ name }}</div>
       {{/if}}
+      <div class="b-installer__message"></div>
     </div>
-    <div class="b-installer__message"></div>
-    <div class="b-installer__error">{{ message }}</div>
   </div>
 </div>
 

=== added file 'www/src/js/views/alerts.js'
--- www/src/js/views/alerts.js	1970-01-01 00:00:00 +0000
+++ www/src/js/views/alerts.js	2015-05-05 15:24:24 +0000
@@ -0,0 +1,33 @@
+// global alerts view
+var $ = require('jquery');
+var Backbone = require('backbone');
+Backbone.$ = $;
+var Marionette = require('backbone.marionette');
+var template = require('../templates/alerts.hbs');
+
+module.exports = Backbone.Marionette.ItemView.extend({
+
+  className: 'b-alert',
+
+  events: {
+    'click @ui.close': 'onClose'
+  },
+
+  ui: {
+    'close': '.b-alert__close'
+  },
+
+  template: function(model) {
+    return template(model);
+  },
+
+  onClose: function(e) {
+    var model = this.model;
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    this.destroy();
+    model.unset('message', {silent: true});
+  }
+
+});

=== renamed file 'www/src/js/views/layout-main.js' => 'www/src/js/views/layout.js'
--- www/src/js/views/layout-main.js	2015-05-05 15:24:24 +0000
+++ www/src/js/views/layout.js	2015-05-05 15:24:24 +0000
@@ -7,13 +7,15 @@
 var Radio = require('backbone.radio');
 var BannerView = require('./layout-banner.js');
 var FooterView = require('./layout-footer.js');
-var template = require('../templates/layout-main.hbs');
+var NotificationsView = require('./alerts.js');
+var template = require('../templates/layout.hbs');
 var chan = Radio.channel('root');
 
 module.exports = Marionette.LayoutView.extend({
 
   initialize: function() {
     chan.comply('set:content', this.setContent, this);
+    chan.comply('alert:error', this.alertError, this);
   },
 
   el: '.b-layout',
@@ -31,9 +33,16 @@
     this.mainRegion.show(content);
   },
 
+  alertError: function(model) {
+    this.showChildView('alertsRegion', new NotificationsView({
+      model: model
+    }));
+  },
+
   regions: {
     bannerRegion: '.b-layout__banner',
-    mainRegion: '.b-layout__main',
-    footerRegion: '.b-layout__footer'
+    mainRegion:   '.b-layout__main',
+    footerRegion: '.b-layout__footer',
+    alertsRegion: '.b-layout__alerts'
   }
 });

=== modified file 'www/src/js/views/snap-layout.js'
--- www/src/js/views/snap-layout.js	2015-05-05 15:24:24 +0000
+++ www/src/js/views/snap-layout.js	2015-05-05 15:24:24 +0000
@@ -2,12 +2,14 @@
 var _ = require('lodash');
 var Backbone = require('backbone');
 var Marionette = require('backbone.marionette');
+var Radio = require('backbone.radio');
 var SnapMenuView = require('./snap-menu.js');
 var SnapDetailView = require('./snap-detail.js');
 var SnapReviewsView = require('./snap-reviews.js');
 var SnapSettingsView = require('./snap-settings.js');
 var template = require('../templates/snap-layout.hbs');
 var CONF = require('../config.js');
+var chan = Radio.channel('root');
 
 module.exports = Marionette.LayoutView.extend({
 
@@ -19,7 +21,7 @@
       this.model, 'change:status', this.onModelStatusChange
     );
     this.listenTo(
-      this.model, 'change:message change:isError', this.onModelError
+      this.model, 'change:message', this.onModelError
     );
   },
 
@@ -28,7 +30,7 @@
   },
 
   onModelError: function(model) {
-    this.ui.errorMessage.text(model.get('message'));
+    chan.command('alert:error', model);
   },
 
   onModelHTMLClassChange: function(model) {

=== modified file 'www/src/js/views/snap-menu.js'
--- www/src/js/views/snap-menu.js	2015-05-05 15:24:24 +0000
+++ www/src/js/views/snap-menu.js	2015-05-05 15:24:24 +0000
@@ -1,5 +1,7 @@
 // snap menu view
+var $ = require('jquery');
 var Backbone = require('backbone');
+Backbone.$ = $;
 var Marionette = require('backbone.marionette');
 var template = require('../templates/snap-menu.hbs');
 

=== added file 'www/tests/alertViewSpec.js'
--- www/tests/alertViewSpec.js	1970-01-01 00:00:00 +0000
+++ www/tests/alertViewSpec.js	2015-05-05 15:24:24 +0000
@@ -0,0 +1,52 @@
+var $ = require('jquery');
+var Backbone = require('backbone');
+Backbone.$ = $;
+var Backbone = require('backbone');
+var AlertView = require('../src/js/views/alerts.js');
+var Snap = require('../src/js/models/snap.js');
+
+describe('AlertView', function() {
+
+  beforeEach(function() {
+    var model = this.model = new Snap({
+      id: 'foo',
+      message: 'foo'
+    });
+    this.view = new AlertView({
+      model: model 
+    });
+  });
+
+  afterEach(function() {
+    this.view.destroy();
+    delete this.view;
+  });
+
+  it('should be an instance of Backbone.View', function() {
+    expect(AlertView).toBeDefined();
+    expect(this.view).toEqual(jasmine.any(Backbone.View));
+  });
+
+  it('should destroy the view onClose', function() {
+    spyOn(this.view, 'destroy');
+    this.view.onClose();
+
+    expect(this.view.destroy).toHaveBeenCalled();
+  });
+
+  it('should preventDefault on close click', function() {
+    var stubbedEvent = {
+      preventDefault: function() {}
+    };
+    spyOn(stubbedEvent, 'preventDefault');
+    this.view.onClose(stubbedEvent);
+    expect(stubbedEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should unset message on the model', function() {
+    spyOn(this.model, 'unset');
+    this.view.onClose();
+    expect(this.model.unset).toHaveBeenCalled();
+  });
+
+});

=== modified file 'www/tests/snapItemViewSpec.js'
--- www/tests/snapItemViewSpec.js	2015-05-05 15:24:24 +0000
+++ www/tests/snapItemViewSpec.js	2015-05-05 15:24:24 +0000
@@ -1,5 +1,5 @@
+var Backbone = require('backbone');
 var SnapItemView = require('../src/js/views/snaplist-item.js');
-var Backbone = require('backbone');
 
 describe('SnapItemView', function() {
 

=== modified file 'www/tests/snapLayoutViewSpec.js'
--- www/tests/snapLayoutViewSpec.js	2015-05-05 15:24:24 +0000
+++ www/tests/snapLayoutViewSpec.js	2015-05-05 15:24:24 +0000
@@ -1,6 +1,6 @@
+var Backbone = require('backbone');
 var Snap = require('../src/js/models/snap.js');
 var SnapLayoutView = require('../src/js/views/snap-layout.js');
-var Backbone = require('backbone');
 var CONF = require('../src/js/config.js');
 
 describe('SnapLayoutView', function() {