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

adding primary and compact buttons

Browse Source 
Summary: Adding a style for `primary` buttons

Reviewed By: priteshrnandgaonkar

Differential Revision: D13417284

fbshipit-source-id: 8ef46092d79ee0f9d39167aa2662a84caca9aa11
This commit is contained in:
Daniel Büchele
2018-12-18 08:27:25 -08:00
committed by Facebook Github Bot
parent 6ffc027051
commit c540fe5529
4 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/__tests__/__snapshots__/App.electron.js.snap
View File

@@ -8,14 +8,13 @@ exports[`Empty app state matches snapshot 1`] = `
className="toolbar css-1u64wvw" className="toolbar css-1u64wvw"
> >
<div <div
className="css-7nzs1f" className="css-q7gju5"
disabled={false}
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
> >
<div <div
className="css-at56xe" className="css-1h9aj9a"
color="#acacac" color="#acacac"
size={12} size={12}
src="https://external.xx.fbcdn.net/assets/?name=minus-circle&variant=filled&size=12&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=minus-circle&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -26,7 +25,7 @@ exports[`Empty app state matches snapshot 1`] = `
className="css-1ayt83l" className="css-1ayt83l"
> >
<div <div
className="css-1telx8z" className="css-rb77sv"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
@@ -34,14 +33,14 @@ exports[`Empty app state matches snapshot 1`] = `
title="Take Screenshot" title="Take Screenshot"
> >
<div <div
className="css-11ecny9" className="css-1dg3xuk"
color="#acacac" color="#acacac"
size={12} size={12}
src="https://external.xx.fbcdn.net/assets/?name=camera&variant=filled&size=12&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=camera&variant=filled&size=12&set=facebook_icons&density=1x"
/> />
</div> </div>
<div <div
className="css-1telx8z" className="css-rb77sv"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
@@ -49,7 +48,7 @@ exports[`Empty app state matches snapshot 1`] = `
title="Make Screen Recording" title="Make Screen Recording"
> >
<div <div
className="css-1qxark3" className="css-wvm62d"
color="#acacac" color="#acacac"
size={12} size={12}
src="https://external.xx.fbcdn.net/assets/?name=camcorder&variant=filled&size=12&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=camcorder&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -63,14 +62,14 @@ exports[`Empty app state matches snapshot 1`] = `
className="css-1xcv92o" className="css-1xcv92o"
/> />
<div <div
className="css-1lljw3m" className="css-1cecbfb"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
title="Report Bug" title="Report Bug"
> >
<div <div
className="css-1u10tgp" className="css-1idwz0j"
color="#acacac" color="#acacac"
size={12} size={12}
src="https://external.xx.fbcdn.net/assets/?name=bug&variant=filled&size=12&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=bug&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -80,21 +79,21 @@ exports[`Empty app state matches snapshot 1`] = `
className="css-1ayt83l" className="css-1ayt83l"
> >
<div <div
className="css-19m5dks" className="css-u1e6jr"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
title="Toggle Plugins" title="Toggle Plugins"
> >
<div <div
className="css-1pfn0zl" className="css-2bfl92"
color="#80a6f5" color="#80a6f5"
size={20} size={20}
src="icons/sidebar_left.svg" src="icons/sidebar_left.svg"
/> />
</div> </div>
<div <div
className="css-1telx8z" className="css-rb77sv"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
@@ -102,7 +101,7 @@ exports[`Empty app state matches snapshot 1`] = `
title="Toggle Details" title="Toggle Details"
> >
<div <div
className="css-13cmaba" className="css-j5i4pm"
color="#acacac" color="#acacac"
size={20} size={20}
src="icons/sidebar_right.svg" src="icons/sidebar_right.svg"
@@ -138,7 +137,7 @@ exports[`Empty app state matches snapshot 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="css-1wavjrl" className="css-1hjpcq0"
color="#8155cb" color="#8155cb"
size={20} size={20}
src="https://external.xx.fbcdn.net/assets/?name=rocket&variant=filled&size=20&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=rocket&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -163,7 +162,7 @@ exports[`Empty app state matches snapshot 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="css-1bmw9ne" className="css-yfo7mj"
color="#8155cb" color="#8155cb"
size={20} size={20}
src="https://external.xx.fbcdn.net/assets/?name=magic-wand&variant=filled&size=20&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=magic-wand&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -188,7 +187,7 @@ exports[`Empty app state matches snapshot 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="css-nk9hkx" className="css-4qdej8"
color="#8155cb" color="#8155cb"
size={20} size={20}
src="https://external.xx.fbcdn.net/assets/?name=tools&variant=filled&size=20&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=tools&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -213,7 +212,7 @@ exports[`Empty app state matches snapshot 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="css-14xjmfa" className="css-l82yfp"
color="#8155cb" color="#8155cb"
size={20} size={20}
src="https://external.xx.fbcdn.net/assets/?name=posts&variant=filled&size=20&set=facebook_icons&density=1x" src="https://external.xx.fbcdn.net/assets/?name=posts&variant=filled&size=20&set=facebook_icons&density=1x"

14
src/chrome/DevicesButton.js
View File

