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 @@ ...@@ -37,6 +37,7 @@
"lodash/prefer-noop": "off", "lodash/prefer-noop": "off",
"lodash/prefer-startswith": "off", "lodash/prefer-startswith": "off",
"lodash/preferred-alias": "off", "lodash/preferred-alias": "off",
"lodash/matches-prop-shorthand": "off",
"accessor-pairs": "error", "accessor-pairs": "error",
"array-bracket-spacing": "off", "array-bracket-spacing": "off",
"array-callback-return": "error", "array-callback-return": "error",
......
dist/emojis.json
View file @ d7ce231c
This diff is collapsed.
sass/_chatbox.scss
View file @ d7ce231c
...@@ -112,15 +112,6 @@ ...@@ -112,15 +112,6 @@
text-align: left; text-align: left;
margin: 0 var(--chat-gutter); 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) { @media screen and (max-height: $mobile-landscape-height) {
margin: 0; margin: 0;
width: var(--mobile-chat-width); width: var(--mobile-chat-width);
...@@ -364,64 +355,6 @@ ...@@ -364,64 +355,6 @@
a { a {
color: var(--link-color); 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 { &.toggle-otr {
ul { ul {
...@@ -492,11 +425,6 @@ ...@@ -492,11 +425,6 @@
@include make-col(4); @include make-col(4);
} }
} }
.emoji-picker {
height: var(--embedded-emoji-picker-height);
}
.chatbox { .chatbox {
min-width: var(--overlayed-chat-width) !important; min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width); width: var(--overlayed-chat-width);
...@@ -526,33 +454,12 @@ ...@@ -526,33 +454,12 @@
.chat-textarea { .chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height); max-height: var(--overlayed-max-chat-textarea-height);
} }
.emoji-picker {
height: var(--overlayed-emoji-picker-height);
}
.chatbox { .chatbox {
.sendXMPPMessage { .sendXMPPMessage {
.chat-toolbar { .chat-toolbar {
li { li {
.toolbar-menu { .toolbar-menu {
min-width: 235px; 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 @@ ...@@ -561,15 +468,14 @@
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs.converse-overlayed { #conversejs.converse-overlayed {
> .row { > .row {
flex-direction: column; flex-direction: column;
&.no-gutters { &.no-gutters {
margin: -1em; margin: -1em;
} }
} }
} }
} }
...@@ -684,9 +590,6 @@ ...@@ -684,9 +590,6 @@
.chat-textarea { .chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height); max-height: var(--fullpage-max-chat-textarea-height);
} }
.emoji-picker {
height: var(--fullpage-emoji-picker-height);
}
.chatbox { .chatbox {
.box-flyout { .box-flyout {
background-color: var(--chat-head-color); background-color: var(--chat-head-color);
...@@ -714,19 +617,6 @@ ...@@ -714,19 +617,6 @@
ul { ul {
width: 100%; 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 @@ ...@@ -324,7 +324,6 @@
} }
.sendXMPPMessage { .sendXMPPMessage {
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 4.5em; bottom: 4.5em;
} }
...@@ -338,6 +337,7 @@ ...@@ -338,6 +337,7 @@
color: var(--message-input-color); color: var(--message-input-color);
} }
} }
.chat-textarea { .chat-textarea {
&:active, &:focus{ &:active, &:focus{
outline-color: var(--chatroom-head-color); 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; ...@@ -43,8 +43,8 @@ $mobile_portrait_length: 480px !default;
--send-button-height: 27px; --send-button-height: 27px;
--send-button-margin: 3px; --send-button-margin: 3px;
--controlbox-heading-top-margin: 0.75em; --controlbox-heading-top-margin: 0.75em;
--inline-action-margin: 0.75em; --inline-action-margin: 0.75em;
--roster-height: 194px; --roster-height: 194px;
......
sass/converse.scss
View file @ d7ce231c
...@@ -63,3 +63,4 @@ ...@@ -63,3 +63,4 @@
@import "minimized_chats"; @import "minimized_chats";
@import "bookmarks"; @import "bookmarks";
@import "autocomplete"; @import "autocomplete";
@import "emoji";
spec/messages.js
View file @ d7ce231c
...@@ -927,7 +927,7 @@ ...@@ -927,7 +927,7 @@
it("will display larger if it's a single emoji", it("will display larger if it's a single emoji",
mock.initConverse( mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {}, null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
async function (done, _converse) { async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current'); await test_utils.waitForRoster(_converse, 'current');
......
src/converse-chatview.js
View file @ d7ce231c
...@@ -119,8 +119,9 @@ converse.plugins.add('converse-chatview', { ...@@ -119,8 +119,9 @@ converse.plugins.add('converse-chatview', {
Object.assign( Object.assign(
this.model.toJSON(), { this.model.toJSON(), {
'_': _, '_': _,
'emoji_categories': _converse.emojis.categories, '_converse': _converse,
'emojis_by_category': _converse.emojis.by_category, 'emoji_categories': _converse.emoji_categories,
'emojis_by_category': u.getEmojisByCategory(),
'shouldBeHidden': this.shouldBeHidden, 'shouldBeHidden': this.shouldBeHidden,
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'], 'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
'toned_emojis': _converse.emojis.toned, 'toned_emojis': _converse.emojis.toned,
...@@ -162,10 +163,7 @@ converse.plugins.add('converse-chatview', { ...@@ -162,10 +163,7 @@ converse.plugins.add('converse-chatview', {
}, },
chooseCategory (ev) { chooseCategory (ev) {
ev.preventDefault(); const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
ev.stopPropagation();
const target = ev.target.nodeName === 'IMG' ?
ev.target.parentElement : ev.target;
const category = target.getAttribute("data-category").trim(); const category = target.getAttribute("data-category").trim();
this.model.save({ this.model.save({
'current_category': category, '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"> <div class="emoji-picker__container">
{[ o.emoji_categories.forEach(function (category) { ]} <div class="emoji-category-picker">
<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">
<ul> <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 {[ } ]}"> <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> </li>
{[ }); ]} {[ }); ]}
</ul> </ul>
</li> </div>
<li class="emoji-skintone-picker"> <div class="emoji-picker__lists">
<ul> {[ Object.keys(o.emoji_categories).forEach(function (category) { ]}
{[ o._.forEach(o.skintones, function (skintone) { ]} <a id="emoji-picker-{{{category}}}" class="emoji-category__heading">{{{o._converse.emoji_category_labels[category]}}}</a>
<li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}"> <ul class="emoji-picker emoji-picker-{{{category}}}">
<a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ o.transform(':'+skintone+':') }} </a> {[ 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> </li>
{[ }); ]} {[ }); ]}
</ul> </ul>
</li> {[ }); ]}
</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> </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