diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 1cfa7b5a2d..c0fbcab6d6 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -4,6 +4,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import IconButton from './icon_button'; import { Overlay } from 'react-overlays'; import { Motion, spring } from 'react-motion'; +import detectPassiveEvents from 'detect-passive-events'; + +const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; class DropdownMenu extends React.PureComponent { @@ -33,12 +36,12 @@ class DropdownMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); - document.addEventListener('touchend', this.handleDocumentClick, false); + document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); } componentWillUnmount () { document.removeEventListener('click', this.handleDocumentClick, false); - document.removeEventListener('touchend', this.handleDocumentClick, false); + document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } setRef = c => { diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index 3cac9b7a62..621cc21ceb 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -5,6 +5,7 @@ import { Picker, Emoji } from 'emoji-mart'; import { Overlay } from 'react-overlays'; import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import detectPassiveEvents from 'detect-passive-events'; const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, @@ -24,8 +25,8 @@ const messages = defineMessages({ }); const assetHost = process.env.CDN_HOST || ''; - const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`; +const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; class ModifierPickerMenu extends React.PureComponent { @@ -60,12 +61,12 @@ class ModifierPickerMenu extends React.PureComponent { attachListeners () { document.addEventListener('click', this.handleDocumentClick, false); - document.addEventListener('touchend', this.handleDocumentClick, false); + document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); } removeListeners () { document.removeEventListener('click', this.handleDocumentClick, false); - document.removeEventListener('touchend', this.handleDocumentClick, false); + document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } setRef = c => { @@ -157,12 +158,12 @@ class EmojiPickerMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); - document.addEventListener('touchend', this.handleDocumentClick, false); + document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); } componentWillUnmount () { document.removeEventListener('click', this.handleDocumentClick, false); - document.removeEventListener('touchend', this.handleDocumentClick, false); + document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } setRef = c => { diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 371c948318..62c9b0066b 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1265,14 +1265,14 @@ &.top { bottom: -5px; margin-left: -13px; - border-width: 5px 5px 0; + border-width: 5px 7px 0; border-top-color: $ui-secondary-color; } &.bottom { top: -5px; margin-left: -13px; - border-width: 0 5px 5px; + border-width: 0 7px 5px; border-bottom-color: $ui-secondary-color; } diff --git a/app/javascript/styles/emoji_picker.scss b/app/javascript/styles/emoji_picker.scss index dbd9dbd972..2b46d30fce 100644 --- a/app/javascript/styles/emoji_picker.scss +++ b/app/javascript/styles/emoji_picker.scss @@ -91,8 +91,10 @@ .emoji-mart-scroll { overflow-y: scroll; height: 270px; + max-height: 35vh; padding: 0 6px 6px; background: $simple-background-color; + will-change: transform; } .emoji-mart-search {