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

UX: change how drawer/composer interaction overlaps

This commit is contained in:
chapoi 2024-10-30 17:30:42 +09:00
parent 8fb2e2a3ec
commit e253d63d53
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
View File

@ -24,6 +24,7 @@ export default class ChatDrawer extends Component {
rafTimer = null;
hasUnreadMessages = false;
drawerStyle = null;
drawerContainer = document.querySelector(".chat-drawer-outlet-container");
didInsertElement() {
super.didInsertElement(...arguments);
@ -32,6 +33,9 @@ export default class ChatDrawer extends Component {
return;
}
this.drawerContainer?.addEventListener("click", this.handleDrawerClick);
document.addEventListener("click", this.handleOutsideClick);
this._checkSize();
this.appEvents.on("chat:open-url", this, "openURL");
this.appEvents.on("chat:toggle-close", this, "close");
@ -56,6 +60,11 @@ export default class ChatDrawer extends Component {
if (!this.chat.userCanChat) {
return;
}
document
.querySelector(".chat-drawer-outlet-container")
?.removeEventListener("click", this.handleDrawerClick);
document.removeEventListener("click", this.handleOutsideClick);
window.removeEventListener("resize", this._checkSize);
@ -218,6 +227,22 @@ export default class ChatDrawer extends Component {
this.chat.activeChannel = null;
}
@action
handleDrawerClick() {
if (this.drawerContainer) {
// this.drawerContainer.style.setProperty("z-index", "1000"); //TODO needs to be calc(var("composer", "dropdown") + 1)
this.drawerContainer.classList.add("--active");
}
}
@action
handleOutsideClick(event) {
if (this.drawerContainer && !this.drawerContainer.contains(event.target)) {
// this.drawerContainer.style.setProperty("z-index", "400");
this.drawerContainer.classList.remove("--active");
}
}
@action
didResize(element, { width, height }) {
this.chatDrawerSize.size = { width, height };

11
plugins/chat/assets/stylesheets/common/chat-drawer.scss
View File

@ -27,8 +27,13 @@ html.rtl {
.chat-drawer-outlet-container {
// higher than timeline, lower than composer, dropdown, and user card
z-index: z("chat-drawer");
&:focus-within,
&.--active {
z-index: calc(z("composer", "dropdown") + 1);
}
position: fixed;
right: var(--composer-right, 20px);
right: 0.75rem;
left: 0;
max-height: calc(100% - var(--header-offset) - 15px);
margin: 0;
@ -38,12 +43,12 @@ html.rtl {
pointer-events: none !important;
bottom: 0;
box-sizing: border-box;
padding-bottom: var(--composer-height, 0);
padding-bottom: 0; // var(--composer-height, 0);
transition: all 100ms ease-in;
transition-property: bottom, padding-bottom;
.rtl & {
left: var(--composer-right, 20px);
left: 0.75rem;
right: 0;
}
}