From b3aab5116ad4b903a200d4c4ff5b07bfcc1861df Mon Sep 17 00:00:00 2001 From: amdomanska Date: Fri, 31 Aug 2018 13:17:04 +0100 Subject: [PATCH] refactor(GUI): Convert Progress Button to Rendition Convert progress-button component to Rendition Change-type: minor Signed-off-by: amdomanska --- .../directives/progress-button.js | 44 --- .../{progress-button.js => index.js} | 8 +- .../progress-button/progress-button.jsx | 151 +++++++++ .../styles/_progress-button.scss | 126 -------- .../templates/progress-button.tpl.html | 7 - lib/gui/app/pages/main/controllers/flash.js | 9 +- lib/gui/app/pages/main/main.js | 2 +- .../app/pages/main/templates/main.tpl.html | 12 +- lib/gui/app/scss/main.scss | 1 - lib/gui/app/styled-components.js | 47 +++ lib/gui/app/theme.js | 67 ++++ lib/gui/css/main.css | 289 +++++------------- package.json | 1 + 13 files changed, 368 insertions(+), 396 deletions(-) delete mode 100644 lib/gui/app/components/progress-button/directives/progress-button.js rename lib/gui/app/components/progress-button/{progress-button.js => index.js} (84%) create mode 100644 lib/gui/app/components/progress-button/progress-button.jsx delete mode 100644 lib/gui/app/components/progress-button/styles/_progress-button.scss delete mode 100644 lib/gui/app/components/progress-button/templates/progress-button.tpl.html create mode 100644 lib/gui/app/styled-components.js create mode 100644 lib/gui/app/theme.js 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" > - */ -.progress-button { - overflow: hidden; } - .progress-button[active="true"] { - background-color: #ff912f; } - .progress-button .progress-button__bar { - background-color: #ff9e49; } - .progress-button.progress-button--striped { - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #265d7e), color-stop(0.26, #2895d8), color-stop(0.5, #2895d8), color-stop(0.51, #265d7e), color-stop(0.75, #265d7e), color-stop(0.76, #2895d8), to(#2895d8)); } - .progress-button.progress-button--striped .progress-button__bar { - background-color: #38a1e1; } - -.progress-button__content { - position: relative; - z-index: 10; } - -.progress-button__bar { - position: absolute; - left: 0; - top: 0; - width: 0; - height: 100%; - transition: width 0.3s; } - -.progress-button--striped { - background-size: 20px 20px; - animation: progress-button-stripes 1s linear infinite; - overflow: hidden; } - -@keyframes progress-button-stripes { - 0% { - background-position: 0 0; } - 100% { - background-position: 20px 20px; } } - /* * Copyright 2016 resin.io * @@ -6596,7 +6473,7 @@ svg-icon > img[disabled] { border-bottom: 1px dotted; padding-bottom: 2px; } -.page-main .button.step-footer, .page-main .step-footer.progress-button { +.page-main .button.step-footer { font-size: 12px; color: #2297de; border-radius: 0; @@ -6720,7 +6597,7 @@ svg-icon > img[disabled] { margin: 0 auto 15px; max-width: 165px; } -.page-finish .button-primary, .page-finish .progress-button { +.page-finish .button-primary { min-width: 170px; } .page-finish .title { @@ -10065,6 +9942,6 @@ body, text-align: right; padding: 5px 8px; font-size: 15px; } - .section-header > .button, .section-header > .progress-button { + .section-header > .button { padding-left: 3px; padding-right: 3px; } diff --git a/package.json b/package.json index 8926b2bb..826efd7c 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "bluebird-retry": "0.11.0", "bootstrap-sass": "3.3.6", "chalk": "1.1.3", + "color": "2.0.1", "command-join": "2.0.0", "debug": "3.1.0", "drivelist": "6.4.2",