cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

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

Browse source
This commit is contained in:
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 { 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 => {

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 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 => {

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

@ -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;
}

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

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