Skip to content

Commit 0429809

Browse files
floriandurosflorianduros
authored
New UX for Share dialog (element-hq#28598)
* New UX for `ShareDialog` * Use new named import * Rewrite tests * Add e2e tests * Use `box-sizing` for social buttons * Update e2e tests
1 parent 06fa348 commit 0429809

File tree

17 files changed

+1240
-278
lines changed

17 files changed

+1240
-278
lines changed

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
* Copyright 2024 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import { test, expect } from "../../element-web-test";
9+
10+
test.describe("Share dialog", () => {
11+
test.use({
12+
displayName: "Alice",
13+
room: async ({ app, user, bot }, use) => {
14+
const roomId = await app.client.createRoom({ name: "Alice room" });
15+
await use({ roomId });
16+
},
17+
});
18+
19+
test("should share a room", async ({ page, app, room }) => {
20+
await app.viewRoomById(room.roomId);
21+
await app.toggleRoomInfoPanel();
22+
await page.getByRole("menuitem", { name: "Copy link" }).click();
23+
24+
const dialog = page.getByRole("dialog", { name: "Share room" });
25+
await expect(dialog.getByText(`https://matrix.to/#/${room.roomId}`)).toBeVisible();
26+
expect(dialog).toMatchScreenshot("share-dialog-room.png", {
27+
// QRCode and url changes at every run
28+
mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
29+
});
30+
});
31+
32+
test("should share a room member", async ({ page, app, room, user }) => {
33+
await app.viewRoomById(room.roomId);
34+
await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
35+
36+
const rightPanel = await app.toggleRoomInfoPanel();
37+
await rightPanel.getByRole("menuitem", { name: "People" }).click();
38+
await rightPanel.getByRole("button", { name: `${user.userId} (power 100)` }).click();
39+
await rightPanel.getByRole("button", { name: "Share profile" }).click();
40+
41+
const dialog = page.getByRole("dialog", { name: "Share User" });
42+
await expect(dialog.getByText(`https://matrix.to/#/${user.userId}`)).toBeVisible();
43+
expect(dialog).toMatchScreenshot("share-dialog-user.png", {
44+
// QRCode changes at every run
45+
mask: [page.locator(".mx_QRCode")],
46+
});
47+
});
48+
49+
test("should share an event", async ({ page, app, room }) => {
50+
await app.viewRoomById(room.roomId);
51+
await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
52+
53+
const timelineMessage = page.locator(".mx_MTextBody", { hasText: "hello" });
54+
await timelineMessage.hover();
55+
await page.getByRole("button", { name: "Options", exact: true }).click();
56+
await page.getByRole("menuitem", { name: "Share" }).click();
57+
58+
const dialog = page.getByRole("dialog", { name: "Share Room Message" });
59+
await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).toBeChecked();
60+
expect(dialog).toMatchScreenshot("share-dialog-event.png", {
61+
// QRCode and url changes at every run
62+
mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
63+
});
64+
await dialog.getByRole("checkbox", { name: "Link to selected message" }).click();
65+
await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).not.toBeChecked();
66+
});
67+
});

‎playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-event-linux.png

17.4 KB
Loading

‎playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-room-linux.png

15.5 KB
Loading

‎playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-user-linux.png

16.4 KB
Loading

