From 846cd4e8381c891816cf814582304b534db4ee5f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 23 Sep 2017 01:41:00 +0200 Subject: Switch from EmojiOne to Twemoji, different emoji picker (#5046) * Switch from EmojiOne to Twemoji, different emoji picker * Make emoji-mart use a local spritesheet * Fix emojify test * yarn manage:translations --- app/javascript/styles/emoji_picker.scss | 197 ++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 app/javascript/styles/emoji_picker.scss (limited to 'app/javascript/styles/emoji_picker.scss') diff --git a/app/javascript/styles/emoji_picker.scss b/app/javascript/styles/emoji_picker.scss new file mode 100644 index 000000000..dbd9dbd97 --- /dev/null +++ b/app/javascript/styles/emoji_picker.scss @@ -0,0 +1,197 @@ +.emoji-mart { + &, + * { + box-sizing: border-box; + line-height: 1.15; + } + + font-size: 13px; + display: inline-block; + color: $ui-base-color; + + .emoji-mart-emoji { + padding: 6px; + } +} + +.emoji-mart-bar { + border: 0 solid darken($ui-secondary-color, 8%); + + &:first-child { + border-bottom-width: 1px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background: $ui-secondary-color; + } + + &:last-child { + border-top-width: 1px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + display: none; + } +} + +.emoji-mart-anchors { + display: flex; + justify-content: space-between; + padding: 0 6px; + color: $ui-primary-color; + line-height: 0; +} + +.emoji-mart-anchor { + position: relative; + flex: 1; + text-align: center; + padding: 12px 4px; + overflow: hidden; + transition: color .1s ease-out; + cursor: pointer; + + &:hover { + color: darken($ui-primary-color, 4%); + } +} + +.emoji-mart-anchor-selected { + color: darken($ui-highlight-color, 3%); + + &:hover { + color: darken($ui-highlight-color, 3%); + } + + .emoji-mart-anchor-bar { + bottom: 0; + } +} + +.emoji-mart-anchor-bar { + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: darken($ui-highlight-color, 3%); +} + +.emoji-mart-anchors { + i { + display: inline-block; + width: 100%; + max-width: 22px; + } + + svg { + fill: currentColor; + max-height: 18px; + } +} + +.emoji-mart-scroll { + overflow-y: scroll; + height: 270px; + padding: 0 6px 6px; + background: $simple-background-color; +} + +.emoji-mart-search { + padding: 10px; + padding-right: 45px; + background: $simple-background-color; + + input { + font-size: 14px; + font-weight: 400; + padding: 7px 9px; + font-family: inherit; + display: block; + width: 100%; + background: rgba($ui-secondary-color, 0.3); + color: $ui-primary-color; + border: 1px solid $ui-secondary-color; + border-radius: 4px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + } +} + +.emoji-mart-category .emoji-mart-emoji { + cursor: pointer; + + span { + z-index: 1; + position: relative; + text-align: center; + } + + &:hover::before { + z-index: 0; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba($ui-secondary-color, 0.7); + border-radius: 100%; + } +} + +.emoji-mart-category-label { + z-index: 2; + position: relative; + position: -webkit-sticky; + position: sticky; + top: 0; + + span { + display: block; + width: 100%; + font-weight: 500; + padding: 5px 6px; + background: $simple-background-color; + } +} + +.emoji-mart-emoji { + position: relative; + display: inline-block; + font-size: 0; + + span { + width: 22px; + height: 22px; + } +} + +.emoji-mart-no-results { + font-size: 14px; + text-align: center; + padding-top: 70px; + color: $ui-primary-color; + + .emoji-mart-category-label { + display: none; + } + + .emoji-mart-no-results-label { + margin-top: .2em; + } + + .emoji-mart-emoji:hover::before { + content: none; + } +} + +.emoji-mart-preview { + display: none; +} -- cgit From 5b8d0ad71b137724660455b41f5e19db438aa201 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 24 Sep 2017 00:40:10 +0200 Subject: Dropdown triangles a bit nicer, smoother scrolling on touch (#5062) --- app/javascript/mastodon/components/dropdown_menu.js | 7 +++++-- .../features/compose/components/emoji_picker_dropdown.js | 11 ++++++----- app/javascript/styles/components.scss | 4 ++-- app/javascript/styles/emoji_picker.scss | 2 ++ 4 files changed, 15 insertions(+), 9 deletions(-) (limited to 'app/javascript/styles/emoji_picker.scss') diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 1cfa7b5a2..c0fbcab6d 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 3cac9b7a6..621cc21ce 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 371c94831..62c9b0066 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 dbd9dbd97..2b46d30fc 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 { -- cgit