From c81f3bb64851e66f090a241dc616d7a52bc56cbb Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 25 Sep 2023 15:12:06 +0100 Subject: [PATCH 01/18] New right panel visual language --- res/css/_common.pcss | 30 ++--- res/css/structures/_MainSplit.pcss | 8 +- res/css/structures/_MatrixChat.pcss | 18 --- res/css/structures/_RightPanel.pcss | 3 +- res/css/views/right_panel/_BaseCard.pcss | 54 +++----- .../views/right_panel/_RoomSummaryCard.pcss | 119 +++++++++--------- res/css/views/right_panel/_TimelineCard.pcss | 2 +- res/css/views/rooms/_MemberList.pcss | 2 +- res/css/views/rooms/_RoomHeader.pcss | 1 + src/components/structures/RightPanel.tsx | 2 +- src/components/structures/RoomView.tsx | 42 +++---- .../views/right_panel/RoomSummaryCard.tsx | 7 +- src/components/views/right_panel/UserInfo.tsx | 3 +- src/components/views/rooms/RoomHeader.tsx | 4 +- src/components/views/rooms/RoomPreviewBar.tsx | 2 +- 15 files changed, 117 insertions(+), 180 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index c24ee60a825..669233543f7 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -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; +} diff --git a/res/css/structures/_MainSplit.pcss b/res/css/structures/_MainSplit.pcss index 1cca495bf2b..e188e881eff 100644 --- a/res/css/structures/_MainSplit.pcss +++ b/res/css/structures/_MainSplit.pcss @@ -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; diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss index c09d32f491f..9aef8293e27 100644 --- a/res/css/structures/_MatrixChat.pcss +++ b/res/css/structures/_MatrixChat.pcss @@ -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; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 7649ce25721..55c95c30644 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -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; diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 0990e9797e3..5ddf817a5f0 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -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; - padding: 0 var(--BaseCard_padding-inline); overflow: hidden; display: flex; flex-direction: column; @@ -28,9 +26,15 @@ 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; + border-bottom: 1px solid $separator; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--cpd-space-2x); + flex-shrink: 0; > h2 { margin: 0 44px; @@ -42,12 +46,10 @@ limitations under the License. .mx_BaseCard_back, .mx_BaseCard_close { - position: absolute; + position: relative; 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 { @@ -64,30 +66,16 @@ limitations under the License. } .mx_BaseCard_back { - left: 0; - margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); - + order: 0; /* always first! */ &::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); - + order: 999; /* always last */ &::before { mask-image: url("$(res)/img/icons-close.svg"); mask-size: 8px; @@ -103,7 +91,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 +152,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,19 +193,6 @@ limitations under the License. } } -.mx_FilePanel, -.mx_UserInfo, -.mx_MemberList { - &.mx_BaseCard { - padding: $spacing-32 0 0; - - .mx_AutoHideScrollbar { - margin-right: unset; - padding-right: unset; - } - } -} - .mx_ContextualMenu_wrapper.mx_BaseCard_header_title { .mx_ContextualMenu { position: initial; @@ -230,7 +204,7 @@ limitations under the License. } font: var(--cpd-font-body-sm-regular); - color: $secondary-content; + color: $primary-content; padding-top: 10px; padding-bottom: 10px; diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index c16d1d05700..ccc196f9a21 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -15,79 +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_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_alias { + font: var(--cpd-font-body-md-regular); + color: $secondary-content; + text-overflow: ellipsis; + } - .mx_RoomSummaryCard_avatar { - display: inline-flex; + .mx_RoomSummaryCard_avatar { + display: inline-flex; - .mx_RoomSummaryCard_e2ee { - display: inline-block; - position: relative; - width: 54px; - height: 54px; - border-radius: 50%; - background-color: #737d8c; - margin-top: -3px; /* alignment */ - margin-left: -10px; /* overlap */ - border: 3px solid $dark-panel-bg-color; + .mx_RoomSummaryCard_e2ee { + display: inline-block; + position: relative; + width: 54px; + height: 54px; + border-radius: 50%; + background-color: #737d8c; + margin-top: -3px; /* alignment */ + 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; - } + &::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_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_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"); } } } diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss index e08c198ab0c..0333201f03d 100644 --- a/res/css/views/right_panel/_TimelineCard.pcss +++ b/res/css/views/right_panel/_TimelineCard.pcss @@ -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 { diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss index 00098b347c5..cde8ad2aa1e 100644 --- a/res/css/views/rooms/_MemberList.pcss +++ b/res/css/views/rooms/_MemberList.pcss @@ -81,7 +81,7 @@ limitations under the License. position: relative; background-color: $accent; border-radius: 4px; - margin: 5px 9px 9px; + padding-inline: 8px; display: flex; justify-content: center; color: $button-fg-color; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2614e1713ad..23b34164b69 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -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; diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index c9d64df9683..33ef0989bf5 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -308,7 +308,7 @@ export default class RightPanel extends React.Component { } return ( -