Skip to content

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

Various emoji improvements: 

* Add emoji tooltip
* Make categories configurable and add smileys category
* Rearrange emoji categories and style
& Show all emojis together
parent 4cb9fd88
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3014 additions and 2901 deletions
.eslintrc.json
View file @ d7ce231c
......@@ -37,6 +37,7 @@
"lodash/prefer-noop": "off",
"lodash/prefer-startswith": "off",
"lodash/preferred-alias": "off",
"lodash/matches-prop-shorthand": "off",
"accessor-pairs": "error",
"array-bracket-spacing": "off",
"array-callback-return": "error",
......
dist/emojis.json
View file @ d7ce231c
This diff is collapsed.
sass/_chatbox.scss
View file @ d7ce231c
......@@ -112,15 +112,6 @@
text-align: left;
margin: 0 var(--chat-gutter);
img {
&.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
width: var(--mobile-chat-width);
......@@ -364,64 +355,6 @@
a {
color: var(--link-color);
}
.emoji-picker-container {
background: white;
}
ul {
&.emoji-picker {
overflow-y: scroll;
overflow-x: hidden;
padding: 0.5em;
}
li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative;
&.insert-emoji {
padding: 0.2em;
&.picked {
background-color: var(--highlight-color);
}
&:hover {
background-color: var(--highlight-color);
}
a {
font-size: var(--font-size-huge);
&:hover {
color: #8f2831;
}
}
}
}
}
}
&.toggle-smiley {
a.toggle-smiley {
padding: 0;
}
.emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
.emoji-category-picker {
padding-top: 0.5em;
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.emoji-category-picker,
.emoji-skintone-picker {
li {
padding: 0.25em;
font-size: var(--font-size-huge);
&:hover {
background-color: var(--highlight-color);
}
}
}
}
}
&.toggle-otr {
ul {
......@@ -492,11 +425,6 @@
@include make-col(4);
}
}
.emoji-picker {
height: var(--embedded-emoji-picker-height);
}
.chatbox {
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
......@@ -526,33 +454,12 @@
.chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height);
}
.emoji-picker {
height: var(--overlayed-emoji-picker-height);
}
.chatbox {
.sendXMPPMessage {
.chat-toolbar {
li {
.toolbar-menu {
min-width: 235px;
ul {
&.emoji-toolbar {
width: 100%;
.emoji-category {
float: left;
}
}
}
}
&.toggle-smiley {
.emoji-toolbar {
.emoji-category-picker {
ul {
flex-wrap: wrap;
justify-content: flex-start;
}
}
}
}
}
}
......@@ -561,15 +468,14 @@
}
@include media-breakpoint-down(sm) {
#conversejs.converse-overlayed {
> .row {
flex-direction: column;
#conversejs.converse-overlayed {
> .row {
flex-direction: column;
&.no-gutters {
margin: -1em;
}
}
}
}
}
}
......@@ -684,9 +590,6 @@
.chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height);
}
.emoji-picker {
height: var(--fullpage-emoji-picker-height);
}
.chatbox {
.box-flyout {
background-color: var(--chat-head-color);
......@@ -714,19 +617,6 @@
ul {
width: 100%;
}
.toggle-smiley {
ul {
&.emoji-toolbar {
.emoji-category-picker {
margin-right: 5em;
}
.emoji-category {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
}
}
}
......
sass/_chatrooms.scss
View file @ d7ce231c
......@@ -324,7 +324,6 @@
}
.sendXMPPMessage {
.suggestion-box__results--above {
bottom: 4.5em;
}
......@@ -338,6 +337,7 @@
color: var(--message-input-color);
}
}
.chat-textarea {
&:active, &:focus{
outline-color: var(--chatroom-head-color);
......
sass/_emoji.scss 0 → 100644
View file @ d7ce231c
#conversejs {
.chatbox {
img.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
.toggle-smiley {
a.toggle-smiley {
padding: 0;
}
.emoji-picker.toolbar-menu {
padding-top: 0;
padding-bottom: 0;
background-color: var(--chat-head-color);
.emoji-picker__container {
overflow-y: hidden;
background: white;
.emoji-picker__lists {
overflow-y: auto;
.emoji-category__heading {
color: var(--subdued-color);
font-size: var(--font-size);
padding: 0.5em 0 0 0.5em;
}
display: flex;
flex-direction: column;
}
.emoji-skintone-picker {
padding: 0.25em 0;
background-color: var(--chat-head-color);
width: auto;
font-size: var(--font-size-huge);
&:hover {
background-color: var(--highlight-color);
}
}
}
.emoji-picker {
background-color: white;
padding: 0.5em;
li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative;
&.insert-emoji {
padding: 0.2em;
&.picked {
background-color: var(--highlight-color);
}
&:hover {
background-color: var(--highlight-color);
}
a {
font-size: var(--font-size-huge);
}
}
}
}
.emoji-category-picker {
padding-top: 0.5em;
background-color: var(--chat-head-color);
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
.emoji-category {
&.picked {
background-color: white;
border: 1px var(--chat-head-color) solid;
border-bottom: none;
}
padding: 0.25em;
font-size: var(--font-size-huge);
&:hover {
background-color: var(--highlight-color);
}
}
}
}
}
}
}
.chatroom {
.toggle-smiley {
.emoji-picker.toolbar-menu {
background-color: var(--chatroom-head-color);
.emoji-picker__container {
background: white;
.emoji-skintone-picker {
background-color: var(--chatroom-head-color);
}
.emoji-category-picker {
background-color: var(--chatroom-head-color);
.emoji-category {
&.picked {
border: 1px var(--chatroom-head-color) solid;
border-bottom: none;
}
}
}
}
}
}
}
}
#conversejs.converse-embedded,
#conversejs.converse-overlayed {
.emoji-picker__container {
height: var(--embedded-emoji-picker-height);
.emoji-picker__lists {
height: calc(var(--embedded-emoji-picker-height) - 4em;
}
}
}
#conversejs.converse-overlayed {
.emoji-picker__container {
height: var(--overlayed-emoji-picker-height);
}
.chatbox {
.toggle-smiley {
.emoji-picker.toolbar-menu {
.emoji-picker__container {
.emoji-picker {
.insert-emoji {
a {
font-size: var(--font-size);
}
}
}
.emoji-skintone-picker {
font-size: var(--font-size-small);
}
.emoji-category-picker {
.emoji-category {
font-size: var(--font-size);
}
}
}
}
}
}
}
#conversejs.converse-fullscreen {
.emoji-picker__container {
height: var(--fullpage-emoji-picker-height);
.emoji-picker__lists {
height: calc(var(--fullpage-emoji-picker-height) - 4em;
}
}
.chatbox {
.sendXMPPMessage {
.toggle-smiley {
.emoji-category {
padding-left: 0.2em;
padding-right: 0.2em;
}
}
}
}
}
sass/_variables.scss
View file @ d7ce231c
......@@ -43,8 +43,8 @@ $mobile_portrait_length: 480px !default;
--send-button-height: 27px;
--send-button-margin: 3px;
--controlbox-heading-top-margin: 0.75em;
--inline-action-margin: 0.75em;
--controlbox-heading-top-margin: 0.75em;
--inline-action-margin: 0.75em;
--roster-height: 194px;
......
sass/converse.scss
View file @ d7ce231c
......@@ -63,3 +63,4 @@
@import "minimized_chats";
@import "bookmarks";
@import "autocomplete";
@import "emoji";
spec/messages.js
View file @ d7ce231c
......@@ -927,7 +927,7 @@
it("will display larger if it's a single emoji",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {},
null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
......
src/converse-chatview.js
View file @ d7ce231c
......@@ -119,8 +119,9 @@ converse.plugins.add('converse-chatview', {
Object.assign(
this.model.toJSON(), {
'_': _,
'emoji_categories': _converse.emojis.categories,
'emojis_by_category': _converse.emojis.by_category,
'_converse': _converse,
'emoji_categories': _converse.emoji_categories,
'emojis_by_category': u.getEmojisByCategory(),
'shouldBeHidden': this.shouldBeHidden,
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
'toned_emojis': _converse.emojis.toned,
......@@ -162,10 +163,7 @@ converse.plugins.add('converse-chatview', {
},
chooseCategory (ev) {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target.nodeName === 'IMG' ?
ev.target.parentElement : ev.target;
const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
const category = target.getAttribute("data-category").trim();
this.model.save({
'current_category': category,
......
src/headless/converse-emoji.js
View file @ d7ce231c
This diff is collapsed.
src/templates/emojis.html
View file @ d7ce231c
<div class="emoji-picker-container">
{[ o.emoji_categories.forEach(function (category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
{[ o._.forEach(o.emojis_by_category[category], function (emoji) { ]}
<li class="emoji insert-emoji {[ if (o.shouldBeHidden(emoji._shortname, o.current_skintone, o.toned_emojis)) { ]} hidden {[ }; ]}"
data-emoji="{{{emoji._shortname}}}" title="{{{emoji._shortname}}}">
<a href="#" data-emoji="{{{emoji._shortname}}}"> {{ o.transform(emoji._shortname) }} </a>
</li>
{[ }); ]}
</ul>
{[ }); ]}
<ul class="emoji-toolbar">
<li class="emoji-category-picker">
<div class="emoji-picker__container">
<div class="emoji-category-picker">
<ul>
{[ o.emoji_categories.forEach(function (category) { ]}
{[ Object.keys(o.emoji_categories).forEach(function (category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (o.current_category === category) { ]} picked {[ } ]}">
<a class="pick-category" href="#" data-category="{{{category}}}"> {{ o.transform(o.emojis_by_category[category][0]._shortname) }} </a>
<a class="pick-category" href="#emoji-picker-{{{category}}}" data-category="{{{category}}}"> {{ o.transform(o.emoji_categories[category]) }} </a>
</li>
{[ }); ]}
</ul>
</li>
<li class="emoji-skintone-picker">
<ul>
{[ o._.forEach(o.skintones, function (skintone) { ]}
<li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}">
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ o.transform(':'+skintone+':') }} </a>
</div>
<div class="emoji-picker__lists">
{[ Object.keys(o.emoji_categories).forEach(function (category) { ]}
<a id="emoji-picker-{{{category}}}" class="emoji-category__heading">{{{o._converse.emoji_category_labels[category]}}}</a>
<ul class="emoji-picker emoji-picker-{{{category}}}">
{[ o._.forEach(o.emojis_by_category[category], function (emoji) { ]}
<li class="emoji insert-emoji {[ if (o.shouldBeHidden(emoji.sn, o.current_skintone, o.toned_emojis)) { ]} hidden {[ }; ]}"
data-emoji="{{{emoji.sn}}}" title="{{{emoji.sn}}}">
<a href="#" data-emoji="{{{emoji.sn}}}"> {{ o.transform(emoji.sn) }} </a>
</li>
{[ }); ]}
</ul>
</li>
</ul>
{[ }); ]}
</ul>
{[ }); ]}
</div>
<ul class="emoji-skintone-picker">
{[ o._.forEach(o.skintones, function (skintone) { ]}
<li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}">
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ o.transform(':'+skintone+':') }} </a>
</li>
{[ }); ]}
</ul>
</div>
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