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

Merge pull request #4989 from matrix-org/joriks/resize-handlebars-2.0

Browse source 
Fix handlebar interaction
This commit is contained in:
Jorik Schellekens 2020-07-28 14:30:00 +01:00 • committed by GitHub
commit 4f55ef685d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,8 +21,20 @@ limitations under the License.
height: 100%;
}
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
&:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes
// set by re-resizable
top: 50% !important;
transform: translate(0, -50%);
height: 64px !important; // to match width of the ones on roomlist
width: 4px !important;
border-radius: 4px !important;
background-color: $primary-fg-color;
opacity: 0.8;
}
}

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

@ -78,3 +78,24 @@ limitations under the License.
*/
height: 100%;
}
.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: 6px;
top: 50%;
transform: translate(0, -50%);
height: 64px; // to match width of the ones on roomlist
width: 4px;
border-radius: 4px;
content: ' ';
background-color: $primary-fg-color;
opacity: 0.8;
}
}

5
res/css/structures/_RightPanel.scss
View file

@ -19,13 +19,12 @@ limitations under the License.
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
min-width: 264px;
max-width: 50%;
display: flex;
flex-direction: column;
border-radius: 8px;
margin: 5px;
padding: 4px 0;
box-sizing: border-box;
height: 100%;
.mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above