Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit b55653d

Browse files
t3chguyt3chguy
authored
Extract Extensions into their own right panel tab (#12844)
* Extract useIsVideoRoom hook Signed-off-by: Michael Telatynski <[email protected]> * Move useWidgets hook to WidgetUtils Signed-off-by: Michael Telatynski <[email protected]> * Extract Extensions into their own right panel tab Signed-off-by: Michael Telatynski <[email protected]> * Remove unused components & classes Signed-off-by: Michael Telatynski <[email protected]> * Tests Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent fae5bf1 commit b55653d

File tree

25 files changed

+820
-475
lines changed

25 files changed

+820
-475
lines changed

‎playwright/e2e/integration-manager/utils.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
1919
export async function openIntegrationManager(app: ElementAppPage) {
2020
const { page } = app;
2121
await app.toggleRoomInfoPanel();
22-
await page
23-
.locator(".mx_RoomSummaryCard_appsGroup")
24-
.getByRole("button", { name: "Add widgets, bridges & bots" })
25-
.click();
22+
await page.getByRole("tab", { name: "Extensions" }).click();
23+
await page.getByRole("button", { name: "Add extensions" }).click();
2624
}

‎playwright/e2e/right-panel/right-panel.spec.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ test.describe("RightPanel", () => {
7373
test("should handle clicking add widgets", async ({ page, app }) => {
7474
await viewRoomSummaryByName(page, app, ROOM_NAME);
7575

76-
await page.getByRole("button", { name: "Add widgets, bridges & bots" }).click();
76+
await page.getByRole("tab", { name: "Extensions" }).click();
77+
await page.getByRole("button", { name: "Add extensions" }).click();
7778
await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
7879
});
7980

‎playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png

485 Bytes
Loading

‎playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png

456 Bytes
Loading

‎res/css/_components.pcss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,7 @@
260260
@import "./views/right_panel/_BaseCard.pcss";
261261
@import "./views/right_panel/_EmptyState.pcss";
262262
@import "./views/right_panel/_EncryptionInfo.pcss";
263+
@import "./views/right_panel/_ExtensionsCard.pcss";
263264
@import "./views/right_panel/_PinnedMessagesCard.pcss";
264265
@import "./views/right_panel/_RightPanelTabs.pcss";
265266
@import "./views/right_panel/_RoomSummaryCard.pcss";

‎res/css/views/right_panel/_BaseCard.pcss

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -98,50 +98,6 @@ limitations under the License.
9898
scrollbar-gutter: stable;
9999
}
100100

101-
.mx_BaseCard_Group {
102-
margin: $spacing-20 0 $spacing-16;
103-
104-
& > * {
105-
margin-left: $spacing-12;
106-
margin-right: $spacing-12;
107-
}
108-
109-
> h2 {
110-
color: $tertiary-content;
111-
font: var(--cpd-font-body-sm-medium);
112-
margin: $spacing-12;
113-
}
114-
115-
.mx_BaseCard_Button {
116-
padding: 10px;
117-
padding-inline-start: $spacing-12;
118-
margin: 0;
119-
position: relative;
120-
font: var(--cpd-font-heading-sm-medium);
121-
height: 20px;
122-
overflow: hidden;
123-
white-space: nowrap;
124-
text-overflow: ellipsis;
125-
display: flex;
126-
127-
.mx_BaseCard_Button_sublabel {
128-
color: $tertiary-content;
129-
margin-left: auto;
130-
}
131-
132-
&:hover {
133-
background-color: rgba(141, 151, 165, 0.1);
134-
}
135-
136-
&.mx_AccessibleButton_disabled {
137-
padding-right: $spacing-12;
138-
&::after {
139-
content: unset;
140-
}
141-
}
142-
}
143-
}
144-
145101
.mx_BaseCard_footer {
146102
padding-top: $spacing-4;
147103
text-align: center;

‎res/css/views/right_panel/_ExtensionsCard.pcss

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/*
2+
Copyright 2024 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_ExtensionsCard {
18+
--cpd-separator-inset: var(--cpd-space-4x);
19+
--cpd-separator-spacing: var(--cpd-space-4x);
20+
21+
.mx_BaseCard_header {
22+
/* Hide the line between the header and the body of the card */
23+
border-block-end: none;
24+
25+
/* Styling for the "Add extensions" button */
26+
button {
27+
width: 100%;
28+
}
29+
}
30+
31+
.mx_AutoHideScrollbar {
32+
padding: 0 var(--cpd-space-4x);
33+
box-sizing: border-box;
34+
}
35+
36+
.mx_ExtensionsCard_container {
37+
text-align: center;
38+
margin: $spacing-20 var(--cpd-space-4x) 0;
39+
}
40+
41+
.mx_ExtensionsCard_Button {
42+
/* this button is special so we have to override some of the original styling */
43+
/* as we will be applying it in its children */
44+
padding: 0;
45+
height: auto;
46+
color: $tertiary-content;
47+
position: relative;
48+
49+
.mx_WidgetAvatar {
50+
flex-shrink: 0;
51+
}
52+
53+
.mx_ExtensionsCard_icon_app {
54+
padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
55+
text-overflow: ellipsis;
56+
overflow: hidden;
57+
display: flex;
58+
align-items: center;
59+
60+
p {
61+
margin: 0 var(--cpd-space-3x);
62+
color: $primary-content;
63+
}
64+
}
65+
66+
.mx_ExtensionsCard_app_pinToggle,
67+
.mx_ExtensionsCard_app_options {
68+
position: absolute;
69+
top: 0;
70+
height: 100%; /* to give bigger interactive zone */
71+
width: 24px;
72+
padding: var(--cpd-space-3x) var(--cpd-space-1x);
73+
box-sizing: border-box;
74+
min-width: 24px; /* prevent flexbox crushing */
75+
76+
&:hover {
77+
&::after {
78+
content: "";
79+
position: absolute;
80+
height: 24px;
81+
width: 24px;
82+
top: var(--cpd-space-2x); /* equal to padding-top of parent */
83+
left: 0;
84+
border-radius: 12px;
85+
background-color: rgba(141, 151, 165, 0.1);
86+
}
87+
}
88+
89+
&::before {
90+
content: "";
91+
position: absolute;
92+
height: 16px;
93+
width: 16px;
94+
mask-repeat: no-repeat;
95+
mask-position: center;
96+
mask-size: 16px;
97+
background-color: $icon-button-color;
98+
}
99+
}
100+
101+
.mx_ExtensionsCard_app_pinToggle {
102+
right: 8px;
103+
104+
&::before {
105+
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
106+
}
107+
}
108+
109+
.mx_ExtensionsCard_app_options {
110+
right: 32px; /* 24 + 8 */
111+
&::before {
112+
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
113+
}
114+
}
115+
116+
&.mx_ExtensionsCard_Button_pinned {
117+
&::after {
118+
opacity: 0.2;
119+
}
120+
121+
.mx_ExtensionsCard_app_pinToggle::before {
122+
background-color: $accent;
123+
}
124+
}
125+
126+
&::before {
127+
content: unset;
128+
}
129+
130+
&::after {
131+
top: var(--cpd-space-2x); /* re-align based on the height change */
132+
pointer-events: none; /* pass through to the real button */
133+
}
134+
}
135+
136+
/* Set layout for everyone button */
137+
a[data-kind="primary"] {
138+
margin-top: var(--cpd-space-10x);
139+
}
140+
141+
.mx_EmptyState::before {
142+
/* Overlap the Add extensions button */
143+
top: -76px;
144+
}
145+
}

‎res/css/views/right_panel/_RoomSummaryCard.pcss

Lines changed: 0 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -33,24 +33,6 @@ limitations under the License.
3333
text-overflow: ellipsis;
3434
}
3535

