diff --git a/lib/gui/app/app.js b/lib/gui/app/app.js index 70658c9b..83a97a74 100644 --- a/lib/gui/app/app.js +++ b/lib/gui/app/app.js @@ -92,7 +92,6 @@ const app = angular.module('Etcher', [ // Pages require('./pages/main/main.ts').MODULE_NAME, require('./components/finish/index.ts').MODULE_NAME, - require('./components/settings/index.ts').MODULE_NAME, // OS require('./os/open-external/open-external') diff --git a/lib/gui/app/components/settings/index.ts b/lib/gui/app/components/settings/index.ts deleted file mode 100644 index ba82c00b..00000000 --- a/lib/gui/app/components/settings/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright 2019 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. - */ - -/** - * @module Etcher.Components.FeaturedProject - */ - -import * as angular from 'angular'; -import { react2angular } from 'react2angular'; -import { SettingsButton } from './settings'; - -export const MODULE_NAME = 'Etcher.Components.Settings'; -const Settings = angular.module(MODULE_NAME, []); - -Settings.component('settings', react2angular(SettingsButton)); diff --git a/lib/gui/app/components/settings/settings.tsx b/lib/gui/app/components/settings/settings.tsx index 2aac757b..d2f2110c 100644 --- a/lib/gui/app/components/settings/settings.tsx +++ b/lib/gui/app/components/settings/settings.tsx @@ -15,46 +15,22 @@ */ import { faGithub } from '@fortawesome/free-brands-svg-icons'; -import { faCog } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as _ from 'lodash'; import * as os from 'os'; -import * as propTypes from 'prop-types'; import * as React from 'react'; -import { Badge, Button, Checkbox, Modal, Provider } from 'rendition'; +import { Badge, Checkbox, Modal } from 'rendition'; import styled from 'styled-components'; -import packageJSON = require('../../../../../package.json'); + +import { version } from '../../../../../package.json'; import * as settings from '../../models/settings'; import * as store from '../../models/store'; import * as analytics from '../../modules/analytics'; import { open as openExternal } from '../../os/open-external/services/open-external'; -import { colors } from '../../theme'; const { useState } = React; const platform = os.platform(); -export const SettingsButton = () => { - const [hideModal, setHideModal] = useState(true); - - return ( - - - {hideModal ? null : ( - setHideModal(!value)} /> - )} - - ); -}; - -SettingsButton.propTypes = {}; - interface WarningModalProps { message: string; confirmLabel: string; @@ -219,7 +195,7 @@ export const SettingsModal: any = styled( ) } > - {packageJSON.version} + {version} @@ -249,7 +225,3 @@ export const SettingsModal: any = styled( justify-content: center; } `; - -SettingsModal.propTypes = { - toggleModal: propTypes.func, -}; diff --git a/lib/gui/app/index.html b/lib/gui/app/index.html index 892e71d8..6706b418 100644 --- a/lib/gui/app/index.html +++ b/lib/gui/app/index.html @@ -11,27 +11,6 @@ -
- - - - - - -
-
span, .col-xs-5.inline-flex.items-baseline > div { diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 45787241..fc9e1622 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -14,15 +14,24 @@ * limitations under the License. */ +import { faCog, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as path from 'path'; import * as React from 'react'; +import { Button } from 'rendition'; + import * as FeaturedProject from '../../components/featured-project/featured-project'; import * as ImageSelector from '../../components/image-selector/image-selector'; import * as ReducedFlashingInfos from '../../components/reduced-flashing-infos/reduced-flashing-infos'; +import { SettingsModal } from '../../components/settings/settings'; +import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx'; import * as flashState from '../../models/flash-state'; import * as selectionState from '../../models/selection-state'; +import * as settings from '../../models/settings'; import * as store from '../../models/store'; +import { open as openExternal } from '../../os/open-external/services/open-external'; import { ThemedProvider } from '../../styled-components'; +import { colors } from '../../theme'; import * as middleEllipsis from '../../utils/middle-ellipsis'; import * as messages from '../../../../shared/messages'; @@ -31,6 +40,9 @@ import { bytesToClosestUnit } from '../../../../shared/units'; import { DriveSelector } from './DriveSelector'; import { Flash } from './Flash'; +const DEFAULT_SUPPORT_URL = + 'https://github.com/balena-io/etcher/blob/master/SUPPORT.md'; + const getDrivesTitle = (selection: any) => { const drives = selection.getSelectedDrives(); @@ -58,6 +70,7 @@ const getImageBasename = (selection: any) => { const MainPage = ({ DriveSelectorService, $state }: any) => { const setRefresh = React.useState(false)[1]; const [isWebviewShowing, setIsWebviewShowing] = React.useState(false); + const [hideSettings, setHideSettings] = React.useState(true); React.useEffect(() => { return (store as any).observe(() => { setRefresh(ref => !ref); @@ -86,8 +99,72 @@ const MainPage = ({ DriveSelectorService, $state }: any) => { const progressMessage = messages.progress; return ( - -
+ +
+ + openExternal('https://www.balena.io/etcher?ref=etcher_footer') + } + tabIndex={100} + > + + + + +
+ {hideSettings ? null : ( + { + setHideSettings(!value); + }} + /> + )} + +
diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 25738cb1..3da1468b 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -199,12 +199,3 @@ img[disabled] { .space-vertical-large { position: relative; } - -#app-logo { - position: fixed; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 123px; -} diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index e75370c9..a119a6eb 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -206,30 +206,6 @@ body { margin: 20px 50px; } -.section-header { - text-align: right; - padding: 13px 14px; - - > .button { - padding: 0; - - > .glyphicon { - font-size: 24px; - } - } - - > * { - display: inline-block; - vertical-align: middle; - height: 24px; - margin: 0 10px; - } - - * { - z-index: 1; - } -} - .featured-project { webview { flex: 0 1; diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 25ef584f..dbde01a6 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6450,14 +6450,6 @@ img[disabled] { .space-vertical-large { position: relative; } -#app-logo { - position: fixed; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 123px; } - /* * Copyright 2016 balena.io * @@ -6473,6 +6465,9 @@ img[disabled] { * See the License for the specific language governing permissions and * limitations under the License. */ +.page-finish { + margin-top: 60px; } + .col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div { margin-bottom: -10px; } @@ -9867,21 +9862,6 @@ body { height: 100%; margin: 20px 50px; } -.section-header { - text-align: right; - padding: 13px 14px; } - .section-header > .button { - padding: 0; } - .section-header > .button > .glyphicon, .section-header > .button > .tick { - font-size: 24px; } - .section-header > * { - display: inline-block; - vertical-align: middle; - height: 24px; - margin: 0 10px; } - .section-header * { - z-index: 1; } - .featured-project webview { flex: 0 1; height: 0; diff --git a/scripts/html-lint.js b/scripts/html-lint.js index 3caa710e..92feb50e 100644 --- a/scripts/html-lint.js +++ b/scripts/html-lint.js @@ -26,7 +26,7 @@ angularValidate.validate( ], { customtags: [ - 'settings', 'flash' + 'flash' ], customattrs: [