New right panel visual language (#11664)

* 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
matrix-org · Oct 20, 2023 · f784a08 · f784a08
1 parent a63b99f
commit f784a08
Show file tree

Hide file tree

Showing 31 changed files with 323 additions and 334 deletions.
diff --git 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
@@ -30,7 +30,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     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
@@ -43,7 +43,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,22 +15,29 @@ 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;
     flex: 1;
     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;