Skip to content

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

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

parent ffdd4e25
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 62 deletions
css/converse.css
View file @ e4ebcc8f
...@@ -1755,23 +1755,40 @@ ...@@ -1755,23 +1755,40 @@
#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-picker,
#conversejs .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; height: 100px;
overflow: scroll; } overflow: scroll;
padding: 0.5em; }
#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); /* offset-x | offset-y | blur-radius | spread-radius | color */
overflow-x: scroll; } 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 .picked, #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 .picked { #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; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone, #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 .emoji-skintone { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
float: right; } #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, #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;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; } 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, #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 { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
...@@ -1784,16 +1801,6 @@ ...@@ -1784,16 +1801,6 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; } 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, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
...@@ -1845,12 +1852,18 @@ ...@@ -1845,12 +1852,18 @@
#conversejs .chat-head { #conversejs .chat-head {
border-top-left-radius: 0; border-top-left-radius: 0;
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, #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-category-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker {
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, #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-category-picker .emoji-category,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .emoji-category {
float: left; } 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, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
padding: 2px; } padding: 2px; }
......
css/inverse.css
View file @ e4ebcc8f
...@@ -1800,24 +1800,41 @@ body { ...@@ -1800,24 +1800,41 @@ body {
color: #578EA9; } color: #578EA9; }
#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-picker,
#conversejs .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; height: 150px;
overflow: scroll; } overflow: scroll;
padding: 0.5em; }
#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); /* offset-x | offset-y | blur-radius | spread-radius | color */
overflow-x: scroll; } 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 .picked, #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 .picked { #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; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone, #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 .emoji-skintone { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
float: right; } #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, #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;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; } 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, #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 { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
...@@ -1830,16 +1847,6 @@ body { ...@@ -1830,16 +1847,6 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; } 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, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
......
sass/_chatbox.scss
View file @ e4ebcc8f
...@@ -324,18 +324,34 @@ ...@@ -324,18 +324,34 @@
&.emoji-picker { &.emoji-picker {
height: $emoji-picker-height; height: $emoji-picker-height;
overflow: scroll; overflow: scroll;
padding: 0.5em;
} }
&.emoji-category-picker { &.emoji-category-picker {
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); /* offset-x | offset-y | blur-radius | spread-radius | color */
overflow-x: scroll; box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
}
&.emoji-category-picker,
&.emoji-skintone-picker {
overflow: hidden;
left: 0;
.picked { .picked {
background-color: $highlight-color; background-color: $highlight-color;
} }
.emoji-skintone { li {
float: right; height: $emoji_height + 2*5px;
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
} }
} }
li { li {
&.insert-emoji {
padding: 0.3em;
}
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
...@@ -358,18 +374,6 @@ ...@@ -358,18 +374,6 @@
} }
&.toggle-smiley { &.toggle-smiley {
padding-left: 5px; padding-left: 5px;
ul {
left: 0;
li {
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
}
} }
&.toggle-otr { &.toggle-otr {
ul { ul {
......
sass/converse/_chatbox.scss
View file @ e4ebcc8f
...@@ -18,11 +18,15 @@ ...@@ -18,11 +18,15 @@
li { li {
.toolbar-menu { .toolbar-menu {
ul { ul {
&.emoji-category-picker { &.emoji-category-picker,
&.emoji-skintone-picker {
width: 100%; width: 100%;
.emoji-category { .emoji-category {
float: left; float: left;
} }
li {
padding: 2px;
}
} }
} }
} }
......
sass/inverse/_variables.scss
View file @ e4ebcc8f
...@@ -103,7 +103,7 @@ $legend-font-size: 18px !default; ...@@ -103,7 +103,7 @@ $legend-font-size: 18px !default;
$toolbar-height: 29px !default; $toolbar-height: 29px !default;
$toolbar-color: $greenish-white !default; $toolbar-color: $greenish-white !default;
$emoji-picker-height: 250px !default; $emoji-picker-height: 150px !default;
$line-height-small: 20px !default; $line-height-small: 20px !default;
$line-height: 22px !default; $line-height: 22px !default;
......
src/converse-chatview.js
View file @ e4ebcc8f
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
className: 'emoji-picker-container toolbar-menu collapsed', className: 'emoji-picker-container toolbar-menu collapsed',
events: { events: {
'click .emoji-category-picker li.emoji-category': 'chooseCategory', '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 () { initialize () {
...@@ -152,7 +152,6 @@ ...@@ -152,7 +152,6 @@
} }
)); ));
this.el.innerHTML = emojis_html; this.el.innerHTML = emojis_html;
this.el.querySelectorAll('.emoji-picker').forEach((el) => { this.el.querySelectorAll('.emoji-picker').forEach((el) => {
el.addEventListener( el.addEventListener(
'scroll', this.setScrollPosition.bind(this) 'scroll', this.setScrollPosition.bind(this)
...@@ -778,6 +777,7 @@ ...@@ -778,6 +777,7 @@
if (!_.isUndefined(ev)) { if (!_.isUndefined(ev)) {
ev.stopPropagation(); ev.stopPropagation();
if (ev.target.classList.contains('emoji-category-picker') || if (ev.target.classList.contains('emoji-category-picker') ||
ev.target.classList.contains('emoji-skintone-picker') ||
ev.target.classList.contains('emoji-category')) { ev.target.classList.contains('emoji-category')) {
return; return;
} }
......
src/templates/emojis.html
View file @ e4ebcc8f
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
<a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a> <a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
</li> </li>
{[ }); ]} {[ }); ]}
</ul>
<ul class="emoji-skintone-picker">
{[ _.forEach(skintones, function (skintone) { ]} {[ _.forEach(skintones, function (skintone) { ]}
<li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}"> <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a> <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>
......
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