From cf722427ab0221e18c6e109ffe10c7e2b6aef890 Mon Sep 17 00:00:00 2001 From: Lorenzo Alberto Maria Ambrosi Date: Fri, 30 Nov 2018 15:55:46 +0100 Subject: [PATCH 1/2] Restyle success screen and enlarge UI elements Change-type: patch Changelog-entry: Added React component for the Flash Another button Signed-off-by: Lorenzo Alberto Maria Ambrosi --- .../flash-another/flash-another.jsx | 36 +++++++++++++++++++ lib/gui/app/components/flash-another/index.js | 34 ++++++++++++++++++ .../pages/finish/templates/success.tpl.html | 7 ++-- lib/gui/app/pages/main/main.js | 1 + lib/gui/app/pages/main/styles/_main.scss | 7 +++- lib/gui/app/scss/components/_button.scss | 1 + lib/gui/app/styled-components.js | 1 + lib/gui/app/theme.js | 2 +- lib/gui/css/main.css | 9 +++-- 9 files changed, 89 insertions(+), 9 deletions(-) create mode 100644 lib/gui/app/components/flash-another/flash-another.jsx create mode 100644 lib/gui/app/components/flash-another/index.js diff --git a/lib/gui/app/components/flash-another/flash-another.jsx b/lib/gui/app/components/flash-another/flash-another.jsx new file mode 100644 index 00000000..ec349e04 --- /dev/null +++ b/lib/gui/app/components/flash-another/flash-another.jsx @@ -0,0 +1,36 @@ +/* + * 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 FlashAnother = (props) => { + return ( +
+ +
+ ) +} + +FlashAnother.propTypes = { + onClick: propTypes.func +} + +module.exports = FlashAnother diff --git a/lib/gui/app/components/flash-another/index.js b/lib/gui/app/components/flash-another/index.js new file mode 100644 index 00000000..d0545718 --- /dev/null +++ b/lib/gui/app/components/flash-another/index.js @@ -0,0 +1,34 @@ +/* + * Copyright 2018 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' + +/** + * @module Etcher.Components.FlashAnother + */ + +const angular = require('angular') +const { react2angular } = require('react2angular') + +const MODULE_NAME = 'Etcher.Components.FlashAnother' +const FlashAnother = angular.module(MODULE_NAME, []) + +FlashAnother.component( + 'flashAnother', + react2angular(require('./flash-another.jsx')) +) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/pages/finish/templates/success.tpl.html b/lib/gui/app/pages/finish/templates/success.tpl.html index 56dfbc91..c3ea8652 100644 --- a/lib/gui/app/pages/finish/templates/success.tpl.html +++ b/lib/gui/app/pages/finish/templates/success.tpl.html @@ -15,11 +15,8 @@ -
- -
+ +
diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js index 8d2f07c6..bbf369c3 100644 --- a/lib/gui/app/pages/main/main.js +++ b/lib/gui/app/pages/main/main.js @@ -42,6 +42,7 @@ const MainPage = angular.module(MODULE_NAME, [ require('../../components/file-selector'), require('../../components/featured-project'), require('../../components/reduced-flashing-infos'), + require('../../components/flash-another'), require('../../os/open-external/open-external'), require('../../os/dropzone/dropzone'), diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 08a9aca4..1243507b 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -47,7 +47,6 @@ svg-icon > img[disabled] { } .page-main .button-brick { - min-width: $btn-min-width; width: 200px; height: 48px; font-size: 16px; @@ -64,6 +63,12 @@ svg-icon > img[disabled] { top: 30%; } +.button-brick { + width: 200px; + height: 48px; + font-size: 16px; +} + %step-border { height: 2px; background-color: $palette-theme-dark-foreground; diff --git a/lib/gui/app/scss/components/_button.scss b/lib/gui/app/scss/components/_button.scss index b797aeff..11f4dddb 100644 --- a/lib/gui/app/scss/components/_button.scss +++ b/lib/gui/app/scss/components/_button.scss @@ -37,6 +37,7 @@ @extend .button-no-hover; background-color: $palette-theme-dark-disabled-background; color: $palette-theme-dark-disabled-foreground; + opacity: 1; } } diff --git a/lib/gui/app/styled-components.js b/lib/gui/app/styled-components.js index 4dd95771..5ba0f1c1 100644 --- a/lib/gui/app/styled-components.js +++ b/lib/gui/app/styled-components.js @@ -32,6 +32,7 @@ exports.StepButton = styled(Button) ` &:disabled { background-color: ${colors.dark.disabled.background}; color: ${colors.dark.disabled.foreground}; + opacity: 1; &:hover { background-color: ${colors.dark.disabled.background}; color: ${colors.dark.disabled.foreground}; diff --git a/lib/gui/app/theme.js b/lib/gui/app/theme.js index 4ceb4dce..206dcf51 100644 --- a/lib/gui/app/theme.js +++ b/lib/gui/app/theme.js @@ -26,7 +26,7 @@ exports.colors = { }, disabled: { foreground: '#787c7f', - background: '#313339' + background: '#3a3c41' } }, light: { diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 05bec5f5..2053e943 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6076,7 +6076,8 @@ body { margin-right: 2px; } .button[disabled] { background-color: #3a3c41; - color: #787c7f; } + color: #787c7f; + opacity: 1; } .button-block { display: block; @@ -6425,7 +6426,6 @@ svg-icon > img[disabled] { position: relative; } .page-main .button-brick { - min-width: 170px; width: 200px; height: 48px; font-size: 16px; } @@ -6440,6 +6440,11 @@ svg-icon > img[disabled] { right: -17px; top: 30%; } +.button-brick { + width: 200px; + height: 48px; + font-size: 16px; } + .page-main .step-border-left, .page-main .step-border-right { height: 2px; background-color: #fff; From 64ec6d0e58f4893712c5574661f323866a67dd5c Mon Sep 17 00:00:00 2001 From: Lorenzo Alberto Maria Ambrosi Date: Wed, 19 Dec 2018 16:02:38 +0100 Subject: [PATCH 2/2] Convert flash results component to React Change-type: minor Changelog-entry: Added React component for the Flash Results button Signed-off-by: Lorenzo Alberto Maria Ambrosi --- .eslintrc.yml | 3 - .../flash-another/flash-another.jsx | 17 +++- .../flash-results/flash-results.jsx | 66 +++++++++++++ lib/gui/app/components/flash-results/index.js | 34 +++++++ .../reduced-flashing-infos.jsx | 19 ++-- lib/gui/app/index.html | 2 +- .../app/pages/finish/controllers/finish.js | 2 + lib/gui/app/pages/finish/styles/_finish.scss | 79 +++++++++------ .../pages/finish/templates/success.tpl.html | 38 +++----- lib/gui/app/pages/main/main.js | 1 + lib/gui/app/pages/main/styles/_main.scss | 10 +- lib/gui/app/scss/main.scss | 2 +- lib/gui/css/main.css | 97 +++++++++++-------- npm-shrinkwrap.json | 34 ++++++- package.json | 2 +- 15 files changed, 289 insertions(+), 117 deletions(-) create mode 100644 lib/gui/app/components/flash-results/flash-results.jsx create mode 100644 lib/gui/app/components/flash-results/index.js diff --git a/.eslintrc.yml b/.eslintrc.yml index a0531ad4..6c8d9f0d 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -298,9 +298,6 @@ rules: # ECMAScript 6 - arrow-body-style: - - error - - always arrow-parens: - error - always diff --git a/lib/gui/app/components/flash-another/flash-another.jsx b/lib/gui/app/components/flash-another/flash-another.jsx index ec349e04..15f1b5c1 100644 --- a/lib/gui/app/components/flash-another/flash-another.jsx +++ b/lib/gui/app/components/flash-another/flash-another.jsx @@ -1,5 +1,5 @@ /* - * Copyright 2016 resin.io + * Copyright 2018 resin.io * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -17,20 +17,27 @@ 'use strict' const React = require('react') -const propTypes = require('prop-types') +const PropTypes = require('prop-types') +const styled = require('styled-components').default +const { position, right } = require('styled-system') + +const Div = styled.div ` + ${position} + ${right} +` const FlashAnother = (props) => { return ( -
+
-
+
) } FlashAnother.propTypes = { - onClick: propTypes.func + onClick: PropTypes.func } module.exports = FlashAnother diff --git a/lib/gui/app/components/flash-results/flash-results.jsx b/lib/gui/app/components/flash-results/flash-results.jsx new file mode 100644 index 00000000..29f6cbbb --- /dev/null +++ b/lib/gui/app/components/flash-results/flash-results.jsx @@ -0,0 +1,66 @@ +/* + * Copyright 2018 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 _ = require('lodash') +const styled = require('styled-components').default +const { position, left, top, space } = require('styled-system') +const { Underline } = require('./../../styled-components') + +const Div = styled.div ` + ${position} + ${top} + ${left} + ${space} +` + +/* eslint-disable no-inline-comments */ + +const FlashResults = (props) => { + return ( +
+
+ +

Flash Complete!

+
+
+ + {_.map(props.results.devices, (quantity, type) => { + return (quantity) ? ( +
+ + { quantity } + { props.message[type](quantity) } +
+ ) : null + })} + +
+
+ ) +} + +FlashResults.propTypes = { + results: PropTypes.object, + message: PropTypes.object, + errors: PropTypes.func +} + +module.exports = FlashResults diff --git a/lib/gui/app/components/flash-results/index.js b/lib/gui/app/components/flash-results/index.js new file mode 100644 index 00000000..325f3eea --- /dev/null +++ b/lib/gui/app/components/flash-results/index.js @@ -0,0 +1,34 @@ +/* + * Copyright 2018 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' + +/** + * @module Etcher.Components.FlashResults + */ + +const angular = require('angular') +const { react2angular } = require('react2angular') + +const MODULE_NAME = 'Etcher.Components.FlashResults' +const FlashResults = angular.module(MODULE_NAME, []) + +FlashResults.component( + 'flashResults', + react2angular(require('./flash-results.jsx')) +) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx index 0c15a1d5..bbcab727 100644 --- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx +++ b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx @@ -19,6 +19,7 @@ const React = require('react') const propTypes = require('prop-types') const styled = require('styled-components').default +const { color } = require('styled-system') const SvgIcon = require('../svg-icon/svg-icon.jsx') const Div = styled.div ` @@ -48,19 +49,23 @@ const Div = styled.div ` } ` +const Span = styled.span ` + ${color} +` + const ReducedFlashingInfos = (props) => { return (props.shouldShow) ? (
- + - { props.imageName } - { props.imageSize } - + { props.imageName } + { props.imageSize } + - + - { props.driveTitle } - + { props.driveTitle } +
) : null } diff --git a/lib/gui/app/index.html b/lib/gui/app/index.html index b923df45..89ab9b73 100644 --- a/lib/gui/app/index.html +++ b/lib/gui/app/index.html @@ -35,7 +35,7 @@
-