/* * 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, css, keyframes } = require('styled-components') const { ProgressBar, Provider } = require('rendition') const { colors } = 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 ProgressButtonStripesRule = css ` ${ProgressButtonStripes} 1s linear infinite; ` const FlashProgressBar = styled(ProgressBar) ` > div { width: 200px; height: 48px; color: white !important; text-shadow: none !important; } width: 200px; height: 48px; font-size: 16px; line-height: 48px; 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: ${ProgressButtonStripesRule}; 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