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; rafTimer = null;
hasUnreadMessages = false; hasUnreadMessages = false;
drawerStyle = null; drawerStyle = null;
drawerContainer = document.querySelector(".chat-drawer-outlet-container");
didInsertElement() { didInsertElement() {
super.didInsertElement(...arguments); super.didInsertElement(...arguments);
@ -32,6 +33,9 @@ export default class ChatDrawer extends Component {
return; return;
} }
this.drawerContainer?.addEventListener("click", this.handleDrawerClick);
document.addEventListener("click", this.handleOutsideClick);
this._checkSize(); this._checkSize();
this.appEvents.on("chat:open-url", this, "openURL"); this.appEvents.on("chat:open-url", this, "openURL");
this.appEvents.on("chat:toggle-close", this, "close"); this.appEvents.on("chat:toggle-close", this, "close");
@ -56,6 +60,11 @@ export default class ChatDrawer extends Component {
if (!this.chat.userCanChat) { if (!this.chat.userCanChat) {
return; return;
} }
document
.querySelector(".chat-drawer-outlet-container")
?.removeEventListener("click", this.handleDrawerClick);
document.removeEventListener("click", this.handleOutsideClick);
window.removeEventListener("resize", this._checkSize); window.removeEventListener("resize", this._checkSize);
@ -218,6 +227,22 @@ export default class ChatDrawer extends Component {
this.chat.activeChannel = null; 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 @action
didResize(element, { width, height }) { didResize(element, { width, height }) {
this.chatDrawerSize.size = { 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 { .chat-drawer-outlet-container {
// higher than timeline, lower than composer, dropdown, and user card // higher than timeline, lower than composer, dropdown, and user card
z-index: z("chat-drawer"); z-index: z("chat-drawer");
&:focus-within,
&.--active {
z-index: calc(z("composer", "dropdown") + 1);
}
position: fixed; position: fixed;
right: var(--composer-right, 20px); right: 0.75rem;
left: 0; left: 0;
max-height: calc(100% - var(--header-offset) - 15px); max-height: calc(100% - var(--header-offset) - 15px);
margin: 0; margin: 0;
@ -38,12 +43,12 @@ html.rtl {
pointer-events: none !important; pointer-events: none !important;
bottom: 0; bottom: 0;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: var(--composer-height, 0); padding-bottom: 0; // var(--composer-height, 0);
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: bottom, padding-bottom; transition-property: bottom, padding-bottom;
.rtl & { .rtl & {
left: var(--composer-right, 20px); left: 0.75rem;
right: 0; right: 0;
} }
} }