diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js b/app/assets/javascripts/discourse/components/emoji-picker.js index ef56c4182a..88b7599324 100644 --- a/app/assets/javascripts/discourse/components/emoji-picker.js +++ b/app/assets/javascripts/discourse/components/emoji-picker.js @@ -1,4 +1,5 @@ import { inject as service } from "@ember/service"; +import { schedule } from "@ember/runloop"; import Component from "@ember/component"; import { on, observes } from "discourse-common/utils/decorators"; import { findRawTemplate } from "discourse/lib/raw-templates"; @@ -16,23 +17,16 @@ const { run } = Ember; const PER_ROW = 11; function customEmojis() { const list = extendedEmojiList(); - const emojis = Object.keys(list) - .map(code => { - const { group } = list[code]; - return { - code, - src: emojiUrlFor(code), - group, - key: `emoji_picker.${group || "default"}` - }; - }) - .reduce((acc, curr) => { - if (!acc[curr.group]) acc[curr.group] = []; - acc[curr.group].push(curr); - return acc; - }, {}); - - return Object.values(emojis); + const groups = []; + Object.keys(list).forEach(code => { + const emoji = list[code]; + groups[emoji.group] = groups[emoji.group] || []; + groups[emoji.group].push({ + code, + src: emojiUrlFor(code) + }); + }); + return groups; } export default Component.extend({ @@ -42,9 +36,8 @@ export default Component.extend({ close() { this._unbindEvents(); - this.$picker - .css({ width: "", left: "", bottom: "", display: "none" }) - .empty(); + this.$picker && + this.$picker.css({ width: "", left: "", bottom: "", display: "none" }); this.$modal.removeClass("fadeIn"); @@ -52,11 +45,6 @@ export default Component.extend({ }, show() { - const template = findRawTemplate("emoji-picker")({ - customEmojis: customEmojis() - }); - this.$picker.html(template); - this.$filter = this.$picker.find(".filter"); this.$results = this.$picker.find(".results"); this.$list = this.$picker.find(".list"); @@ -84,6 +72,7 @@ export default Component.extend({ @on("init") _setInitialValues() { + this.set("customEmojis", customEmojis()); this._checkTimeout = null; this.scrollPosition = 0; this.$visibleSections = []; @@ -100,14 +89,21 @@ export default Component.extend({ @on("didInsertElement") _setup() { - this.$picker = $(this.element.querySelector(".emoji-picker")); - this.$modal = $(this.element.querySelector(".emoji-picker-modal")); this.appEvents.on("emoji-picker:close", this, "_closeEmojiPicker"); }, @on("didUpdateAttrs") _setState() { - this.active ? this.show() : this.close(); + schedule("afterRender", () => { + if (!this.element) { + return; + } + + this.$picker = $(this.element.querySelector(".emoji-picker")); + this.$modal = $(this.element.querySelector(".emoji-picker-modal")); + + this.active ? this.show() : this.close(); + }); }, @observes("filter") diff --git a/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs b/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs deleted file mode 100644 index 7f7490eef7..0000000000 --- a/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs +++ /dev/null @@ -1,2 +0,0 @@ -
-
diff --git a/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb b/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb new file mode 100644 index 0000000000..f3504d33f0 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb @@ -0,0 +1,88 @@ +
+ {{#if active}} +
+
+ +
+ + <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %> +
+ +
+ <% end %> + + {{#each-in customEmojis as |group emojis|}} +
+ +
+ {{/each-in}} +
+ +
+
+ {{d-icon 'search'}} + + +
+ +
+ +
+
+
+ {{i18n 'emoji_picker.recent'}} + {{d-icon "trash-alt"}} +
+
+
+ + <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %> +
+
+ {{i18n 'emoji_picker.<%= group["name"] %>'}} +
+
+ <% group["icons"].each do |icon| %> + + <% end %> +
+
+ <% end %> + + {{#each-in customEmojis as |group emojis|}} +
+
+ + {{i18n (concat 'emoji_picker.' group)}} + +
+ {{#if emojis.length}} +
+ {{#each emojis as |emoji|}} + + {{/each}} +
+ {{/if}} +
+ {{/each-in}} +
+ +
+
+
+ <% ['default', 'light', 'medium-light', 'medium', 'medium-dark', 'dark'].each.with_index do |diversity, index| %> + + {{d-icon "check"}} + + <% end %> +
+
+
+ {{/if}} +
+ +
diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb b/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb deleted file mode 100644 index 5a33352165..0000000000 --- a/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb +++ /dev/null @@ -1,81 +0,0 @@ -
-
- -
- - <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %> -
- -
- <% end %> - - <% Emoji.custom.group_by { |emoji| emoji.group }.each do |group, emojis| %> - <% if emojis.present? %> -
- -
- <% end %> - <% end %> -
- -
-
- {{d-icon 'search'}} - - -
- -
- -
-
-
- {{i18n 'emoji_picker.recent'}} - {{d-icon "trash-alt"}} -
-
-
- - <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %> -
-
- {{i18n 'emoji_picker.<%= group["name"] %>'}} -
-
- <% group["icons"].each do |icon| %> - - <% end %> -
-
- <% end %> - - {{#each customEmojis as |emojis|}} - {{#if emojis.length}} -
-
- - {{i18n emojis.firstObject.key}} - -
-
- {{#each emojis as |emoji|}} - - {{/each}} -
-
- {{/if}} - {{/each}} -
-
-
-
- <% ['default', 'light', 'medium-light', 'medium', 'medium-dark', 'dark'].each.with_index do |diversity, index| %> - - {{d-icon "check"}} - - <% end %> -
-
-
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss index b4c2098104..8517597c37 100644 --- a/app/assets/stylesheets/common/base/emoji.scss +++ b/app/assets/stylesheets/common/base/emoji.scss @@ -35,6 +35,13 @@ sup img.emoji { color: $primary; background-color: $secondary; border: 1px solid $primary-low; + + img.emoji { + // custom emojis might import images of various sizes + // we don't want the picker to be difformed + width: 20px !important; + height: 20px !important; + } } .emoji-picker .categories-column { diff --git a/test/javascripts/acceptance/emoji-picker-test.js b/test/javascripts/acceptance/emoji-picker-test.js index fac37414a6..6a4922ed5c 100644 --- a/test/javascripts/acceptance/emoji-picker-test.js +++ b/test/javascripts/acceptance/emoji-picker-test.js @@ -22,7 +22,7 @@ QUnit.test("emoji picker can be opened/closed", async assert => { find(".emoji-picker") .html() .trim(), - "", + "", "it opens the picker" ); @@ -31,7 +31,7 @@ QUnit.test("emoji picker can be opened/closed", async assert => { find(".emoji-picker") .html() .trim(), - "", + "", "it closes the picker" ); });