astrid
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

pull/5068/head
Eugen Rochko 2017-09-24 00:40:10 +02:00 committed by GitHub
parent 233258c61b
commit 5b8d0ad71b
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/mastodon/components/dropdown_menu.js
View File

@ -4,6 +4,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from './icon_button'; import IconButton from './icon_button';
import { Overlay } from 'react-overlays'; import { Overlay } from 'react-overlays';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import detectPassiveEvents from 'detect-passive-events';
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
class DropdownMenu extends React.PureComponent { class DropdownMenu extends React.PureComponent {
@ -33,12 +36,12 @@ class DropdownMenu extends React.PureComponent {
componentDidMount () { componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
componentWillUnmount () { componentWillUnmount () {
document.removeEventListener('click', this.handleDocumentClick, false); document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, false); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
setRef = c => { setRef = c => {

11
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View File

@ -5,6 +5,7 @@ import { Picker, Emoji } from 'emoji-mart';
import { Overlay } from 'react-overlays'; import { Overlay } from 'react-overlays';
import classNames from 'classnames'; import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import detectPassiveEvents from 'detect-passive-events';
const messages = defineMessages({ const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@ -24,8 +25,8 @@ const messages = defineMessages({
}); });
const assetHost = process.env.CDN_HOST || ''; const assetHost = process.env.CDN_HOST || '';
const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`; const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`;
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
class ModifierPickerMenu extends React.PureComponent { class ModifierPickerMenu extends React.PureComponent {
@ -60,12 +61,12 @@ class ModifierPickerMenu extends React.PureComponent {
attachListeners () { attachListeners () {
document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
removeListeners () { removeListeners () {
document.removeEventListener('click', this.handleDocumentClick, false); document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, false); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
setRef = c => { setRef = c => {
@ -157,12 +158,12 @@ class EmojiPickerMenu extends React.PureComponent {
componentDidMount () { componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
componentWillUnmount () { componentWillUnmount () {
document.removeEventListener('click', this.handleDocumentClick, false); document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, false); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
} }
setRef = c => { setRef = c => {

4
app/javascript/styles/components.scss
View File

@ -1265,14 +1265,14 @@
&.top { &.top {
bottom: -5px; bottom: -5px;
margin-left: -13px; margin-left: -13px;
border-width: 5px 5px 0; border-width: 5px 7px 0;
border-top-color: $ui-secondary-color; border-top-color: $ui-secondary-color;
} }
&.bottom { &.bottom {
top: -5px; top: -5px;
margin-left: -13px; margin-left: -13px;
border-width: 0 5px 5px; border-width: 0 7px 5px;
border-bottom-color: $ui-secondary-color; border-bottom-color: $ui-secondary-color;
} }

2
app/javascript/styles/emoji_picker.scss
View File

@ -91,8 +91,10 @@
.emoji-mart-scroll { .emoji-mart-scroll {
overflow-y: scroll; overflow-y: scroll;
height: 270px; height: 270px;
max-height: 35vh;
padding: 0 6px 6px; padding: 0 6px 6px;
background: $simple-background-color; background: $simple-background-color;
will-change: transform;
} }
.emoji-mart-search { .emoji-mart-search {