PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix resizer on left panel

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-24 13:05:46 +02:00
parent 290ab894aa
commit a5c005756e
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
6 changed files with 47 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/structures/_LeftPanel.scss
View file

@ -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;
}
}
}
}

13
src/components/structures/LoggedInView.tsx
View file

@ -151,7 +151,8 @@ class LoggedInView extends React.Component<IProps, IState> {
private dispatcherRef: string;
protected readonly _matrixClient: MatrixClient;
protected readonly _roomView: React.RefObject<any>;
protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
protected compactLayoutWatcherRef: string;
protected backgroundImageWatcherRef: string;
protected resizer: Resizer;
@ -176,6 +177,7 @@ class LoggedInView extends React.Component<IProps, IState> {
this._roomView = React.createRef();
this._resizeContainer = React.createRef();
this.resizeHandler = React.createRef();
}
componentDidMount() {
@ -280,6 +282,7 @@ class LoggedInView extends React.Component<IProps, IState> {
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<IProps, IState> {
backgroundImage={this.state.backgroundImage}
/>
<div
ref={this._resizeContainer}
className="mx_LeftPanel_wrapper--user"
ref={this._resizeContainer}
style={{
maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
.getPropertyValue('--room-list-collapsed-width') : undefined,
}}
>
<LeftPanel
isMinimized={this.props.collapseLhs || false}
resizeNotifier={this.props.resizeNotifier}
/>
<ResizeHandle id="lp-resizer" />
</div>
</div>
<ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
<div className="mx_RoomView_wrapper">
{ pageElement }
</div>

5
src/components/views/elements/ResizeHandle.tsx
View file

@ -6,9 +6,10 @@ interface IResizeHandleProps {
vertical?: boolean;
reverse?: boolean;
id?: string;
passRef?: React.RefObject<HTMLDivElement>;
}
const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id }) => {
const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
const classNames = ['mx_ResizeHandle'];
if (vertical) {
classNames.push('mx_ResizeHandle_vertical');
@ -19,7 +20,7 @@ const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id }) =
classNames.push('mx_ResizeHandle_reverse');
}
return (
<div className={classNames.join(' ')} data-id={id}><div /></div>
<div ref={passRef} className={classNames.join(' ')} data-id={id}><div /></div>
);
};

13
src/resizer/distributors/collapse.ts
View file

@ -40,8 +40,8 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
}
export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer) {
return new CollapseItem(resizeHandle, resizer, sizer);
static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, 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<ICollapseConfi
public resize(newSize: number) {
const isCollapsedSize = newSize < this.toggleSize;
if (isCollapsedSize && !this.isCollapsed) {
this.isCollapsed = true;
this.item.notifyCollapsed(true);
} else if (!isCollapsedSize && this.isCollapsed) {
this.item.notifyCollapsed(false);
this.isCollapsed = false;
if (isCollapsedSize !== this.isCollapsed) {
this.isCollapsed = isCollapsedSize;
this.item.notifyCollapsed(isCollapsedSize);
}
if (!isCollapsedSize) {
super.resize(newSize);

11
src/resizer/item.ts
View file

@ -26,15 +26,20 @@ export default class ResizeItem<C extends IConfig = IConfig> {
handle: HTMLElement,
public readonly resizer: Resizer<C>,
public readonly sizer: Sizer,
public readonly container?: HTMLElement,
) {
this.reverse = resizer.isReverseResizeHandle(handle);
this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
if (container) {
this.domNode = <HTMLElement>(container);
} else {
this.domNode = <HTMLElement>(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) {

17
src/resizer/resizer.ts
View file

@ -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<C extends IConfig = IConfig> {
@ -46,7 +47,7 @@ export default class Resizer<C extends IConfig = IConfig> {
public container: HTMLElement,
private readonly distributorCtor: {
new(item: ResizeItem): FixedDistributor<C, any>;
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<C extends IConfig = IConfig> {
}
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<C extends IConfig = IConfig> {
// use closest in case the resize handle contains
// child dom nodes that can be the target
const resizeHandle = event.target && (<HTMLDivElement>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<C extends IConfig = IConfig> {
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[];
}