diff --git a/lib/gui/app/components/progress-button/directives/progress-button.js b/lib/gui/app/components/progress-button/directives/progress-button.js
deleted file mode 100644
index 7f11983c..00000000
--- a/lib/gui/app/components/progress-button/directives/progress-button.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * 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'
-
-/**
- * @summary ProgressButton directive
- * @function
- * @public
- *
- * @description
- * This directive provides a button containing a progress bar inside.
- * The button is styled by default as a primary button.
- *
- * @returns {Object} directive
- *
- * @example
- * My Progress Button
- */
-module.exports = () => {
- return {
- template: require('../templates/progress-button.tpl.html'),
- restrict: 'E',
- replace: true,
- transclude: true,
- scope: {
- percentage: '=',
- striped: '@'
- }
- }
-}
diff --git a/lib/gui/app/components/progress-button/progress-button.js b/lib/gui/app/components/progress-button/index.js
similarity index 84%
rename from lib/gui/app/components/progress-button/progress-button.js
rename to lib/gui/app/components/progress-button/index.js
index 50fb71a8..7d47eb53 100644
--- a/lib/gui/app/components/progress-button/progress-button.js
+++ b/lib/gui/app/components/progress-button/index.js
@@ -21,8 +21,14 @@
*/
const angular = require('angular')
+const { react2angular } = require('react2angular')
+
const MODULE_NAME = 'Etcher.Components.ProgressButton'
const ProgressButton = angular.module(MODULE_NAME, [])
-ProgressButton.directive('progressButton', require('./directives/progress-button'))
+
+ProgressButton.component(
+ 'progressButton',
+ react2angular(require('./progress-button.jsx'))
+)
module.exports = MODULE_NAME
diff --git a/lib/gui/app/components/progress-button/progress-button.jsx b/lib/gui/app/components/progress-button/progress-button.jsx
new file mode 100644
index 00000000..3d944ff6
--- /dev/null
+++ b/lib/gui/app/components/progress-button/progress-button.jsx
@@ -0,0 +1,151 @@
+/*
+ * 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'
+
+const React = require('react')
+const propTypes = require('prop-types')
+const Color = require('color')
+
+const { default: styled, keyframes } = require('styled-components')
+
+const { ProgressBar, Provider } = require('rendition')
+
+const { colors, consts } = require('./../../theme')
+const { StepButton, StepSelection } = require('./../../styled-components')
+
+const darkenForegroundStripes = 0.18
+const desaturateForegroundStripes = 0.2
+const progressButtonStripesForegroundColor = Color(colors.primary.background)
+ .darken(darkenForegroundStripes)
+ .desaturate(desaturateForegroundStripes)
+ .string()
+
+const desaturateBackgroundStripes = 0.05
+const progressButtonStripesBackgroundColor = Color(colors.primary.background)
+ .desaturate(desaturateBackgroundStripes)
+ .string()
+
+const ProgressButtonStripes = keyframes `
+ 0% {
+ background-position: 0 0;
+ }
+
+ 100% {
+ background-position: 20px 20px;
+ }
+`
+
+const FlashProgressBar = styled(ProgressBar) `
+ > div {
+ color: white !important;
+ text-shadow: none !important;
+ }
+
+ width: 100%;
+ max-width: ${consts.btnMaxWidth};
+ margin: auto;
+
+ background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
+`
+
+const FlashProgressBarValidating = styled(FlashProgressBar) `
+
+ // Notice that we add 0.01 to certain gradient stop positions.
+ // That workarounds a Chrome rendering issue where diagonal
+ // lines look spiky.
+ // See https://github.com/resin-io/etcher/issues/472
+
+ background-image: -webkit-gradient(linear, 0 0, 100% 100%,
+ color-stop(0.25, ${progressButtonStripesForegroundColor}),
+ color-stop(0.26, ${progressButtonStripesBackgroundColor}),
+ color-stop(0.50, ${progressButtonStripesBackgroundColor}),
+ color-stop(0.51, ${progressButtonStripesForegroundColor}),
+ color-stop(0.75, ${progressButtonStripesForegroundColor}),
+ color-stop(0.76 , ${progressButtonStripesBackgroundColor}),
+ to(${progressButtonStripesBackgroundColor}));
+
+ background-color: white;
+
+ animation: ${ProgressButtonStripes} 1s linear infinite;
+ overflow: hidden;
+
+ background-size: 20px 20px;
+`
+
+/**
+ * Progress Button component
+ */
+class ProgressButton extends React.Component {
+ render () {
+ if (this.props.active) {
+ if (this.props.striped) {
+ return (
+
+
+
+ { this.props.label }
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ { this.props.label }
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {this.props.label}
+
+
+
+ )
+ }
+}
+
+ProgressButton.propTypes = {
+ striped: propTypes.bool,
+ active: propTypes.bool,
+ percentage: propTypes.number,
+ label: propTypes.string,
+ disabled: propTypes.bool,
+ callback: propTypes.func
+}
+
+module.exports = ProgressButton
diff --git a/lib/gui/app/components/progress-button/styles/_progress-button.scss b/lib/gui/app/components/progress-button/styles/_progress-button.scss
deleted file mode 100644
index f3671abc..00000000
--- a/lib/gui/app/components/progress-button/styles/_progress-button.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * 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`.
- *
- * 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.
- *
- * You can optionally pass the `.progress-button--striped` modified to get a striped
- * progress bar.
- *
- * The stripe implementation idea was taken from:
- *
- * https://css-tricks.com/css3-progress-bars/
- *
- * Usage:
- *
- *
- */
-
-$progress-button-stripes-width: 20px;
-$progress-button-stripes-animation-duration: 1s;
-
-.progress-button {
- @extend .button;
- @extend .button-primary;
-
- overflow: hidden;
-
- &[active="true"] {
- background-color: $palette-theme-warning-background;
- }
-
- .progress-button__bar {
- background-color: lighten($palette-theme-warning-background, 5%);
- }
-
- &.progress-button--striped {
- $progress-button-stripes-background-color: desaturate($palette-theme-primary-background, 5%);
- $progress-button-stripes-foreground-color: desaturate(darken($palette-theme-primary-background, 18%), 20%);
-
- // Notice that we add `0.01` to certain gradient stop positions.
- // That workarounds a Chrome rendering issue where diagonal
- // lines look spiky.
- // See https://github.com/resin-io/etcher/issues/472
- background-image: -webkit-gradient(linear, 0 0, 100% 100%,
- color-stop(0.25, $progress-button-stripes-foreground-color),
- color-stop(0.25 + 0.01, $progress-button-stripes-background-color),
- color-stop(0.50, $progress-button-stripes-background-color),
- color-stop(0.50 + 0.01, $progress-button-stripes-foreground-color),
- color-stop(0.75, $progress-button-stripes-foreground-color),
- color-stop(0.75 + 0.01, $progress-button-stripes-background-color),
- to($progress-button-stripes-background-color));
-
- .progress-button__bar {
- background-color: lighten($palette-theme-primary-background, 5%);
- }
-
- }
-
-}
-
-// Prevent the button from being clickable
-// when it has an active progress bar.
-.progress-button[active="true"] {
- @extend .button-no-hover;
-}
-
-.progress-button__content {
- position: relative;
- z-index: 10;
-}
-
-.progress-button__bar {
- position: absolute;
- left: 0;
- top: 0;
-
- width: 0;
- height: 100%;
-
- // Subtle progress bar animation
- transition: width 0.3s;
-
-}
-
-.progress-button--striped {
- background-size: $progress-button-stripes-width $progress-button-stripes-width;
- animation: progress-button-stripes $progress-button-stripes-animation-duration linear infinite;
- overflow: hidden;
-}
-
-@keyframes progress-button-stripes {
-
- 0% {
- background-position: 0 0;
- }
-
- 100% {
- background-position: $progress-button-stripes-width $progress-button-stripes-width;
- }
-
-}
diff --git a/lib/gui/app/components/progress-button/templates/progress-button.tpl.html b/lib/gui/app/components/progress-button/templates/progress-button.tpl.html
deleted file mode 100644
index ff58caf9..00000000
--- a/lib/gui/app/components/progress-button/templates/progress-button.tpl.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/lib/gui/app/pages/main/controllers/flash.js b/lib/gui/app/pages/main/controllers/flash.js
index 4188f019..991e14ee 100644
--- a/lib/gui/app/pages/main/controllers/flash.js
+++ b/lib/gui/app/pages/main/controllers/flash.js
@@ -28,6 +28,7 @@ const path = require('path')
const store = require('../../../models/store')
const constraints = require('../../../../../shared/drive-constraints')
const availableDrives = require('../../../models/available-drives')
+const selection = require('../../../models/selection-state')
module.exports = function (
$q,
@@ -106,9 +107,6 @@ module.exports = function (
* @function
* @public
*
- * @param {Object} image - image
- * @param {Array} devices - list of drive device paths
- *
* @example
* FlashController.flashImageToDrive({
* path: 'rpi.img',
@@ -124,7 +122,10 @@ module.exports = function (
* '/dev/disk5'
* ])
*/
- this.flashImageToDrive = (image, devices) => {
+ this.flashImageToDrive = () => {
+ const image = selection.getImage()
+ const devices = selection.getSelectedDevices()
+
if (flashState.isFlashing()) {
return
}
diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js
index 407ac59c..fb26f506 100644
--- a/lib/gui/app/pages/main/main.js
+++ b/lib/gui/app/pages/main/main.js
@@ -36,7 +36,7 @@ const MainPage = angular.module(MODULE_NAME, [
require('../../components/drive-selector/drive-selector'),
require('../../components/tooltip-modal/tooltip-modal'),
require('../../components/flash-error-modal/flash-error-modal'),
- require('../../components/progress-button/progress-button'),
+ require('../../components/progress-button'),
require('../../components/warning-modal/warning-modal'),
require('../../components/file-selector'),
diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html
index 5aefb82c..13e15f66 100644
--- a/lib/gui/app/pages/main/templates/main.tpl.html
+++ b/lib/gui/app/pages/main/templates/main.tpl.html
@@ -111,14 +111,14 @@
-
-
+ label="flash.getProgressButtonLabel()"
+ disabled="main.state.getLastFlashErrorCode() || main.shouldFlashStepBeDisabled()"
+ callback="flash.flashImageToDrive" >