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;
- }
- }
- }
-}