From 797a2531589d04970bba4b717ba171de5bbad254 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Thu, 31 Mar 2016 14:47:13 -0400 Subject: [PATCH] Group all parts of the progress-button component in a single directory --- build/css/main.css | 31 +++++++++-- lib/browser/app.js | 2 +- .../directives/progress-button.js | 38 ++++++++++++++ .../{ => progress-button}/progress-button.js | 18 +------ .../styles}/_progress-button.scss | 52 ++++++++++++++----- .../templates/progress-button.tpl.html | 4 ++ lib/scss/main.scss | 2 +- 7 files changed, 109 insertions(+), 38 deletions(-) create mode 100644 lib/browser/components/progress-button/directives/progress-button.js rename lib/browser/components/{ => progress-button}/progress-button.js (62%) rename lib/{scss/components => browser/components/progress-button/styles}/_progress-button.scss (57%) create mode 100644 lib/browser/components/progress-button/templates/progress-button.tpl.html diff --git a/build/css/main.css b/build/css/main.css index c757bdee..d2d8cf47 100644 --- a/build/css/main.css +++ b/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: + * + * + */ +.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; diff --git a/lib/browser/app.js b/lib/browser/app.js index 48b11f42..d2f59291 100644 --- a/lib/browser/app.js +++ b/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', [ diff --git a/lib/browser/components/progress-button/directives/progress-button.js b/lib/browser/components/progress-button/directives/progress-button.js new file mode 100644 index 00000000..bf0ff7af --- /dev/null +++ b/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: + * + * My Progress Button + */ + +module.exports = function() { + return { + templateUrl: './browser/components/progress-button/templates/progress-button.tpl.html', + restrict: 'E', + replace: true, + transclude: true, + scope: { + percentage: '=' + } + }; +}; diff --git a/lib/browser/components/progress-button.js b/lib/browser/components/progress-button/progress-button.js similarity index 62% rename from lib/browser/components/progress-button.js rename to lib/browser/components/progress-button/progress-button.js index a7ee4920..b23c2cd6 100644 --- a/lib/browser/components/progress-button.js +++ b/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: [ - '' - ].join('\n') - }; -}); +ProgressButton.directive('progressButton', require('./directives/progress-button')); diff --git a/lib/scss/components/_progress-button.scss b/lib/browser/components/progress-button/styles/_progress-button.scss similarity index 57% rename from lib/scss/components/_progress-button.scss rename to lib/browser/components/progress-button/styles/_progress-button.scss index 167963aa..73647b59 100644 --- a/lib/scss/components/_progress-button.scss +++ b/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: + * + * + */ .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; + } diff --git a/lib/browser/components/progress-button/templates/progress-button.tpl.html b/lib/browser/components/progress-button/templates/progress-button.tpl.html new file mode 100644 index 00000000..38d3a493 --- /dev/null +++ b/lib/browser/components/progress-button/templates/progress-button.tpl.html @@ -0,0 +1,4 @@ + diff --git a/lib/scss/main.scss b/lib/scss/main.scss index 14252a2d..2d5847f3 100644 --- a/lib/scss/main.scss +++ b/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 {