fix reactionpicker mobile ui part2

app/javascript/mastodon/components/reaction_picker_dropdown.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-import { EmojiPicker as EmojiPickerAsync } from '../features/ui/util/async-components';
-import Overlay from 'react-overlays/lib/Overlay';
-import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import IconButton from './icon_button';
+import Overlay from 'react-overlays/lib/Overlay';
+import Motion from '../features/ui/util/optional_motion';
+import spring from 'react-motion/lib/spring';
 import { supportsPassiveEvents } from 'detect-passive-events';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { EmojiPicker as EmojiPickerAsync } from '../features/ui/util/async-components';
 import { buildCustomEmojis, categoriesFromEmojis } from '../features/emoji/emoji';
 import { assetHost } from 'mastodon/utils/config';
-import IconButton from './icon_button';
 
 const messages = defineMessages({
     emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -27,124 +29,45 @@ const messages = defineMessages({
     flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
 });
 
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+let id = 100;
+
 let EmojiPicker, Emoji; // load asynchronously
 
 const backgroundImageFn = () => `${assetHost}/emoji/sheet_13.png`;
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-class ModifierPickerMenu extends React.PureComponent {
+const notFoundFn = () => (
+  <div className='emoji-mart-no-results'>
+    <Emoji
+      emoji='sleuth_or_spy'
+      set='twitter'
+      size={32}
+      sheetSize={32}
+      backgroundImageFn={backgroundImageFn}
+    />
 
-  static propTypes = {
+    <div className='emoji-mart-no-results-label'>
-    active: PropTypes.bool,
+      <FormattedMessage id='emoji_mart_button.not_found' defaultMessage='No matching emojis found' />
-    onSelect: PropTypes.func.isRequired,
+    </div>
-    onClose: PropTypes.func.isRequired,
-  };
-
-  handleClick = e => {
-    this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.active) {
-      this.attachListeners();
-    } else {
-      this.removeListeners();
-    }
-  }
-
-  componentWillUnmount () {
-    this.removeListeners();
-  }
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  attachListeners () {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  removeListeners () {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render () {
-    const { active } = this.props;
-
-    return (
-      <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
   </div>
 );
-  }
-
-}
-
-class ModifierPicker extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    modifier: PropTypes.number,
-    onChange: PropTypes.func,
-    onClose: PropTypes.func,
-    onOpen: PropTypes.func,
-  };
-
-  handleClick = () => {
-    if (this.props.active) {
-      this.props.onClose();
-    } else {
-      this.props.onOpen();
-    }
-  }
-
-  handleSelect = modifier => {
-    this.props.onChange(modifier);
-    this.props.onClose();
-  }
-
-  render () {
-    const { active, modifier } = this.props;
-
-    return (
-      <div className='emoji-picker-dropdown__modifiers'>
-        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
-        <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
-      </div>
-    );
-  }
-
-}
 
 @injectIntl
-class EmojiPickerMenu extends React.PureComponent {
+class ReactionPicker extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     custom_emojis: ImmutablePropTypes.list,
+    onPickEmoji: PropTypes.func.isRequired,
+    onSkinTone: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    skinTone: PropTypes.number.isRequired,
     frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
-    onClose: PropTypes.func.isRequired,
-    onPick: PropTypes.func.isRequired,
     style: PropTypes.object,
     placement: PropTypes.string,
     arrowOffsetLeft: PropTypes.string,
     arrowOffsetTop: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    skinTone: PropTypes.number.isRequired,
-    onSkinTone: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -207,7 +130,7 @@ class EmojiPickerMenu extends React.PureComponent {
     if (!(event.ctrlKey || event.metaKey)) {
       this.props.onClose();
     }
-    this.props.onPick(emoji);
+    this.props.onPickEmoji(emoji);
   }
 
   handleModifierOpen = () => {
@@ -248,10 +171,9 @@ class EmojiPickerMenu extends React.PureComponent {
     categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(custom_emojis)).sort());
 
     return (
-      <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
         <EmojiPicker
-          perLine={6}
+          perLine={8}
-          emojiSize={32}
+          emojiSize={22}
           sheetSize={32}
           custom={buildCustomEmojis(custom_emojis)}
           color=''
@@ -261,103 +183,193 @@ class EmojiPickerMenu extends React.PureComponent {
           i18n={this.getI18n()}
           onClick={this.handleClick}
           include={categoriesSort}
+          recent={frequentlyUsedEmojis}
           skin={skinTone}
           showPreview={false}
-          backgroundImageFn={backgroundImageFn}
+          showSkinTones={false}
-          autoFocus={false}
+          notFound={notFoundFn}
+          autoFocus
           emojiTooltip
         />
+    );
+  }
+}
 
-        <ModifierPicker
+class ReactionPickerDropdownMenu extends React.PureComponent {
-          active={modifierOpen}
+
-          modifier={skinTone}
+  static contextTypes = {
-          onOpen={this.handleModifierOpen}
+    router: PropTypes.object,
-          onClose={this.handleModifierClose}
+  };
-          onChange={this.handleModifierChange}
+
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    placement: PropTypes.string,
+    arrowOffsetLeft: PropTypes.string,
+    arrowOffsetTop: PropTypes.string,
+    openedViaKeyboard: PropTypes.bool,
+    custom_emojis: ImmutablePropTypes.list,
+    onPickEmoji: PropTypes.func.isRequired,
+    onSkinTone: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    skinTone: PropTypes.number.isRequired,
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
+
+  };
+
+  static defaultProps = {
+    style: {},
+    placement: 'bottom',
+  };
+
+  state = {
+    mounted: false,
+    loading: true,
+  };
+
+  handleDocumentClick = e => {
+    if (this.node && !this.node.contains(e.target)) {
+      this.props.onClose();
+    }
+  }
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+    this.setState({ mounted: true });
+    this.setState({ loading: true });
+    EmojiPickerAsync().then(EmojiMart => {
+      EmojiPicker = EmojiMart.Picker;
+      Emoji       = EmojiMart.Emoji;
+      this.setState({ loading: false });
+    }).catch(() => {
+      this.setState({ loading: false });
+    });
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  }
+
+  render () {
+    const { onClose, style, placement, arrowOffsetLeft, arrowOffsetTop } = this.props;
+    const { custom_emojis, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
+    const { mounted, loading } = this.state;
+
+    return (
+      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+        {({ opacity, scaleX, scaleY }) => (
+          // It should not be transformed when mounting because the resulting
+          // size will be used to determine the coordinate of the menu by
+          // react-overlays
+          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
+            <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
+            <ReactionPicker
+              custom_emojis={custom_emojis}
+              loading={loading}
+              onClose={onClose}
+              onPickEmoji={onPickEmoji}
+              onSkinTone={onSkinTone}
+              skinTone={skinTone}
+              frequentlyUsedEmojis={frequentlyUsedEmojis}
             />
           </div>
+        )}
+      </Motion>
     );
   }
 
 }
 
-export default @injectIntl
+export default class ReactionPickerDropdown extends React.PureComponent {
-class ReactionPickerDropdown extends React.PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
   static propTypes = {
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+    active: PropTypes.bool,
+    pressed: PropTypes.bool,
+    iconButtonClass: PropTypes.string,
+    disabled: PropTypes.bool,
+    status: ImmutablePropTypes.map,
+    isUserTouching: PropTypes.func,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    dropdownPlacement: PropTypes.string,
+    openDropdownId: PropTypes.number,
+    openedViaKeyboard: PropTypes.bool,
     custom_emojis: ImmutablePropTypes.list,
-    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
-    intl: PropTypes.object.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
     onRemoveEmoji: PropTypes.func.isRequired,
     onSkinTone: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
-    button: PropTypes.node,
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
-    dropdownPlacement: PropTypes.string,
-    iconButtonClass: PropTypes.string,
-    disabled: PropTypes.bool,
-    active: PropTypes.bool,
-    pressed: PropTypes.bool,
   };
 
   static defaultProps = {
-    iconButtonClass: 'status__action-bar-button',
-    disabled: false,
     active: false,
     pressed: false,
+    iconButtonClass: 'status__action-bar-button',
   };
 
   state = {
-    active: false,
+    id: id++,
-    loading: false,
   };
 
-  setRef = (c) => {
+  handleClick = ({ target, type }) => {
-    this.dropdown = c;
+    if (this.props.pressed) {
-  }
-
-  onShowDropdown = ({ target }) => {
-    if (!this.props.disabled) {
-      this.setState({ active: true });
-
-      if (!EmojiPicker) {
-        this.setState({ loading: true });
-
-        EmojiPickerAsync().then(EmojiMart => {
-          EmojiPicker = EmojiMart.Picker;
-          Emoji       = EmojiMart.Emoji;
-
-          this.setState({ loading: false });
-        }).catch(() => {
-          this.setState({ loading: false, active: false });
-        });
-      }
-
-      const { top } = target.getBoundingClientRect();
-    }
-  }
-
-  onHideDropdown = () => {
-    if (!this.props.disabled) {
-      this.setState({ active: false });
-    }
-  }
-
-  onToggle = (e) => {
-    if (!this.state.loading && (!e.key || e.key === 'Enter') && !this.props.disabled) {
-      if (this.props.active) {
       this.props.onRemoveEmoji();
-      } else if (this.state.active) {
+    } else if (this.state.id === this.props.openDropdownId) {
-        this.onHideDropdown();
+        this.handleClose();
     } else {
-        this.onShowDropdown(e);
+      const { top } = target.getBoundingClientRect();
-      }
+      const placement = top * 2 < innerHeight ? 'bottom' : 'top';
+      this.props.onOpen(this.state.id, placement, type !== 'click');
     }
   }
 
-  handleKeyDown = e => {
+  handleClose = () => {
-    if (e.key === 'Escape' && !this.props.disabled) {
+    if (this.activeElement) {
-      this.onHideDropdown();
+      this.activeElement.focus({ preventScroll: true });
+      this.activeElement = null;
+    }
+    this.props.onClose(this.state.id);
+  }
+
+  handleMouseDown = () => {
+    if (!this.state.open) {
+      this.activeElement = document.activeElement;
+    }
+  }
+
+  handleButtonKeyDown = (e) => {
+    switch(e.key) {
+    case ' ':
+    case 'Enter':
+      this.handleMouseDown();
+      break;
+    }
+  }
+
+  handleKeyPress = (e) => {
+    switch(e.key) {
+    case ' ':
+    case 'Enter':
+      this.handleClick(e);
+      e.stopPropagation();
+      e.preventDefault();
+      break;
     }
   }
 
@@ -369,20 +381,40 @@ class ReactionPickerDropdown extends React.PureComponent {
     return this.target;
   }
 
+  componentWillUnmount = () => {
+    if (this.state.id === this.props.openDropdownId) {
+      this.handleClose();
+    }
+  }
+
   render () {
-    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, iconButtonClass, dropdownPlacement, disabled, active, pressed } = this.props;
+    const { icon, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard, active, pressed, iconButtonClass } = this.props;
-    const title = intl.formatMessage(messages.emoji);
+    const { custom_emojis, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
-    const { active: show, loading } = this.state;
+    const open = this.state.id === openDropdownId;
 
     return (
-      <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
+      <div>
-        <IconButton disabled={disabled} active={active} pressed={pressed} className={iconButtonClass} ref={this.setTargetRef} title={title} icon='smile-o' onClick={this.onToggle} />
+        <IconButton
-        <Overlay show={show} placement={dropdownPlacement} target={this.findTarget}>
+          icon={icon}
-          <EmojiPickerMenu
+          title={title}
-            custom_emojis={this.props.custom_emojis}
+          active={active}
-            loading={loading}
+          pressed={pressed}
-            onClose={this.onHideDropdown}
+          className={iconButtonClass}
-            onPick={onPickEmoji}
+          disabled={disabled}
+          size={size}
+          ref={this.setTargetRef}
+          onClick={this.handleClick}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleButtonKeyDown}
+          onKeyPress={this.handleKeyPress}
+        />
+
+        <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
+          <ReactionPickerDropdownMenu
+            onClose={this.handleClose}
+            openedViaKeyboard={openedViaKeyboard}
+            custom_emojis={custom_emojis}
+            onPickEmoji={onPickEmoji}
             onSkinTone={onSkinTone}
             skinTone={skinTone}
             frequentlyUsedEmojis={frequentlyUsedEmojis}

app/javascript/mastodon/components/status_action_bar.js

@@ -9,7 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me, isStaff, show_bookmark_button, show_quote_button, enableReaction } from '../initial_state';
 import classNames from 'classnames';
 
-import ReactionPickerDropdown from '../containers/reaction_picker_dropdown_container';
+import ReactionPickerDropdownContainer from '../containers/reaction_picker_dropdown_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -378,10 +378,26 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate || expired}  active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' animate disabled={!status.get('favourited') && expired} active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
         {show_quote_button && <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus || expired} title={!publicStatus ? intl.formatMessage(messages.cannot_quote) : intl.formatMessage(messages.quote)} icon='quote-right' onClick={this.handleQuoteClick} />}
-        {enableReaction && <div className='status__action-bar-dropdown'><ReactionPickerDropdown disabled={expired} active={status.get('emoji_reactioned')} pressed={status.get('emoji_reactioned')} iconButtonClass='status__action-bar-button' onPickEmoji={this.handleEmojiPick} onRemoveEmoji={this.handleEmojiRemove} /></div>}
         {shareButton}
         {show_bookmark_button && <IconButton className='status__action-bar-button bookmark-icon' disabled={!status.get('bookmarked') && expired} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />}
 
+        {enableReaction && <div className='status__action-bar-dropdown'>
+          <ReactionPickerDropdownContainer
+            scrollKey={scrollKey}
+            disabled={expired}
+            active={status.get('emoji_reactioned')}
+            pressed={status.get('emoji_reactioned')}
+            className='status__action-bar-button'
+            disabled={anonymousAccess}
+            status={status}
+            icon='smile-o'
+            size={18}
+            direction='right'
+            onPickEmoji={this.handleEmojiPick}
+            onRemoveEmoji={this.handleEmojiRemove}
+          />
+        </div>}
+
         <div className='status__action-bar-dropdown'>
           <DropdownMenuContainer
             scrollKey={scrollKey}

app/javascript/mastodon/containers/reaction_picker_dropdown_container.js

@@ -1,5 +1,10 @@
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { fetchRelationships } from 'mastodon/actions/accounts';
+import { openModal, closeModal } from '../actions/modal';
 import { connect } from 'react-redux';
 import ReactionPickerDropdown from '../components/reaction_picker_dropdown';
+import { isUserTouching } from '../is_mobile';
+
 import { changeSetting } from '../actions/settings';
 import { createSelector } from 'reselect';
 import { Map as ImmutableMap } from 'immutable';
@@ -60,14 +65,20 @@ const getCustomEmojis = createSelector([
   }
 }));
 
+const getState = (dispatch) => new Promise((resolve) => {
+  dispatch((dispatch, getState) => {resolve(getState())})
+})
+
 const mapStateToProps = state => ({
   custom_emojis: getCustomEmojis(state),
   skinTone: state.getIn(['settings', 'skinTone']),
   frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
-  dropdownPlacement: 'bottom',
+  dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
+  openDropdownId: state.getIn(['dropdown_menu', 'openId']),
+  openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
 });
 
-const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
+const mapDispatchToProps = (dispatch, { status, onPickEmoji, scrollKey }) => ({
   onSkinTone: skinTone => {
     dispatch(changeSetting(['skinTone'], skinTone));
   },
@@ -79,6 +90,28 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
       onPickEmoji(emoji);
     }
   },
+  
+  onOpen(id, dropdownPlacement, keyboard) {
+    dispatch((_, getState) => {
+      let state = getState();
+      if (status) {
+        dispatch(fetchRelationships([status.getIn(['account', 'id'])]));
+      }
+
+      dispatch(isUserTouching() ? openModal('REACTION', {
+        status: status,
+        onPickEmoji: onPickEmoji,
+        custom_emojis: getCustomEmojis(state),
+        skinTone: state.getIn(['settings', 'skinTone']),
+        frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
+      }) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey));
+    });
+  },
+
+  onClose(id) {
+    dispatch(closeModal('REACTION'));
+    dispatch(closeDropdownMenu(id));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReactionPickerDropdown);

app/javascript/mastodon/features/status/components/action_bar.js

@@ -7,7 +7,7 @@ import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import { me, isStaff, show_quote_button, enableReaction } from '../../../initial_state';
 import classNames from 'classnames';
-import ReactionPickerDropdown from 'mastodon/containers/reaction_picker_dropdown_container';
+import ReactionPickerDropdownContainer from 'mastodon/containers/reaction_picker_dropdown_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -325,10 +325,22 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate || expired} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} disabled={!status.get('favourited') && expired} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
         {show_quote_button && <div className='detailed-status__button'><IconButton disabled={!publicStatus || expired} title={!publicStatus ? intl.formatMessage(messages.cannot_quote) : intl.formatMessage(messages.quote)} icon='quote-right' onClick={this.handleQuoteClick} /></div>}
-        {enableReaction && <div className='detailed-status__button'><ReactionPickerDropdown disabled={expired} active={status.get('emoji_reactioned')} pressed={status.get('emoji_reactioned')} iconButtonClass='detailed-status__action-bar-button' onPickEmoji={this.handleEmojiPick} onRemoveEmoji={this.handleEmojiRemove} /></div>}
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} disabled={!status.get('bookmarked') && expired} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
-
+        {enableReaction && <div className='status__action-bar-dropdown'>
+          <ReactionPickerDropdownContainer
+            disabled={expired}
+            active={status.get('emoji_reactioned')}
+            pressed={status.get('emoji_reactioned')}
+            className='status__action-bar-button'
+            status={status}
+            icon='smile-o'
+            size={18}
+            direction='right'
+            onPickEmoji={this.handleEmojiPick}
+            onRemoveEmoji={this.handleEmojiRemove}
+          />
+        </div>}
         <div className='detailed-status__action-bar-dropdown'>
           <DropdownMenuContainer size={18} icon='ellipsis-h' status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -23,6 +23,7 @@ import {
   CircleEditor,
   CircleAdder,
 } from '../../../features/ui/util/async-components';
+import ReactionModal from './reaction_modal';
 
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
@@ -41,6 +42,7 @@ const MODAL_COMPONENTS = {
   'CIRCLE_EDITOR': CircleEditor,
   'CIRCLE_ADDER': CircleAdder,
   'CALENDAR': () => Promise.resolve({ default: CalendarModal }),
+  'REACTION': () => Promise.resolve({ default: ReactionModal }),
 };
 
 export default class ModalRoot extends React.PureComponent {
@@ -74,7 +76,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR', 'REACTON'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

app/javascript/styles/mastodon/components.scss

@@ -5178,6 +5178,7 @@ a.status-card.compact:hover {
 .confirmation-modal,
 .report-modal,
 .actions-modal,
+.reaction-modal,
 .mute-modal,
 .block-modal {
   background: lighten($ui-secondary-color, 8%);