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

Fix theme warnings

Browse Source 
Changelog-entry: Fix theme warnings
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-05-06 16:15:47 +02:00
parent f1be4f50a3
commit 4a6a471345
1 changed files with 135 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,146 +130,153 @@ export class MainPage extends React.Component<
}); });
} }
public render() { private renderMain() {
const shouldDriveStepBeDisabled = !this.state.hasImage; const shouldDriveStepBeDisabled = !this.state.hasImage;
const shouldFlashStepBeDisabled = const shouldFlashStepBeDisabled =
!this.state.hasImage || !this.state.hasDrive; !this.state.hasImage || !this.state.hasDrive;
return (
if (this.state.current === 'main') { <>
return ( <header
<ThemedProvider style={{ height: '100%', width: '100%' }}> id="app-header"
<header style={{
id="app-header" width: '100%',
padding: '13px 14px',
textAlign: 'center',
}}
>
<span
style={{ style={{
width: '100%', cursor: 'pointer',
padding: '13px 14px', }}
textAlign: 'center', onClick={() =>
openExternal('https://www.balena.io/etcher?ref=etcher_footer')
}
tabIndex={100}
>
<SVGIcon
paths={['../../assets/etcher.svg']}
width="123px"
height="22px"
/>
</span>
<span
style={{
float: 'right',
position: 'absolute',
right: 0,
}} }}
> >
<span <Icon
style={{ icon={<FontAwesomeIcon icon={faCog} />}
cursor: 'pointer', plain
}} tabIndex={5}
onClick={() => onClick={() => this.setState({ hideSettings: false })}
openExternal('https://www.balena.io/etcher?ref=etcher_footer')
}
tabIndex={100}
>
<SVGIcon
paths={['../../assets/etcher.svg']}
width="123px"
height="22px"
/>
</span>
<span
style={{
float: 'right',
position: 'absolute',
right: 0,
}}
>
<Icon
icon={<FontAwesomeIcon icon={faCog} />}
plain
tabIndex={5}
onClick={() => this.setState({ hideSettings: false })}
/>
{!settings.getSync('disableExternalLinks') && (
<Icon
icon={<FontAwesomeIcon icon={faQuestionCircle} />}
onClick={() =>
openExternal(
selectionState.getImageSupportUrl() ||
'https://github.com/balena-io/etcher/blob/master/SUPPORT.md',
)
}
tabIndex={6}
/>
)}
</span>
</header>
{this.state.hideSettings ? null : (
<SettingsModal
toggleModal={(value: boolean) => {
this.setState({ hideSettings: !value });
}}
/> />
{!settings.getSync('disableExternalLinks') && (
<Icon
icon={<FontAwesomeIcon icon={faQuestionCircle} />}
onClick={() =>
openExternal(
selectionState.getImageSupportUrl() ||
'https://github.com/balena-io/etcher/blob/master/SUPPORT.md',
)
}
tabIndex={6}
/>
)}
</span>
</header>
{this.state.hideSettings ? null : (
<SettingsModal
toggleModal={(value: boolean) => {
this.setState({ hideSettings: !value });
}}
/>
)}
<Flex
className="page-main row around-xs"
style={{ margin: '110px 50px' }}
>
<div className="col-xs">
<SourceSelector
flashing={this.state.isFlashing}
afterSelected={(source: SourceOptions) =>
this.setState({ source })
}
/>
</div>
<div className="col-xs">
<DriveSelector
webviewShowing={this.state.isWebviewShowing}
disabled={shouldDriveStepBeDisabled}
nextStepDisabled={shouldFlashStepBeDisabled}
hasDrive={this.state.hasDrive}
flashing={this.state.isFlashing}
/>
</div>
{this.state.isFlashing && (
<div
className={`featured-project ${
this.state.isFlashing && this.state.isWebviewShowing
? 'fp-visible'
: ''
}`}
>
<FeaturedProject
onWebviewShow={(isWebviewShowing: boolean) => {
this.setState({ isWebviewShowing });
}}
/>
</div>
)} )}
<Flex <div>
className="page-main row around-xs" <ReducedFlashingInfos
style={{ margin: '110px 50px' }} imageLogo={this.state.imageLogo}
> imageName={middleEllipsis(this.state.imageName, 16)}
<div className="col-xs"> imageSize={
<SourceSelector _.isNumber(this.state.imageSize)
flashing={this.state.isFlashing} ? (bytesToClosestUnit(this.state.imageSize) as string)
afterSelected={(source: SourceOptions) => : ''
this.setState({ source }) }
} driveTitle={middleEllipsis(this.state.driveTitle, 16)}
/> shouldShow={this.state.isFlashing && this.state.isWebviewShowing}
</div> />
</div>
<div className="col-xs"> <div className="col-xs">
<DriveSelector <Flash
webviewShowing={this.state.isWebviewShowing} goToSuccess={() => this.setState({ current: 'success' })}
disabled={shouldDriveStepBeDisabled} shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
nextStepDisabled={shouldFlashStepBeDisabled} source={this.state.source}
hasDrive={this.state.hasDrive} />
flashing={this.state.isFlashing} </div>
/> </Flex>
</div> </>
);
}
{this.state.isFlashing && ( private renderSuccess() {
<div return (
className={`featured-project ${ <div className="section-loader isFinish">
this.state.isFlashing && this.state.isWebviewShowing <FinishPage goToMain={() => this.setState({ current: 'main' })} />
? 'fp-visible' <SafeWebview src="https://www.balena.io/etcher/success-banner/" />
: '' </div>
}`} );
> }
<FeaturedProject
onWebviewShow={(isWebviewShowing: boolean) => {
this.setState({ isWebviewShowing });
}}
/>
</div>
)}
<div> public render() {
<ReducedFlashingInfos return (
imageLogo={this.state.imageLogo} <ThemedProvider style={{ height: '100%', width: '100%' }}>
imageName={middleEllipsis(this.state.imageName, 16)} {this.state.current === 'main'
imageSize={ ? this.renderMain()
_.isNumber(this.state.imageSize) : this.renderSuccess()}
? (bytesToClosestUnit(this.state.imageSize) as string) </ThemedProvider>
: '' );
}
driveTitle={middleEllipsis(this.state.driveTitle, 16)}
shouldShow={
this.state.isFlashing && this.state.isWebviewShowing
}
/>
</div>
<div className="col-xs">
<Flash
goToSuccess={() => this.setState({ current: 'success' })}
shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
source={this.state.source}
/>
</div>
</Flex>
</ThemedProvider>
);
} else if (this.state.current === 'success') {
return (
<div className="section-loader isFinish">
<FinishPage goToMain={() => this.setState({ current: 'main' })} />
<SafeWebview src="https://www.balena.io/etcher/success-banner/" />
</div>
);
}
} }
} }