jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 19:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

React header

Browse Source 
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2019-12-09 17:17:29 +01:00 committed by Lorenzo Alberto Maria Ambrosi
parent 67eb593164
commit 3bdac794b3
10 changed files with 88 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/gui/app/app.js
View File

@ -92,7 +92,6 @@ const app = angular.module('Etcher', [
// Pages // Pages
require('./pages/main/main.ts').MODULE_NAME, require('./pages/main/main.ts').MODULE_NAME,
require('./components/finish/index.ts').MODULE_NAME, require('./components/finish/index.ts').MODULE_NAME,
require('./components/settings/index.ts').MODULE_NAME,
// OS // OS
require('./os/open-external/open-external') require('./os/open-external/open-external')

28
lib/gui/app/components/settings/index.ts
View File

@ -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));

36
lib/gui/app/components/settings/settings.tsx
View File

@ -15,46 +15,22 @@
*/ */
import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { faCog } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as os from 'os'; import * as os from 'os';
import * as propTypes from 'prop-types';
import * as React from 'react'; 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 styled from 'styled-components';
import packageJSON = require('../../../../../package.json');
import { version } from '../../../../../package.json';
import * as settings from '../../models/settings'; import * as settings from '../../models/settings';
import * as store from '../../models/store'; import * as store from '../../models/store';
import * as analytics from '../../modules/analytics'; import * as analytics from '../../modules/analytics';
import { open as openExternal } from '../../os/open-external/services/open-external'; import { open as openExternal } from '../../os/open-external/services/open-external';
import { colors } from '../../theme';
const { useState } = React; const { useState } = React;
const platform = os.platform(); const platform = os.platform();
export const SettingsButton = () => {
const [hideModal, setHideModal] = useState(true);
return (
<Provider>
<Button
icon={<FontAwesomeIcon icon={faCog} />}
color={colors.secondary.background}
fontSize={24}
plain
onClick={() => setHideModal(false)}
tabIndex={5}
></Button>
{hideModal ? null : (
<SettingsModal toggleModal={(value: boolean) => setHideModal(!value)} />
)}
</Provider>
);
};
SettingsButton.propTypes = {};
interface WarningModalProps { interface WarningModalProps {
message: string; message: string;
confirmLabel: string; confirmLabel: string;
@ -219,7 +195,7 @@ export const SettingsModal: any = styled(
) )
} }
> >
<FontAwesomeIcon icon={faGithub} /> {packageJSON.version} <FontAwesomeIcon icon={faGithub} /> {version}
</span> </span>
</div> </div>
</div> </div>
@ -249,7 +225,3 @@ export const SettingsModal: any = styled(
justify-content: center; justify-content: center;
} }
`; `;
SettingsModal.propTypes = {
toggleModal: propTypes.func,
};

21
lib/gui/app/index.html
View File

@ -11,27 +11,6 @@
</head> </head>
<body> <body>
<header class="section-header" ng-controller="HeaderController as header">
<span
id="app-logo"
os-open-external="https://www.balena.io/etcher?ref=etcher_footer"
tabindex="100">
<svg-icon paths="[ '../../assets/etcher.svg' ]"
width="'123px'"
height="'22px'"></svg-icon>
</span>
<settings tabindex="4">
</settings>
<button class="button button-link"
ng-if="header.shouldShowHelp()"
ng-click="header.openHelpPage()"
tabindex="5">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
</header>
<main ui-view></main> <main ui-view></main>
<div class="section-loader" <div class="section-loader"

3
lib/gui/app/pages/finish/styles/_finish.scss
View File

