Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Update recent emoji list when selecting from it (#15514) 

…after you re-open the modal or select another emoji.

Reason:
Even the most used emoji would be knocked off the list after a while, if you use any emoji outside the recent. Consider the sequence:

✅, 😃, ✅ (from recent), 😀, ✅ (from recent), 😛, ✅ (from recent), 😎, ✅ (from recent), and so on

With the previous logic, the check mark emoji would leave the list, even though it used constantly and (and the time of removal) would the the second most recent used emoji.

---

It doesn't update the list when you use the recent list so that you can click an emoji repeatedly and it doesn't shift from under your mouse cursor.
This commit is contained in:
Jarek Radosz 2022-01-11 00:00:47 +01:00 committed by GitHub
parent a18c1cf8a4
commit 933f6780ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/app/components/emoji-picker.js
View File

@ -43,7 +43,6 @@ export default Component.extend({
this._super(...arguments);
this.set("customEmojis", customEmojis());
this.set("recentEmojis", this.emojiStore.favorites);
this.set("selectedDiversity", this.emojiStore.diversity);
if ("IntersectionObserver" in window) {
@ -80,6 +79,7 @@ export default Component.extend({
@action
onShow() {
this.set("isLoading", true);
this.set("recentEmojis", this.emojiStore.favorites);
schedule("afterRender", () => {
document.addEventListener("click", this.handleOutsideClick);
@ -198,9 +198,9 @@ export default Component.extend({
this.emojiSelected(code);
if (!img.parentNode.parentNode.classList.contains("recent")) {
this._trackEmojiUsage(code);
}
this._trackEmojiUsage(code, {
refresh: !img.parentNode.parentNode.classList.contains("recent"),
});
if (this.site.isMobileDevice) {
this.onClose();
@ -244,9 +244,12 @@ export default Component.extend({
}
},
_trackEmojiUsage(code) {
_trackEmojiUsage(code, options = {}) {
this.emojiStore.track(code);
this.set("recentEmojis", this.emojiStore.favorites.slice(0, 10));
if (options.refresh) {
this.set("recentEmojis", [...this.emojiStore.favorites]);
}
},
_replaceEmoji(code) {

29
app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
View File

@ -127,6 +127,35 @@ acceptance("EmojiPicker", function (needs) {
);
});
test("updates the recent list when selecting from it (after you close re-open it or select other emoji)", async function (assert) {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");
await click("button.emoji.btn");
await click(`.emoji-picker-emoji-area img.emoji[title="sunglasses"]`);
await click(`.emoji-picker-emoji-area img.emoji[title="grinning"]`);
let recent = queryAll(".section.recent .section-group img.emoji");
assert.strictEqual(recent[0].title, "grinning");
assert.strictEqual(recent[1].title, "sunglasses");
await click(
`.section[data-section="recent"] .section-group img.emoji[title="sunglasses"]`
);
// The order is still the same
recent = queryAll(".section.recent .section-group img.emoji");
assert.strictEqual(recent[0].title, "grinning");
assert.strictEqual(recent[1].title, "sunglasses");
await click("button.emoji.btn");
await click("button.emoji.btn");
// but updates when you re-open
recent = queryAll(".section.recent .section-group img.emoji");
assert.strictEqual(recent[0].title, "sunglasses");
assert.strictEqual(recent[1].title, "grinning");
});
test("emoji picker persists state", async function (assert) {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");