mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-23 19:26:33 +00:00
Fix theme warnings
Changelog-entry: Fix theme warnings Change-type: patch
This commit is contained in:
parent
f1be4f50a3
commit
4a6a471345
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user