fix: update emoji-mart, add dark mode and custom categories (#1686)

This commit is contained in:
Nolan Lawson 2019-12-23 11:53:44 -08:00 committed by GitHub
parent 46ff09b072
commit 22fd567eb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 31 deletions

View file

@ -61,7 +61,7 @@
"cross-env": "^6.0.3", "cross-env": "^6.0.3",
"css-dedoupe": "^0.1.1", "css-dedoupe": "^0.1.1",
"css-loader": "^3.3.2", "css-loader": "^3.3.2",
"emoji-mart": "^2.11.1", "emoji-mart": "^2.11.2",
"emoji-regex": "^8.0.0", "emoji-regex": "^8.0.0",
"encoding": "^0.1.12", "encoding": "^0.1.12",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",

View file

@ -99,21 +99,6 @@
import { on } from '../../../_utils/eventBus' import { on } from '../../../_utils/eventBus'
import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker' import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker'
// Consistency with Mastodon FE, taken from
// app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
const categoriesSort = [
'recent',
'custom',
'people',
'nature',
'foods',
'activity',
'places',
'objects',
'symbols',
'flags'
]
export default { export default {
async oncreate () { async oncreate () {
onCreateDialog.call(this) onCreateDialog.call(this)
@ -146,13 +131,13 @@
${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''} ${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
`), `),
emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps), emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
emojiMartProps: ({ perLine, custom }) => ({ emojiMartProps: ({ perLine, customEmoji, categoriesSorted }) => ({
perLine, perLine,
custom, custom: customEmoji,
color: 'var(--nav-bg)', color: 'var(--nav-bg)',
emoji: 'sailboat', emoji: 'sailboat',
title: 'Emoji', title: 'Emoji',
include: categoriesSort, include: categoriesSorted,
showPreview: true showPreview: true
}), }),
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => ( perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
@ -166,7 +151,31 @@
? 9 ? 9
: 10 : 10
), ),
custom: ({ $currentCustomEmoji, $autoplayGifs }) => { categoriesSorted: ({ $currentCustomEmoji }) => {
// Consistency with Mastodon FE, taken from
// - app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
// - app/javascript/mastodon/features/emoji/emoji.js
const customCategories = new Set(['custom'])
for (const emoji of $currentCustomEmoji) {
if (emoji.category) {
customCategories.add(`custom-${emoji.category}`)
}
}
return [
'recent',
...Array.from(customCategories).sort(),
'people',
'nature',
'foods',
'activity',
'places',
'objects',
'symbols',
'flags'
]
},
customEmoji: ({ $currentCustomEmoji, $autoplayGifs }) => {
if (!$currentCustomEmoji) { if (!$currentCustomEmoji) {
return [] return []
} }
@ -176,7 +185,8 @@
text: `:${emoji.shortcode}:`, text: `:${emoji.shortcode}:`,
emoticons: [], emoticons: [],
keywords: [emoji.shortcode], keywords: [emoji.shortcode],
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url imageUrl: $autoplayGifs ? emoji.url : emoji.static_url,
customCategory: emoji.category
})) }))
}, },
// it's jarring on mobile if the emoji picker automatically pops open the keyboard // it's jarring on mobile if the emoji picker automatically pops open the keyboard

View file

@ -6,16 +6,21 @@
import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker' import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker'
import React from 'react' import React from 'react'
import { emit } from '../_utils/eventBus' import { emit } from '../_utils/eventBus'
import { store } from '../_store/store'
import { isDarkTheme } from '../_utils/isDarkTheme'
function onEmojiSelected (emoji) { function onEmojiSelected (emoji) {
emit('emoji-selected', emoji) emit('emoji-selected', emoji)
} }
export default function createEmojiMartPickerFromData (data) { export default function createEmojiMartPickerFromData (data) {
return props => React.createElement(NimblePicker, Object.assign({ return props => (
React.createElement(NimblePicker, Object.assign({
set: 'twitter', // same as Mastodon frontend set: 'twitter', // same as Mastodon frontend
data, // same as Mastodon frontend data, // same as Mastodon frontend
native: true, native: true,
onSelect: onEmojiSelected onSelect: onEmojiSelected,
darkMode: isDarkTheme(store.get().currentTheme)
}, props)) }, props))
)
} }

View file

@ -0,0 +1,7 @@
import { themes } from '../_static/themes'
import { DEFAULT_THEME } from './themeEngine'
export function isDarkTheme (themeName) {
const theme = themes.find(_ => _.name === themeName) || themes.find(_ => _.name === DEFAULT_THEME)
return theme.dark
}

View file

@ -3552,10 +3552,10 @@ emittery@^0.4.1:
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d" resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ== integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
emoji-mart@^2.11.1: emoji-mart@^2.11.2:
version "2.11.1" version "2.11.2"
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.1.tgz#fc9330b513803c17b98c9ad289c12ab61ff05f8f" resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.2.tgz#ed331867f7f55bb33c8421c9a493090fa4a378c7"
integrity sha512-Hr4N56YEkaPtmojO2dfgnMLLE/d5HpnhH0+M8cw9LRHpG2EgQQaCelRad3d5qQAPHI5+K0wMc/rwM0eRo0FnUA== integrity sha512-IdHZR5hc3mipTY/r0ergtqBgQ96XxmRdQDSg7fsL+GiJQQ4akMws6+cjLSyIhGQxtvNuPVNaEQiAlU00NsyZUg==
dependencies: dependencies:
prop-types "^15.6.0" prop-types "^15.6.0"