This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.
osr-discourse-src/plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js
Joffrey JAFFEUX 9ade68233c
UX: alters chat icon behavior on drawer and mobile (#19192)
Refines the behavior of clicking the chat icon in mobile and when in drawer mode as follows: If chat is open, clicking the icon takes you to the index.
2022-11-25 15:12:32 +01:00

88 lines
2.0 KiB
JavaScript

import getURL from "discourse-common/lib/get-url";
import { createWidget } from "discourse/widgets/widget";
import { h } from "virtual-dom";
import { iconNode } from "discourse-common/lib/icon-library";
export default createWidget("header-chat-link", {
buildKey: () => "header-chat-link",
chat: null,
tagName: "li.header-dropdown-toggle.open-chat",
title: "chat.title",
services: ["chat", "router", "chatStateManager"],
html() {
if (!this.chat.userCanChat) {
return;
}
if (this.currentUser.isInDoNotDisturb()) {
return this.chatLinkHtml();
}
let indicator;
if (this.chat.unreadUrgentCount) {
indicator = h(
"div.chat-channel-unread-indicator.urgent",
{},
h(
"div.number-wrap",
{},
h("div.number", {}, this.chat.unreadUrgentCount)
)
);
} else if (this.chat.hasUnreadMessages) {
indicator = h("div.chat-channel-unread-indicator");
}
return this.chatLinkHtml(indicator);
},
chatLinkHtml(indicatorNode) {
return h(
`a.icon${
this.chatStateManager.isFullPageActive ||
this.chatStateManager.isDrawerActive
? ".active"
: ""
}`,
{ attributes: { tabindex: 0 } },
[iconNode("comment"), indicatorNode].filter(Boolean)
);
},
mouseUp(e) {
if (e.which === 2) {
// Middle mouse click
window.open(getURL("/chat"), "_blank").focus();
}
},
keyUp(e) {
if (e.code === "Enter") {
return this.click();
}
},
click() {
if (this.chatStateManager.isFullPageActive && this.site.desktopView) {
return;
}
if (this.chatStateManager.isFullPageActive && this.site.mobileView) {
return this.router.transitionTo("chat");
}
if (this.chatStateManager.isDrawerActive) {
return this.router.transitionTo("chat");
} else {
return this.router.transitionTo(
this.chatStateManager.lastKnownChatURL || "chat"
);
}
},
chatRerenderHeader() {
this.scheduleRerender();
},
});