From 3ca957b541bf451227b25482b0b29b9d42280407 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 4 May 2023 15:19:55 +0000
Subject: [PATCH] Update `_ResizeHandle.pcss` (#10772)
* Nesting: `mx_ResizeHandle`
* Nesting: `> div`
* Run prettier
* Use a custom property
* Remove a redundant declaration: `cursor: row-resize`
The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.
* Conform the class names to the naming policy
* Revert "Use a custom property"
This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
---
res/css/structures/_MainSplit.pcss | 2 +-
res/css/structures/_MatrixChat.pcss | 4 +--
res/css/views/elements/_ResizeHandle.pcss | 33 +++++++++----------
res/css/views/rooms/_AppsDrawer.pcss | 4 +--
src/components/structures/LoggedInView.tsx | 2 +-
src/components/structures/MainSplit.tsx | 2 +-
.../views/elements/ResizeHandle.tsx | 4 +--
src/components/views/rooms/AppsDrawer.tsx | 2 +-
8 files changed, 26 insertions(+), 27 deletions(-)
diff --git a/res/css/structures/_MainSplit.pcss b/res/css/structures/_MainSplit.pcss
index 35e4ea25c7..55e0dec103 100644
--- a/res/css/structures/_MainSplit.pcss
+++ b/res/css/structures/_MainSplit.pcss
@@ -29,7 +29,7 @@ limitations under the License.
padding-left: calc(var(--container-gap-width) / 2);
height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
- &:hover .mx_ResizeHandle_horizontal::before {
+ &:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
top: 50%;
left: 50%;
diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss
index 760527a7ff..c09d32f491 100644
--- a/res/css/structures/_MatrixChat.pcss
+++ b/res/css/structures/_MatrixChat.pcss
@@ -80,7 +80,7 @@ limitations under the License.
/* negative margin greater than its positive padding. If it's the same */
/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
/* https://github.com/vector-im/element-web/issues/19863 happens. */
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
/* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
/* (IF there is NO margin on the leftPanel_wrapper) */
@@ -94,7 +94,7 @@ limitations under the License.
/* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
}
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
position: relative;
&::before {
diff --git a/res/css/views/elements/_ResizeHandle.pcss b/res/css/views/elements/_ResizeHandle.pcss
index 2af2880654..be913eec72 100644
--- a/res/css/views/elements/_ResizeHandle.pcss
+++ b/res/css/views/elements/_ResizeHandle.pcss
@@ -18,25 +18,24 @@ limitations under the License.
cursor: row-resize;
flex: 0 0 auto;
z-index: 100;
-}
-.mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -5px;
- padding: 0 5px;
- cursor: col-resize;
-}
+ &.mx_ResizeHandle--horizontal {
+ margin: 0 -5px;
+ padding: 0 5px;
+ cursor: col-resize;
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
- margin: -5px 0;
- padding: 5px 0;
- cursor: row-resize;
-}
+ > div {
+ width: 1px;
+ height: 100%;
+ }
+ }
-.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
- width: 1px;
- height: 100%;
-}
+ &.mx_ResizeHandle--vertical {
+ margin: -5px 0;
+ padding: 5px 0;
-.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
- height: 1px;
+ > div {
+ height: 1px;
+ }
+ }
}
diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
index 7c9ae0b51a..c6e141497d 100644
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -75,7 +75,7 @@ $MinWidth: 240px;
background: $primary-content;
}
- .mx_ResizeHandle_horizontal::before {
+ .mx_ResizeHandle--horizontal::before {
position: absolute;
left: 3px;
top: 50%;
@@ -140,7 +140,7 @@ $MinWidth: 240px;
border-radius: 0 10px 10px 0;
}
- .mx_ResizeHandle_horizontal {
+ .mx_ResizeHandle--horizontal {
position: relative;
> div {
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 0acfef92c1..141f61937d 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -264,7 +264,7 @@ class LoggedInView extends React.Component<IProps, IState> {
const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
resizer.setClassNames({
handle: "mx_ResizeHandle",
- vertical: "mx_ResizeHandle_vertical",
+ vertical: "mx_ResizeHandle--vertical",
});
return resizer;
}
diff --git a/src/components/structures/MainSplit.tsx b/src/components/structures/MainSplit.tsx
index b64f703d33..ab29cd2b39 100644
--- a/src/components/structures/MainSplit.tsx
+++ b/src/components/structures/MainSplit.tsx
@@ -87,7 +87,7 @@ export default class MainSplit extends React.Component<IProps> {
onResize={this.onResize}
onResizeStop={this.onResizeStop}
className="mx_RightPanel_ResizeWrapper"
- handleClasses={{ left: "mx_ResizeHandle_horizontal" }}
+ handleClasses={{ left: "mx_ResizeHandle--horizontal" }}
>
{panelView}
</Resizable>
diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx
index c3609f3129..15886d8a19 100644
--- a/src/components/views/elements/ResizeHandle.tsx
+++ b/src/components/views/elements/ResizeHandle.tsx
@@ -26,9 +26,9 @@ interface IResizeHandleProps {
const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, id, passRef }) => {
const classNames = ["mx_ResizeHandle"];
if (vertical) {
- classNames.push("mx_ResizeHandle_vertical");
+ classNames.push("mx_ResizeHandle--vertical");
} else {
- classNames.push("mx_ResizeHandle_horizontal");
+ classNames.push("mx_ResizeHandle--horizontal");
}
return (
<div ref={passRef} className={classNames.join(" ")} data-id={id}>
diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx
index bf4e0fb0ac..e869c9ee5b 100644
--- a/src/components/views/rooms/AppsDrawer.tsx
+++ b/src/components/views/rooms/AppsDrawer.tsx
@@ -109,7 +109,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
// (ie. a vertical resize handle because, the handle itself is vertical...)
const classNames = {
handle: "mx_ResizeHandle",
- vertical: "mx_ResizeHandle_vertical",
+ vertical: "mx_ResizeHandle--vertical",
};
const collapseConfig = {
onResizeStart: () => {