@@ -5,7 +5,7 @@
* @format * @format
*/ */
import {Component, Button} from 'flipper'; import {Component, Button, styled} from 'flipper';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {spawn} from 'child_process'; import {spawn} from 'child_process';
import {selectDevice, preferDevice} from '../reducers/connections.js'; import {selectDevice, preferDevice} from '../reducers/connections.js';
@@ -19,6 +19,10 @@ type Props = {
preferDevice: (device: string) => void, preferDevice: (device: string) => void,
}; };
const DropdownButton = styled(Button)({
fontSize: 11,
});
// Remove this if the flow fixme at the bottom is addressed (or has already been removed). // Remove this if the flow fixme at the bottom is addressed (or has already been removed).
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
class DevicesButton extends Component<Props> { class DevicesButton extends Component<Props> {
@@ -90,14 +94,12 @@ class DevicesButton extends Component<Props> {
} }
} }
return ( return (
<Button compact={true} icon={icon} dropdown={dropdown} disabled={false}> <DropdownButton compact={true} icon={icon} dropdown={dropdown}>
{text} {text}
</Button> </DropdownButton>
); );
} }
} } /* $FlowFixMe(>=0.86.0) This comment suppresses an error found when Flow v0.86
/* $FlowFixMe(>=0.86.0) This comment suppresses an error found when Flow v0.86
* was deployed. To see the error, delete this comment and run Flow. * was deployed. To see the error, delete this comment and run Flow.
*/ */
export default connect( export default connect(

15
src/ui/components/Button.js
View File

@@ -20,6 +20,8 @@ const borderColor = props => {
return colors.macOSTitleBarButtonBorderBlur; return colors.macOSTitleBarButtonBorderBlur;
} else if (props.type === 'danger') { } else if (props.type === 'danger') {
return colors.red; return colors.red;
} else if (props.type === 'primary') {
return '#237FF1';
} else if (props.depressed) { } else if (props.depressed) {
return colors.macOSTitleBarButtonBorderBottom; return colors.macOSTitleBarButtonBorderBottom;
} else { } else {
@@ -31,6 +33,8 @@ const borderBottomColor = props => {
return colors.macOSTitleBarButtonBorderBlur; return colors.macOSTitleBarButtonBorderBlur;
} else if (props.type === 'danger') { } else if (props.type === 'danger') {
return colors.red; return colors.red;
} else if (props.type === 'primary') {
return '#237FF1';
} else { } else {
return colors.macOSTitleBarButtonBorderBottom; return colors.macOSTitleBarButtonBorderBottom;
} }
@@ -44,6 +48,8 @@ const backgroundImage = props => {
} 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${ } 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${
colors.macOSTitleBarButtonBackgroundActive colors.macOSTitleBarButtonBackgroundActive
} 100%)`; } 100%)`;
} else if (props.type === 'primary') {
return `linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)`;
} else { } else {
return `linear-gradient(to bottom, transparent 0%,${ return `linear-gradient(to bottom, transparent 0%,${
colors.macOSTitleBarButtonBackground colors.macOSTitleBarButtonBackground
@@ -57,6 +63,8 @@ const backgroundImage = props => {
const color = props => { const color = props => {
if (props.type === 'danger' && props.windowIsFocused) { if (props.type === 'danger' && props.windowIsFocused) {
return colors.red; return colors.red;
} else if (props.type === 'primary' && props.windowIsFocused) {
return colors.white;
} else if (props.disabled) { } else if (props.disabled) {
return colors.macOSTitleBarIconBlur; return colors.macOSTitleBarIconBlur;
} else { } else {
@@ -85,11 +93,10 @@ const StyledButton = styled('div')(props => ({
borderWidth: 1, borderWidth: 1,
borderColor: borderColor(props), borderColor: borderColor(props),
borderBottomColor: borderBottomColor(props), borderBottomColor: borderBottomColor(props),
fontSize: props.compact === true ? 11 : '1em',
color: color(props), color: color(props),
borderRadius: 4, borderRadius: 4,
position: 'relative', position: 'relative',
padding: '0 6px', padding: props.padded ? '0 15px' : '0 6px',
height: props.compact === true ? 24 : 28, height: props.compact === true ? 24 : 28,
margin: 0, margin: 0,
marginLeft: props.inButtonGroup === true ? 0 : 10, marginLeft: props.inButtonGroup === true ? 0 : 10,
@@ -210,6 +217,10 @@ type Props = {
* Style of the icon. `filled` is the default * Style of the icon. `filled` is the default
*/ */
iconVariant?: 'filled' | 'outline', iconVariant?: 'filled' | 'outline',
/**
* Whether the button should have additional padding left and right.
*/
padded?: boolean,
}; };
type State = { type State = {

2
src/ui/components/Glyph.js
View File

@@ -14,6 +14,7 @@ const ColoredIconBlack = styled('img')(({size}) => ({
height: size, height: size,
verticalAlign: 'middle', verticalAlign: 'middle',
width: size, width: size,
flexShrink: 0,
})); }));
const ColoredIconCustom = styled('div')(props => ({ const ColoredIconCustom = styled('div')(props => ({
@@ -26,6 +27,7 @@ const ColoredIconCustom = styled('div')(props => ({
maskSize: '100% 100%', maskSize: '100% 100%',
WebkitMaskImage: `url('${props.src}')`, WebkitMaskImage: `url('${props.src}')`,
WebkitMaskSize: '100% 100%', WebkitMaskSize: '100% 100%',
flexShrink: 0,
})); }));
function ColoredIcon( function ColoredIcon(