‎res/css/_common.pcss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ legend {
596596
.mx_Dialog
597597
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
598598
.mx_UserProfileSettings button
599-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
599+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
600600
.mx_Dialog input[type="submit"],
601601
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
602602
.mx_Dialog_buttons input[type="submit"] {
@@ -616,14 +616,16 @@ legend {
616616
.mx_Dialog
617617
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
618618
.mx_UserProfileSettings button
619-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
619+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
620+
.mx_ShareDialog button
621+
):last-child {
620622
margin-right: 0px;
621623
}
622624

623625
.mx_Dialog
624626
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
625627
.mx_UserProfileSettings button
626-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
628+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
627629
.mx_Dialog input[type="submit"]:focus,
628630
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
629631
.mx_Dialog_buttons input[type="submit"]:focus {
@@ -635,7 +637,7 @@ legend {
635637
.mx_Dialog_buttons
636638
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
637639
.mx_UserProfileSettings button
638-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
640+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
639641
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
640642
color: var(--cpd-color-text-on-solid-primary);
641643
background-color: var(--cpd-color-bg-action-primary-rest);
@@ -648,7 +650,7 @@ legend {
648650
.mx_Dialog_buttons
649651
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
650652
.mx_ThemeChoicePanel_CustomTheme button
651-
):not(.mx_UnpinAllDialog button),
653+
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
652654
.mx_Dialog_buttons input[type="submit"].danger {
653655
background-color: var(--cpd-color-bg-critical-primary);
654656
border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -664,7 +666,7 @@ legend {
664666
.mx_Dialog
665667
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
666668
.mx_UserProfileSettings button
667-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
669+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
668670
.mx_Dialog input[type="submit"]:disabled,
669671
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
670672
.mx_Dialog_buttons input[type="submit"]:disabled {

‎res/css/views/dialogs/_ShareDialog.pcss

Lines changed: 60 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
55
Please see LICENSE files in the repository root for full details.
66
*/
77

8-
.mx_ShareDialog hr {
9-
margin-top: 25px;
10-
margin-bottom: 25px;
11-
border-color: $light-fg-color;
12-
}
8+
.mx_ShareDialog {
9+
/* Value from figma design */
10+
width: 416px;
11+
12+
.mx_Dialog_header {
13+
text-align: center;
14+
margin-bottom: var(--cpd-space-6x);
15+
/* Override dialog header padding to able to center it */
16+
padding-inline-end: 0;
17+
}
1318

14-
.mx_ShareDialog .mx_ShareDialog_content {
15-
margin: 10px 0;
19+
.mx_ShareDialog_content {
20+
display: flex;
21+
flex-direction: column;
22+
gap: var(--cpd-space-6x);
23+
align-items: center;
1624

17-
.mx_CopyableText {
18-
width: unset; /* full width */
25+
.mx_ShareDialog_top {
26+
display: flex;
27+
flex-direction: column;
28+
gap: var(--cpd-space-4x);
29+
align-items: center;
30+
width: 100%;
1931

20-
> a {
21-
text-decoration: none;
22-
flex-shrink: 1;
23-
overflow: hidden;
24-
text-overflow: ellipsis;
25-
white-space: nowrap;
32+
span {
33+
text-align: center;
34+
font: var(--cpd-font-body-sm-semibold);
35+
color: var(--cpd-color-text-secondary);
36+
text-overflow: ellipsis;
37+
white-space: nowrap;
38+
overflow: hidden;
39+
width: 100%;
40+
}
2641
}
27-
}
28-
}
2942

30-
.mx_ShareDialog_split {
31-
display: flex;
32-
flex-wrap: wrap;
33-
}
43+
label {
44+
display: inline-flex;
45+
gap: var(--cpd-space-3x);
46+
justify-content: center;
47+
align-items: center;
48+
font: var(--cpd-font-body-md-medium);
49+
}
3450

35-
.mx_ShareDialog_qrcode_container {
36-
float: left;
37-
height: 256px;
38-
width: 256px;
39-
margin-right: 64px;
40-
}
51+
button {
52+
width: 100%;
53+
}
4154

42-
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
43-
width: 299px;
44-
}
55+
.mx_ShareDialog_social {
56+
display: flex;
57+
gap: var(--cpd-space-3x);
58+
justify-content: center;
4559

46-
.mx_ShareDialog_social_container {
47-
display: inline-block;
48-
}
60+
a {
61+
width: 48px;
62+
height: 48px;
63+
border-radius: 99px;
64+
box-sizing: border-box;
65+
border: 1px solid var(--cpd-color-border-interactive-secondary);
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
4969

50-
.mx_ShareDialog_social_icon {
51-
display: inline-grid;
52-
margin-right: 10px;
53-
margin-bottom: 10px;
70+
img {
71+
width: 24px;
72+
height: 24px;
73+
}
74+
}
75+
}
76+
}
5477
}

‎src/components/views/context_menus/MessageContextMenu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import ContextMenu, { toRightOf, MenuProps } from "../../structures/ContextMenu"
3838
import ReactionPicker from "../emojipicker/ReactionPicker";
3939
import ViewSource from "../../structures/ViewSource";
4040
import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
41-
import ShareDialog from "../dialogs/ShareDialog";
41+
import { ShareDialog } from "../dialogs/ShareDialog";
4242
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
4343
import EndPollDialog from "../dialogs/EndPollDialog";
4444
import { isPollEnded } from "../messages/MPollBody";

0 commit comments

Comments
 (0)