diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 1cfa7b5a2d6c836e085519ee0394cec4bc8865e7..c0fbcab6d64238fbba9c4f4e7b00c1fd57283003 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 3cac9b7a628a42259a5c5ba08f244c498f19dcc8..621cc21ceb626dc311bcb8e935b007889acb1d04 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 371c948318e8e174a3e1eea8cc1d840e528dedea..62c9b0066bd67e6eabf416a8b06cce251bcce252 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 dbd9dbd972ad9ee205f45c267fefcf17592125e2..2b46d30fce37186d0408e968262fd7513c44351b 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 {