From 55889974a3932c63321267834ea698876e196d63 Mon Sep 17 00:00:00 2001 From: noellabo Date: Sat, 28 Aug 2021 14:57:34 +0900 Subject: [PATCH] Fix reactionpicker for fedibird --- .../components/reaction_picker_dropdown.js | 5 ++-- .../mastodon/components/status_action_bar.js | 2 ++ .../reaction_picker_dropdown_container.js | 3 +++ .../features/status/components/action_bar.js | 6 ++++- .../features/ui/components/modal_root.js | 2 +- .../features/ui/components/reaction_modal.js | 4 --- app/javascript/mastodon/locales/en.json | 1 + app/javascript/mastodon/locales/ja.json | 1 + .../styles/mastodon-light/diff.scss | 1 + .../styles/mastodon/components.scss | 26 ++++++++++++++++++- 10 files changed, 42 insertions(+), 9 deletions(-) diff --git a/app/javascript/mastodon/components/reaction_picker_dropdown.js b/app/javascript/mastodon/components/reaction_picker_dropdown.js index e54097514..b3b6ea2e7 100644 --- a/app/javascript/mastodon/components/reaction_picker_dropdown.js +++ b/app/javascript/mastodon/components/reaction_picker_dropdown.js @@ -269,7 +269,7 @@ class ReactionPickerDropdownMenu extends React.PureComponent { // It should not be transformed when mounting because the resulting // size will be used to determine the coordinate of the menu by // react-overlays -
+
+
({ dispatch(isUserTouching() ? openModal('REACTION', { status: status, onPickEmoji: onPickEmoji, + onSkinTone: skinTone => { + dispatch(changeSetting(['skinTone'], skinTone)); + }, custom_emojis: getCustomEmojis(state), skinTone: state.getIn(['settings', 'skinTone']), frequentlyUsedEmojis: getFrequentlyUsedEmojis(state), diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 9788339dd..e3b8a81b0 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -24,6 +24,7 @@ const messages = defineMessages({ quote: { id: 'status.quote', defaultMessage: 'Quote' }, favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' }, + emoji_reaction: { id: 'status.emoji_reaction', defaultMessage: 'Emoji reaction' }, more: { id: 'status.more', defaultMessage: 'More' }, mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' }, muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, @@ -327,13 +328,15 @@ class ActionBar extends React.PureComponent { {show_quote_button &&
} {shareButton}
- {enableReaction &&
+ + {enableReaction &&
} +
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 57fff2ad9..f25c91dd3 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -76,7 +76,7 @@ export default class ModalRoot extends React.PureComponent { } renderLoading = modalId => () => { - return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR', 'REACTON'].indexOf(modalId) === -1 ? : null; + return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR', 'REACTION'].indexOf(modalId) === -1 ? : null; } renderError = (props) => { diff --git a/app/javascript/mastodon/features/ui/components/reaction_modal.js b/app/javascript/mastodon/features/ui/components/reaction_modal.js index b23d7b6aa..7ef314ec8 100644 --- a/app/javascript/mastodon/features/ui/components/reaction_modal.js +++ b/app/javascript/mastodon/features/ui/components/reaction_modal.js @@ -6,14 +6,11 @@ import StatusContent from '../../../components/status_content'; import Avatar from '../../../components/avatar'; import RelativeTimestamp from '../../../components/relative_timestamp'; import DisplayName from '../../../components/display_name'; -import IconButton from '../../../components/icon_button'; -import classNames from 'classnames'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { supportsPassiveEvents } from 'detect-passive-events'; import { EmojiPicker as EmojiPickerAsync } from '../util/async-components'; import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji'; -import { assetHost } from 'mastodon/utils/config'; const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, @@ -188,7 +185,6 @@ class ReactionPicker extends React.PureComponent { showPreview={false} showSkinTones={false} notFound={notFoundFn} - autoFocus emojiTooltip style={{width: '100%'}} /> diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 136039730..c168649a1 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -494,6 +494,7 @@ "status.detailed_status": "Detailed conversation view", "status.direct": "Direct message @{name}", "status.embed": "Embed", + "status.emoji_reaction": "Emoji reaction", "status.favourite": "Favourite", "status.filtered": "Filtered", "status.load_more": "Load more", diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json index 45705a809..c4557eaed 100644 --- a/app/javascript/mastodon/locales/ja.json +++ b/app/javascript/mastodon/locales/ja.json @@ -495,6 +495,7 @@ "status.detailed_status": "詳細な会話ビュー", "status.direct": "@{name}さんにダイレクトメッセージ", "status.embed": "埋め込み", + "status.emoji_reaction": "絵文字リアクション", "status.favourite": "お気に入り", "status.filtered": "フィルターされました", "status.load_more": "もっと見る", diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index e83d95c48..7044e268e 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -362,6 +362,7 @@ html { // Change the background colors of modals .actions-modal, +.reaction-modal, .boost-modal, .confirmation-modal, .mute-modal, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index af0d0ffb7..461917bca 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5430,7 +5430,31 @@ a.status-card.compact:hover { } } -.reaction-modal, +.dropdown-menu.dropdown-menu-reaction { + padding: 0; + background-color: $white; + .emoji-mart { + border-radius: 4px; + } +} + +.reaction-modal { + max-height: 80vh; + max-width: 80vw; + + .status { + overflow-y: auto; + max-height: 300px; + border-bottom-width: 0; + } + + .status + .emoji-mart .emoji-mart-bar:first-child { + border-top-width: 1px; + border-top-left-radius: unset; + border-top-right-radius: unset; + } +} + .actions-modal { max-height: 80vh; max-width: 80vw;