From 3ca50a1e2d95c73890009ffe1df9243a9a9df045 Mon Sep 17 00:00:00 2001 From: Lorenzo Alberto Maria Ambrosi Date: Tue, 23 Jun 2020 11:22:33 +0200 Subject: [PATCH] Refactor UI without bootstrap & flexboxgrid Change-type: patch Changelog-entry: Refactor UI without bootstrap & flexboxgrid Signed-off-by: Lorenzo Alberto Maria Ambrosi --- .../featured-project/featured-project.tsx | 18 +-- lib/gui/app/components/finish/finish.tsx | 80 +++++++------- .../flash-another/flash-another.tsx | 11 +- .../flash-results/flash-results.tsx | 26 +++-- .../reduced-flashing-infos.tsx | 6 +- lib/gui/app/pages/finish/styles/_finish.scss | 103 ------------------ lib/gui/app/pages/main/MainPage.tsx | 32 ++++-- lib/gui/app/pages/main/styles/_main.scss | 19 ---- lib/gui/app/scss/main.scss | 14 +-- 9 files changed, 90 insertions(+), 219 deletions(-) delete mode 100644 lib/gui/app/pages/finish/styles/_finish.scss delete mode 100644 lib/gui/app/pages/main/styles/_main.scss diff --git a/lib/gui/app/components/featured-project/featured-project.tsx b/lib/gui/app/components/featured-project/featured-project.tsx index ef4a80ef..9ed36346 100644 --- a/lib/gui/app/components/featured-project/featured-project.tsx +++ b/lib/gui/app/components/featured-project/featured-project.tsx @@ -45,19 +45,13 @@ export class FeaturedProject extends React.Component< public async componentDidMount() { try { - let endpoint = + const url = new URL( (await settings.get('featuredProjectEndpoint')) || - 'https://assets.balena.io/etcher-featured/index.html'; - const efpParams = { - borderRight: false, - darkBackground: true, - }; - let params = '?'; - for (const [param, value] of Object.entries(efpParams)) { - params += `${param}=${value}&`; - } - endpoint += params; - this.setState({ endpoint }); + 'https://assets.balena.io/etcher-featured/index.html', + ); + url.searchParams.append('borderRight', 'false'); + url.searchParams.append('darkBackground', 'true'); + this.setState({ endpoint: url.toString() }); } catch (error) { analytics.logException(error); } diff --git a/lib/gui/app/components/finish/finish.tsx b/lib/gui/app/components/finish/finish.tsx index 7c4b1b51..6484461f 100644 --- a/lib/gui/app/components/finish/finish.tsx +++ b/lib/gui/app/components/finish/finish.tsx @@ -16,6 +16,7 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { Flex } from 'rendition'; import { v4 as uuidV4 } from 'uuid'; import * as flashState from '../../models/flash-state'; @@ -56,50 +57,45 @@ function formattedErrors() { function FinishPage({ goToMain }: { goToMain: () => void }) { const results = flashState.getFlashResults().results || {}; return ( -
-
-
- + + + - { - restart(goToMain); - }} + { + restart(goToMain); + }} + /> + + + + + Thanks for using + + openExternal('https://balena.io/etcher?ref=etcher_offline_banner') + } /> -
- -
-
-
- Thanks for using - - openExternal( - 'https://balena.io/etcher?ref=etcher_offline_banner', - ) - } - > - - -
-
- made with - - by - - openExternal('https://balena.io?ref=etcher_success') - } - > - - -
-
-
-
-
+ + + made with + + by + openExternal('https://balena.io?ref=etcher_success')} + /> + + + ); } diff --git a/lib/gui/app/components/flash-another/flash-another.tsx b/lib/gui/app/components/flash-another/flash-another.tsx index 9157bdb1..5efc25b4 100644 --- a/lib/gui/app/components/flash-another/flash-another.tsx +++ b/lib/gui/app/components/flash-another/flash-another.tsx @@ -15,24 +15,17 @@ */ import * as React from 'react'; -import styled from 'styled-components'; import { BaseButton } from '../../styled-components'; -const FlashAnotherButton = styled(BaseButton)` - position: absolute; - right: 152px; - top: 60px; -`; - export interface FlashAnotherProps { onClick: () => void; } export const FlashAnother = (props: FlashAnotherProps) => { return ( - + Flash Another - + ); }; diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index a3e55d4b..aefff367 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/lib/gui/app/components/flash-results/flash-results.tsx @@ -16,6 +16,7 @@ import { faCheckCircle, faCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as _ from 'lodash'; import outdent from 'outdent'; import * as React from 'react'; import { Txt, Flex } from 'rendition'; @@ -39,17 +40,21 @@ export function FlashResults({ }; }) { const allDevicesFailed = results.devices.successful === 0; - const effectiveSpeed = bytesToMegabytes( - results.sourceMetadata.size / - (results.bytesWritten / results.averageFlashingSpeed), - ).toFixed(1); + const effectiveSpeed = _.round( + bytesToMegabytes( + results.sourceMetadata.size / + (results.bytesWritten / results.averageFlashingSpeed), + ), + 1, + ); return ( @@ -66,12 +71,10 @@ export function FlashResults({ Flash Complete! - - {Object.keys(results.devices).map((type: 'failed' | 'successful') => { - const quantity = results.devices[type]; + + {Object.entries(results.devices).map(([type, quantity]) => { return quantity ? ( @@ -86,7 +89,6 @@ export function FlashResults({ })} {!allDevicesFailed && ( {middleEllipsis(this.props.imageName, 16)} @@ -64,7 +64,7 @@ export class ReducedFlashingInfos extends React.Component< - + {middleEllipsis(this.props.driveTitle, 16)} diff --git a/lib/gui/app/pages/finish/styles/_finish.scss b/lib/gui/app/pages/finish/styles/_finish.scss deleted file mode 100644 index ce4a12a6..00000000 --- a/lib/gui/app/pages/finish/styles/_finish.scss +++ /dev/null @@ -1,103 +0,0 @@ -/* - * Copyright 2016 balena.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. - */ - -.page-finish { - margin-top: 60px; -} - -.page-finish .title, -.page-finish .title h3 { - color: $palette-theme-dark-foreground; - font-weight: bold; -} - -.page-finish .center { - display: flex; - align-items: center; - justify-content: center; -} - -.page-finish .box > div > button { - margin-right: 20px; -} - -.page-finish webview { - width: 800px; - height: 300px; - position: absolute; - top: 80px; - left: 0; - z-index: 9001; -} - -.page-finish .fallback-banner { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - position: absolute; - bottom: 0; - color: white; - height: 320px; - width: 100vw; - left: 0; - - > * { - display: flex; - justify-content: center; - align-items: center; - } - - .caption { - display: flex; - font-weight: 500; - } - - .caption-big { - font-size: 28px; - font-weight: bold; - position: absolute; - top: 75px; - } - - .caption-small { - font-size: 12px; - } - - .fallback-footer { - font-size: 12px; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - position: absolute; - bottom: 0; - max-height: 21px; - margin-bottom: 17px; - } - - .section-footer { - position: absolute; - right: 0; - bottom: 0; - - .footer-right { - color: #7e8085; - font-size: 12px; - margin-right: 30px; - } - } -} diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 737baad4..bbbd5a67 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -161,17 +161,21 @@ export class MainPage extends React.Component< !this.state.isFlashing || !this.state.isWebviewShowing; return ( <> -
- - - + /> - )} - -
+ + {this.state.hideSettings ? null : ( { @@ -320,15 +322,23 @@ export class MainPage extends React.Component< private renderSuccess() { return ( -
+ { flashState.resetState(); this.setState({ current: 'main' }); }} /> - -
+ + ); } diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss deleted file mode 100644 index 600d71e1..00000000 --- a/lib/gui/app/pages/main/styles/_main.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright 2016 balena.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. - */ - -.disabled { - opacity: $disabled-opacity; -} diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index e520c0b6..84b6cc64 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -14,17 +14,9 @@ * limitations under the License. */ -$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/"; -$font-size-base: 16px; -$cursor-disabled: initial; -$link-hover-decoration: none; -$btn-min-width: 170px; -$link-color: #ddd; $disabled-opacity: 0.2; @import "./modules/theme"; -@import "../pages/main/styles/main"; -@import "../pages/finish/styles/finish"; @import "./desktop"; @font-face { @@ -46,9 +38,11 @@ $disabled-opacity: 0.2; // Prevent white flash when running application html { background-color: $palette-theme-dark-background; + margin: 0; } body { + margin: 0; background-color: $palette-theme-dark-background; letter-spacing: 0.1px; display: flex; @@ -104,3 +98,7 @@ body { overflow: hidden; } } + +.disabled { + opacity: $disabled-opacity; +}