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")
This commit is contained in:
Suguru Hirahara
GitHub
parent
7c9c818f06
commit
0ce3664434
5 changed files with 151 additions and 32 deletions
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -283,9 +283,9 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
|
|||
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<IPersistentResizerProps> = ({
|
|||
|
||||
resizeNotifier.stopResizing();
|
||||
}}
|
||||
className={className}
|
||||
handleWrapperClass={handleWrapperClass}
|
||||
handleClasses={{ bottom: handleClass }}
|
||||
className={className}
|
||||
enable={{ bottom: true }}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -162,3 +162,119 @@ exports[`AppTile for a pinned widget should render 1`] = `
|
|||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`AppTile preserves non-persisted widget on container move 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_AppsDrawer"
|
||||
>
|
||||
<div
|
||||
class="mx_AppsDrawer_resizer"
|
||||
style="position: relative; user-select: auto; width: auto; height: 280px; max-height: 576px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
|
||||
>
|
||||
<div
|
||||
class="mx_AppsContainer"
|
||||
>
|
||||
<div
|
||||
class="mx_AppTileFullWidth"
|
||||
id="1"
|
||||
>
|
||||
<div
|
||||
class="mx_AppTileMenuBar"
|
||||
>
|
||||
<span
|
||||
class="mx_AppTileMenuBar_title"
|
||||
style="pointer-events: none;"
|
||||
>
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
|
||||
data-testid="avatar-img"
|
||||
loading="lazy"
|
||||
src="image-file-stub"
|
||||
style="width: 20px; height: 20px;"
|
||||
/>
|
||||
<b>
|
||||
Example 1
|
||||
</b>
|
||||
<span />
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="mx_AppTileMenuBar_widgets"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Maximise"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Minimise"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Options"
|
||||
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Options"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppTileBody mx_AppTile_loading"
|
||||
>
|
||||
<div
|
||||
class="mx_AppTileBody_fadeInSpinner"
|
||||
>
|
||||
<div
|
||||
class="mx_Spinner"
|
||||
>
|
||||
<div
|
||||
class="mx_Spinner_Msg"
|
||||
>
|
||||
Loading…
|
||||
</div>
|
||||
|
||||
<div
|
||||
aria-label="Loading…"
|
||||
class="mx_Spinner_icon"
|
||||
data-testid="spinner"
|
||||
role="progressbar"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppsDrawer_resizer_container"
|
||||
>
|
||||
<div
|
||||
class="mx_AppsDrawer_resizer_container_handle"
|
||||
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue