diff options
Diffstat (limited to 'webapp/components/emoji_picker')
| -rw-r--r-- | webapp/components/emoji_picker/emoji_picker.jsx | 102 | ||||
| -rw-r--r-- | webapp/components/emoji_picker/emoji_picker_overlay.jsx | 17 |
2 files changed, 72 insertions, 47 deletions
diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index a047c1277..0d9b34176 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -309,7 +309,7 @@ export default class EmojiPicker extends React.Component { right: this.props.rightOffset }; } else { - pickerStyle = this.props.style; + pickerStyle = {...this.props.style}; } } @@ -325,91 +325,111 @@ export default class EmojiPicker extends React.Component { <div className='emoji-picker__categories'> <EmojiPickerCategory category='recent' - icon={<i - className='fa fa-clock-o' - title={Utils.localizeMessage('emoji_picker.recent', 'Recently Used')} - />} + icon={ + <i + className='fa fa-clock-o' + title={Utils.localizeMessage('emoji_picker.recent', 'Recently Used')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'recent'} /> <EmojiPickerCategory category='people' - icon={<i - className='fa fa-smile-o' - title={Utils.localizeMessage('emoji_picker.people', 'People')} - />} + icon={ + <i + className='fa fa-smile-o' + title={Utils.localizeMessage('emoji_picker.people', 'People')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'people'} /> <EmojiPickerCategory category='nature' - icon={<i - className='fa fa-leaf' - title={Utils.localizeMessage('emoji_picker.nature', 'Nature')} - />} + icon={ + <i + className='fa fa-leaf' + title={Utils.localizeMessage('emoji_picker.nature', 'Nature')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'nature'} /> <EmojiPickerCategory category='food' - icon={<i - className='fa fa-cutlery' - title={Utils.localizeMessage('emoji_picker.food', 'Food')} - />} + icon={ + <i + className='fa fa-cutlery' + title={Utils.localizeMessage('emoji_picker.food', 'Food')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'food'} /> <EmojiPickerCategory category='activity' - icon={<i - className='fa fa-futbol-o' - title={Utils.localizeMessage('emoji_picker.activity', 'Activity')} - />} + icon={ + <i + className='fa fa-futbol-o' + title={Utils.localizeMessage('emoji_picker.activity', 'Activity')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'activity'} /> <EmojiPickerCategory category='travel' - icon={<i - className='fa fa-plane' - title={Utils.localizeMessage('emoji_picker.travel', 'Travel')} - />} + icon={ + <i + className='fa fa-plane' + title={Utils.localizeMessage('emoji_picker.travel', 'Travel')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'travel'} /> <EmojiPickerCategory category='objects' - icon={<i - className='fa fa-lightbulb-o' - title={Utils.localizeMessage('emoji_picker.objects', 'Objects')} - />} + icon={ + <i + className='fa fa-lightbulb-o' + title={Utils.localizeMessage('emoji_picker.objects', 'Objects')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'objects'} /> <EmojiPickerCategory category='symbols' - icon={<i - className='fa fa-heart-o' - title={Utils.localizeMessage('emoji_picker.symbols', 'Symbols')} - />} + icon={ + <i + className='fa fa-heart-o' + title={Utils.localizeMessage('emoji_picker.symbols', 'Symbols')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'symbols'} /> <EmojiPickerCategory category='flags' - icon={<i - className='fa fa-flag-o' - title={Utils.localizeMessage('emoji_picker.flags', 'Flags')} - />} + icon={ + <i + className='fa fa-flag-o' + title={Utils.localizeMessage('emoji_picker.flags', 'Flags')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'flags'} /> <EmojiPickerCategory category='custom' - icon={<i - className='fa fa-at' - title={Utils.localizeMessage('emoji_picker.custom', 'Custom')} - />} + icon={ + <i + className='fa fa-at' + title={Utils.localizeMessage('emoji_picker.custom', 'Custom')} + /> + } onCategoryClick={this.handleCategoryClick} selected={this.state.category === 'custom'} /> diff --git a/webapp/components/emoji_picker/emoji_picker_overlay.jsx b/webapp/components/emoji_picker/emoji_picker_overlay.jsx index 0a289a242..7174e004c 100644 --- a/webapp/components/emoji_picker/emoji_picker_overlay.jsx +++ b/webapp/components/emoji_picker/emoji_picker_overlay.jsx @@ -15,7 +15,15 @@ export default class EmojiPickerOverlay extends React.PureComponent { onEmojiClick: PropTypes.func.isRequired, onHide: PropTypes.func.isRequired, rightOffset: PropTypes.number, - topOffset: PropTypes.number + topOffset: PropTypes.number, + spaceRequiredAbove: PropTypes.number, + spaceRequiredBelow: PropTypes.number + } + + // Reasonable defaults calculated from from the center channel + static defaultProps = { + spaceRequiredAbove: 422, + spaceRequiredBelow: 436 } constructor(props) { @@ -28,15 +36,12 @@ export default class EmojiPickerOverlay extends React.PureComponent { componentWillUpdate(nextProps) { if (nextProps.show && !this.props.show) { - const spaceRequiredAbove = 422; - const spaceRequiredBelow = 436; - const targetBounds = nextProps.target().getBoundingClientRect(); let placement; - if (targetBounds.top > spaceRequiredAbove) { + if (targetBounds.top > nextProps.spaceRequiredAbove) { placement = 'top'; - } else if (window.innerHeight - targetBounds.bottom > spaceRequiredBelow) { + } else if (window.innerHeight - targetBounds.bottom > nextProps.spaceRequiredBelow) { placement = 'bottom'; } else { placement = 'left'; |