refactor(GUI): Convert Progress Button to Rendition

Convert progress-button component to Rendition Change-type: minor Signed-off-by: amdomanska <aga@resin.io>
alec7 · Oct 24, 2018 · b3aab51 · b3aab51
1 parent 7227c76
commit b3aab51
Show file tree

Hide file tree

Showing 13 changed files with 368 additions and 396 deletions.
diff --git a/lib/gui/app/components/progress-button/directives/progress-button.js b/lib/gui/app/components/progress-button/directives/progress-button.js
diff --git a/...onents/progress-button/progress-button.js → ...i/app/components/progress-button/index.js b/...onents/progress-button/progress-button.js → ...i/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
@@ -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 (
+          <Provider>
+            <StepSelection>
+              <FlashProgressBarValidating
+                primary
+                emphasized
+                value= { this.props.percentage }
+              >
+                { this.props.label }
+              </FlashProgressBarValidating>
+            </StepSelection>
+          </Provider>
+        )
+      }
+
+      return (
+        <Provider>
+          <StepSelection>
+            <FlashProgressBar
+              warning
+              emphasized
+              value= { this.props.percentage }
+            >
+              { this.props.label }
+            </FlashProgressBar>
+          </StepSelection>
+        </Provider>
+      )
+    }
+
+    return (
+      <Provider>
+        <StepSelection>
+          <StepButton
+            primary
+            onClick= { this.props.callback }
+            disabled= { this.props.disabled }
+          >
+            {this.props.label}
+          </StepButton>
+        </StepSelection>
+      </Provider>
+    )
+  }
+}
+
+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
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
diff --git 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<String>} 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
@@ -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'),