Skip to content

Commit

Permalink
Adds EUI to Text Style Picker (elastic#601)
Browse files Browse the repository at this point in the history 
* Created popover HOC for EuiPopover. Refactored existing popovers.

Added popover HOC. Refactored refresh_control 

Added paddingSize prop to popover

Added EuiButtonIcon and EuiPopover to arg_add_popover

Added aria-label to euibuttonicon in arg_add_popover

Added ids to all popovers

Fixed position of popovers

* Replaced EUI Popover with bootstrap popover

* Removed comments and unused props

* Fix: popover closes when clicking outside of the popover

* Fixed CSS for arg_form

* Changed div to span in popover

* Fixed button prop type in popover

* Refactored popover to use bootstrap overlay.

* Fixed popover props to match EuiPopover props

* Fixed popover title in refresh_control

* Removed window resize and wheel event listeners

* Added eui styles to fauxSelect for font picker

* Cleaned up styles for font picker

* Fixed width of font picker popover

* Fixed spacing of text style buttons

* Added comments in text_style_picker and font_picker

* Changed spacing in text_style_picker

* Refactored font_picker with popover HOC

* Fixed uncontrolled select warning

* Changed button in font_picker

* Fixed font_picker CSS

* Fixed padding

* Added EuiLinks to font picker

* Added anchorPosition prop to font picker
  • Loading branch information
@cqliu1
cqliu1 committed Jun 8, 2018
1 parent 9554760 commit e61a33e
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 122 deletions.
20 changes: 18 additions & 2 deletions public/components/faux_select/faux_select.js
View file
@@ -1,9 +1,25 @@
import React from 'react';
import './faux_select.less';
import { PropTypes } from 'prop-types';
import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

export const FauxSelect = ({ children }) => <div className="canvas__faux-select">{children}</div>;
//TODO: remove this when EUI has a better select component
export const FauxSelect = ({ handleClick, children }) => (
<EuiFlexGroup
gutterSize="none"
alignItems="center"
justifyContent="spaceBetween"
className="euiSelect canvas__faux-select"
style={{ padding: 12 }} // match padding with EuiSelect
onClick={handleClick}
>
<EuiFlexItem>{children}</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="arrowDown" />
</EuiFlexItem>
</EuiFlexGroup>
);

FauxSelect.propTypes = {
handleClick: PropTypes.func,
children: PropTypes.node,
};
14 changes: 0 additions & 14 deletions public/components/faux_select/faux_select.less
View file

This file was deleted.

63 changes: 31 additions & 32 deletions public/components/font_picker/font_picker.js
View file
@@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import './font_picker.less';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import { EuiLink } from '@elastic/eui';
import { Popover } from '../popover';
import { FauxSelect } from '../faux_select';
import './font_picker.less';

const fonts = [
{
Expand Down Expand Up @@ -47,45 +48,43 @@ const fonts = [
},
];

export const FontPicker = ({ onSelect, value, placement }) => {
export const FontPicker = ({ onSelect, value, anchorPosition }) => {
const selected = fonts.find(font => font.value === value) || { label: value, value };

const picker = (
<Popover
className="canvas__font-picker--popover"
id="popover-trigger-click"
style={{ width: 207 }}
>
<div className="canvas__font-picker">
{fonts.map((
font // TODO: Make a custom select using bootstrap dropdowns. This is lame and causes inconsistent styling in popover selects
) => (
<div
key={font.label}
className="canvas__font-picker--font"
style={{ fontFamily: font.value }}
onClick={() => onSelect(font.value)}
>
{font.label}
</div>
))}
</div>
</Popover>
// TODO: replace faux select with better EUI custom select or dropdown when it becomes available
const popoverButton = handleClick => (
<FauxSelect handleClick={handleClick}>
<div style={{ fontFamily: selected.value }}>{selected.label}</div>
</FauxSelect>
);

return (
<OverlayTrigger rootClose overlay={picker} placement={placement || 'bottom'} trigger="click">
<div style={{ display: 'inline-block' }} className="canvas__font-picker--preview">
<FauxSelect>
<div style={{ fontFamily: selected.value }}>{selected.label}</div>
</FauxSelect>
</div>
</OverlayTrigger>
<Popover
id="font-picker-popover"
button={popoverButton}
panelClassName="canvas__font-picker--popover"
anchorPosition={anchorPosition}
>
{() => (
<div className="canvas__font-picker">
{fonts.map(font => (
<EuiLink
key={font.label}
className="canvas__font-picker--font"
style={{ fontFamily: font.value }}
onClick={() => onSelect(font.value)}
>
{font.label}
</EuiLink>
))}
</div>
)}
</Popover>
);
};

FontPicker.propTypes = {
value: PropTypes.string,
onSelect: PropTypes.func,
placement: PropTypes.string,
anchorPosition: PropTypes.string,
};
21 changes: 10 additions & 11 deletions public/components/font_picker/font_picker.less
View file
@@ -1,20 +1,19 @@
@import (reference) "../../style/main";

.canvas__font-picker--popover {
.popover-content {
padding: 0px;
}
}
@import (reference) '../../style/main';

.canvas__font-picker {
height: 200px;
overflow-y: scroll;

.canvas__font-picker--font {
display: block;
width: 100%;
padding: @spacingXS @spacingM;
color: black;
}
}

&:hover {
background-color: @lightestGrey;
cursor: pointer;
}
.canvas__font-picker--popover {
.popover-content {
padding: 0;
}
}
104 changes: 55 additions & 49 deletions public/components/text_style_picker/text_style_picker.js
View file
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonGroup, FormControl, FormGroup } from 'react-bootstrap';
import { Button, ButtonGroup } from 'react-bootstrap';
import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer } from '@elastic/eui';
import { FontPicker } from '../font_picker';
import { ColorPickerMini } from '../color_picker_mini';
import { fontSizes } from './font_sizes';
Expand Down Expand Up @@ -32,55 +33,60 @@ export const TextStylePicker = ({

return (
<div className="canvas__text-style-picker">
<FormGroup className="canvas__text-style-picker--top">
<div style={{ display: 'inline-block', width: 60 }}>
<FormControl
componentClass="select"
value={size}
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiSelect
defaultValue={size}
onChange={e => doChange('size', Number(e.target.value))}
>
{fontSizes.map(size => (
<option key={size} value={size}>
{size}
</option>
))}
</FormControl>
</div>
<FontPicker value={family} onSelect={value => doChange('family', value)} />
</FormGroup>
<FormGroup className="canvas__text-style-picker--bottom">
<ColorPickerMini
value={color}
onChange={value => doChange('color', value)}
colors={colors}
/>
<ButtonGroup bsSize="small">
<Button
active={weight === 'bold'}
onClick={() => doChange('weight', weight !== 'bold' ? 'bold' : 'normal')}
>
<span style={{ fontWeight: 'bold' }}>B</span>
</Button>
<Button active={italic} onClick={() => doChange('italic', !italic)}>
<span style={{ fontStyle: 'italic' }}>I</span>
</Button>
<Button active={underline} onClick={() => doChange('underline', !underline)}>
<span style={{ textDecoration: 'underline' }}>U</span>
</Button>
</ButtonGroup>
&nbsp;
<ButtonGroup bsSize="small">
<Button active={align === 'left'} onClick={() => doChange('align', 'left')}>
<i className="fa fa-align-left" />
</Button>
<Button active={align === 'center'} onClick={() => doChange('align', 'center')}>
<i className="fa fa-align-center" />
</Button>
<Button active={align === 'right'} onClick={() => doChange('align', 'right')}>
<i className="fa fa-align-right" />
</Button>
</ButtonGroup>
</FormGroup>
options={fontSizes.map(size => ({ text: String(size), value: size }))}
/>
</EuiFlexItem>
<EuiFlexItem>
<FontPicker value={family} onSelect={value => doChange('family', value)} />
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="m" />

<EuiFlexGroup gutterSize="none" justifyContent="spaceAround" alignItems="flexEnd">
<EuiFlexItem grow={false}>
<ColorPickerMini
value={color}
onChange={value => doChange('color', value)}
colors={colors}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{/* The bootstrap button groups will be removed when EUI has button groups. See https://github.com/elastic/eui/issues/841 */}
<ButtonGroup bsSize="medium">
<Button
active={weight === 'bold'}
onClick={() => doChange('weight', weight !== 'bold' ? 'bold' : 'normal')}
>
<span style={{ fontWeight: 'bold' }}>B</span>
</Button>
<Button active={italic} onClick={() => doChange('italic', !italic)}>
<span style={{ fontStyle: 'italic' }}>I</span>
</Button>
<Button active={underline} onClick={() => doChange('underline', !underline)}>
<span style={{ textDecoration: 'underline' }}>U</span>
</Button>
</ButtonGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ButtonGroup bsSize="medium">
<Button active={align === 'left'} onClick={() => doChange('align', 'left')}>
<i className="fa fa-align-left" />
</Button>
<Button active={align === 'center'} onClick={() => doChange('align', 'center')}>
<i className="fa fa-align-center" />
</Button>
<Button active={align === 'right'} onClick={() => doChange('align', 'right')}>
<i className="fa fa-align-right" />
</Button>
</ButtonGroup>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
};
Expand Down
18 changes: 4 additions & 14 deletions public/components/text_style_picker/text_style_picker.less
View file
@@ -1,19 +1,9 @@
@import (reference) "../../style/main";
@import (reference) '../../style/main';

.canvas__text-style-picker--top {
display: flex;
.canvas__font-picker--preview {
width: 100%;

.canvas__font-picker--preview {
flex-grow: 1;
margin-left: @spacingS;
.canvas__faux-select {
width: 100%;

.canvas__faux-select {
width: 100%;
}
}
}

.canvas__text-style-picker--bottom > * {
margin-right: @spacingS;
}

0 comments on commit e61a33e

Please sign in to comment.