jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +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(
({ flow, ...props }: { flow: Flow; props?: ButtonProps }) => (
({ flow, ...props }: { flow: Flow } & ButtonProps) => (
<StepButton
plain
onClick={(evt) => flow.onClick(evt)}
plain={!props.primary}
primary={props.primary}
onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
flow.onClick(evt)
}
icon={flow.icon}
{...props}
>
@ -144,6 +147,7 @@ interface SourceSelectorState {
showImageDetails: boolean;
showURLSelector: boolean;
showDriveSelector: boolean;
defaultFlowActive: boolean;
}
export class SourceSelector extends React.Component<
@ -160,6 +164,7 @@ export class SourceSelector extends React.Component<
showImageDetails: false,
showURLSelector: false,
showDriveSelector: false,
defaultFlowActive: true,
};
// 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
public render() {
const { flashing } = this.props;
@ -471,12 +480,15 @@ export class SourceSelector extends React.Component<
) : (
<>
<FlowSelector
primary={this.state.defaultFlowActive}
key="Flash from file"
flow={{
onClick: () => this.openImageSelector(),
label: 'Flash from file',
icon: <FileSvg height="1em" fill="currentColor" />,
}}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/>
<FlowSelector
key="Flash from URL"
@ -485,6 +497,8 @@ export class SourceSelector extends React.Component<
label: 'Flash from URL',
icon: <LinkSvg height="1em" fill="currentColor" />,
}}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/>
<FlowSelector
key="Clone drive"
@ -493,6 +507,8 @@ export class SourceSelector extends React.Component<
label: 'Clone drive',
icon: <CopySvg height="1em" fill="currentColor" />,
}}
onMouseEnter={() => this.setDefaultFlowActive(false)}
onMouseLeave={() => this.setDefaultFlowActive(true)}
/>
</>
)}