Merge branch 'develop' into fix-spacing-SetIntegrationManager

Author: luixxiul

cypress/e2e/regression-tests/pills-click-in-app.spec.ts

@@ -67,7 +67,7 @@ describe("Pills", () => {
 
                 // go back to the message room and try to click on the pill text, as a user would
                 cy.viewRoomByName(messageRoom);
-                cy.get(".mx_EventTile_body .mx_Pill .mx_Pill_linkText")
+                cy.get(".mx_EventTile_body .mx_Pill .mx_Pill_text")
                     .should("have.css", "pointer-events", "none")
                     .click({ force: true }); // force is to ensure we bypass pointer-events
                 cy.url().should("contain", localUrl);

cypress/e2e/timeline/timeline.spec.ts

@@ -161,8 +161,23 @@ describe("Timeline", () => {
                 "created and configured the room.",
             ).should("exist");
 
-            // Check room name line-height is reset
-            cy.get(".mx_IRCLayout .mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
+            cy.get(".mx_IRCLayout").within(() => {
+                // Check room name line-height is reset
+                cy.get(".mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
+
+                // Check the profile resizer's place
+                // See: _IRCLayout
+                // --RoomView_MessageList-padding = 18px (See: _RoomView.pcss)
+                // --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss)
+                // --icon-width = 14px
+                // --right-padding = 5px
+                // --name-width = 80px
+                // --resizer-width = 15px
+                // --resizer-a11y = 3px
+                // 18px + 46px + 14px + 5px + 80px + 5px - 15px - 3px
+                // = 150px
+                cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "150px");
+            });
 
             cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
         });

package.json

@@ -97,7 +97,7 @@
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-widget-api": "^1.2.0",
+        "matrix-widget-api": "^1.3.1",
         "minimist": "^1.2.5",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",

res/css/_common.pcss

@@ -42,6 +42,7 @@ $timeline-image-border-radius: 8px;
 
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
+    --MessageTimestamp-width: $MessageTimestamp_width;
 }
 
 @media (prefers-reduced-motion) {

res/css/structures/_LeftPanel.pcss

@@ -185,6 +185,10 @@ $roomListCollapsedWidth: 68px;
             }
         }
 
+        .mx_RoomListHeader:first-child {
+            margin-top: 12px;
+        }
+
         .mx_LeftPanel_roomListWrapper {
             /* Make the y-scrollbar more responsive */
             padding-right: 2px;

res/css/structures/_RoomView.pcss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+:root {
+    --RoomView_MessageList-padding: 18px; /* TODO: use a variable */
+}
+
 .mx_RoomView_wrapper {
     display: flex;
     flex-direction: column;
@@ -176,7 +180,7 @@ limitations under the License.
 
 .mx_RoomView_MessageList {
     list-style-type: none;
-    padding: 18px;
+    padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
     margin: 0;
     /* needed as min-height is set to clientHeight in ScrollPanel
     to prevent shrinking when WhoIsTypingTile is hidden */

res/css/views/elements/_Pill.pcss

@@ -29,6 +29,10 @@ limitations under the License.
     color: $accent-fg-color !important; /* To override .markdown-body */
     background-color: $pill-bg-color !important; /* To override .markdown-body */
 
+    > * {
+        pointer-events: none;
+    }
+
     &.mx_UserPill_me,
     &.mx_AtRoomPill {
         background-color: $alert !important; /* To override .markdown-body */
@@ -55,12 +59,17 @@ limitations under the License.
         min-width: $font-16px; /* ensure the avatar is not compressed */
     }
 
-    .mx_Pill_linkText {
-        white-space: nowrap; /* enforce the pill text to be a single line */
+    &.mx_EventPill .mx_BaseAvatar {
+        /* Event pill avatars are inside the text. */
+        margin-inline-start: 0.2em;
+        margin-inline-end: 0.2em;
+    }
+
+    .mx_Pill_text {
+        min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
-
-        pointer-events: none; /* ensure clicks on the pills go through the anchor */
+        white-space: nowrap;
     }
 
     a& {
@@ -69,4 +78,20 @@ limitations under the License.
         overflow: hidden;
         text-decoration: none !important; /* To override .markdown-body */
     }
+
+    .mx_Pill_LinkIcon {
+        background-color: $link-external;
+        box-sizing: border-box;
+        color: $background;
+        height: 16px;
+        padding: 1px;
+        width: 16px;
+    }
+
+    .mx_Pill_UserIcon {
+        box-sizing: border-box;
+        color: $secondary-content;
+        height: 16px;
+        width: 16px;
+    }
 }

res/css/views/rooms/_IRCLayout.pcss

@@ -217,11 +217,23 @@ $irc-line-height: $font-18px;
     }
 
     .mx_ProfileResizer {
+        --resizer-width: 15px;
+        --resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
+
         position: absolute;
         height: 100%;
-        width: 15px;
-        left: calc(80px + var(--name-width));
+        width: var(--resizer-width);
         cursor: col-resize;
         z-index: 100;
+
+        /* Add width of every element rendered before the resizer (including padding for the avatar and the display
+           name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
+           the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
+           Please note that MessageTimestamp does not have inline padding. */
+        inset-inline-start: calc(
+            var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
+                var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
+                var(--resizer-a11y)
+        );
     }
 }

res/img/compound/user.svg

@@ -90,6 +90,7 @@ $room-icon-unread-color: #fff;
 $accent: #0dbd8b;
 $alert: #ff5b55;
 $links: #0086e6;
+$link-external: #0467dd;
 $primary-content: $primary-fg-color;
 $secondary-content: $secondary-fg-color;
 $tertiary-content: $tertiary-fg-color;