36-
.mx_RoomSummaryCard_aboutGroup {
37-
.mx_RoomSummaryCard_Button {
38-
padding-left: 44px;
39-
40-
&::before {
41-
content: "";
42-
position: absolute;
43-
top: 8px;
44-
left: 10px;
45-
height: 24px;
46-
width: 24px;
47-
mask-repeat: no-repeat;
48-
mask-position: center;
49-
background-color: $icon-button-color;
50-
}
51-
}
52-
}
53-
5436
.mx_RoomSummaryCard_topic {
5537
padding: 0 12px;
5638
color: var(--cpd-color-text-secondary);
@@ -99,131 +81,6 @@ limitations under the License.
9981
}
10082
}
10183

102-
.mx_RoomSummaryCard_appsGroup {
103-
.mx_RoomSummaryCard_Button {
104-
/* this button is special so we have to override some of the original styling */
105-
/* as we will be applying it in its children */
106-
padding: 0;
107-
height: auto;
108-
color: $tertiary-content;
109-
110-
.mx_RoomSummaryCard_icon_app {
111-
padding: 10px 48px 10px 12px; /* based on typical mx_RoomSummaryCard_Button padding */
112-
text-overflow: ellipsis;
113-
overflow: hidden;
114-
display: flex;
115-
justify-content: center;
116-
span {
117-
/* Center aligned and Spacing matched with the About section above the Widgets section */
118-
margin-right: 10px;
119-
display: flex;
120-
justify-content: center;
121-
align-items: center;
122-
color: $primary-content;
123-
}
124-
}
125-
126-
.mx_RoomSummaryCard_app_pinToggle,
127-
.mx_RoomSummaryCard_app_maximiseToggle,
128-
.mx_RoomSummaryCard_app_options {
129-
position: absolute;
130-
top: 0;
131-
height: 100%; /* to give bigger interactive zone */
132-
width: 24px;
133-
padding: 12px 4px;
134-
box-sizing: border-box;
135-
min-width: 24px; /* prevent flexbox crushing */
136-
137-
&:hover {
138-
&::after {
139-
content: "";
140-
position: absolute;
141-
height: 24px;
142-
width: 24px;
143-
top: 8px; /* equal to padding-top of parent */
144-
left: 0;
145-
border-radius: 12px;
146-
background-color: rgba(141, 151, 165, 0.1);
147-
}
148-
}
149-
150-
&::before {
151-
content: "";
152-
position: absolute;
153-
height: 16px;
154-
width: 16px;
155-
mask-repeat: no-repeat;
156-
mask-position: center;
157-
mask-size: 16px;
158-
background-color: $icon-button-color;
159-
}
160-
}
161-
162-
.mx_RoomSummaryCard_app_pinToggle {
163-
right: 8px;
164-
165-
&::before {
166-
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
167-
}
168-
}
169-
.mx_RoomSummaryCard_app_maximiseToggle {
170-
right: 32px; /* 24 + 8 */
171-
172-
&::before {
173-
mask-size: 14px;
174-
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
175-
}
176-
}
177-
178-
.mx_RoomSummaryCard_app_options {
179-
right: 56px; /* 2*24 + 8 */
180-
display: none;
181-
&::before {
182-
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
183-
}
184-
}
185-
186-
&.mx_RoomSummaryCard_Button_pinned {
187-
&::after {
188-
opacity: 0.2;
189-
}
190-
191-
.mx_RoomSummaryCard_app_pinToggle::before {
192-
background-color: $accent;
193-
}
194-
}
195-
196-
&.mx_RoomSummaryCard_Button_maximised {
197-
&::after {
198-
opacity: 0.2;
199-
}
200-
201-
.mx_RoomSummaryCard_app_maximiseToggle::before {
202-
background-color: $accent;
203-
}
204-
}
205-
206-
&:hover {
207-
.mx_RoomSummaryCard_icon_app {
208-
padding-right: 72px;
209-
}
210-
211-
.mx_RoomSummaryCard_app_options {
212-
display: unset;
213-
}
214-
}
215-
216-
&::before {
217-
content: unset;
218-
}
219-
220-
&::after {
221-
top: 8px; /* re-align based on the height change */
222-
pointer-events: none; /* pass through to the real button */
223-
}
224-
}
225-
}
226-
22784
.mx_AccessibleButton_kind_link {
22885
margin-top: 12px;
22986
margin-bottom: 12px;

‎res/themes/light-high-contrast/css/_light-high-contrast.pcss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,6 @@ $accent-1400: var(--cpd-color-green-1400);
6464
outline-offset: 2px;
6565
}
6666

67-
/* Add padding, so the outline is not chopped off on the left */
68-
.mx_BaseCard {
69-
padding-left: 4px !important; /* Remove 4 to allow 4 in mx_BaseCard_Group */
70-
}
71-
.mx_BaseCard_Group {
72-
padding-left: 4px !important;
73-
}
74-
7567
.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
7668
color: $secondary-content;
7769
opacity: 1 !important;

0 commit comments

Comments
 (0)