Merge lp:~stephen-stewart/snapweb/install-progress-ui into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

add progress ui for install/downloading

[John Lenton (chipaca)]

review: Approve

=== renamed file 'www/src/css/install.css' => 'www/src/css/installer.css'
--- www/src/css/install.css	2015-05-05 15:25:11 +0000
+++ www/src/css/installer.css	2015-05-05 15:25:11 +0000
@@ -1,5 +1,7 @@
 .b-installer {
-  max-width:300px;
+  position:relative;
+  width:300px;
+  padding-bottom:9px;
 }
 
 .b-installer__button {
@@ -25,7 +27,9 @@
 }
 
 .b-installer--thinking .b-installer__button {
+  background-color:transparent;
   cursor:progress;
+  color:#dd4814;
 }
 
 .b-installer__message {
@@ -38,15 +42,14 @@
   background: white;
   border-radius:10px;
   border:1px solid #dd4814;
-  bottom:3px;
-  box-sizing:border-box;
+  bottom:0;
   display:none;
   height:5px;
-  left:8px;
+  left:0;
   margin:0;
   padding:0;
   position:absolute;
-  right:8px;
+  right:0;
 }
 
 .b-installer__value {
@@ -56,6 +59,7 @@
   position:absolute;
   right:100%;
   top:0;
+  transition: right 0.1s;
 }
 
 .b-installer--thinking .b-installer__progress {

=== modified file 'www/src/js/templates/snap-layout.hbs'
--- www/src/js/templates/snap-layout.hbs	2015-05-05 15:25:11 +0000
+++ www/src/js/templates/snap-layout.hbs	2015-05-05 15:25:11 +0000
@@ -9,12 +9,16 @@
   <div class="b-snap__actions">
     <div class="b-installer {{ installHTMLClass }}">
       {{#if installActionString}}
-      <div class="b-installer__button">{{ installActionString }} {{ name }}</div>
+      <div class="b-installer__button">{{ installActionString }}</div>
+      <div class="b-installer__progress" title="download progress">
+        <div class="b-installer__value"></div>
+      </div>
       {{/if}}
       <div class="b-installer__message"></div>
     </div>
   </div>
 </div>
+<div class="b-installer__error">{{ message }}</div>
 
 <div class="region-menu"></div>
 

=== modified file 'www/src/js/views/snap-layout.js'
--- www/src/js/views/snap-layout.js	2015-05-05 15:25:11 +0000
+++ www/src/js/views/snap-layout.js	2015-05-05 15:25:11 +0000
@@ -23,12 +23,25 @@
     this.listenTo(
       this.model, 'change:message', this.onModelError
     );
+    this.listenTo(
+      this.model, 'change:progress', this.onProgressChange
+    );
   },
 
   onShow: function() {
     window.scrollTo(0, 0);
   },
 
+  onProgressChange: function(model) {
+    var state = model.get('status');
+    var progress;
+
+    if (state === CONF.INSTALL_STATE.INSTALLING) {
+      progress = (100 - (model.get('progress') | 0)) + '%';
+      this.ui.installerProgress.css('right', progress);
+    }
+  },
+
   onModelError: function(model) {
     chan.command('alert:error', model);
   },
@@ -46,6 +59,9 @@
     var installer = this.ui.installer;
     var installerButton = this.ui.installerButton;
 
+    // reset progress
+    this.ui.installerProgress.css('right', '100%');
+
     if (_.contains(CONF.INSTALL_STATE, state)) {
       installerButton.text(msg);
     } else {
@@ -76,6 +92,7 @@
     statusMessage: '.b-installer__message',
     installer: '.b-installer',
     installerButton: '.b-installer__button',
+    installerProgress: '.b-installer__value',
     menu: '.b-snap__nav-item'
   },
 
@@ -117,7 +134,9 @@
       this.model.set({
         status: CONF.INSTALL_STATE.UNINSTALLING
       });
-      this.model.destroy();
+      this.model.destroy({
+        dataType : 'html'
+      });
     } else if (status === CONF.INSTALL_STATE.UNINSTALLED) {
       // install
       this.model.save({