From 7596d905ab860850662354f6d2769f9092ce8a5b Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 18:24:05 -0800 Subject: [PATCH] fix(emoji): make emoji picker more like Mastodon's (#842) --- .../dialog/components/EmojiDialog.html | 70 +++++++++++++++++-- .../dialog/components/ModalDialog.html | 13 +++- .../_react/createEmojiMartPickerFromData.js | 4 +- .../_store/observers/resizeObservers.js | 5 +- 4 files changed, 81 insertions(+), 11 deletions(-) diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html index 14ffdaab..4c267819 100644 --- a/src/routes/_components/dialog/components/EmojiDialog.html +++ b/src/routes/_components/dialog/components/EmojiDialog.html @@ -4,7 +4,7 @@ {title} background="var(--main-bg)" > -
+
{#if loaded} {:elseif error} @@ -37,6 +37,30 @@ background-repeat: no-repeat; background-position: center center; } + :global(.emoji-container .emoji-mart-category .emoji-mart-emoji span, .emoji-container .emoji-mart-anchor) { + cursor: pointer; + } + :global(.emoji-container .emoji-mart-search-icon) { + top: 6px; /* this looks a bit off-center with the native emoji */ + } + + :global(.emoji-container .emoji-mart-skin) { + max-width: 24px; + } + + :global(.emoji-container .emoji-mart-skin-swatch.selected) { + width: 24px; + } + + :global(.emoji-container .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch) { + width: 24px; + } + + @media (max-width: 320px) { + :global(.emoji-container .emoji-mart-preview) { + height: 60px; + } + } \ No newline at end of file + diff --git a/src/routes/_react/createEmojiMartPickerFromData.js b/src/routes/_react/createEmojiMartPickerFromData.js index 19a2c7a1..dbfa9a70 100644 --- a/src/routes/_react/createEmojiMartPickerFromData.js +++ b/src/routes/_react/createEmojiMartPickerFromData.js @@ -13,8 +13,8 @@ function onEmojiSelected (emoji) { export default function createEmojiMartPickerFromData (data) { return props => React.createElement(NimblePicker, Object.assign({ - set: 'all', - data, + set: 'twitter', // same as Mastodon frontend + data, // same as Mastodon frontend native: true, onSelect: onEmojiSelected }, props)) diff --git a/src/routes/_store/observers/resizeObservers.js b/src/routes/_store/observers/resizeObservers.js index ec0bf03a..c5266bc9 100644 --- a/src/routes/_store/observers/resizeObservers.js +++ b/src/routes/_store/observers/resizeObservers.js @@ -7,8 +7,9 @@ export function resizeObservers (store) { const recalculateIsMobileSize = () => { store.set({ - isMobileSize: window.matchMedia('(max-width: 767px)').matches, - isSmallMobileSize: window.matchMedia('(max-width: 479px)').matches + isMobileSize: window.matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus + isSmallMobileSize: window.matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5 + isTinyMobileSize: window.matchMedia('(max-width: 320px)').matches // e.g. iPhone 4 }) }