New UX for Share dialog

playwright/e2e/share-dialog/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { test as base } from "../../element-web-test";
+
+/**
+ * Set up for share dialog tests.
+ */
+export const test = base.extend<{
+    roomName?: string;
+}>({
+    displayName: "Alice",
+    botCreateOpts: { displayName: "Other User" },
+
+    roomName: "Alice room",
+    room: async ({ roomName: name, app, user, bot }, use) => {
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await use({ roomId });
+    },
+});

playwright/e2e/share-dialog/share-dialog.spec.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { test } from "./index.ts";
+import { expect } from "../../element-web-test";
+
+test.describe("Share dialog", () => {
+    test("should share a room", async ({ page, app, room }) => {
+        await app.viewRoomById(room.roomId);
+        await app.toggleRoomInfoPanel();
+        await page.getByRole("menuitem", { name: "Copy link" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share room" });
+        await expect(dialog.getByText(`https://matrix.to/#/${room.roomId}`)).toBeVisible();
+        expect(dialog).toMatchScreenshot("share-dialog-room.png", {
+            // QRCode and url changes at every run
+            mask: [page.locator(".mx_ShareDialog_top")],
+        });
+    });
+
+    test("should share a room member", async ({ page, app, room, user }) => {
+        await app.viewRoomById(room.roomId);
+        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
+
+        const rightPanel = await app.toggleRoomInfoPanel();
+        await rightPanel.getByRole("menuitem", { name: "People" }).click();
+        await rightPanel.getByRole("button", { name: `${user.userId} (power 100)` }).click();
+        await rightPanel.getByRole("button", { name: "Share profile" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share User" });
+        await expect(dialog.getByText(`https://matrix.to/#/${user.userId}`)).toBeVisible();
+        expect(dialog).toMatchScreenshot("share-dialog-user.png", {
+            // QRCode changes at every run
+            mask: [page.locator(".mx_QRCode")],
+        });
+    });
+
+    test("should share an event", async ({ page, app, room }) => {
+        await app.viewRoomById(room.roomId);
+        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
+
+        const timelineMessage = page.locator(".mx_MTextBody", { hasText: "hello" });
+        await timelineMessage.hover();
+        await page.getByRole("button", { name: "Options", exact: true }).click();
+        await page.getByRole("menuitem", { name: "Share" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share Room Message" });
+        await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).toBeChecked();
+        expect(dialog).toMatchScreenshot("share-dialog-event.png", {
+            // QRCode and url changes at every run
+            mask: [page.locator(".mx_ShareDialog_top")],
+        });
+        await dialog.getByRole("checkbox", { name: "Link to selected message" }).click();
+        await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).not.toBeChecked();
+    });
+});

res/css/_common.pcss

@@ -596,7 +596,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -616,14 +616,16 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
+        .mx_ShareDialog button
+    ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -635,7 +637,7 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -648,7 +650,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -664,7 +666,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/views/dialogs/_ShareDialog.pcss

@@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_ShareDialog hr {
-    margin-top: 25px;
-    margin-bottom: 25px;
-    border-color: $light-fg-color;
-}
+.mx_ShareDialog {
+    /* Value from figma design */
+    width: 416px;
+
+    .mx_Dialog_header {
+        text-align: center;
+        margin-bottom: var(--cpd-space-6x);
+        /* Override dialog header padding to able to center it */
+        padding-inline-end: 0;
+    }
 
-.mx_ShareDialog .mx_ShareDialog_content {
-    margin: 10px 0;
+    .mx_ShareDialog_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: center;
 
-    .mx_CopyableText {
-        width: unset; /* full width */
+        .mx_ShareDialog_top {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            align-items: center;
+            width: 100%;
 
-        > a {
-            text-decoration: none;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            span {
+                text-align: center;
+                font: var(--cpd-font-body-sm-semibold);
+                color: var(--cpd-color-text-secondary);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                width: 100%;
+            }
         }
-    }
-}
 
-.mx_ShareDialog_split {
-    display: flex;
-    flex-wrap: wrap;
-}
+        label {
+            display: inline-flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+            align-items: center;
+            font: var(--cpd-font-body-md-medium);
+        }
 
-.mx_ShareDialog_qrcode_container {
-    float: left;
-    height: 256px;
-    width: 256px;
-    margin-right: 64px;
-}
+        button {
+            width: 100%;
+        }
 
-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
-    width: 299px;
-}
+        .mx_ShareDialog_social {
+            display: flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
 
-.mx_ShareDialog_social_container {
-    display: inline-block;
-}
+            a {
+                /* 48px on figma but we need to add the border size */
+                width: 46px;
+                height: 46px;
+                border-radius: 99px;
+                border: 1px solid var(--cpd-color-border-interactive-secondary);
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-.mx_ShareDialog_social_icon {
-    display: inline-grid;
-    margin-right: 10px;
-    margin-bottom: 10px;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+    }
 }

src/components/views/context_menus/MessageContextMenu.tsx

@@ -38,7 +38,7 @@ import ContextMenu, { toRightOf, MenuProps } from "../../structures/ContextMenu"
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ViewSource from "../../structures/ViewSource";
 import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import EndPollDialog from "../dialogs/EndPollDialog";
 import { isPollEnded } from "../messages/MPollBody";