diff --git a/app/soapbox/components/emoji_selector.js b/app/soapbox/components/emoji_selector.js index 7839712c9..4cd0395e3 100644 --- a/app/soapbox/components/emoji_selector.js +++ b/app/soapbox/components/emoji_selector.js @@ -15,64 +15,25 @@ class EmojiSelector extends ImmutablePureComponent { static propTypes = { onReact: PropTypes.func.isRequired, - onUnfocus: PropTypes.func, visible: PropTypes.bool, - focused: PropTypes.bool, } static defaultProps = { onReact: () => {}, - onUnfocus: () => {}, visible: false, } - handleBlur = e => { - const { focused, onUnfocus } = this.props; - - if (focused && (!e.relatedTarget || !e.relatedTarget.classList.contains('emoji-react-selector__emoji'))) { - onUnfocus(); - } - } - - handleKeyUp = i => e => { - switch (e.key) { - case 'Left': - case 'ArrowLeft': - if (i !== 0) { - this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus(); - } - break; - case 'Right': - case 'ArrowRight': - if (i !== this.props.allowedEmoji.size - 1) { - this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus(); - } - break; - } - } - - setRef = c => { - this.node = c; - } - - render() { - const { onReact, visible, focused, allowedEmoji } = this.props; + const { onReact, visible, allowedEmoji } = this.props; return ( -
+
{allowedEmoji.map((emoji, i) => (
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js index 2ab2652af..0642e1f06 100644 --- a/app/soapbox/features/status/components/action_bar.js +++ b/app/soapbox/features/status/components/action_bar.js @@ -48,7 +48,6 @@ const messages = defineMessages({ reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' }, reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' }, reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' }, - emojiPickerExpand: { id: 'status.reactions_expand', defaultMessage: 'Select emoji' }, }); const mapStateToProps = state => { @@ -104,7 +103,6 @@ class ActionBar extends React.PureComponent { state = { emojiSelectorVisible: false, - emojiSelectorFocused: false, } handleReplyClick = () => { @@ -167,23 +165,10 @@ class ActionBar extends React.PureComponent { } else { this.props.onOpenUnauthorizedModal(); } - this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false }); + this.setState({ emojiSelectorVisible: false }); }; } - handleEmojiSelectorExpand = e => { - if (e.key === 'Enter') { - this.setState({ emojiSelectorFocused: true }); - const firstEmoji = this.node.querySelector('.emoji-react-selector .emoji-react-selector__emoji'); - firstEmoji.focus(); - } - e.preventDefault(); - } - - handleEmojiSelectorUnfocus = () => { - this.setState({ emojiSelectorFocused: false }); - } - handleDeleteClick = () => { this.props.onDelete(this.props.status, this.context.router.history); } @@ -273,13 +258,13 @@ class ActionBar extends React.PureComponent { componentDidMount() { document.addEventListener('click', e => { if (this.node && !this.node.contains(e.target)) - this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false }); + this.setState({ emojiSelectorVisible: false }); }); } render() { const { status, intl, me, isStaff, allowedEmoji } = this.props; - const { emojiSelectorVisible, emojiSelectorFocused } = this.state; + const { emojiSelectorVisible } = this.state; const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const mutingConversation = status.get('muted'); @@ -379,12 +364,7 @@ class ActionBar extends React.PureComponent { onMouseLeave={this.handleLikeButtonLeave} ref={this.setRef} > - + -
{shareButton} diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json index d4132c10b..e507477b3 100644 --- a/app/soapbox/locales/pl.json +++ b/app/soapbox/locales/pl.json @@ -686,7 +686,6 @@ "status.reactions.like": "Lubię", "status.reactions.open_mouth": "Wow", "status.reactions.weary": "Nuda…", - "status.reactions_expand": "Wybierz emoji", "status.read_more": "Czytaj dalej", "status.reblog": "Podbij", "status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu", diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index e29b1508d..4cbaad0ed 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -87,22 +87,6 @@ transform: translateY(-1px); } } - - .emoji-picker-expand { - display: none; - } - - &:focus-within { - .emoji-picker-expand { - display: inline-flex; - width: 0; - overflow: hidden; - - &:focus-within { - width: unset; - } - } - } } .detailed-status__wrapper { diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index 9b2311099..d9a4450c7 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -80,8 +80,7 @@ transition: 0.1s; z-index: 999; - &--visible, - &--focused { + &--visible { opacity: 1; pointer-events: all; } @@ -100,8 +99,7 @@ transition: 0.1s; } - &:hover, - &:focus { + &:hover { img { width: 36px; height: 36px; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index aa4e4d224..e485d57a7 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -667,22 +667,3 @@ a.status-card.compact:hover { border-radius: 4px; } } - -.status__action-bar, -.detailed-status__action-bar { - .emoji-picker-expand { - display: none; - } - - &:focus-within { - .emoji-picker-expand { - display: inline-flex; - width: 0; - overflow: hidden; - - &:focus-within { - width: unset; - } - } - } -}