jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 13:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add primary colors to default flow

Browse Source 
Change-type: patch
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2020-10-01 16:54:49 +02:00
parent b80a6b2feb
commit 3feb22ee66
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/gui/app/components/source-selector/source-selector.tsx
View File

@ -85,10 +85,13 @@ interface Flow {
} }
const FlowSelector = styled( const FlowSelector = styled(
({ flow, ...props }: { flow: Flow; props?: ButtonProps }) => ( ({ flow, ...props }: { flow: Flow } & ButtonProps) => (
<StepButton <StepButton
plain plain={!props.primary}
onClick={(evt) => flow.onClick(evt)} primary={props.primary}
onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
flow.onClick(evt)
}
icon={flow.icon} icon={flow.icon}
{...props} {...props}
> >
@ -144,6 +147,7 @@ interface SourceSelectorState {
showImageDetails: boolean; showImageDetails: boolean;
showURLSelector: boolean; showURLSelector: boolean;
showDriveSelector: boolean; showDriveSelector: boolean;
defaultFlowActive: boolean;
} }
export class SourceSelector extends React.Component< export class SourceSelector extends React.Component<
@ -160,6 +164,7 @@ export class SourceSelector extends React.Component<
showImageDetails: false, showImageDetails: false,
showURLSelector: false, showURLSelector: false,
showDriveSelector: false, showDriveSelector: false,
defaultFlowActive: true,
}; };
// Bind `this` since it's used in an event's callback // Bind `this` since it's used in an event's callback
@ -405,6 +410,10 @@ export class SourceSelector extends React.Component<
}); });
} }
private setDefaultFlowActive(defaultFlowActive: boolean) {
this.setState({ defaultFlowActive });
}
// TODO add a visual change when dragging a file over the selector // TODO add a visual change when dragging a file over the selector
public render() { public render() {
const { flashing } = this.props; const { flashing } = this.props;
@ -471,12 +480,15 @@ export class SourceSelector extends React.Component<
) : ( ) : (
<> <>
<FlowSelector <FlowSelector
primary={this.state.defaultFlowActive}
key="Flash from file" key="Flash from file"
flow={{ flow={{
onClick: () => this.openImageSelector(), onClick: () => this.openImageSelector(),
label: 'Flash from file', label: 'Flash from file',
icon: <FileSvg height="1em" fill="currentColor" />, icon: <FileSvg height="1em" fill="currentColor" />,
}} }}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/> />
<FlowSelector <FlowSelector
key="Flash from URL" key="Flash from URL"
@ -485,6 +497,8 @@ export class SourceSelector extends React.Component<
label: 'Flash from URL', label: 'Flash from URL',
icon: <LinkSvg height="1em" fill="currentColor" />, icon: <LinkSvg height="1em" fill="currentColor" />,
}} }}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/> />
<FlowSelector <FlowSelector
key="Clone drive" key="Clone drive"
@ -493,6 +507,8 @@ export class SourceSelector extends React.Component<
label: 'Clone drive', label: 'Clone drive',
icon: <CopySvg height="1em" fill="currentColor" />, icon: <CopySvg height="1em" fill="currentColor" />,
}} }}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/> />
</> </>
)} )}