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

emoji: various css and html changes to improve ui/ux in converse and inverse

Browse Source
This commit is contained in:
JC Brand 2017-07-16 14:52:19 +02:00
parent ffdd4e25f3
commit e4ebcc8f71
7 changed files with 92 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/converse.css
View File

@ -1755,23 +1755,40 @@
#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; }
overflow: scroll;
padding: 0.5em; }
#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);
overflow-x: scroll; }
#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 {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
#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-skintone-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-skintone-picker {
overflow: hidden;
left: 0; }
#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-skintone-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-skintone-picker .picked {
background-color: #DCF9F6; }
#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.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
height: 30px;
padding: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a {
font-size: 20px; }
#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;
cursor: pointer;
list-style: none;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
@ -1784,16 +1801,6 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
left: 0; }
#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: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
font-size: 20px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; }
@ -1845,12 +1852,18 @@
#conversejs .chat-head {
border-top-left-radius: 0;
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 {
#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-skintone-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-skintone-picker {
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 {
#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-skintone-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-skintone-picker .emoji-category {
float: left; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
padding: 2px; }
#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; }

45
css/inverse.css
View File

@ -1800,24 +1800,41 @@ body {
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; }
height: 150px;
overflow: scroll;
padding: 0.5em; }
#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);
overflow-x: scroll; }
#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 {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
#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-skintone-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-skintone-picker {
overflow: hidden;
left: 0; }
#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-skintone-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-skintone-picker .picked {
background-color: #DCF9F6; }
#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.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
height: 34px;
padding: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a {
font-size: 26px; }
#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;
cursor: pointer;
list-style: none;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
@ -1830,16 +1847,6 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
left: 0; }
#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: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
font-size: 26px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; }

36
sass/_chatbox.scss
View File

@ -324,18 +324,34 @@
&.emoji-picker {
height: $emoji-picker-height;
overflow: scroll;
padding: 0.5em;
}
&.emoji-category-picker {
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
overflow-x: scroll;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
}
&.emoji-category-picker,
&.emoji-skintone-picker {
overflow: hidden;
left: 0;
.picked {
background-color: $highlight-color;
}
.emoji-skintone {
float: right;
li {
height: $emoji_height + 2*5px;
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
}
li {
&.insert-emoji {
padding: 0.3em;
}
margin-left: 0;
cursor: pointer;
list-style: none;
@ -358,18 +374,6 @@
}
&.toggle-smiley {
padding-left: 5px;
ul {
left: 0;
li {
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
}
}
&.toggle-otr {
ul {

6
sass/converse/_chatbox.scss
View File

@ -18,11 +18,15 @@
li {
.toolbar-menu {
ul {
&.emoji-category-picker {
&.emoji-category-picker,
&.emoji-skintone-picker {
width: 100%;
.emoji-category {
float: left;
}
li {
padding: 2px;
}
}
}
}

2
sass/inverse/_variables.scss
View File

@ -103,7 +103,7 @@ $legend-font-size: 18px !default;
$toolbar-height: 29px !default;
$toolbar-color: $greenish-white !default;
$emoji-picker-height: 250px !default;
$emoji-picker-height: 150px !default;
$line-height-small: 20px !default;
$line-height: 22px !default;

6
src/converse-chatview.js
View File

@ -131,7 +131,7 @@
className: 'emoji-picker-container toolbar-menu collapsed',
events: {
'click .emoji-category-picker li.emoji-category': 'chooseCategory',
'click .emoji-category-picker li.emoji-skintone': 'chooseSkinTone'
'click .emoji-skintone-picker li.emoji-skintone': 'chooseSkinTone'
},
initialize () {
@ -140,7 +140,7 @@
this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
},
render () {
render () {
var emojis_html = tpl_emojis(
_.extend(
this.model.toJSON(), {
@ -152,7 +152,6 @@
}
));
this.el.innerHTML = emojis_html;
this.el.querySelectorAll('.emoji-picker').forEach((el) => {
el.addEventListener(
'scroll', this.setScrollPosition.bind(this)
@ -778,6 +777,7 @@
if (!_.isUndefined(ev)) {
ev.stopPropagation();
if (ev.target.classList.contains('emoji-category-picker') ||
ev.target.classList.contains('emoji-skintone-picker') ||
ev.target.classList.contains('emoji-category')) {
return;
}

2
src/templates/emojis.html
View File

@ -14,7 +14,9 @@
<a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
</li>
{[ }); ]}
</ul>
<ul class="emoji-skintone-picker">
{[ _.forEach(skintones, function (skintone) { ]}
<li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>