From 0e9d549cf336df6d74de327593f1ea165d39d769 Mon Sep 17 00:00:00 2001 From: Ken Powers Date: Fri, 24 May 2019 16:58:27 -0700 Subject: [PATCH] Fuzzy-Searchable Emoji Picker --- _locales/en/messages.json | 19 ++ app/sql.js | 64 +++++ background.html | 3 +- images/emoji-activity-filled-20.svg | 11 + images/emoji-activity-outline-20.svg | 11 + images/emoji-animal-filled-20.svg | 14 ++ images/emoji-animal-outline-20.svg | 17 ++ images/emoji-filled-20.svg | 10 + images/emoji-flag-filled-20.svg | 8 + images/emoji-flag-outline-20.svg | 8 + images/emoji-food-filled-20.svg | 13 + images/emoji-food-outline-20.svg | 15 ++ images/emoji-object-filled-20.svg | 7 + images/emoji-object-outline-20.svg | 8 + images/emoji-outline-20.svg | 12 + images/emoji-symbol-filled-20.svg | 8 + images/emoji-symbol-outline-20.svg | 10 + images/emoji-travel-filled-20.svg | 8 + images/emoji-travel-outline-20.svg | 10 + images/recent-outline-20.svg | 7 + js/background.js | 6 + js/modules/data.d.ts | 5 + js/modules/data.js | 11 + js/modules/emojis.js | 28 +++ js/modules/signal.js | 6 + js/views/conversation_view.js | 70 ++---- package.json | 22 +- preload.js | 1 - styleguide.config.js | 5 + stylesheets/_emoji.scss | 64 ----- stylesheets/_global.scss | 4 +- stylesheets/_modules.scss | 343 ++++++++++++++++++++++++- stylesheets/_theme_dark.scss | 25 +- ts/components/emoji/Emoji.md | 21 ++ ts/components/emoji/Emoji.tsx | 43 ++++ ts/components/emoji/EmojiButton.md | 56 +++++ ts/components/emoji/EmojiButton.tsx | 106 ++++++++ ts/components/emoji/EmojiPicker.md | 60 +++++ ts/components/emoji/EmojiPicker.tsx | 364 +++++++++++++++++++++++++++ ts/components/emoji/lib.ts | 192 ++++++++++++++ ts/state/actions.ts | 2 + ts/state/ducks/emojis.ts | 65 +++++ ts/state/reducer.ts | 10 +- ts/state/roots/createEmojiButton.tsx | 16 ++ ts/state/smart/EmojiButton.tsx | 54 ++++ ts/util/emoji.ts | 12 - ts/util/lint/exceptions.json | 112 +-------- yarn.lock | 11 +- 48 files changed, 1697 insertions(+), 280 deletions(-) create mode 100755 images/emoji-activity-filled-20.svg create mode 100755 images/emoji-activity-outline-20.svg create mode 100644 images/emoji-animal-filled-20.svg create mode 100644 images/emoji-animal-outline-20.svg create mode 100755 images/emoji-filled-20.svg create mode 100644 images/emoji-flag-filled-20.svg create mode 100644 images/emoji-flag-outline-20.svg create mode 100755 images/emoji-food-filled-20.svg create mode 100755 images/emoji-food-outline-20.svg create mode 100755 images/emoji-object-filled-20.svg create mode 100755 images/emoji-object-outline-20.svg create mode 100755 images/emoji-outline-20.svg create mode 100755 images/emoji-symbol-filled-20.svg create mode 100755 images/emoji-symbol-outline-20.svg create mode 100644 images/emoji-travel-filled-20.svg create mode 100644 images/emoji-travel-outline-20.svg create mode 100644 images/recent-outline-20.svg create mode 100644 js/modules/emojis.js create mode 100644 ts/components/emoji/Emoji.md create mode 100644 ts/components/emoji/Emoji.tsx create mode 100644 ts/components/emoji/EmojiButton.md create mode 100644 ts/components/emoji/EmojiButton.tsx create mode 100644 ts/components/emoji/EmojiPicker.md create mode 100644 ts/components/emoji/EmojiPicker.tsx create mode 100644 ts/components/emoji/lib.ts create mode 100644 ts/state/ducks/emojis.ts create mode 100644 ts/state/roots/createEmojiButton.tsx create mode 100644 ts/state/smart/EmojiButton.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index a58162586..b01a94281 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1835,6 +1835,25 @@ "message": "Sticker Pack", "description": "The title that appears in the sticker pack preview modal." }, + "EmojiPicker--empty": { + "message": "No emoji found", + "description": "Shown in the emoji picker when a search yields 0 results." + }, + "EmojiPicker--search-placeholder": { + "message": "Search Emoji", + "description": + "Shown as a placeholder inside the emoji picker search field." + }, + "EmojiPicker--skin-tone": { + "message": "Skin tone $tone$", + "placeholders": { + "status": { + "content": "$1", + "example": "2" + } + }, + "description": "Shown as a tooltip over the emoji tone buttons." + }, "confirmation-dialog--Cancel": { "message": "Cancel", "description": "Appears on the cancel button in confirmation dialogs." diff --git a/app/sql.js b/app/sql.js index 2197d32fb..3df186023 100644 --- a/app/sql.js +++ b/app/sql.js @@ -123,6 +123,9 @@ module.exports = { getAllStickers, getRecentStickers, + updateEmojiUsage, + getRecentEmojis, + removeAll, removeAllConfiguration, @@ -735,6 +738,29 @@ async function updateToSchemaVersion13(currentVersion, instance) { console.log('updateToSchemaVersion13: success!'); } +async function updateToSchemaVersion14(currentVersion, instance) { + if (currentVersion >= 14) { + return; + } + + console.log('updateToSchemaVersion14: starting...'); + await instance.run('BEGIN TRANSACTION;'); + + await instance.run(`CREATE TABLE emojis( + shortName STRING PRIMARY KEY, + lastUsage INTEGER + );`); + + await instance.run(`CREATE INDEX emojis_lastUsage + ON emojis ( + lastUsage + );`); + + await instance.run('PRAGMA schema_version = 14;'); + await instance.run('COMMIT TRANSACTION;'); + console.log('updateToSchemaVersion14: success!'); +} + const SCHEMA_VERSIONS = [ updateToSchemaVersion1, updateToSchemaVersion2, @@ -749,6 +775,7 @@ const SCHEMA_VERSIONS = [ updateToSchemaVersion11, updateToSchemaVersion12, updateToSchemaVersion13, + updateToSchemaVersion14, ]; async function updateSchema(instance) { @@ -2182,6 +2209,43 @@ async function getRecentStickers({ limit } = {}) { return rows || []; } +// Emojis +async function updateEmojiUsage(shortName, timeUsed = Date.now()) { + await db.run('BEGIN TRANSACTION;'); + + const rows = await db.get( + 'SELECT * FROM emojis WHERE shortName = $shortName;', + { + $shortName: shortName, + } + ); + + if (rows) { + await db.run( + 'UPDATE emojis SET lastUsage = $timeUsed WHERE shortName = $shortName;', + { $shortName: shortName, $timeUsed: timeUsed } + ); + } else { + await db.run( + 'INSERT INTO emojis(shortName, lastUsage) VALUES ($shortName, $timeUsed);', + { $shortName: shortName, $timeUsed: timeUsed } + ); + } + + await db.run('COMMIT TRANSACTION;'); +} + +async function getRecentEmojis(limit = 32) { + const rows = await db.all( + 'SELECT * FROM emojis ORDER BY lastUsage DESC LIMIT $limit;', + { + $limit: limit, + } + ); + + return rows || []; +} + // All data in database async function removeAll() { let promise; diff --git a/background.html b/background.html index ced91eeb6..d36ab91d8 100644 --- a/background.html +++ b/background.html @@ -112,12 +112,11 @@