From bbafd8c2d33db1779f9c61577f6b8a23fcabfe11 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:22:02 +0100 Subject: [PATCH 01/26] toggle right panel when clicking already active header button --- .../views/right_panel/HeaderButton.js | 1 + .../views/right_panel/HeaderButtons.js | 21 ++++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.js index a01d3444f1..bb9f613607 100644 --- a/src/components/views/right_panel/HeaderButton.js +++ b/src/components/views/right_panel/HeaderButton.js @@ -36,6 +36,7 @@ export default class HeaderButton extends React.Component { dis.dispatch({ action: 'view_right_panel_phase', phase: this.props.clickPhase, + fromHeader: true, }); } diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index 3c59c52089..16f7f006f8 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -49,9 +49,24 @@ export default class HeaderButtons extends React.Component { onAction(payload) { if (payload.action === "view_right_panel_phase") { - this.setState({ - phase: payload.phase, - }); + // only actions coming from header buttons should collapse the right panel + if (this.state.phase === payload.phase && payload.fromHeader) { + dis.dispatch({ + action: 'hide_right_panel', + }); + this.setState({ + phase: null, + }); + } else { + if (!this.state.phase) { + dis.dispatch({ + action: 'show_right_panel', + }); + } + this.setState({ + phase: payload.phase, + }); + } } } From 65f9bc97540f9f2b49e5f9af8fd77a82a89d3e62 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:23:46 +0100 Subject: [PATCH 02/26] remove expand button in room header --- src/components/views/rooms/RoomHeader.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 3b85730e11..e92d1499aa 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -394,14 +394,6 @@ module.exports = React.createClass({ ; } - let rightPanelButtons; - if (this.props.collapsedRhs) { - rightPanelButtons = - - - ; - } - let rightRow; let manageIntegsButton; if (this.props.room && this.props.room.roomId && this.props.inRoom) { @@ -419,7 +411,6 @@ module.exports = React.createClass({ { manageIntegsButton } { forgetButton } { searchButton } - { rightPanelButtons } ; } From f7b6e9c6fc90fe02c6a0b5c01b832cca487f236d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:30:39 +0100 Subject: [PATCH 03/26] name collapsedRhs consistently everywhere --- src/components/structures/LoggedInView.js | 4 ++-- src/components/structures/MatrixChat.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 635c5de44e..c36d3fe651 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -438,7 +438,7 @@ const LoggedInView = React.createClass({ eventPixelOffset={this.props.initialEventPixelOffset} key={this.props.currentRoomId || 'roomview'} disabled={this.props.middleDisabled} - collapsedRhs={this.props.collapseRhs} + collapsedRhs={this.props.collapsedRhs} ConferenceHandler={this.props.ConferenceHandler} />; break; @@ -488,7 +488,7 @@ const LoggedInView = React.createClass({ page_element = ; break; } diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 0a062afc43..ebc56dc438 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -161,7 +161,7 @@ export default React.createClass({ viewUserId: null, collapseLhs: false, - collapseRhs: false, + collapsedRhs: false, leftDisabled: false, middleDisabled: false, rightDisabled: false, @@ -555,7 +555,7 @@ export default React.createClass({ break; case 'view_user': // FIXME: ugly hack to expand the RightPanel and then re-dispatch. - if (this.state.collapseRhs) { + if (this.state.collapsedRhs) { setTimeout(()=>{ dis.dispatch({ action: 'show_right_panel', @@ -657,12 +657,12 @@ export default React.createClass({ break; case 'hide_right_panel': this.setState({ - collapseRhs: true, + collapsedRhs: true, }); break; case 'show_right_panel': this.setState({ - collapseRhs: false, + collapsedRhs: false, }); break; case 'panel_disable': { @@ -1217,7 +1217,7 @@ export default React.createClass({ view: VIEWS.LOGIN, ready: false, collapseLhs: false, - collapseRhs: false, + collapsedRhs: false, currentRoomId: null, page_type: PageTypes.RoomDirectory, }); From a734fb9d35a5750c47ce7c7352378d6dd83304f7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:55:26 +0100 Subject: [PATCH 04/26] dont set initial phase, show panel when collapsed --- src/components/structures/GroupView.js | 2 +- src/components/views/right_panel/HeaderButtons.js | 4 ++-- src/components/views/rooms/RoomHeader.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 3f20a6da98..d77837ad63 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1311,7 +1311,7 @@ export default React.createClass({
{ rightButtons }
- + diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index 16f7f006f8..e0448c0ae2 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -25,7 +25,7 @@ export default class HeaderButtons extends React.Component { super(props); this.state = { - phase: initialPhase, + phase: props.collapsedRhs ? null : initialPhase, isUserPrivilegedInGroup: null, }; this.onAction = this.onAction.bind(this); @@ -58,7 +58,7 @@ export default class HeaderButtons extends React.Component { phase: null, }); } else { - if (!this.state.phase) { + if (this.props.collapsedRhs) { dis.dispatch({ action: 'show_right_panel', }); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index e92d1499aa..8aea31f9ed 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -424,7 +424,7 @@ module.exports = React.createClass({ { saveButton } { cancelButton } { rightRow } - + ); From f744374d1d5a7c40458a4cca078f50ac0c3d3df1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:56:17 +0100 Subject: [PATCH 05/26] read collapsedRhs from props when mounting main split --- src/components/structures/MainSplit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js index 6fd0274f1a..5c69ef6745 100644 --- a/src/components/structures/MainSplit.js +++ b/src/components/structures/MainSplit.js @@ -55,7 +55,7 @@ export default class MainSplit extends React.Component { } componentDidMount() { - if (this.props.panel && !this.collapsedRhs) { + if (this.props.panel && !this.props.collapsedRhs) { this._createResizer(); } } From b7c353d0a6caa096e290f714e27566c6b7df3477 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Dec 2018 15:56:35 +0100 Subject: [PATCH 06/26] persist and load collapsed rhs globally --- src/components/structures/MatrixChat.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index ebc56dc438..187caa69df 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -161,7 +161,7 @@ export default React.createClass({ viewUserId: null, collapseLhs: false, - collapsedRhs: false, + collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true", leftDisabled: false, middleDisabled: false, rightDisabled: false, @@ -656,11 +656,13 @@ export default React.createClass({ }); break; case 'hide_right_panel': + window.localStorage.setItem("mx_rhs_collapsed", true); this.setState({ collapsedRhs: true, }); break; case 'show_right_panel': + window.localStorage.setItem("mx_rhs_collapsed", false); this.setState({ collapsedRhs: false, }); From f6727c5724bdadfcfa2d8449282f2c52264ffa85 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 10:34:26 +0100 Subject: [PATCH 07/26] add collapsedRhs to propTypes --- src/components/structures/LoggedInView.js | 2 +- src/components/views/right_panel/HeaderButtons.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index c36d3fe651..0433ce25b3 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -62,7 +62,7 @@ const LoggedInView = React.createClass({ // Called with the credentials of a registered user (if they were a ROU that // transitioned to PWLU) onRegistered: PropTypes.func, - + collapsedRhs: PropTypes.bool, teamToken: PropTypes.string, // Used by the RoomView to handle joining rooms diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index e0448c0ae2..4ba0148652 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -18,6 +18,7 @@ limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import dis from '../../../dispatcher'; export default class HeaderButtons extends React.Component { @@ -77,3 +78,7 @@ export default class HeaderButtons extends React.Component { ; } } + +HeaderButtons.propTypes = { + collapsedRhs: PropTypes.bool, +}; From b359a2edeef727ccc513ffdaf0058c6cae53d0ad Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 10:56:00 +0100 Subject: [PATCH 08/26] call header clicked callback after rerendering, so resizer has DOM nodes --- src/components/structures/RoomSubList.js | 5 +++-- src/components/views/rooms/RoomList.js | 16 ++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index b4fbc5406e..a4f97e0efd 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -110,8 +110,9 @@ const RoomSubList = React.createClass({ if (this.isCollapsableOnClick()) { // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic const isHidden = !this.state.hidden; - this.setState({hidden: isHidden}); - this.props.onHeaderClick(isHidden); + this.setState({hidden: isHidden}, () => { + this.props.onHeaderClick(isHidden); + }); } else { // The header is stuck, so the click is to be interpreted as a scroll to the header this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition); diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 9fb872cd32..ce935ddf32 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -485,9 +485,21 @@ module.exports = React.createClass({ (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter)))); }, - _persistCollapsedState: function(key, collapsed) { + _handleCollapsedState: function(key, collapsed) { + // persist collapsed state this.collapsedState[key] = collapsed; window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState)); + // load the persisted size configuration of the expanded sub list + if (!collapsed) { + const size = this.subListSizes[key]; + const handle = this.resizer.forHandleWithId(key); + if (handle) { + handle.resize(size); + } + } + // check overflow, as sub lists sizes have changed + // important this happens after calling resize above + Object.values(this._subListRefs).forEach(l => l.checkOverflow()); }, _subListRef: function(key, ref) { @@ -520,7 +532,7 @@ module.exports = React.createClass({ const {key, label, onHeaderClick, ... otherProps} = props; const chosenKey = key || label; const onSubListHeaderClick = (collapsed) => { - this._persistCollapsedState(chosenKey, collapsed); + this._handleCollapsedState(chosenKey, collapsed); if (onHeaderClick) { onHeaderClick(collapsed); } From cdcb3c1a55dfc1f2affdbe20a5cd8001a6873e03 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:26:33 +0100 Subject: [PATCH 09/26] check overflow and restore sizes in more places inside RoomList: check overflow on mount restore size on query change (in case a sublist appeared) check overflow when updating rooms avoid duplicating for restoring size and checking overflow --- src/components/views/rooms/RoomList.js | 41 +++++++++++++++++++------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index ce935ddf32..8a5c24f2e0 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -152,6 +152,8 @@ module.exports = React.createClass({ } this.subListSizes[id] = newSize; window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes)); + // update overflow indicators + this._checkSubListsOverflow(); }, componentDidMount: function() { @@ -167,12 +169,10 @@ module.exports = React.createClass({ }); // load stored sizes - Object.entries(this.subListSizes).forEach(([id, size]) => { - const handle = this.resizer.forHandleWithId(id); - if (handle) { - handle.resize(size); - } + Object.keys(this.subListSizes).forEach((key) => { + this._restoreSubListSize(key); }); + this._checkSubListsOverflow(); this.resizer.attach(); this.mounted = true; @@ -181,7 +181,11 @@ module.exports = React.createClass({ componentDidUpdate: function(prevProps) { this._repositionIncomingCallBox(undefined, false); if (this.props.searchFilter !== prevProps.searchFilter) { - Object.values(this._subListRefs).forEach(l => l.checkOverflow()); + // restore sizes + Object.keys(this.subListSizes).forEach((key) => { + this._restoreSubListSize(key); + }); + this._checkSubListsOverflow(); } }, @@ -354,6 +358,12 @@ module.exports = React.createClass({ // Do this here so as to not render every time the selected tags // themselves change. selectedTags: TagOrderStore.getSelectedTags(), + }, () => { + // we don't need to restore any size here, do we? + // i guess we could have triggered a new group to appear + // that already an explicit size the last time it appeared ... + // + this._checkSubListsOverflow(); }); // this._lastRefreshRoomListTs = Date.now(); @@ -491,14 +501,23 @@ module.exports = React.createClass({ window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState)); // load the persisted size configuration of the expanded sub list if (!collapsed) { - const size = this.subListSizes[key]; - const handle = this.resizer.forHandleWithId(key); - if (handle) { - handle.resize(size); - } + this._restoreSubListSize(key); } // check overflow, as sub lists sizes have changed // important this happens after calling resize above + this._checkSubListsOverflow(); + }, + + _restoreSubListSize(key) { + const size = this.subListSizes[key]; + const handle = this.resizer.forHandleWithId(key); + if (handle) { + handle.resize(size); + } + }, + + // check overflow for scroll indicator gradient + _checkSubListsOverflow() { Object.values(this._subListRefs).forEach(l => l.checkOverflow()); }, From 3ddc8baed138ab23c180b1ec31a8ee91cc0f2188 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:27:10 +0100 Subject: [PATCH 10/26] fix resizing sometimes not working (and selecting text) Last friday a child
was added inside the ResizeHandle component, which made the parentElement/classList checks fail on the event.target here. This would only fail (and select all the text) when dragging exactly on the grey line (the div), not the transparent margin around it. use closest to make sure we have the root element of the handle. --- src/resizer/resizer.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/resizer/resizer.js b/src/resizer/resizer.js index 7ef542a6e1..0e113b3664 100644 --- a/src/resizer/resizer.js +++ b/src/resizer/resizer.js @@ -84,8 +84,10 @@ export class Resizer { } _onMouseDown(event) { - const target = event.target; - if (!this._isResizeHandle(target) || target.parentElement !== this.container) { + // 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) { return; } // prevent starting a drag operation @@ -96,7 +98,7 @@ export class Resizer { this.container.classList.add(this.classNames.resizing); } - const {sizer, distributor} = this._createSizerAndDistributor(target); + const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle); const onMouseMove = (event) => { const offset = sizer.offsetFromEvent(event); From e67d9c6d4f04bc518f18af413bc72252c4b2b3f2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:29:42 +0100 Subject: [PATCH 11/26] forward checkOverflow to AutoHideScrollbar, fix over/underflow detection the overflow/underflow events are not always reliable in nooverlay browsers (FF), so forward the checkOverflow call we need anyway for the scroll indicator gradients to see if we need to do the margin trick for the on-hover scrollbar we use in nooverlay browsers. this fixes on hover jumping in a subroomlist --- .../structures/AutoHideScrollbar.js | 33 ++++++++++++----- .../structures/IndicatorScrollbar.js | 37 ++++++++++++------- 2 files changed, 48 insertions(+), 22 deletions(-) diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js index a328d478bc..1098f96a76 100644 --- a/src/components/structures/AutoHideScrollbar.js +++ b/src/components/structures/AutoHideScrollbar.js @@ -69,6 +69,7 @@ export default class AutoHideScrollbar extends React.Component { this.onOverflow = this.onOverflow.bind(this); this.onUnderflow = this.onUnderflow.bind(this); this._collectContainerRef = this._collectContainerRef.bind(this); + this._needsOverflowListener = null; } onOverflow() { @@ -81,21 +82,32 @@ export default class AutoHideScrollbar extends React.Component { this.containerRef.classList.add("mx_AutoHideScrollbar_underflow"); } + checkOverflow() { + if (!this._needsOverflowListener) { + return; + } + if (this.containerRef.scrollHeight > this.containerRef.clientHeight) { + this.onOverflow(); + } else { + this.onUnderflow(); + } + } + + componentDidUpdate() { + this.checkOverflow(); + } + + componentDidMount() { + this.checkOverflow(); + } + _collectContainerRef(ref) { if (ref && !this.containerRef) { this.containerRef = ref; - const needsOverflowListener = - document.body.classList.contains("mx_scrollbar_nooverlay"); - - if (needsOverflowListener) { + if (this._needsOverflowListener) { this.containerRef.addEventListener("overflow", this.onOverflow); this.containerRef.addEventListener("underflow", this.onUnderflow); } - if (ref.scrollHeight > ref.clientHeight) { - this.onOverflow(); - } else { - this.onUnderflow(); - } } if (this.props.wrappedRef) { this.props.wrappedRef(ref); @@ -111,6 +123,9 @@ export default class AutoHideScrollbar extends React.Component { render() { installBodyClassesIfNeeded(); + if (this._needsOverflowListener === null) { + this._needsOverflowListener = document.body.classList.contains("mx_scrollbar_nooverlay"); + } return (
0; - const hasBottomOverflow = this._scroller.scrollHeight > - (this._scroller.scrollTop + this._scroller.clientHeight); + const hasTopOverflow = this._scrollElement.scrollTop > 0; + const hasBottomOverflow = this._scrollElement.scrollHeight > + (this._scrollElement.scrollTop + this._scrollElement.clientHeight); if (hasTopOverflow) { - this._scroller.classList.add("mx_IndicatorScrollbar_topOverflow"); + this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow"); } else { - this._scroller.classList.remove("mx_IndicatorScrollbar_topOverflow"); + this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow"); } if (hasBottomOverflow) { - this._scroller.classList.add("mx_IndicatorScrollbar_bottomOverflow"); + this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow"); } else { - this._scroller.classList.remove("mx_IndicatorScrollbar_bottomOverflow"); + this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow"); + } + + if (this._autoHideScrollbar) { + this._autoHideScrollbar.checkOverflow(); } } componentWillUnmount() { - if (this._scroller) { - this._scroller.removeEventListener("scroll", this.checkOverflow); + if (this._scrollElement) { + this._scrollElement.removeEventListener("scroll", this.checkOverflow); } } render() { - return ( + return ( { this.props.children } ); } From 279521cab4ddfab78e57ced2ebffb02b12d2955c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:31:38 +0100 Subject: [PATCH 12/26] add id to props for completeness --- src/components/views/elements/ResizeHandle.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/ResizeHandle.js b/src/components/views/elements/ResizeHandle.js index 863dfaaa93..578689b45c 100644 --- a/src/components/views/elements/ResizeHandle.js +++ b/src/components/views/elements/ResizeHandle.js @@ -21,6 +21,7 @@ const ResizeHandle = (props) => { ResizeHandle.propTypes = { vertical: PropTypes.bool, reverse: PropTypes.bool, + id: PropTypes.string, }; export default ResizeHandle; From affe75fd3fab281326086af320dfe3b5fa731425 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:31:59 +0100 Subject: [PATCH 13/26] make scroll indicator gradient smaller (40px->30px) --- res/css/structures/_RoomSubList.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index ce28c168b9..3ab4a22396 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -154,7 +154,7 @@ limitations under the License. position: sticky; left: 0; right: 0; - height: 40px; + height: 30px; content: ""; display: block; z-index: 100; @@ -162,10 +162,10 @@ limitations under the License. } &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset { - margin-top: -40px; + margin-top: -30px; } &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset { - margin-bottom: -40px; + margin-bottom: -30px; } &.mx_IndicatorScrollbar_topOverflow::before { From 12a339fe10c7e1e76917328e95a2429e649b2a28 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:32:26 +0100 Subject: [PATCH 14/26] change subroomlist min height, as roomtiles are smaller now --- res/css/structures/_RoomSubList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 3ab4a22396..2ce79bf5e1 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -39,7 +39,7 @@ limitations under the License. } .mx_RoomSubList_nonEmpty { - min-height: 76px; + min-height: 70px; .mx_AutoHideScrollbar_offset { padding-bottom: 4px; From f0a412e7214f8f8e51a31a7470ea2fc5849059f1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 14:32:46 +0100 Subject: [PATCH 15/26] fix docs --- res/css/structures/_RoomSubList.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2ce79bf5e1..3a0dd0395b 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -19,14 +19,14 @@ limitations under the License. each with a flex-shrink difference of 4 order of magnitude, so they ideally wouldn't affect each other. lowest category: .mx_RoomSubList - flex:-shrink: 10000000 + flex-shrink: 10000000 distribute size of items within the same categery by their size middle category: .mx_RoomSubList.resized-sized - flex:-shrink: 1000 + flex-shrink: 1000 applied when using the resizer, will have a max-height set to it, to limit the size highest category: .mx_RoomSubList.resized-all - flex:-shrink: 1 + flex-shrink: 1 small flex-shrink value (1), is only added if you can drag the resizer so far so in practice you can only assign this category if there is enough space. */ From 2cda6d8f35cc58a0d59d945b167c9c9b4da14d24 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 15:06:56 +0100 Subject: [PATCH 16/26] fix empty comment line --- src/components/views/rooms/RoomList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 8a5c24f2e0..7a06cc3da5 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -362,7 +362,6 @@ module.exports = React.createClass({ // we don't need to restore any size here, do we? // i guess we could have triggered a new group to appear // that already an explicit size the last time it appeared ... - // this._checkSubListsOverflow(); }); From 31c13adaba2da09ccb65d5bf6cb6ab1fe2c76b5a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 15:10:57 +0100 Subject: [PATCH 17/26] cleanup: do initialization in componentDidMount instead of render --- src/components/structures/AutoHideScrollbar.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js index 1098f96a76..47ae24ba0f 100644 --- a/src/components/structures/AutoHideScrollbar.js +++ b/src/components/structures/AutoHideScrollbar.js @@ -98,16 +98,19 @@ export default class AutoHideScrollbar extends React.Component { } componentDidMount() { + installBodyClassesIfNeeded(); + this._needsOverflowListener = + document.body.classList.contains("mx_scrollbar_nooverlay"); + if (this._needsOverflowListener) { + this.containerRef.addEventListener("overflow", this.onOverflow); + this.containerRef.addEventListener("underflow", this.onUnderflow); + } this.checkOverflow(); } _collectContainerRef(ref) { if (ref && !this.containerRef) { this.containerRef = ref; - if (this._needsOverflowListener) { - this.containerRef.addEventListener("overflow", this.onOverflow); - this.containerRef.addEventListener("underflow", this.onUnderflow); - } } if (this.props.wrappedRef) { this.props.wrappedRef(ref); @@ -115,17 +118,13 @@ export default class AutoHideScrollbar extends React.Component { } componentWillUnmount() { - if (this.containerRef) { + if (this._needsOverflowListener && this.containerRef) { this.containerRef.removeEventListener("overflow", this.onOverflow); this.containerRef.removeEventListener("underflow", this.onUnderflow); } } render() { - installBodyClassesIfNeeded(); - if (this._needsOverflowListener === null) { - this._needsOverflowListener = document.body.classList.contains("mx_scrollbar_nooverlay"); - } return (
Date: Tue, 18 Dec 2018 15:33:28 +0100 Subject: [PATCH 18/26] remove dead code (collapse button was removed) --- src/components/views/rooms/RoomHeader.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 8aea31f9ed..996519445a 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -146,10 +146,6 @@ module.exports = React.createClass({ MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, ''); }, - onShowRhsClick: function(ev) { - dis.dispatch({ action: 'show_right_panel' }); - }, - onShareRoomClick: function(ev) { const ShareDialog = sdk.getComponent("dialogs.ShareDialog"); Modal.createTrackedDialog('share room dialog', '', ShareDialog, { From a10f0a32672c8d011ae8a4f36bfd3f15329b0eee Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 15:33:45 +0100 Subject: [PATCH 19/26] don't open right panel when switching room again a view_right_panel_phase is dispatched by RoomHeaderButtons on view_room, which was triggering this to show the panel again. Check the fromHeader flag just like when hiding the panel so only room header buttons can hide or show the right panel --- src/components/views/right_panel/HeaderButtons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index 4ba0148652..18ec2bd941 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -59,7 +59,7 @@ export default class HeaderButtons extends React.Component { phase: null, }); } else { - if (this.props.collapsedRhs) { + if (this.props.collapsedRhs && payload.fromHeader) { dis.dispatch({ action: 'show_right_panel', }); From dafc54c434fbc24a395a9b2e75ca29f51d529c69 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 15:36:54 +0100 Subject: [PATCH 20/26] don't highlight room header buttons when right panel is collapsed --- .../views/right_panel/GroupHeaderButtons.js | 12 ++++++------ src/components/views/right_panel/HeaderButtons.js | 11 +++++++++++ .../views/right_panel/RoomHeaderButtons.js | 10 +++++----- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index af54787b2c..6fcba1d815 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -55,23 +55,23 @@ export default class GroupHeaderButtons extends HeaderButtons { } renderButtons() { - const isPhaseGroup = [ + const groupPhases = [ RightPanel.Phase.GroupMemberInfo, RightPanel.Phase.GroupMemberList, - ].includes(this.state.phase); - const isPhaseRoom = [ + ]; + const roomPhases = [ RightPanel.Phase.GroupRoomList, RightPanel.Phase.GroupRoomInfo, - ].includes(this.state.phase); + ]; return [ , , diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index 18ec2bd941..3e3bbd3cd2 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -48,6 +48,17 @@ export default class HeaderButtons extends React.Component { }, extras)); } + isPhase(phases) { + if (this.props.collapsedRhs) { + return false; + } + if (Array.isArray(phases)) { + return phases.includes(this.state.phase); + } else { + return phases === this.state.phase; + } + } + onAction(payload) { if (payload.action === "view_right_panel_phase") { // only actions coming from header buttons should collapse the right panel diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index ba06bd9953..ff97fc5f4f 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -46,24 +46,24 @@ export default class RoomHeaderButtons extends HeaderButtons { } renderButtons() { - const isMembersPhase = [ + const membersPhases = [ RightPanel.Phase.RoomMemberList, RightPanel.Phase.RoomMemberInfo, - ].includes(this.state.phase); + ]; return [ , , , From 92c598dbcf4f287bc290e5a758b42c019391b055 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 15:38:15 +0100 Subject: [PATCH 21/26] remove group header expand right panel button --- src/components/structures/GroupView.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index d77837ad63..478126db75 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1272,15 +1272,6 @@ export default React.createClass({ , ); - if (this.props.collapsedRhs) { - rightButtons.push( - - - , - ); - } } const rightPanel = !this.props.collapsedRhs ? : undefined; From c0ab74d5f1cf32b96e7fc50f64c4c3df2d5968a3 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 16:27:17 +0100 Subject: [PATCH 22/26] reemit view_right_panel_phase when showing rhs, so right tab is active --- src/components/views/right_panel/HeaderButtons.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index 3e3bbd3cd2..f0479eb8be 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -74,6 +74,11 @@ export default class HeaderButtons extends React.Component { dis.dispatch({ action: 'show_right_panel', }); + // emit payload again as the RightPanel didn't exist up + // till show_right_panel, just without the fromHeader flag + // as that would hide the right panel again + dis.dispatch(Object.assign({}, payload, {fromHeader: false})); + } this.setState({ phase: payload.phase, From 4b788fcb7e823b92feda4b6da94d7e29e17e8f8a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 16:29:31 +0100 Subject: [PATCH 23/26] fix lint --- src/components/views/rooms/RoomHeader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 996519445a..c7695cc4f7 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -23,7 +23,6 @@ import sdk from '../../../index'; import { _t } from '../../../languageHandler'; import MatrixClientPeg from '../../../MatrixClientPeg'; import Modal from "../../../Modal"; -import dis from "../../../dispatcher"; import RateLimitedFunc from '../../../ratelimitedfunc'; import * as linkify from 'linkifyjs'; From dd6dd7a4fc6e19ff2d146477c899c4e524483347 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 16:35:07 +0100 Subject: [PATCH 24/26] select search query on focus --- src/components/structures/SearchBox.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 4df3e837c7..ea1fa312c1 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -56,7 +56,6 @@ module.exports = React.createClass({ case 'focus_room_filter': if (this.refs.search) { this.refs.search.focus(); - this.refs.search.select(); } break; } @@ -83,6 +82,10 @@ module.exports = React.createClass({ } }, + _onFocus: function(ev) { + ev.target.select(); + }, + _clearSearch: function(source) { this.refs.search.value = ""; this.onChange(); @@ -108,6 +111,7 @@ module.exports = React.createClass({ ref="search" className="mx_textinput_icon mx_textinput_search" value={ this.state.searchTerm } + onFocus={ this._onFocus } onChange={ this.onChange } onKeyDown={ this._onKeyDown } placeholder={ _t('Filter room names') } From c917b4038b14f25eb951c0c8284f065678243662 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 17:02:48 +0100 Subject: [PATCH 25/26] scope default input style rules to MatrixChat --- res/themes/dharma/css/_dharma.scss | 47 +++++++++++++++++------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index f1badb35ca..bce736e91e 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -192,32 +192,37 @@ $progressbar-color: #000; // it has the appearance of a text box so the controls // appear to be part of the input -:not(.mx_textinput) > input[type=text], -:not(.mx_textinput) > input[type=search], -.mx_textinput { - display: block; - margin: 9px; - box-sizing: border-box; - background-color: transparent; - color: $input-darker-fg-color; - border-radius: 4px; - border: 1px solid #c1c1c1; -} +.mx_MatrixChat { -.mx_textinput { - display: flex; - align-items: center; -} + :not(.mx_textinput) > input[type=text], + :not(.mx_textinput) > input[type=search], + .mx_textinput { + display: block; + margin: 9px; + box-sizing: border-box; + background-color: transparent; + color: $input-darker-fg-color; + border-radius: 4px; + border: 1px solid #c1c1c1; + flex: 0 0 auto; + } -.mx_textinput > input[type=text], -.mx_textinput > input[type=search] { - border: none; - flex: 1; - color: inherit; //from .mx_textinput + .mx_textinput { + display: flex; + align-items: center; + + > input[type=text], + > input[type=search] { + border: none; + flex: 1; + color: inherit; //from .mx_textinput + } + } } input[type=text], -input[type=search] { +input[type=search], +input[type=password] { padding: 9px; font-family: $font-family; font-size: 14px; From fd5ad568866e9ee30d3ecfb222d9bbd5791f631c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 18 Dec 2018 17:12:32 +0100 Subject: [PATCH 26/26] give right panel default width of 350px --- src/components/structures/MainSplit.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js index 5c69ef6745..0427130eea 100644 --- a/src/components/structures/MainSplit.js +++ b/src/components/structures/MainSplit.js @@ -41,10 +41,13 @@ export default class MainSplit extends React.Component { {onResized: this._onResized}, ); resizer.setClassNames(classNames); - const rhsSize = window.localStorage.getItem("mx_rhs_size"); + let rhsSize = window.localStorage.getItem("mx_rhs_size"); if (rhsSize !== null) { - resizer.forHandleAt(0).resize(parseInt(rhsSize, 10)); + rhsSize = parseInt(rhsSize, 10); + } else { + rhsSize = 350; } + resizer.forHandleAt(0).resize(rhsSize); resizer.attach(); this.resizer = resizer;