New right panel visual language

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) => {

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", () => {

package.json

@@ -52,6 +52,7 @@
  "test": "jest",
  "test:cypress": "cypress run",
  "test:cypress:open": "cypress open",
+ "test:screenshot:local": "PERCY_TOKEN=a04f2cc2bbfa5d01df2e234622896ad47bff8433a26c563ef551d2e1c15a171f PERCY_BRANCH=local yarn percy exec --parallel -- yarn test:cypress",
  "coverage": "yarn test --coverage"
  },
  "resolutions": {
@@ -69,7 +70,7 @@
  "@sentry/tracing": "^7.0.0",
  "@testing-library/react-hooks": "^8.0.1",
  "@vector-im/compound-design-tokens": "^0.0.5",
- "@vector-im/compound-web": "^0.4.0",
+ "@vector-im/compound-web": "^0.5.1",
  "@zxcvbn-ts/core": "^3.0.4",
  "@zxcvbn-ts/language-common": "^3.0.4",
  "@zxcvbn-ts/language-en": "^3.0.2",

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

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;

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;
 

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;

res/css/views/right_panel/_BaseCard.pcss

@@ -15,22 +15,26 @@ 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;
  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;
+ 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;
@@ -40,60 +44,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 +53,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 +114,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 +155,41 @@ 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: rgba(141, 151, 165, 0.2);
+ 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: $icon-button-color;
+ }
+}
 
- .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");
+ mask-size: 8px;
  }
 }
 
@@ -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;