From a5c005756e1ab77ad2df52d43b7daf546f9c7c2a Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Tue, 24 Aug 2021 13:05:46 +0200 Subject: [PATCH] Fix resizer on left panel --- res/css/structures/_LeftPanel.scss | 16 +++++++++------- src/components/structures/LoggedInView.tsx | 13 ++++++++++--- src/components/views/elements/ResizeHandle.tsx | 5 +++-- src/resizer/distributors/collapse.ts | 13 +++++-------- src/resizer/item.ts | 11 ++++++++--- src/resizer/resizer.ts | 17 ++++++++++++----- 6 files changed, 47 insertions(+), 28 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 0bf44aac74..dad27f8122 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -$roomListCollapsedWidth: 68px; +:root { + --room-list-collapsed-width: 68px; +} .mx_MatrixChat--with-avatar { .mx_LeftPanel, @@ -32,10 +34,6 @@ $roomListCollapsedWidth: 68px; display: flex; overflow: hidden; position: relative; - - .mx_ResizeHandle.mx_ResizeHandle_horizontal { - margin: 0; - } } } @@ -44,12 +42,12 @@ $roomListCollapsedWidth: 68px; .mx_LeftPanel { background-color: $roomlist-bg-color; // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel - min-width: 206px; // Create a row-based flexbox for the GroupFilterPanel and the room list display: flex; contain: content; position: relative; + flex-grow: 1; // Note: The 'room list' in this context is actually everything that isn't the tag // panel, such as the menu options, breadcrumbs, filtering, etc @@ -182,6 +180,8 @@ $roomListCollapsedWidth: 68px; } .mx_LeftPanel_roomListWrapper { + // Make the y-scrollbar more responsive + padding-right: 2px; overflow: hidden; margin-top: 10px; // so we're not up against the search/filter flex: 1 0 0; // needed in Safari to properly set flex-basis @@ -203,11 +203,12 @@ $roomListCollapsedWidth: 68px; // These styles override the defaults for the minimized (66px) layout &.mx_LeftPanel_minimized { + flex-grow: 0; min-width: unset; width: unset !important; .mx_LeftPanel_roomListContainer { - width: $roomListCollapsedWidth; + width: var(--room-list-collapsed-width); .mx_LeftPanel_userHeader { flex-direction: row; @@ -233,4 +234,5 @@ $roomListCollapsedWidth: 68px; } } } + } diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 457000dbb8..2ba188e1ff 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -151,7 +151,8 @@ class LoggedInView extends React.Component { private dispatcherRef: string; protected readonly _matrixClient: MatrixClient; protected readonly _roomView: React.RefObject; - protected readonly _resizeContainer: React.RefObject; + protected readonly _resizeContainer: React.RefObject; + protected readonly resizeHandler: React.RefObject; protected compactLayoutWatcherRef: string; protected backgroundImageWatcherRef: string; protected resizer: Resizer; @@ -176,6 +177,7 @@ class LoggedInView extends React.Component { this._roomView = React.createRef(); this._resizeContainer = React.createRef(); + this.resizeHandler = React.createRef(); } componentDidMount() { @@ -280,6 +282,7 @@ class LoggedInView extends React.Component { isItemCollapsed: domNode => { return domNode.classList.contains("mx_LeftPanel_minimized"); }, + handler: this.resizeHandler.current, }; const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig); resizer.setClassNames({ @@ -681,16 +684,20 @@ class LoggedInView extends React.Component { backgroundImage={this.state.backgroundImage} />
-
+
{ pageElement }
diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx index 66fddf52f2..5ca4cadb54 100644 --- a/src/components/views/elements/ResizeHandle.tsx +++ b/src/components/views/elements/ResizeHandle.tsx @@ -6,9 +6,10 @@ interface IResizeHandleProps { vertical?: boolean; reverse?: boolean; id?: string; + passRef?: React.RefObject; } -const ResizeHandle: React.FC = ({ vertical, reverse, id }) => { +const ResizeHandle: React.FC = ({ vertical, reverse, id, passRef }) => { const classNames = ['mx_ResizeHandle']; if (vertical) { classNames.push('mx_ResizeHandle_vertical'); @@ -19,7 +20,7 @@ const ResizeHandle: React.FC = ({ vertical, reverse, id }) = classNames.push('mx_ResizeHandle_reverse'); } return ( -
+
); }; diff --git a/src/resizer/distributors/collapse.ts b/src/resizer/distributors/collapse.ts index d39580667c..8f127d7815 100644 --- a/src/resizer/distributors/collapse.ts +++ b/src/resizer/distributors/collapse.ts @@ -40,8 +40,8 @@ class CollapseItem extends ResizeItem { } export default class CollapseDistributor extends FixedDistributor { - static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer) { - return new CollapseItem(resizeHandle, resizer, sizer); + static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer, container?: HTMLElement): CollapseItem { + return new CollapseItem(resizeHandle, resizer, sizer, container); } private readonly toggleSize: number; @@ -55,12 +55,9 @@ export default class CollapseDistributor extends FixedDistributor { handle: HTMLElement, public readonly resizer: Resizer, public readonly sizer: Sizer, + public readonly container?: HTMLElement, ) { this.reverse = resizer.isReverseResizeHandle(handle); - this.domNode = (this.reverse ? handle.nextElementSibling : handle.previousElementSibling); + if (container) { + this.domNode = (container); + } else { + this.domNode = (this.reverse ? handle.nextElementSibling : handle.previousElementSibling); + } this.id = handle.getAttribute("data-id"); } - private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer) { + private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer, container?: HTMLElement) { const Ctor = this.constructor as typeof ResizeItem; - return new Ctor(handle, resizer, sizer); + return new Ctor(handle, resizer, sizer, container); } private advance(forwards: boolean) { diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts index 0496615188..57f3a1e289 100644 --- a/src/resizer/resizer.ts +++ b/src/resizer/resizer.ts @@ -35,6 +35,7 @@ export interface IConfig { onResizeStart?(): void; onResizeStop?(): void; onResized?(size: number, id: string, element: HTMLElement): void; + handler?: HTMLDivElement; } export default class Resizer { @@ -46,7 +47,7 @@ export default class Resizer { public container: HTMLElement, private readonly distributorCtor: { new(item: ResizeItem): FixedDistributor; - createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem; + createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer, container: HTMLElement): ResizeItem; createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer; }, public readonly config?: C, @@ -68,12 +69,14 @@ export default class Resizer { } public attach() { - this.container.addEventListener("mousedown", this.onMouseDown, false); + const attachment = this?.config?.handler.parentElement ?? this.container; + attachment.addEventListener("mousedown", this.onMouseDown, false); window.addEventListener("resize", this.onResize); } public detach() { - this.container.removeEventListener("mousedown", this.onMouseDown, false); + const attachment = this?.config?.handler.parentElement ?? this.container; + attachment.removeEventListener("mousedown", this.onMouseDown, false); window.removeEventListener("resize", this.onResize); } @@ -113,7 +116,8 @@ export default class Resizer { // use closest in case the resize handle contains // child dom nodes that can be the target const resizeHandle = event.target && (event.target).closest(`.${this.classNames.handle}`); - if (!resizeHandle || resizeHandle.parentElement !== this.container) { + const hasHandler = this?.config?.handler; + if (!resizeHandle || (!hasHandler && resizeHandle.parentElement !== this.container)) { return; } // prevent starting a drag operation @@ -175,12 +179,15 @@ export default class Resizer { const reverse = this.isReverseResizeHandle(resizeHandle); const Distributor = this.distributorCtor; const sizer = Distributor.createSizer(this.container, vertical, reverse); - const item = Distributor.createItem(resizeHandle, this, sizer); + const item = Distributor.createItem(resizeHandle, this, sizer, this.container); const distributor = new Distributor(item); return { sizer, distributor }; } private getResizeHandles() { + if (this?.config?.handler) { + return [this.config.handler]; + } if (!this.container.children) return []; return Array.from(this.container.querySelectorAll(`.${this.classNames.handle}`)) as HTMLElement[]; }