From e2e0221dd7c74f05d9902f5462ec4a9818baaf12 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Sat, 22 Jul 2017 17:32:12 +0200
Subject: [PATCH] FIX: make sure there are meaningful titles on the picker
---
.../javascripts/discourse/components/emoji-picker.js.es6 | 6 ++++--
.../discourse/templates/emoji-picker.raw.hbs.erb | 8 ++++----
config/locales/client.en.yml | 6 ++++++
3 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js.es6 b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
index 1c42006b557..372c8f69bc8 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
@@ -139,16 +139,18 @@ export default Ember.Component.extend({
this._bindEvents();
Ember.run.scheduleOnce("afterRender", this, function() {
+ this._loadCategoriesEmojis();
this._setDiversity();
this._positionPicker();
this._scrollTo();
- this._loadCategoriesEmojis();
});
},
_loadCategoriesEmojis() {
$.each($picker.find(".categories-column button.emoji"), (_, button) => {
- this._setButtonBackground(button, false);
+ const $button = $(button);
+ const code = this._codeWithDiversity($button.data("tabicon"), false);
+ $button.css("background-image", `url("${emojiUrlFor(code)}")`);
});
},
diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
index eb54ef2a102..74c0327485b 100644
--- a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
+++ b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
@@ -1,17 +1,17 @@
<div class='categories-column'>
<div class='category-icon'>
- <button type="button" class="emoji" tabindex="-1" title="star" data-section="recent"></button>
+ <button type="button" class="emoji" tabindex="-1" title="{{i18n 'emoji_picker.recent'}}" data-section="recent" data-tabicon="star"></button>
</div>
<% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %>
<div class='category-icon'>
- <button type="button" class="emoji" tabindex="-1" data-section="<%= group["name"] %>" title="<%= group["tabicon"] %>"></button>
+ <button type="button" class="emoji" tabindex="-1" data-tabicon="<%= group["tabicon"] %>" data-section="<%= group["name"] %>" title="<%= group["fullname"] %>"></button>
</div>
<% end %>
<% if !Emoji.custom.blank? %>
<div class='category-icon'>
- <button data-section="ungrouped" type="button" class="emoji" tabindex="-1" title="<%= Emoji.custom.first.name %>"></button>
+ <button data-tabicon="<%= Emoji.custom.first.name %>" type="button" class="emoji" tabindex="-1" data-section="ungrouped" title="{{i18n 'emoji_picker.custom'}}"></button>
</div>
<% end %>
</div>
@@ -66,7 +66,7 @@
<div class='info'></div>
<div class='diversity-picker'>
<% ['default', 'light', 'medium-light', 'medium', 'medium-dark', 'dark'].each.with_index do |diversity, index| %>
- <a href='#' class='diversity-scale <%= diversity %>' data-level="<%= index + 1 %>">
+ <a href='#' title="{{i18n 'emoji_picker.<%= diversity.gsub('-', '_') %>_tone'}}" class='diversity-scale <%= diversity %>' data-level="<%= index + 1 %>">
{{fa-icon "check"}}
</a>
<% end %>
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 1448ad44994..ec2d5398d93 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1145,6 +1145,12 @@ en:
celebration: Celebration
custom: Custom emojis
recent: Recently used
+ default_tone: No skin tone
+ light_tone: Light skin tone
+ medium_light_tone: Medium light skin tone
+ medium_tone: Medium skin tone
+ medium_dark_tone: Medium dark skin tone
+ dark_tone: Dark skin tone
composer:
emoji: "Emoji :)"