Skip to content

C
converse.js
Commit 9a5f2fce authored by JC Brand's avatar JC Brand
Browse files
Options

emoji: Add a skin-tone picker to the emoji toolbar

parent 22113a8c
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 28 deletions
css/converse.css
View file @ 9a5f2fce
...@@ -1263,7 +1263,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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; }
......
css/inverse.css
View file @ 9a5f2fce
...@@ -1798,6 +1798,10 @@ body { ...@@ -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 { ...@@ -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;
......
sass/_chatbox.scss
View file @ 9a5f2fce
...@@ -321,16 +321,19 @@ ...@@ -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 {
&.emoji-picker { float: right;
height: $emoji-picker-height; }
overflow: scroll;
} }
li { li {
margin-left: 0; margin-left: 0;
......
sass/converse/_chatbox.scss
View file @ 9a5f2fce
...@@ -19,16 +19,20 @@ ...@@ -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;
}
}
}
} }
} }
} }
......
sass/converse/_variables.scss
View file @ 9a5f2fce
...@@ -53,7 +53,7 @@ $send-button-margin: 3px !default; ...@@ -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;
......
src/converse-chatview.js
View file @ 9a5f2fce
...@@ -115,14 +115,16 @@ ...@@ -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 @@ ...@@ -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});
} }
}); });
......
src/templates/emojis.html
View file @ 9a5f2fce
{[ _.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 @@ ...@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7