From 22fd567eb17e6a1d99ba984876371993ae194bab Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 23 Dec 2019 11:53:44 -0800 Subject: [PATCH] fix: update emoji-mart, add dark mode and custom categories (#1686) --- package.json | 2 +- .../dialog/components/EmojiDialog.html | 50 +++++++++++-------- .../_react/createEmojiMartPickerFromData.js | 17 ++++--- src/routes/_utils/isDarkTheme.js | 7 +++ yarn.lock | 8 +-- 5 files changed, 53 insertions(+), 31 deletions(-) create mode 100644 src/routes/_utils/isDarkTheme.js diff --git a/package.json b/package.json index fe2f75d3..83c3c4de 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "cross-env": "^6.0.3", "css-dedoupe": "^0.1.1", "css-loader": "^3.3.2", - "emoji-mart": "^2.11.1", + "emoji-mart": "^2.11.2", "emoji-regex": "^8.0.0", "encoding": "^0.1.12", "escape-html": "^1.0.3", diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html index d0b666e5..a5196013 100644 --- a/src/routes/_components/dialog/components/EmojiDialog.html +++ b/src/routes/_components/dialog/components/EmojiDialog.html @@ -99,21 +99,6 @@ import { on } from '../../../_utils/eventBus' 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 { async oncreate () { onCreateDialog.call(this) @@ -146,13 +131,13 @@ ${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''} `), emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps), - emojiMartProps: ({ perLine, custom }) => ({ + emojiMartProps: ({ perLine, customEmoji, categoriesSorted }) => ({ perLine, - custom, + custom: customEmoji, color: 'var(--nav-bg)', emoji: 'sailboat', title: 'Emoji', - include: categoriesSort, + include: categoriesSorted, showPreview: true }), perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => ( @@ -166,7 +151,31 @@ ? 9 : 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) { return [] } @@ -176,7 +185,8 @@ text: `:${emoji.shortcode}:`, emoticons: [], 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 diff --git a/src/routes/_react/createEmojiMartPickerFromData.js b/src/routes/_react/createEmojiMartPickerFromData.js index dbfa9a70..45d4ff16 100644 --- a/src/routes/_react/createEmojiMartPickerFromData.js +++ b/src/routes/_react/createEmojiMartPickerFromData.js @@ -6,16 +6,21 @@ import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker' import React from 'react' import { emit } from '../_utils/eventBus' +import { store } from '../_store/store' +import { isDarkTheme } from '../_utils/isDarkTheme' function onEmojiSelected (emoji) { emit('emoji-selected', emoji) } export default function createEmojiMartPickerFromData (data) { - return props => React.createElement(NimblePicker, Object.assign({ - set: 'twitter', // same as Mastodon frontend - data, // same as Mastodon frontend - native: true, - onSelect: onEmojiSelected - }, props)) + return props => ( + React.createElement(NimblePicker, Object.assign({ + set: 'twitter', // same as Mastodon frontend + data, // same as Mastodon frontend + native: true, + onSelect: onEmojiSelected, + darkMode: isDarkTheme(store.get().currentTheme) + }, props)) + ) } diff --git a/src/routes/_utils/isDarkTheme.js b/src/routes/_utils/isDarkTheme.js new file mode 100644 index 00000000..b939ffb4 --- /dev/null +++ b/src/routes/_utils/isDarkTheme.js @@ -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 +} diff --git a/yarn.lock b/yarn.lock index 16f609cf..2de30730 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3552,10 +3552,10 @@ emittery@^0.4.1: resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d" integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ== -emoji-mart@^2.11.1: - version "2.11.1" - resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.1.tgz#fc9330b513803c17b98c9ad289c12ab61ff05f8f" - integrity sha512-Hr4N56YEkaPtmojO2dfgnMLLE/d5HpnhH0+M8cw9LRHpG2EgQQaCelRad3d5qQAPHI5+K0wMc/rwM0eRo0FnUA== +emoji-mart@^2.11.2: + version "2.11.2" + resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.2.tgz#ed331867f7f55bb33c8421c9a493090fa4a378c7" + integrity sha512-IdHZR5hc3mipTY/r0ergtqBgQ96XxmRdQDSg7fsL+GiJQQ4akMws6+cjLSyIhGQxtvNuPVNaEQiAlU00NsyZUg== dependencies: prop-types "^15.6.0"