Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Fix topic admin menu hidden on narrow screens 

When there is not enough window width to display the admin menu on the
right, we display it on the left instead. Behavior is reversed on RTL
layout.

This commit also removes jQUery usage.
This commit is contained in:
Alan Guo Xiang Tan 2022-08-19 15:29:49 +08:00
parent a3565914a4
commit 3a5314c792
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js
View File

@ -76,33 +76,44 @@ createWidget("topic-admin-menu-button", {
showAdminMenu(e) {
this.state.expanded = true;
let $button;
let button;
if (e === undefined) {
$button = $(".keyboard-target-admin-menu");
button = document.getElementsByClassName(".keyboard-target-admin-menu");
} else {
$button = $(e.target.closest("button"));
button = e.target.closest("button");
}
const position = $button.position(),
SPACING = 3,
MENU_WIDTH = 217;
const position = { top: button.offsetTop, left: button.offsetLeft };
const spacing = 3;
const menuWidth = 212;
const rtl = $("html").hasClass("rtl");
position.outerHeight = $button.outerHeight();
if (rtl) {
position.left -= MENU_WIDTH - $button.outerWidth();
}
const rtl = document.querySelectorAll("html.rtl")[0];
const buttonDOMRect = button.getBoundingClientRect();
position.outerHeight = buttonDOMRect.height;
if (this.attrs.openUpwards) {
if (rtl) {
position.left -= $button[0].offsetWidth + SPACING;
position.left -= buttonDOMRect.width + spacing;
} else {
position.left += $button[0].offsetWidth + SPACING;
position.left += buttonDOMRect.width + spacing;
}
} else {
position.top += $button[0].offsetHeight + SPACING;
if (rtl) {
if (buttonDOMRect.left < menuWidth) {
position.left += 0;
} else {
position.left -= menuWidth - buttonDOMRect.width;
}
} else {
const offsetRight = window.innerWidth - buttonDOMRect.right;
if (offsetRight < menuWidth) {
position.left -= menuWidth - buttonDOMRect.width;
}
}
position.top += buttonDOMRect.height + spacing;
}
this.state.position = position;