jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Grey-out disabled buttons

Browse Source 
Summary:
For "primary" and "danger" buttons, you previously couldn't see any difference between disabled and enabled ones.
This fixes that by greying them out when disabled.

Reviewed By: passy

Differential Revision: D17738031

fbshipit-source-id: 82e16b8881f3d404aafae8a7837151090bb6bbee
This commit is contained in:
John Knox
2019-10-07 08:49:05 -07:00
committed by Facebook Github Bot
parent b50aef8f15
commit 8e5b69164a
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/components/Button.tsx
View File

@@ -20,14 +20,15 @@ type ButtonType = 'primary' | 'success' | 'warning' | 'danger';
const borderColor = (props: { const borderColor = (props: {
windowIsFocused?: boolean; windowIsFocused?: boolean;
disabled?: boolean;
type?: ButtonType; type?: ButtonType;
depressed?: boolean; depressed?: boolean;
}) => { }) => {
if (!props.windowIsFocused) { if (!props.windowIsFocused) {
return colors.macOSTitleBarButtonBorderBlur; return colors.macOSTitleBarButtonBorderBlur;
} else if (props.type === 'danger') { } else if (props.type === 'danger' && !props.disabled) {
return colors.red; return colors.red;
} else if (props.type === 'primary') { } else if (props.type === 'primary' && !props.disabled) {
return '#237FF1'; return '#237FF1';
} else if (props.depressed) { } else if (props.depressed) {
return colors.macOSTitleBarButtonBorderBottom; return colors.macOSTitleBarButtonBorderBottom;
@@ -37,14 +38,15 @@ const borderColor = (props: {
}; };
const borderBottomColor = (props: { const borderBottomColor = (props: {
windowIsFocused?: boolean; windowIsFocused?: boolean;
disabled?: boolean;
type?: ButtonType; type?: ButtonType;
depressed?: boolean; depressed?: boolean;
}) => { }) => {
if (!props.windowIsFocused) { if (!props.windowIsFocused) {
return colors.macOSTitleBarButtonBorderBlur; return colors.macOSTitleBarButtonBorderBlur;
} else if (props.type === 'danger') { } else if (props.type === 'danger' && !props.disabled) {
return colors.red; return colors.red;
} else if (props.type === 'primary') { } else if (props.type === 'primary' && !props.disabled) {
return '#237FF1'; return '#237FF1';
} else { } else {
return colors.macOSTitleBarButtonBorderBottom; return colors.macOSTitleBarButtonBorderBottom;
@@ -53,10 +55,11 @@ const borderBottomColor = (props: {
const backgroundImage = (props: { const backgroundImage = (props: {
windowIsFocused?: boolean; windowIsFocused?: boolean;
disabled?: boolean;
type?: ButtonType; type?: ButtonType;
depressed?: boolean; depressed?: boolean;
}) => { }) => {
if (props.windowIsFocused) { if (props.windowIsFocused && !props.disabled) {
if (props.depressed) { if (props.depressed) {
return `linear-gradient(to bottom, ${ return `linear-gradient(to bottom, ${
colors.macOSTitleBarBorderBlur colors.macOSTitleBarBorderBlur
@@ -80,9 +83,13 @@ const color = (props: {
type?: ButtonType; type?: ButtonType;
disabled?: boolean; disabled?: boolean;
}) => { }) => {
if (props.type === 'danger' && props.windowIsFocused) { if (props.type === 'danger' && props.windowIsFocused && !props.disabled) {
return colors.red; return colors.red;
} else if (props.type === 'primary' && props.windowIsFocused) { } else if (
props.type === 'primary' &&
props.windowIsFocused &&
!props.disabled
) {
return colors.white; return colors.white;
} else if (props.disabled) { } else if (props.disabled) {
return colors.macOSTitleBarIconBlur; return colors.macOSTitleBarIconBlur;
@@ -113,9 +120,10 @@ const StyledButton = styled('div')(
disabled?: boolean; disabled?: boolean;
dropdown?: Array<MenuItemConstructorOptions>; dropdown?: Array<MenuItemConstructorOptions>;
}) => ({ }) => ({
backgroundColor: !props.windowIsFocused backgroundColor:
? colors.macOSTitleBarButtonBackgroundBlur props.windowIsFocused && !props.disabled
: colors.white, ? colors.white
: colors.macOSTitleBarButtonBackgroundBlur,
backgroundImage: backgroundImage(props), backgroundImage: backgroundImage(props),
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: 1, borderWidth: 1,