From a93d5cde090ba0c144a3a33d2833b25b3f5faf9b Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 14:38:39 +0200
Subject: [PATCH] Simplify rendering to css-only
---
res/css/structures/_LeftPanel.scss | 10 ++++++----
src/components/structures/LoggedInView.tsx | 5 +----
2 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 47a4c20957..5603de18d8 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-:root {
- --room-list-collapsed-width: 68px;
-}
+$roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar {
.mx_LeftPanel,
@@ -34,6 +32,10 @@ limitations under the License.
display: flex;
overflow: hidden;
position: relative;
+
+ &[data-collapsed] {
+ max-width: $roomListCollapsedWidth;
+ }
}
}
@@ -208,7 +210,7 @@ limitations under the License.
width: unset !important;
.mx_LeftPanel_roomListContainer {
- width: var(--room-list-collapsed-width);
+ width: $roomListCollapsedWidth;
.mx_LeftPanel_userHeader {
flex-direction: row;
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 2ba188e1ff..bbe0e42a0a 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -686,10 +686,7 @@ class LoggedInView extends React.Component<IProps, IState> {
<div
className="mx_LeftPanel_wrapper--user"
ref={this._resizeContainer}
- style={{
- maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
- .getPropertyValue('--room-list-collapsed-width') : undefined,
- }}
+ data-collapsed={this.props.collapseLhs ? true : undefined}
>
<LeftPanel
isMinimized={this.props.collapseLhs || false}