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

Commit 0ce3664

Browse files
luixxiulluixxiul
authored
Conform to the naming policy - AppsContainer resizer (#11042)
* Add a snapshot to track AppTile in AppsDrawer * Conform to the naming policy - AppsContainer resizer * Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style - mx_AppsContainer_resizer - mx_AppsContainer_resizer_container - mx_AppsContainer_resizer_container_handle * Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer" PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
1 parent 7c9c818 commit 0ce3664

File tree

5 files changed

+151
-32
lines changed

5 files changed

+151
-32
lines changed

‎cypress/e2e/widgets/layout.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ describe("Widget Layout", () => {
102102
it("manually resize the height of the top container layout", () => {
103103
cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250);
104104

105-
cy.get(".mx_AppsContainer_resizerHandle")
105+
cy.get(".mx_AppsDrawer_resizer_container_handle")
106106
.trigger("mousedown")
107107
.trigger("mousemove", { clientX: 0, clientY: 550, force: true })
108108
.trigger("mouseup", { clientX: 0, clientY: 550, force: true });

‎res/css/views/rooms/_AppsDrawer.pcss

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,47 @@ limitations under the License.
3232
overflow: hidden;
3333
flex-grow: 1;
3434

35-
.mx_AppsContainer_resizerHandleContainer {
35+
.mx_AppsDrawer_resizer {
36+
margin-bottom: var(--container-gap-width);
37+
}
38+
39+
.mx_AppsDrawer_resizer_container {
3640
width: 100%;
3741
height: 10px;
3842
display: block;
3943
position: relative;
40-
}
41-
42-
.mx_AppsContainer_resizerHandle {
43-
cursor: ns-resize;
4444

45-
/* Override styles from library, making the whole area the target area */
46-
width: 100% !important;
47-
height: 100% !important;
45+
.mx_AppsDrawer_resizer_container_handle {
46+
cursor: ns-resize;
4847

49-
/* This is positioned directly below frame */
50-
position: absolute;
51-
bottom: 50% !important; /* override from library */
48+
/* Override styles from library, making the whole area the target area */
49+
width: 100% !important;
50+
height: 100% !important;
5251

53-
/* We then render the pill handle in an ::after to keep it in the handle's */
54-
/* area without being a massive line across the screen */
55-
&::after {
56-
content: "";
52+
/* This is positioned directly below frame */
5753
position: absolute;
58-
border-radius: 3px;
54+
bottom: 50% !important; /* override from library */
5955

60-
height: 4px;
61-
bottom: 0;
56+
/* We then render the pill handle in an ::after to keep it in the handle's */
57+
/* area without being a massive line across the screen */
58+
&::after {
59+
content: "";
60+
position: absolute;
61+
border-radius: 3px;
62+
63+
height: 4px;
64+
bottom: 0;
6265

63-
/* Together, these make the bar 64px wide */
64-
/* These are also overridden from the library */
65-
left: calc(50% - 32px);
66-
right: calc(50% - 32px);
66+
/* Together, these make the bar 64px wide */
67+
/* These are also overridden from the library */
68+
left: calc(50% - 32px);
69+
right: calc(50% - 32px);
70+
}
6771
}
6872
}
6973

7074
&:hover {
71-
.mx_AppsContainer_resizerHandle::after {
75+
.mx_AppsDrawer_resizer_container_handle::after {
7276
opacity: 0.8;
7377
background: $primary-content;
7478
}
@@ -123,10 +127,6 @@ limitations under the License.
123127
}
124128
}
125129

126-
.mx_AppsContainer_resizer {
127-
margin-bottom: var(--container-gap-width);
128-
}
129-
130130
.mx_AppsContainer {
131131
display: flex;
132132
flex-direction: row;

‎src/components/views/rooms/AppsDrawer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -283,9 +283,9 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
283283
room={this.props.room}
284284
minHeight={100}
285285
maxHeight={this.props.maxHeight - 50}
286-
handleClass="mx_AppsContainer_resizerHandle"
287-
handleWrapperClass="mx_AppsContainer_resizerHandleContainer"
288-
className="mx_AppsContainer_resizer"
286+
className="mx_AppsDrawer_resizer"
287+
handleWrapperClass="mx_AppsDrawer_resizer_container"
288+
handleClass="mx_AppsDrawer_resizer_container_handle"
289289
resizeNotifier={this.props.resizeNotifier}
290290
>
291291
{appContainers}
@@ -358,9 +358,9 @@ const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
358358

359359
resizeNotifier.stopResizing();
360360
}}
361+
className={className}
361362
handleWrapperClass={handleWrapperClass}
362363
handleClasses={{ bottom: handleClass }}
363-
className={className}
364364
enable={{ bottom: true }}
365365
>
366366
{children}

‎test/components/views/elements/AppTile-test.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,9 @@ describe("AppTile", () => {
327327
expect(renderResult.getByText("Example 1")).toBeInTheDocument();
328328
expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
329329

330+
const { asFragment } = renderResult;
331+
expect(asFragment()).toMatchSnapshot(); // Take snapshot of AppsDrawer with AppTile
332+
330333
// We want to verify that as we move the widget to the center container,
331334
// the widget frame remains running.
332335

‎test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,3 +162,119 @@ exports[`AppTile for a pinned widget should render 1`] = `
162162
</div>
163163
</DocumentFragment>
164164
`;
165+
166+
exports[`AppTile preserves non-persisted widget on container move 1`] = `
167+
<DocumentFragment>
168+
<div
169+
class="mx_AppsDrawer"
170+
>
171+
<div
172+
class="mx_AppsDrawer_resizer"
173+
style="position: relative; user-select: auto; width: auto; height: 280px; max-height: 576px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
174+
>
175+
<div
176+
class="mx_AppsContainer"
177+
>
178+
<div
179+
class="mx_AppTileFullWidth"
180+
id="1"
181+
>
182+
<div
183+
class="mx_AppTileMenuBar"
184+
>
185+
<span
186+
class="mx_AppTileMenuBar_title"
187+
style="pointer-events: none;"
188+
>
189+
<span>
190+
<img
191+
alt=""
192+
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
193+
data-testid="avatar-img"
194+
loading="lazy"
195+
src="image-file-stub"
196+
style="width: 20px; height: 20px;"
197+
/>
198+
<b>
199+
Example 1
200+
</b>
201+
<span />
202+
</span>
203+
</span>
204+
<span
205+
class="mx_AppTileMenuBar_widgets"
206+
>
207+
<div
208+
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
209+
role="button"
210+
tabindex="0"
211+
title="Maximise"
212+
>
213+
<div
214+
class="mx_Icon mx_Icon_12"
215+
/>
216+
</div>
217+
<div
218+
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
219+
role="button"
220+
tabindex="0"
221+
title="Minimise"
222+
>
223+
<div
224+
class="mx_Icon mx_Icon_12"
225+
/>
226+
</div>
227+
<div
228+
aria-expanded="false"
229+
aria-haspopup="true"
230+
aria-label="Options"
231+
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
232+
role="button"
233+
tabindex="0"
234+
title="Options"
235+
>
236+
<div
237+
class="mx_Icon mx_Icon_12"
238+
/>
239+
</div>
240+
</span>
241+
</div>
242+
<div
243+
class="mx_AppTileBody mx_AppTile_loading"
244+
>
245+
<div
246+
class="mx_AppTileBody_fadeInSpinner"
247+
>
248+
<div
249+
class="mx_Spinner"
250+
>
251+
<div
252+
class="mx_Spinner_Msg"
253+
>
254+
Loading…
255+
</div>
256+
 
257+
<div
258+
aria-label="Loading…"
259+
class="mx_Spinner_icon"
260+
data-testid="spinner"
261+
role="progressbar"
262+
style="width: 32px; height: 32px;"
263+
/>
264+
</div>
265+
</div>
266+
</div>
267+
</div>
268+
</div>
269+
<div
270+
class="mx_AppsDrawer_resizer_container"
271+
>
272+
<div
273+
class="mx_AppsDrawer_resizer_container_handle"
274+
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
275+
/>
276+
</div>
277+
</div>
278+
</div>
279+
</DocumentFragment>
280+
`;

0 commit comments

Comments
 (0)