mirror of
https://github.com/discourse/discourse.git
synced 2025-05-30 07:11:34 +08:00
6c3a7f2a67
When we had no width stored for the side panel in the local storage, essentially the computation would end up being: ```javascript Math.min(null, 1000); ``` Which would output: 0. This commit ensures we have a default for store width: MIN_PANEL_WIDTH. And also uses the same value in CSS and JS. I had to change z-layers of chat-side-panel resizer as it was interfering with system specs changing the notification level of a thread, when trying to click the option in the dropdown, it would instead click the resizer as it would appear on top of the dropdown. Tried to write a test but couldn't get something reliable.
87 lines
2.2 KiB
Plaintext
87 lines
2.2 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { hash } from "@ember/helper";
|
|
import { action } from "@ember/object";
|
|
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
|
import { service } from "@ember/service";
|
|
import KeyValueStore from "discourse/lib/key-value-store";
|
|
import resizableNode from "../modifiers/chat/resizable-node";
|
|
import ChatSidePanelResizer from "./chat-side-panel-resizer";
|
|
|
|
const MIN_PANEL_WIDTH = 250;
|
|
const STORE_NAMESPACE = "discourse_chat_side_panel_size_";
|
|
|
|
export default class ChatSidePanel extends Component {
|
|
@service chatStateManager;
|
|
@service site;
|
|
|
|
store = new KeyValueStore(STORE_NAMESPACE);
|
|
|
|
@action
|
|
setupSize(element) {
|
|
if (this.site.mobileView) {
|
|
return;
|
|
}
|
|
|
|
if (!this.chatStateManager.isFullPageActive) {
|
|
return;
|
|
}
|
|
|
|
const validWidth = Math.min(
|
|
this.store.getObject("width") ?? MIN_PANEL_WIDTH,
|
|
this.mainContainerWidth - MIN_PANEL_WIDTH
|
|
);
|
|
|
|
element.animate(
|
|
[{ width: element.style.width }, { width: validWidth + "px" }],
|
|
{ duration: 0, fill: "forwards" }
|
|
);
|
|
this.storeWidth(validWidth);
|
|
}
|
|
|
|
@action
|
|
didResize(element, size) {
|
|
const mainPanelWidth = this.mainContainerWidth - size.width;
|
|
|
|
if (size.width >= MIN_PANEL_WIDTH && mainPanelWidth >= MIN_PANEL_WIDTH) {
|
|
element.animate(
|
|
[{ width: element.style.width }, { width: size.width + "px" }],
|
|
{ duration: 0, fill: "forwards" }
|
|
);
|
|
this.storeWidth(size.width);
|
|
}
|
|
}
|
|
|
|
get mainContainerWidth() {
|
|
return document.getElementById("main-chat-outlet").clientWidth;
|
|
}
|
|
|
|
storeWidth(width) {
|
|
this.store.setObject({
|
|
key: "width",
|
|
value: width,
|
|
});
|
|
}
|
|
|
|
<template>
|
|
{{#if this.chatStateManager.isSidePanelExpanded}}
|
|
<div
|
|
class="chat-side-panel"
|
|
{{didInsert this.setupSize}}
|
|
{{resizableNode
|
|
".chat-side-panel-resizer"
|
|
this.didResize
|
|
(hash
|
|
position=false vertical=false mutate=false resetOnWindowResize=true
|
|
)
|
|
}}
|
|
>
|
|
{{yield}}
|
|
|
|
{{#if this.site.desktopView}}
|
|
<ChatSidePanelResizer />
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</template>
|
|
}
|