UX: center emoji picker when limited space (#15607)

Previously the picker would attempt to avoid positioning itself hover textarea and could in limited width screen end up being out of screen.

This behavior would be even more probable on full screen mode where the textarea takes a lot of space.
This commit is contained in:
Joffrey JAFFEUX 2022-01-17 12:11:04 +01:00 committed by GitHub
parent 214bce6fad
commit 655f28ca5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 11 deletions

View File

@ -92,20 +92,41 @@ export default Component.extend({
const textareaWrapper = document.querySelector(
".d-editor-textarea-wrapper"
);
if (!this.site.isMobileDevice && this.usePopper && textareaWrapper) {
const modifiers = [
{
name: "preventOverflow",
},
{
name: "offset",
options: {
offset: [5, 5],
},
},
];
if (window.innerWidth < textareaWrapper.clientWidth * 2) {
modifiers.push({
name: "computeStyles",
enabled: true,
fn({ state }) {
state.styles.popper = {
...state.styles.popper,
position: "fixed",
left: `${(window.innerWidth - state.rects.popper.width) / 2}px`,
top: "50%",
transform: "translateY(-50%)",
};
return state;
},
});
}
this._popper = createPopper(textareaWrapper, emojiPicker, {
placement: "auto",
modifiers: [
{
name: "preventOverflow",
},
{
name: "offset",
options: {
offset: [5, 5],
},
},
],
modifiers,
});
}