Fixed a bug in slideOut where offsetHeight changes after sliding out
As a result we can again show emoji categories and skin tones on the same line (if there is enough space).
This commit is contained in:
JC Brand
parent
496d2521fc
commit
d23046329e
@ -1758,28 +1758,27 @@
|
||||
height: 100px;
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
/* 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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
background-color: #DCF9F6; }
|
||||
#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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category-picker,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category-picker {
|
||||
margin-right: 5em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar 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 {
|
||||
@ -1853,17 +1852,14 @@
|
||||
#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, #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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
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-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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar 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 {
|
||||
|
||||
@ -1804,28 +1804,27 @@ body {
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
/* 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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
background-color: #DCF9F6; }
|
||||
#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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category-picker,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category-picker {
|
||||
margin-right: 5em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
height: 32px;
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
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 {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar 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 {
|
||||
@ -1940,7 +1939,7 @@ body {
|
||||
width: 100%; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .toggle-smiley {
|
||||
padding-left: 0.5em; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-category-picker .emoji-category {
|
||||
#conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
|
||||
|
||||
@ -327,20 +327,22 @@
|
||||
overflow: scroll;
|
||||
padding: 0.5em;
|
||||
}
|
||||
&.emoji-category-picker {
|
||||
&.emoji-toolbar {
|
||||
/* 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 {
|
||||
&.emoji-toolbar {
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
.picked {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
.emoji-category-picker {
|
||||
margin-right: 5em;
|
||||
}
|
||||
li {
|
||||
height: $emoji_height + 2*5px;
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
z-index: 98;
|
||||
&.emoji {
|
||||
a {
|
||||
|
||||
@ -18,8 +18,7 @@
|
||||
li {
|
||||
.toolbar-menu {
|
||||
ul {
|
||||
&.emoji-category-picker,
|
||||
&.emoji-skintone-picker {
|
||||
&.emoji-toolbar {
|
||||
width: 100%;
|
||||
.emoji-category {
|
||||
float: left;
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
.toggle-smiley {
|
||||
padding-left: 0.5em;
|
||||
ul {
|
||||
&.emoji-category-picker {
|
||||
&.emoji-toolbar {
|
||||
.emoji-category {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
@ -8,18 +8,23 @@
|
||||
{[ }); ]}
|
||||
</ul>
|
||||
{[ }); ]}
|
||||
<ul class="emoji-category-picker">
|
||||
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
||||
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
|
||||
<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>
|
||||
</li>
|
||||
{[ }); ]}
|
||||
<ul class="emoji-toolbar">
|
||||
<li class="emoji-category-picker">
|
||||
<ul>
|
||||
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
||||
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
|
||||
<a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
|
||||
</li>
|
||||
{[ }); ]}
|
||||
</ul>
|
||||
</li>
|
||||
<li class="emoji-skintone-picker">
|
||||
<ul>
|
||||
{[ _.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>
|
||||
</li>
|
||||
{[ }); ]}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
18
src/utils.js
18
src/utils.js
@ -206,6 +206,14 @@
|
||||
|
||||
utils.slideOut = function (el, duration=600) {
|
||||
/* Shows/expands an element by sliding it out of itself. */
|
||||
|
||||
function calculateEndHeight (el) {
|
||||
return _.reduce(
|
||||
el.children,
|
||||
(result, child) => result + child.offsetHeight, 0
|
||||
);
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (_.isNil(el)) {
|
||||
const err = "Undefined or null element passed into slideOut"
|
||||
@ -218,10 +226,7 @@
|
||||
el.removeAttribute('data-slider-marker');
|
||||
window.clearInterval(interval_marker);
|
||||
}
|
||||
const end_height = _.reduce(
|
||||
el.children,
|
||||
(result, child) => result + child.offsetHeight, 0
|
||||
);
|
||||
const end_height = calculateEndHeight(el);
|
||||
if ($.fx.off) { // Effects are disabled (for tests)
|
||||
el.style.height = end_height + 'px';
|
||||
resolve();
|
||||
@ -236,7 +241,10 @@
|
||||
if (h < end_height) {
|
||||
el.style.height = h + 'px';
|
||||
} else {
|
||||
el.style.height = end_height + 'px';
|
||||
// We recalculate the height to work around an apparent
|
||||
// browser bug where browsers don't know the correct
|
||||
// offsetHeight beforehand.
|
||||
el.style.height = calculateEndHeight(el) + 'px';
|
||||
window.clearInterval(interval_marker);
|
||||
el.removeAttribute('data-slider-marker');
|
||||
resolve();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user