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

30
res/css/_common.pcss
View file

@ -292,29 +292,6 @@ legend {
}
}
/*** panels ***/
.dark-panel {
background-color: $dark-panel-bg-color;
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $background;
border: none;
}
}
.light-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-lighter-bg-color;
border: none;
}
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
@ -891,3 +868,10 @@ legend {
}
}
}
.mx_lineClamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--mx-line-clamp, 1);
overflow: hidden;
}

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;

120
res/css/views/right_panel/_BaseCard.pcss
View file

@ -15,12 +15,10 @@ limitations under the License.
*/
.mx_BaseCard {
--BaseCard_padding-inline: $spacing-8;
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px;
--BaseCard_header-button-size: 24px;
--BaseCard_header-button-size: 28px;
padding: 0 var(--BaseCard_padding-inline);
overflow: hidden;
display: flex;
flex-direction: column;
@ -28,9 +26,18 @@ limitations under the License.
font-size: var(--cpd-font-size-body-md);
.mx_BaseCard_header {
--BaseCard_header_button-margin: $spacing-12;
margin: $spacing-4 0 $spacing-12;
height: 64px;
padding: var(--cpd-space-3x);
box-sizing: border-box;
/* changing the color from $separator to transparent as it is
the best visual output during the transition period. This will be
reintroduced at a later stage. */
border-bottom: 1px solid transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cpd-space-2x);
flex-shrink: 0;
> h2 {
margin: 0 44px;
@ -40,60 +47,6 @@ limitations under the License.
white-space: nowrap;
}
.mx_BaseCard_back,
.mx_BaseCard_close {
position: absolute;
background-color: rgba(141, 151, 165, 0.2);
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);
margin: var(--BaseCard_header_button-margin);
top: 0;
border-radius: 50%;
&::before {
content: "";
position: absolute;
height: inherit;
width: inherit;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $icon-button-color;
}
}
.mx_BaseCard_back {
left: 0;
margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
&::before {
transform: rotate(90deg);
mask-size: 22px;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
/* Header title with the back button */
~ .mx_BaseCard_header_title {
width: calc(100% - 60px);
margin-inline-start: var(--BaseCard_header-button-size);
.mx_BaseCard_header_title_heading {
margin-inline-start: 6px;
}
}
}
.mx_BaseCard_close {
right: 0;
margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
&::before {
mask-image: url("$(res)/img/icons-close.svg");
mask-size: 8px;
}
}
.mx_BaseCard_header_title {
display: flex;
align-items: center;
@ -103,7 +56,7 @@ limitations under the License.
flex: 1;
.mx_BaseCard_header_title_heading {
color: $icon-button-color;
color: $primary-content;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -164,7 +117,6 @@ limitations under the License.
position: relative;
font: var(--cpd-font-heading-sm-medium);
height: 20px;
border-radius: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -206,16 +158,40 @@ limitations under the License.
}
}
.mx_FilePanel,
.mx_UserInfo,
.mx_MemberList {
&.mx_BaseCard {
padding: $spacing-32 0 0;
.mx_BaseCard_back,
.mx_BaseCard_close {
position: relative;
background-color: var(--cpd-color-bg-subtle-secondary);
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);
border-radius: 50%;
.mx_AutoHideScrollbar {
margin-right: unset;
padding-right: unset;
}
&::before {
content: "";
position: absolute;
height: inherit;
width: inherit;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--cpd-color-icon-secondary);
}
}
.mx_BaseCard_back {
order: 0; /* always first! */
&::before {
transform: rotate(90deg);
mask-size: 22px;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
}
.mx_BaseCard_close {
order: 999; /* always last */
&::before {
mask-image: url("$(res)/img/icons-close.svg");
}
}
@ -230,7 +206,7 @@ limitations under the License.
}
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
color: $primary-content;
padding-top: 10px;
padding-bottom: 10px;

161
res/css/views/right_panel/_RoomSummaryCard.pcss
View file

@ -15,80 +15,80 @@ limitations under the License.
*/
.mx_RoomSummaryCard {
.mx_BaseCard_header {
.mx_RoomSummaryCard_container {
text-align: center;
margin-top: $spacing-20;
}
.mx_RoomSummaryCard_roomName,
.mx_RoomSummaryCard_alias {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
.mx_RoomSummaryCard_roomName,
.mx_RoomSummaryCard_alias {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
}
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-17px;
}
.mx_RoomSummaryCard_alias {
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
text-overflow: ellipsis;
}
.mx_RoomSummaryCard_avatar {
display: flex;
justify-content: center;
align-items: center;
.mx_RoomSummaryCard_e2ee {
display: inline-block;
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: #737d8c;
margin-left: -10px; /* overlap */
border: 3px solid $dark-panel-bg-color;
&::before {
content: "";
position: absolute;
top: 13px;
left: 13px;
height: 28px;
width: 28px;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("$(res)/img/e2e/disabled.svg");
background-color: #ffffff;
}
}
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-17px;
.mx_RoomSummaryCard_e2ee_normal {
background-color: #424446;
&::before {
mask-image: url("$(res)/img/e2e/normal.svg");
}
}
.mx_RoomSummaryCard_alias {
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
text-overflow: ellipsis;
.mx_RoomSummaryCard_e2ee_verified {
background-color: $e2e-verified-color;
&::before {
mask-image: url("$(res)/img/e2e/verified.svg");
}
}
.mx_RoomSummaryCard_avatar {
display: flex;
justify-content: center;
align-items: center;
.mx_RoomSummaryCard_e2ee {
display: inline-block;
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: #737d8c;
margin-left: -10px; /* overlap */
border: 3px solid $dark-panel-bg-color;
&::before {
content: "";
position: absolute;
top: 13px;
left: 13px;
height: 28px;
width: 28px;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("$(res)/img/e2e/disabled.svg");
background-color: #ffffff;
}
}
.mx_RoomSummaryCard_e2ee_normal {
background-color: #424446;
&::before {
mask-image: url("$(res)/img/e2e/normal.svg");
}
}
.mx_RoomSummaryCard_e2ee_verified {
background-color: $e2e-verified-color;
&::before {
mask-image: url("$(res)/img/e2e/verified.svg");
}
}
.mx_RoomSummaryCard_e2ee_warning {
background-color: $e2e-warning-color;
&::before {
mask-image: url("$(res)/img/e2e/warning.svg");
}
.mx_RoomSummaryCard_e2ee_warning {
background-color: $e2e-warning-color;
&::before {
mask-image: url("$(res)/img/e2e/warning.svg");
}
}
}
@ -244,6 +244,21 @@ limitations under the License.
}
}
.mx_RoomSummaryCard_header {
padding: 15px 12px;
.mx_BaseCard_close {
flex-shrink: 0;
}
}
.mx_RoomSummaryCard_search input {
/* Overriding very broad CSS rules */
border: 0 !important;
margin: 0 !important;
cursor: pointer;
}
.mx_RoomSummaryCard_icon_people::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
@ -279,3 +294,19 @@ limitations under the License.
.mx_RoomSummaryCard_icon_search::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}
.mx_RoomSummaryCard_searchBtn {
background: var(--cpd-color-bg-canvas-default);
color: var(--cpd-color-icon-primary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 50%;
width: 36px;
height: 36px;
padding: var(--cpd-space-2x);
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: var(--cpd-color-bg-subtle-primary);
}
}

2
res/css/views/right_panel/_TimelineCard.pcss
View file

@ -138,7 +138,7 @@ limitations under the License.
&.mx_EventTile_info .mx_MessageActionBar {
/* 1px: border width */
inset-inline-end: calc(var(--container-gap-width) + var(--BaseCard_padding-inline) + 1px);
inset-inline-end: calc(var(--container-gap-width) + 1px);
}
.mx_ReactionsRow {

3
res/css/views/rooms/_LegacyRoomHeader.pcss
View file

@ -55,8 +55,7 @@ limitations under the License.
display: flex;
align-items: center;
min-width: 0;
margin: 0 20px 0 16px;
padding-top: 6px;
padding: 10px 20px 9px 16px;
border-bottom: 1px solid $separator;
.mx_InviteOnlyIcon_large {

34
res/css/views/rooms/_MemberList.pcss
View file

@ -77,36 +77,6 @@ limitations under the License.
}
.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $accent;
border-radius: 4px;
margin: 5px 9px 9px;
display: flex;
justify-content: center;
color: $button-fg-color;
font-weight: var(--cpd-font-weight-semibold);
}
.mx_MemberList_invite.mx_AccessibleButton_disabled {
background-color: $info-plinth-fg-color;
cursor: not-allowed;
}
.mx_MemberList_invite span {
padding: 8px 0;
display: inline-flex;
&::before {
content: "";
display: inline-block;
background-color: $button-fg-color;
mask-image: url("$(res)/img/element-icons/room/invite.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
width: 20px;
height: 20px;
margin-right: 5px;
}
margin: 0 var(--cpd-space-2x);
width: calc(100% - var(--cpd-space-2x));
}

1
res/css/views/rooms/_RoomHeader.pcss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_RoomHeader {
height: 64px;
box-sizing: border-box;
padding: 0 var(--cpd-space-3x);
border-bottom: 1px solid $separator;
background-color: $background;