OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve right panel resize handle usability (#7204)

pull/21833/head
Michael Weimann 2021-11-29 11:56:09 +01:00 committed by GitHub
parent d939e45d00
commit f5d32345f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
res/css/structures/_MainSplit.scss
View File

@ -28,15 +28,16 @@ limitations under the License.
margin-left: 8px; margin-left: 8px;
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
&:hover .mx_RightPanel_ResizeHandle { &:hover .mx_ResizeHandle_horizontal::before {
// Need to use important to override element style attributes position: absolute;
// set by re-resizable top: 50%;
top: 50% !important;
transform: translate(0, -50%); transform: translate(0, -50%);
height: 64px !important; // to match width of the ones on roomlist height: 64px; // to match width of the ones on roomlist
width: 4px !important; width: 4px;
border-radius: 4px !important; border-radius: 4px;
content: '';
background-color: $primary-content; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;

2
src/components/structures/MainSplit.tsx
View File

@ -83,7 +83,7 @@ export default class MainSplit extends React.Component<IProps> {
onResize={this.onResize} onResize={this.onResize}
onResizeStop={this.onResizeStop} onResizeStop={this.onResizeStop}
className="mx_RightPanel_ResizeWrapper" className="mx_RightPanel_ResizeWrapper"
handleClasses={{ left: "mx_RightPanel_ResizeHandle" }} handleClasses={{ left: "mx_ResizeHandle_horizontal" }}
> >
{ panelView } { panelView }
</Resizable>; </Resizable>;