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
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')

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 { 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 (
<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 {
message: string;
confirmLabel: string;
@ -219,7 +195,7 @@ export const SettingsModal: any = styled(
)
}
>
<FontAwesomeIcon icon={faGithub} /> {packageJSON.version}
<FontAwesomeIcon icon={faGithub} /> {version}
</span>
</div>
</div>
@ -249,7 +225,3 @@ export const SettingsModal: any = styled(
justify-content: center;
}
`;
SettingsModal.propTypes = {
toggleModal: propTypes.func,
};

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

@ -11,27 +11,6 @@
</head>
<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>
<div class="section-loader"

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

@ -15,8 +15,7 @@
*/
.page-finish {
// margin-top: -15px;
// flex: 1;
margin-top: 60px;
}
.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.
*/
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 (
<ThemedProvider style={{ display: 'flex', height: '100%' }}>
<div className="page-main row around-xs">
<ThemedProvider style={{ height: '100%' }}>
<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">
<ImageSelector flashing={isFlashing} />
</div>

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

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

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

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

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

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

2
scripts/html-lint.js
View File

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