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

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);
}
}