@ -15,8 +15,7 @@
*/ */
.page-finish { .page-finish {
// margin-top: -15px; margin-top: 60px;
// flex: 1;
} }
.col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div { .col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div {

81
lib/gui/app/pages/main/MainPage.tsx
View File

@ -14,15 +14,24 @@
* limitations under the License. * 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 path from 'path';
import * as React from 'react'; import * as React from 'react';
import { Button } from 'rendition';
import * as FeaturedProject from '../../components/featured-project/featured-project'; import * as FeaturedProject from '../../components/featured-project/featured-project';
import * as ImageSelector from '../../components/image-selector/image-selector'; import * as ImageSelector from '../../components/image-selector/image-selector';
import * as ReducedFlashingInfos from '../../components/reduced-flashing-infos/reduced-flashing-infos'; 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 flashState from '../../models/flash-state';
import * as selectionState from '../../models/selection-state'; import * as selectionState from '../../models/selection-state';
import * as settings from '../../models/settings';
import * as store from '../../models/store'; import * as store from '../../models/store';
import { open as openExternal } from '../../os/open-external/services/open-external';
import { ThemedProvider } from '../../styled-components'; import { ThemedProvider } from '../../styled-components';
import { colors } from '../../theme';
import * as middleEllipsis from '../../utils/middle-ellipsis'; import * as middleEllipsis from '../../utils/middle-ellipsis';
import * as messages from '../../../../shared/messages'; import * as messages from '../../../../shared/messages';
@ -31,6 +40,9 @@ import { bytesToClosestUnit } from '../../../../shared/units';
import { DriveSelector } from './DriveSelector'; import { DriveSelector } from './DriveSelector';
import { Flash } from './Flash'; import { Flash } from './Flash';
const DEFAULT_SUPPORT_URL =
'https://github.com/balena-io/etcher/blob/master/SUPPORT.md';
const getDrivesTitle = (selection: any) => { const getDrivesTitle = (selection: any) => {
const drives = selection.getSelectedDrives(); const drives = selection.getSelectedDrives();
@ -58,6 +70,7 @@ const getImageBasename = (selection: any) => {
const MainPage = ({ DriveSelectorService, $state }: any) => { const MainPage = ({ DriveSelectorService, $state }: any) => {
const setRefresh = React.useState(false)[1]; const setRefresh = React.useState(false)[1];
const [isWebviewShowing, setIsWebviewShowing] = React.useState(false); const [isWebviewShowing, setIsWebviewShowing] = React.useState(false);
const [hideSettings, setHideSettings] = React.useState(true);
React.useEffect(() => { React.useEffect(() => {
return (store as any).observe(() => { return (store as any).observe(() => {
setRefresh(ref => !ref); setRefresh(ref => !ref);
@ -86,8 +99,72 @@ const MainPage = ({ DriveSelectorService, $state }: any) => {
const progressMessage = messages.progress; const progressMessage = messages.progress;
return ( return (
<ThemedProvider style={{ display: 'flex', height: '100%' }}> <ThemedProvider style={{ height: '100%' }}>
<div className="page-main row around-xs"> <header
style={{
width: '100%',
padding: '13px 14px',
textAlign: 'center',
}}
>
<span
style={{
cursor: 'pointer',
}}
onClick={() =>
openExternal('https://www.balena.io/etcher?ref=etcher_footer')
}
tabIndex={100}
>
<SvgIcon
paths={['../../assets/etcher.svg']}
width="123px"
height="22px"
></SvgIcon>
</span>
<span
style={{
float: 'right',
position: 'absolute',
right: 0,
}}
>
<Button
icon={<FontAwesomeIcon icon={faCog} />}
color={colors.secondary.background}
fontSize={24}
style={{ width: '30px' }}
plain
onClick={() => setHideSettings(false)}
tabIndex={5}
/>
{!settings.get('disableExternalLinks') && (
<Button
icon={<FontAwesomeIcon icon={faQuestionCircle} />}
color={colors.secondary.background}
fontSize={24}
style={{ width: '30px' }}
plain
onClick={() =>
openExternal(
selectionState.getImageSupportUrl() || DEFAULT_SUPPORT_URL,
)
}
tabIndex={5}
/>
)}
</span>
</header>
{hideSettings ? null : (
<SettingsModal
toggleModal={(value: boolean) => {
setHideSettings(!value);
}}
/>
)}
<div className="page-main row around-xs" style={{ margin: '110px 50px' }}>
<div className="col-xs"> <div className="col-xs">
<ImageSelector flashing={isFlashing} /> <ImageSelector flashing={isFlashing} />
</div> </div>

9
lib/gui/app/pages/main/styles/_main.scss
View File

@ -199,12 +199,3 @@ img[disabled] {
.space-vertical-large { .space-vertical-large {
position: relative; position: relative;
} }
#app-logo {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 123px;
}

24
lib/gui/app/scss/main.scss
View File

@ -206,30 +206,6 @@ body {
margin: 20px 50px; 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 { .featured-project {
webview { webview {
flex: 0 1; flex: 0 1;

26
lib/gui/css/main.css
View File

@ -6450,14 +6450,6 @@ img[disabled] {
.space-vertical-large { .space-vertical-large {
position: relative; } position: relative; }
#app-logo {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 123px; }
/* /*
* Copyright 2016 balena.io * Copyright 2016 balena.io
* *
@ -6473,6 +6465,9 @@ img[disabled] {
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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 { .col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div {
margin-bottom: -10px; } margin-bottom: -10px; }
@ -9867,21 +9862,6 @@ body {
height: 100%; height: 100%;
margin: 20px 50px; } 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 { .featured-project webview {
flex: 0 1; flex: 0 1;
height: 0; height: 0;

2
scripts/html-lint.js
View File

@ -26,7 +26,7 @@ angularValidate.validate(
], ],
{ {
customtags: [ customtags: [
'settings', 'flash' 'flash'
], ],
customattrs: [ customattrs: [