From a2b61796afb5692fb433de04b4ced72200b720eb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Oct 2020 10:30:52 +0100 Subject: [PATCH 1/2] Improve LHS resize performance Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LoggedInView.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 79f2916200..23c91d7ee0 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -218,6 +218,7 @@ class LoggedInView extends React.Component { vertical: "mx_ResizeHandle_vertical", reverse: "mx_ResizeHandle_reverse", }; + let size; const collapseConfig = { toggleSize: 260 - 50, onCollapsed: (collapsed) => { @@ -228,21 +229,19 @@ class LoggedInView extends React.Component { dis.dispatch({action: "show_left_panel"}, true); } }, - onResized: (size) => { - window.localStorage.setItem("mx_lhs_size", '' + size); + onResized: (_size) => { + size = _size; this.props.resizeNotifier.notifyLeftHandleResized(); }, onResizeStart: () => { this.props.resizeNotifier.startResizing(); }, onResizeStop: () => { + window.localStorage.setItem("mx_lhs_size", '' + size); this.props.resizeNotifier.stopResizing(); }, }; - const resizer = new Resizer( - this._resizeContainer.current, - CollapseDistributor, - collapseConfig); + const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig); resizer.setClassNames(classNames); return resizer; } From bb52bad0995380b9e52ce785a640e925f74de115 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Oct 2020 16:23:49 +0100 Subject: [PATCH 2/2] Remove stale props and CSS classes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_AppsDrawer.scss | 79 ------------------------ src/components/structures/RoomView.tsx | 1 - src/components/views/rooms/AppsDrawer.js | 3 - src/components/views/rooms/AuxPanel.js | 3 - 4 files changed, 86 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 451704bd88..6e3ffbe5f0 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -50,10 +50,6 @@ $MiniAppTileHeight: 200px; } } -.mx_AppsDrawer_hidden { - display: none; -} - .mx_AppsContainer { display: flex; flex-direction: row; @@ -78,15 +74,6 @@ $MiniAppTileHeight: 200px; font-size: $font-12px; } -.mx_SetAppURLDialog_input { - border-radius: 3px; - border: 1px solid $input-border-color; - padding: 9px; - color: $primary-hairline-color; - background-color: $primary-bg-color; - font-size: $font-15px; -} - .mx_AppTile { width: 50%; border: 5px solid $widget-menu-bar-bg-color; @@ -242,72 +229,6 @@ $MiniAppTileHeight: 200px; display: block; } -.mx_AppTileMenuBarWidgetPadding { - margin-right: 5px; -} - -.mx_AppIconTile { - background-color: $lightbox-bg-color; - border: 1px solid rgba(0, 0, 0, 0); - width: 200px; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - transition: 0.3s; - border-radius: 3px; - margin: 5px; - display: inline-block; -} - -.mx_AppIconTile.mx_AppIconTile_active { - color: $accent-color; - border-color: $accent-color; -} - -.mx_AppIconTile:hover { - border: 1px solid $accent-color; - box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5); -} - -.mx_AppIconTile_content { - padding: 2px 16px; - height: 60px; - overflow: hidden; -} - -.mx_AppIconTile_content h4 { - margin-top: 5px; - margin-bottom: 2px; -} - -.mx_AppIconTile_content p { - margin-top: 0; - margin-bottom: 5px; - font-size: smaller; -} - -.mx_AppIconTile_image { - padding: 10px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; -} - -.mx_AppIconTile_imageContainer { - text-align: center; - width: 100%; - background-color: white; - border-radius: 3px 3px 0 0; - height: 155px; - display: flex; - justify-content: center; - align-items: center; -} - -form.mx_Custom_Widget_Form div { - margin-top: 10px; - margin-bottom: 10px; -} - .mx_AppPermissionWarning { text-align: center; background-color: $widget-menu-bar-bg-color; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index fcb2d274c1..bfe823b2f9 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1853,7 +1853,6 @@ export default class RoomView extends React.Component { draggingFile={this.state.draggingFile} maxHeight={this.state.auxPanelMaxHeight} showApps={this.state.showApps} - hideAppsDrawer={false} onResize={this.onResize} resizeNotifier={this.props.resizeNotifier} > diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index a67338b9d5..a360016ba6 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -40,12 +40,10 @@ export default class AppsDrawer extends React.Component { room: PropTypes.object.isRequired, resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired, showApps: PropTypes.bool, // Should apps be rendered - hide: PropTypes.bool, // If rendered, should apps drawer be visible }; static defaultProps = { showApps: true, - hide: false, }; constructor(props) { @@ -173,7 +171,6 @@ export default class AppsDrawer extends React.Component { const classes = classNames({ "mx_AppsDrawer": true, - "mx_AppsDrawer_hidden": this.props.hide, "mx_AppsDrawer_fullWidth": apps.length < 2, "mx_AppsDrawer_minimised": !this.props.showApps, }); diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js index b7ed457a74..a088418d5e 100644 --- a/src/components/views/rooms/AuxPanel.js +++ b/src/components/views/rooms/AuxPanel.js @@ -37,7 +37,6 @@ export default class AuxPanel extends React.Component { room: PropTypes.object.isRequired, userId: PropTypes.string.isRequired, showApps: PropTypes.bool, // Render apps - hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered) // set to true to show the file drop target draggingFile: PropTypes.bool, @@ -54,7 +53,6 @@ export default class AuxPanel extends React.Component { static defaultProps = { showApps: true, - hideAppsDrawer: false, }; constructor(props) { @@ -170,7 +168,6 @@ export default class AuxPanel extends React.Component { userId={this.props.userId} maxHeight={this.props.maxHeight} showApps={this.props.showApps} - hide={this.props.hideAppsDrawer} resizeNotifier={this.props.resizeNotifier} />; }