emoji: Add a skin-tone picker to the emoji toolbar
This commit is contained in:
parent
22113a8ccb
commit
9a5f2fce61
@ -1263,7 +1263,7 @@
|
|||||||
transform: rotate(359deg); } }
|
transform: rotate(359deg); } }
|
||||||
#converse-embedded-chat .emojione,
|
#converse-embedded-chat .emojione,
|
||||||
#conversejs .emojione {
|
#conversejs .emojione {
|
||||||
height: 24px; }
|
height: 20px; }
|
||||||
#converse-embedded-chat .spinner,
|
#converse-embedded-chat .spinner,
|
||||||
#conversejs .spinner {
|
#conversejs .spinner {
|
||||||
-webkit-animation: spin 2s infinite, linear;
|
-webkit-animation: spin 2s infinite, linear;
|
||||||
@ -1752,6 +1752,10 @@
|
|||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||||
|
height: 100px;
|
||||||
|
overflow: scroll; }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
||||||
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||||
@ -1759,10 +1763,9 @@
|
|||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
|
||||||
background-color: #DCF9F6; }
|
background-color: #DCF9F6; }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
|
||||||
height: 100px;
|
float: right; }
|
||||||
overflow: scroll; }
|
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
@ -1844,12 +1847,13 @@
|
|||||||
border-top-right-radius: 0; } }
|
border-top-right-radius: 0; } }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category {
|
||||||
display: table-cell; }
|
float: left; }
|
||||||
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
|
||||||
|
padding: 2px; }
|
||||||
|
|
||||||
#conversejs #controlbox {
|
#conversejs #controlbox {
|
||||||
margin-right: 1em; }
|
margin-right: 1em; }
|
||||||
|
@ -1798,6 +1798,10 @@ body {
|
|||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||||
|
height: 250px;
|
||||||
|
overflow: scroll; }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
|
||||||
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||||
@ -1805,10 +1809,9 @@ body {
|
|||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
|
||||||
background-color: #DCF9F6; }
|
background-color: #DCF9F6; }
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
|
||||||
height: 250px;
|
float: right; }
|
||||||
overflow: scroll; }
|
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
@ -321,16 +321,19 @@
|
|||||||
color: $link-color;
|
color: $link-color;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
|
&.emoji-picker {
|
||||||
|
height: $emoji-picker-height;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
&.emoji-category-picker {
|
&.emoji-category-picker {
|
||||||
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
.picked {
|
.picked {
|
||||||
background-color: $highlight-color;
|
background-color: $highlight-color;
|
||||||
}
|
}
|
||||||
|
.emoji-skintone {
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
&.emoji-picker {
|
|
||||||
height: $emoji-picker-height;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
@ -19,16 +19,20 @@
|
|||||||
.toolbar-menu {
|
.toolbar-menu {
|
||||||
ul {
|
ul {
|
||||||
&.emoji-category-picker {
|
&.emoji-category-picker {
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.emoji-category {
|
.emoji-category {
|
||||||
display: table-cell;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.toggle-smiley {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -53,7 +53,7 @@ $send-button-margin: 3px !default;
|
|||||||
|
|
||||||
$message-them-color: $red !default;
|
$message-them-color: $red !default;
|
||||||
|
|
||||||
$emoji_height : 24px !default;
|
$emoji_height : 20px !default;
|
||||||
|
|
||||||
$roster-height: 194px !default;
|
$roster-height: 194px !default;
|
||||||
$roster-item-height: 60px !default;
|
$roster-item-height: 60px !default;
|
||||||
|
@ -115,14 +115,16 @@
|
|||||||
|
|
||||||
_converse.EmojiPicker = Backbone.Model.extend({
|
_converse.EmojiPicker = Backbone.Model.extend({
|
||||||
defaults: {
|
defaults: {
|
||||||
'current_category': 'people'
|
'current_category': 'people',
|
||||||
|
'current_skintone': ''
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
_converse.EmojiPickerView = Backbone.View.extend({
|
_converse.EmojiPickerView = Backbone.View.extend({
|
||||||
className: 'emoji-picker-container toolbar-menu collapsed',
|
className: 'emoji-picker-container toolbar-menu collapsed',
|
||||||
events: {
|
events: {
|
||||||
'click .emoji-category-picker li a': 'chooseCategory',
|
'click .emoji-category-picker li a.pick-category': 'chooseCategory',
|
||||||
|
'click .emoji-category-picker li a.pick-skintone': 'chooseSkinTone',
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
@ -134,18 +136,26 @@
|
|||||||
var emojis_html = tpl_emojis(
|
var emojis_html = tpl_emojis(
|
||||||
_.extend(
|
_.extend(
|
||||||
this.model.toJSON(), {
|
this.model.toJSON(), {
|
||||||
|
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
|
||||||
'emojis_by_category': emojis_by_category,
|
'emojis_by_category': emojis_by_category,
|
||||||
'emojione': emojione
|
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
this.el.innerHTML = emojis_html;
|
this.el.innerHTML = emojis_html;
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
chooseSkinTone: function (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
const skintone = ev.target.parentElement.getAttribute("data-skintone").trim();
|
||||||
|
this.model.set({'current_skintone': skintone});
|
||||||
|
},
|
||||||
|
|
||||||
chooseCategory: function (ev) {
|
chooseCategory: function (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
var category = ev.target.parentElement.getAttribute("data-category").trim();
|
const category = ev.target.parentElement.getAttribute("data-category").trim();
|
||||||
this.model.set({'current_category': category});
|
this.model.set({'current_category': category});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
||||||
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
|
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
|
||||||
{[ _.forEach(emojis_by_category[category], function (emoji) { ]}
|
{[ _.forEach(emojis_by_category[category], function (emoji) { ]}
|
||||||
<li class="emoji insert-emoji" data-emoji="{{{emoji._shortname}}}">
|
<li class="emoji insert-emoji
|
||||||
<a href="#" data-emoji="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }} </a>
|
{[ if (emoji._shortname.indexOf('_tone') !== -1 && (!current_skintone || emoji._shortname.indexOf(current_skintone) === -1)) { ]} hidden {[ }; ]}"
|
||||||
|
data-emoji="{{{emoji._shortname}}}">
|
||||||
|
<a href="#" data-emoji="{{{emoji._shortname}}}"> {{ transform(emoji._shortname) }} </a>
|
||||||
</li>
|
</li>
|
||||||
{[ }); ]}
|
{[ }); ]}
|
||||||
</ul>
|
</ul>
|
||||||
@ -10,7 +12,13 @@
|
|||||||
<ul class="emoji-category-picker">
|
<ul class="emoji-category-picker">
|
||||||
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
||||||
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
|
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
|
||||||
<a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
|
<a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
|
||||||
|
</li>
|
||||||
|
{[ }); ]}
|
||||||
|
|
||||||
|
{[ _.forEach(skintones, function (skintone) { ]}
|
||||||
|
<li data-category="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
|
||||||
|
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>
|
||||||
</li>
|
</li>
|
||||||
{[ }); ]}
|
{[ }); ]}
|
||||||
</ul>
|
</ul>
|
||||||
|
Loading…
Reference in New Issue
Block a user