diff --git a/cypress/e2e/widgets/layout.spec.ts b/cypress/e2e/widgets/layout.spec.ts index 0f18ce85c2..16470fd5a0 100644 --- a/cypress/e2e/widgets/layout.spec.ts +++ b/cypress/e2e/widgets/layout.spec.ts @@ -102,7 +102,7 @@ describe("Widget Layout", () => { it("manually resize the height of the top container layout", () => { cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250); - cy.get(".mx_AppsContainer_resizerHandle") + cy.get(".mx_AppsDrawer_resizer_container_handle") .trigger("mousedown") .trigger("mousemove", { clientX: 0, clientY: 550, force: true }) .trigger("mouseup", { clientX: 0, clientY: 550, force: true }); diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 1913ab799c..20a68b4136 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -32,43 +32,47 @@ limitations under the License. overflow: hidden; flex-grow: 1; - .mx_AppsContainer_resizerHandleContainer { + .mx_AppsDrawer_resizer { + margin-bottom: var(--container-gap-width); + } + + .mx_AppsDrawer_resizer_container { width: 100%; height: 10px; display: block; position: relative; - } - .mx_AppsContainer_resizerHandle { - cursor: ns-resize; + .mx_AppsDrawer_resizer_container_handle { + cursor: ns-resize; - /* Override styles from library, making the whole area the target area */ - width: 100% !important; - height: 100% !important; + /* Override styles from library, making the whole area the target area */ + width: 100% !important; + height: 100% !important; - /* This is positioned directly below frame */ - position: absolute; - bottom: 50% !important; /* override from library */ - - /* We then render the pill handle in an ::after to keep it in the handle's */ - /* area without being a massive line across the screen */ - &::after { - content: ""; + /* This is positioned directly below frame */ position: absolute; - border-radius: 3px; + bottom: 50% !important; /* override from library */ - height: 4px; - bottom: 0; + /* We then render the pill handle in an ::after to keep it in the handle's */ + /* area without being a massive line across the screen */ + &::after { + content: ""; + position: absolute; + border-radius: 3px; - /* Together, these make the bar 64px wide */ - /* These are also overridden from the library */ - left: calc(50% - 32px); - right: calc(50% - 32px); + height: 4px; + bottom: 0; + + /* Together, these make the bar 64px wide */ + /* These are also overridden from the library */ + left: calc(50% - 32px); + right: calc(50% - 32px); + } } } &:hover { - .mx_AppsContainer_resizerHandle::after { + .mx_AppsDrawer_resizer_container_handle::after { opacity: 0.8; background: $primary-content; } @@ -123,10 +127,6 @@ limitations under the License. } } -.mx_AppsContainer_resizer { - margin-bottom: var(--container-gap-width); -} - .mx_AppsContainer { display: flex; flex-direction: row; diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index 378538af18..d68a606c9d 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -283,9 +283,9 @@ export default class AppsDrawer extends React.Component { room={this.props.room} minHeight={100} maxHeight={this.props.maxHeight - 50} - handleClass="mx_AppsContainer_resizerHandle" - handleWrapperClass="mx_AppsContainer_resizerHandleContainer" - className="mx_AppsContainer_resizer" + className="mx_AppsDrawer_resizer" + handleWrapperClass="mx_AppsDrawer_resizer_container" + handleClass="mx_AppsDrawer_resizer_container_handle" resizeNotifier={this.props.resizeNotifier} > {appContainers} @@ -358,9 +358,9 @@ const PersistentVResizer: React.FC = ({ resizeNotifier.stopResizing(); }} + className={className} handleWrapperClass={handleWrapperClass} handleClasses={{ bottom: handleClass }} - className={className} enable={{ bottom: true }} > {children} diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index 7743a002e9..8f77db9f1e 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -327,6 +327,9 @@ describe("AppTile", () => { expect(renderResult.getByText("Example 1")).toBeInTheDocument(); expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true); + const { asFragment } = renderResult; + expect(asFragment()).toMatchSnapshot(); // Take snapshot of AppsDrawer with AppTile + // We want to verify that as we move the widget to the center container, // the widget frame remains running. diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 95e1ce929a..9f345ff82c 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -162,3 +162,119 @@ exports[`AppTile for a pinned widget should render 1`] = ` `; + +exports[`AppTile preserves non-persisted widget on container move 1`] = ` + +
+
+
+
+
+ + + + + Example 1 + + + + + +
+
+
+
+
+
+ +
+
+
+
+ Loading… +
+   +
+
+
+
+
+
+
+
+
+
+
+ +`;