Merge pull request #227 from resin-io/refactor/progress-bar-component

Group all parts of the progress-button component in a single directory

build/css/main.css

@@ -6098,6 +6098,31 @@ button.btn:focus, button.progress-button:focus {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button with a progress bar inside.
+ *
+ * From http://tympanus.net/Development/ProgressButtonStyles/
+ *
+ * The state of the progress bar is controller by the width, in percentage,
+ * of `.progress-button__bar`.
+ *
+ * The current percentage also needs to be reflected in the top level
+ * `.progress-button` element as a `percentage` attribute, without the percentage sign.
+ *
+ * If there is an action in place, the `active` attribute must be set to `true`.
+ * This is useful to determine if the progress bar is paused from the point of view
+ * of the styling.
+ *
+ * Usage:
+ *
+ * <button class="progress-button progress-button--primary" percentage="50" active="true">
+ *   <span class="progress-button__content">Button text</span>
+ *   <span class="progress-button__bar" style="width: 50%;"></span>
+ * </button>
+ */
+.progress-button--primary .progress-button__bar {
+  background: #6ca1e0; }
+
 .progress-button[percentage="100"][active="false"] .progress-button__bar {
   background-color: #5cb85c; }
 
@@ -6107,13 +6132,9 @@ button.btn:focus, button.progress-button:focus {
 .progress-button[active="true"] {
   pointer-events: none; }
 
-.progress-button--primary .progress-button__bar {
-  background: #6ca1e0; }
-
 .progress-button__content {
   position: relative;
-  z-index: 10;
-  transition: transform 0.3s; }
+  z-index: 10; }
 
 .progress-button__bar {
   position: absolute;

lib/browser/app.js

@@ -38,7 +38,7 @@ require('./browser/modules/notifier');
 require('./browser/modules/analytics');
 require('./browser/controllers/finish');
 require('./browser/controllers/navigation');
-require('./browser/components/progress-button');
+require('./browser/components/progress-button/progress-button');
 require('./browser/components/drive-selector');
 
 const app = angular.module('Etcher', [

lib/browser/components/progress-button/directives/progress-button.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * This directive provides a button containing a progress bar inside.
+ * The button is styled by default as a primary button.
+ *
+ * Example:
+ *
+ * <progress-button percentage="{{ 40 }}">My Progress Button</progress-button>
+ */
+
+module.exports = function() {
+  return {
+    templateUrl: './browser/components/progress-button/templates/progress-button.tpl.html',
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      percentage: '='
+    }
+  };
+};

lib/browser/components/progress-button/progress-button.js

@@ -22,20 +22,4 @@
 
 const angular = require('angular');
 const ProgressButton = angular.module('Etcher.Components.ProgressButton', []);
-
-ProgressButton.directive('progressButton', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      percentage: '='
-    },
-    template: [
-      '<button class="progress-button progress-button--primary">',
-        '<span class="progress-button__content" ng-transclude></span>',
-        '<span class="progress-button__bar" ng-style="{ width: percentage + \'%\' }"></span>',
-      '</button>'
-    ].join('\n')
-  };
-});
+ProgressButton.directive('progressButton', require('./directives/progress-button'));

lib/browser/components/progress-button/styles/_progress-button.scss

@@ -14,24 +14,33 @@
  * limitations under the License.
  */
 
-// From http://tympanus.net/Development/ProgressButtonStyles/
+/**
+ * A button with a progress bar inside.
+ *
+ * From http://tympanus.net/Development/ProgressButtonStyles/
+ *
+ * The state of the progress bar is controller by the width, in percentage,
+ * of `.progress-button__bar`.
+ *
+ * The current percentage also needs to be reflected in the top level
+ * `.progress-button` element as a `percentage` attribute, without the percentage sign.
+ *
+ * If there is an action in place, the `active` attribute must be set to `true`.
+ * This is useful to determine if the progress bar is paused from the point of view
+ * of the styling.
+ *
+ * Usage:
+ *
+ * <button class="progress-button progress-button--primary" percentage="50" active="true">
+ *   <span class="progress-button__content">Button text</span>
+ *   <span class="progress-button__bar" style="width: 50%;"></span>
+ * </button>
+ */
 
 .progress-button {
   @extend .btn;
 }
 
-.progress-button[percentage="100"][active="false"] .progress-button__bar {
-  background-color: $brand-success;
-}
-
-.progress-button[percentage="100"][active="true"] .progress-button__bar {
-  background-color: $brand-warning;
-}
-
-.progress-button[active="true"] {
-  pointer-events: none;
-}
-
 .progress-button--primary {
   @extend .btn-primary;
 
@@ -40,10 +49,23 @@
   }
 }
 
+.progress-button[percentage="100"][active="false"] .progress-button__bar {
+  background-color: $brand-success;
+}
+
+.progress-button[percentage="100"][active="true"] .progress-button__bar {
+  background-color: $brand-warning;
+}
+
+// Prevent the button from being clickable
+// when it has an active progress bar.
+.progress-button[active="true"] {
+  pointer-events: none;
+}
+
 .progress-button__content {
   position: relative;
   z-index: 10;
-  transition: transform 0.3s;
 }
 
 .progress-button__bar {
@@ -54,5 +76,7 @@
   width: 0;
   height: 100%;
 
+  // Subtle progress bar animation
   transition: width 0.3s, opacity 0.3s;
+
 }

lib/browser/components/progress-button/templates/progress-button.tpl.html

@@ -0,0 +1,4 @@
+<button class="progress-button progress-button--primary">
+  <span class="progress-button__content" ng-transclude></span>
+  <span class="progress-button__bar" ng-style="{ width: percentage + '%' }"></span>
+</button>

lib/scss/main.scss

@@ -37,7 +37,7 @@ $btn-default-color: #b3b3b3;
 @import "./components/caption";
 @import "./components/button";
 @import "./components/tick";
-@import "./components/progress-button";
+@import "../browser/components/progress-button/styles/progress-button";
 @import "./components/modal";
 
 hero-icon[disabled] .caption {