imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add CSS variable to make the UI gaps consistent and fix the resize handle position (#7234)

Browse source 
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
Timo 2021-12-06 13:10:52 +01:00 • committed by GitHub
parent 12000060a5
commit 9bcb82d6dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 34 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
res/css/structures/_MainSplit.scss
View file

@ -23,15 +23,15 @@ limitations under the License.
}
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
// no padding on the left. The spacing is taken care of by the main split content.
padding: 5px 5px 5px 0px;
margin-left: 8px;
padding: $container-gap-width;
padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
&:hover .mx_ResizeHandle_horizontal::before {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 50%;
transform: translate(-50%, -50%);
height: 64px; // to match width of the ones on roomlist
width: 4px;

18
res/css/structures/_MatrixChat.scss
View file

@ -76,14 +76,28 @@ limitations under the License.
height: 100%;
}
// We'd like to remove this, but this makes matrixchat's resizehandle's
// 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 {
margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
// The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
// The resizeHandle does not change the gap between the left panel and the room view:
// the resizeHandle width is: 11px = 10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
// right: -6px left: -6px positions the element exactly on the edge of leftPanel.
// left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
// We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
}
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: 6px;
top: 50%;
transform: translate(0, -50%);
left: 50%;
transform: translate(-50%, -50%);
height: 64px; // to match width of the ones on roomlist
width: 4px;

1
res/css/structures/_RoomView.scss
View file

@ -166,6 +166,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
margin-right: calc($container-gap-width / 2);
}
.mx_RoomView_statusArea {