From e4ebcc8f71a56322ad9cfa85f9bc0d3c6c103955 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 16 Jul 2017 14:52:19 +0200 Subject: [PATCH] emoji: various css and html changes to improve ui/ux in converse and inverse --- css/converse.css | 57 ++++++++++++++++++++++-------------- css/inverse.css | 45 ++++++++++++++++------------ sass/_chatbox.scss | 36 +++++++++++++---------- sass/converse/_chatbox.scss | 6 +++- sass/inverse/_variables.scss | 2 +- src/converse-chatview.js | 6 ++-- src/templates/emojis.html | 2 ++ 7 files changed, 92 insertions(+), 62 deletions(-) diff --git a/css/converse.css b/css/converse.css index 136404f89..4353969ac 100644 --- a/css/converse.css +++ b/css/converse.css @@ -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; } diff --git a/css/inverse.css b/css/inverse.css index 8cdd1bd53..8cdcc7bab 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -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; } diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 35950cd4f..41fc938b7 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -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 { diff --git a/sass/converse/_chatbox.scss b/sass/converse/_chatbox.scss index 00d92c1a9..b9bac6dbb 100644 --- a/sass/converse/_chatbox.scss +++ b/sass/converse/_chatbox.scss @@ -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; + } } } } diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index 7fdd332ce..f12867aa4 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -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; diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 55ed53a57..8869cff3b 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -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; } diff --git a/src/templates/emojis.html b/src/templates/emojis.html index 4dbe34676..66475926a 100644 --- a/src/templates/emojis.html +++ b/src/templates/emojis.html @@ -14,7 +14,9 @@ {{ transform(emojis_by_category[category][0]._shortname) }} {[ }); ]} + +