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

New right panel visual language (#11664)

Browse source 
* New right panel visual language

* Upgrade Compound

* Align old room header with right panel

* Rigth panel look and feel

* Fix linting and e2e tests

* Update snapshot

* Add test

* Lint

* Remove screenshot local script

* Update snapshots and UI based on feedback

* fix i18n key

* Update right panel visuals

* Fix tests

* lintfixes

* fix tests

* fix tests

* Add tests for search icon

* Fix invite dialog spec
This commit is contained in:
Germain 2023-10-20 14:30:37 +01:00 • committed by GitHub
parent a63b99f687
commit f784a085fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 331 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,17 +23,11 @@ limitations under the License.
}
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: var(--container-gap-width);
/* The resizer should be centered: only half of the gap-width is handled by the right panel. */
/* The other half by the RoomView. */
padding-left: calc(var(--container-gap-width) / 2);
height: calc(100vh - 51px); /* height of .mx_LegacyRoomHeader.light-panel */
&:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-150%, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;

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

@ -76,24 +76,6 @@ 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 - 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) */
/* 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 (var(--container-gap-width) / 2) */
}
.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
position: relative;

3
res/css/structures/_RightPanel.pcss
View file

@ -21,8 +21,7 @@ limitations under the License.
position: relative;
display: flex;
flex-direction: column;
border-radius: 8px;
padding: var(--container-border-width) 0;
border-left: 1px solid $separator;
box-sizing: border-box;
height: 100%;
contain: strict;