Merge pull request #5313 from matrix-org/t3chguy/other/1

Improve LHS resize performance and tidy stale props&classes

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;

src/components/structures/LoggedInView.tsx

@@ -218,6 +218,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             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<IProps, IState> {
                     dis.dispatch({action: "show_left_panel"}, true);
                 }
             },
-            onResized: (size) => {
+            onResized: (_size) => {
-                window.localStorage.setItem("mx_lhs_size", '' + 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(
+        const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
-            this._resizeContainer.current,
-            CollapseDistributor,
-            collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
     }

src/components/structures/RoomView.tsx

@@ -1853,7 +1853,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 draggingFile={this.state.draggingFile}
                 maxHeight={this.state.auxPanelMaxHeight}
                 showApps={this.state.showApps}
-                hideAppsDrawer={false}
                 onResize={this.onResize}
                 resizeNotifier={this.props.resizeNotifier}
             >

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,
         });

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