Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

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

Browse Source
This commit is contained in:
JC Brand 2017-07-16 11:06:34 +02:00
parent 22113a8ccb
commit 9a5f2fce61
7 changed files with 60 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/converse.css
View File

@ -1263,7 +1263,7 @@
transform: rotate(359deg); } }
#converse-embedded-chat .emojione,
#conversejs .emojione {
height: 24px; }
height: 20px; }
#converse-embedded-chat .spinner,
#conversejs .spinner {
-webkit-animation: spin 2s infinite, linear;
@ -1752,6 +1752,10 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
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,
#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);
@ -1759,10 +1763,9 @@
#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 {
background-color: #DCF9F6; }
#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 .emoji-skintone,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0;
@ -1844,12 +1847,13 @@
border-top-right-radius: 0; } }
#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 {
display: table;
table-layout: fixed;
width: 100%; }
#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 {
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 {
margin-right: 1em; }

11
css/inverse.css
View File

@ -1798,6 +1798,10 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
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,
#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);
@ -1805,10 +1809,9 @@ body {
#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 {
background-color: #DCF9F6; }
#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 .emoji-skintone,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0;

11
sass/_chatbox.scss
View File

@ -321,16 +321,19 @@
color: $link-color;
}
ul {
&.emoji-picker {
height: $emoji-picker-height;
overflow: scroll;
}
&.emoji-category-picker {
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
overflow-x: scroll;
.picked {
background-color: $highlight-color;
}
}
&.emoji-picker {
height: $emoji-picker-height;
overflow: scroll;
.emoji-skintone {
float: right;
}
}
li {
margin-left: 0;

12
sass/converse/_chatbox.scss
View File

@ -19,16 +19,20 @@
.toolbar-menu {
ul {
&.emoji-category-picker {
display: table;
table-layout: fixed;
width: 100%;
.emoji-category {
display: table-cell;
float: left;
}
}
}
}
&.toggle-smiley {
ul {
li {
padding: 2px;
}
}
}
}
}
}

2
sass/converse/_variables.scss
View File

@ -53,7 +53,7 @@ $send-button-margin: 3px !default;
$message-them-color: $red !default;
$emoji_height : 24px !default;
$emoji_height : 20px !default;
$roster-height: 194px !default;
$roster-item-height: 60px !default;

18
src/converse-chatview.js
View File

@ -115,14 +115,16 @@
_converse.EmojiPicker = Backbone.Model.extend({
defaults: {
'current_category': 'people'
'current_category': 'people',
'current_skintone': ''
}
});
_converse.EmojiPickerView = Backbone.View.extend({
className: 'emoji-picker-container toolbar-menu collapsed',
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 () {
@ -134,18 +136,26 @@
var emojis_html = tpl_emojis(
_.extend(
this.model.toJSON(), {
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
'emojis_by_category': emojis_by_category,
'emojione': emojione
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
}
));
this.el.innerHTML = emojis_html;
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) {
ev.preventDefault();
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});
}
});

14
src/templates/emojis.html
View File

@ -1,8 +1,10 @@
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
{[ _.forEach(emojis_by_category[category], function (emoji) { ]}
<li class="emoji insert-emoji" data-emoji="{{{emoji._shortname}}}">
<a href="#" data-emoji="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }} </a>
<li class="emoji insert-emoji
{[ 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>
{[ }); ]}
</ul>
@ -10,7 +12,13 @@
<ul class="emoji-category-picker">
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<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>
{[ }); ]}
</ul>