logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: 5b8d0ad71b137724660455b41f5e19db438aa201
parent: 233258c61b23785adbd46cba4ed33ee955ecc7a2
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sun, 24 Sep 2017 00:40:10 +0200

Dropdown triangles a bit nicer, smoother scrolling on touch (#5062)


Diffstat:

Mapp/javascript/mastodon/components/dropdown_menu.js7+++++--
Mapp/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js11++++++-----
Mapp/javascript/styles/components.scss4++--
Mapp/javascript/styles/emoji_picker.scss2++
4 files changed, 15 insertions(+), 9 deletions(-)

diff --git 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 @@ -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 @@ -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 @@ -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 {