From 3ca957b541bf451227b25482b0b29b9d42280407 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara 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 { 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 { onResize={this.onResize} onResizeStop={this.onResizeStop} className="mx_RightPanel_ResizeWrapper" - handleClasses={{ left: "mx_ResizeHandle_horizontal" }} + handleClasses={{ left: "mx_ResizeHandle--horizontal" }} > {panelView} 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 = ({ 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 (
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 { // (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: () => {