diff --git a/cypress/e2e/invite/invite-dialog.spec.ts b/cypress/e2e/invite/invite-dialog.spec.ts index ba6aa4040d4..b013429b920 100644 --- a/cypress/e2e/invite/invite-dialog.spec.ts +++ b/cypress/e2e/invite/invite-dialog.spec.ts @@ -53,7 +53,7 @@ describe("Invite dialog", function () { cy.findByRole("button", { name: /People/ }).click(); }); - cy.get(".mx_BaseCard_header").within(() => { + cy.get(".mx_BaseCard").within(() => { // Click "Invite to this room" button // Regex pattern due to "mx_MemberList_invite span::before" cy.findByRole("button", { name: /Invite to this room/ }).click(); diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index 892e3d94b32..5b999574b45 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -30,7 +30,7 @@ const viewRoomSummaryByName = (name: string): Chainable> => const checkRoomSummaryCard = (name: string): Chainable> => { cy.get(".mx_RoomSummaryCard").should("have.length", 1); - return cy.get(".mx_BaseCard_header").should("contain", name); + return cy.get(".mx_RoomSummaryCard").should("contain", name); }; const uploadFile = (file: string) => { diff --git a/cypress/e2e/right-panel/right-panel.spec.ts b/cypress/e2e/right-panel/right-panel.spec.ts index ec840844639..d566ceb3c44 100644 --- a/cypress/e2e/right-panel/right-panel.spec.ts +++ b/cypress/e2e/right-panel/right-panel.spec.ts @@ -43,7 +43,7 @@ const viewRoomSummaryByName = (name: string): Chainable> => const checkRoomSummaryCard = (name: string): Chainable> => { cy.get(".mx_RoomSummaryCard").should("have.length", 1); - return cy.get(".mx_BaseCard_header").should("contain", name); + return cy.get(".mx_RoomSummaryCard").should("contain", name); }; describe("RightPanel", () => { diff --git a/package.json b/package.json index 3f8410a8d27..2776b7ecb34 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@sentry/tracing": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^0.0.6", - "@vector-im/compound-web": "^0.5.0", + "@vector-im/compound-web": "0.5.4", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-en": "^3.0.2", diff --git a/res/css/_common.pcss b/res/css/_common.pcss index d52378400df..488faffdf9d 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..c16ae5242e2 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; + --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%; + + &::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_AutoHideScrollbar { - margin-right: unset; - padding-right: unset; - } +.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; diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index ce7004a4c7c..e2b71e1a150 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -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_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: 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; + .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; - } + &::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"); } } } @@ -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); + } +} 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/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss index 1e36e0887b7..d9d2f4b22d1 100644 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ b/res/css/views/rooms/_LegacyRoomHeader.pcss @@ -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 { diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss index 00098b347c5..36010d62007 100644 --- a/res/css/views/rooms/_MemberList.pcss +++ b/res/css/views/rooms/_MemberList.pcss @@ -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)); } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 6fd3897c5e7..a1ee36f33c1 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 ( -