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

Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy #11002

Merged
merged 19 commits into from
Jun 16, 2023
Merged

Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy #11002

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
80c4d8c
Rename classes of appTileBodyClass
luixxiul May 23, 2023
43ad673
Apply a common CSS declaration to mx_AppTileBody
luixxiul May 24, 2023
2e0b464
Strictify style rule specificity to avoid visual regressions - mx_App…
luixxiul May 24, 2023
163aa02
Run prettier
luixxiul Jun 1, 2023
9a5b353
Change --normal to --large
luixxiul Jun 3, 2023
80ff00e
Edit and add comments
luixxiul Jun 3, 2023
36b63a6
Merge branch 'develop' into AppTileBody2
luixxiul Jun 5, 2023
688f889
Rename classes of appTileBodyClass
luixxiul May 23, 2023
6190dd0
Apply a common CSS declaration to mx_AppTileBody
luixxiul May 24, 2023
1afbee1
Strictify style rule specificity to avoid visual regressions - mx_App…
luixxiul May 24, 2023
6cfc2cb
Run prettier
luixxiul Jun 1, 2023
52f23d9
Change --normal to --large
luixxiul Jun 3, 2023
49599c9
Edit and add comments
luixxiul Jun 3, 2023
20d565d
Merge branch 'develop' into AppTileBody2
luixxiul Jun 13, 2023
7c2ebdd
Merge branch 'AppTileBody2' of https://github.com/luixxiul/matrix-rea…
luixxiul Jun 13, 2023
c25dd5a
Update a Jest snapshot
luixxiul Jun 13, 2023
42a5247
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Jun 15, 2023
b2e2b07
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Jun 15, 2023
9da564d
Update a Jest snapshot
luixxiul Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 50 additions & 43 deletions res/css/views/rooms/_AppsDrawer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,20 +254,13 @@ limitations under the License.
}
}

.mx_AppTileBody,
.mx_AppTileBody_mini {
width: 100%;
overflow: hidden;
/* Rules added to this selector style appTileBody generally */
.mx_AppTileBody {
/* Apply to every variant of appTileBody */
border-radius: 8px;
height: var(--AppTileBody-height);

iframe {
border: none;
width: 100%;
height: 100%;
}

/* const loadingElement */
/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
.mx_AppTileBody_fadeInSpinner {
/* place spinner and the message at the center of mx_AppTileBody */
height: 100%;
Expand All @@ -279,28 +272,59 @@ limitations under the License.
animation-delay: 500ms;
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
}
}

.mx_AppTileBody {
--AppTileBody-height: 100%;
&.mx_AppTileBody--large,
&.mx_AppTileBody--mini {
width: 100%;
overflow: hidden;
height: var(--AppTileBody-height);

background-color: $widget-body-bg-color;
iframe {
border: none;
width: 100%;
height: 100%;
}
}

iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
&.mx_AppTileBody--large {
--AppTileBody-height: 100%;

background-color: $widget-body-bg-color;

iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
}
}

&.mx_AppTileBody--mini {
--AppTileBody-height: var(--AppTile_mini-height);
}
}

.mx_AppTileBody_mini {
--AppTileBody-height: var(--AppTile_mini-height);
&.mx_AppTileBody--loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 100%;

/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;

iframe {
display: none;
}
}
}

.mx_AppTile .mx_AppTileBody,
.mx_AppTileFullWidth .mx_AppTileBody,
.mx_AppTile_mini .mx_AppTileBody_mini {
/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
so rules to style appTileBody generally should not be included here. */
.mx_AppTile .mx_AppTileBody--large,
.mx_AppTileFullWidth .mx_AppTileBody--large,
.mx_AppTile_mini .mx_AppTileBody--mini {
height: inherit;
flex: 1;
}
Expand All @@ -314,23 +338,6 @@ limitations under the License.
align-items: center;
}

.mx_AppTile_loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 100%;

/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;
border-radius: 8px;

iframe {
display: none;
}
}

@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;
Expand Down
7 changes: 4 additions & 3 deletions src/components/views/elements/AppTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -596,9 +596,10 @@ export default class AppTile extends React.Component<IProps, IState> {
"microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";

const appTileBodyClass = classNames({
mx_AppTileBody: !this.props.miniMode,
mx_AppTileBody_mini: this.props.miniMode,
Comment on lines -599 to -600
Copy link
Contributor Author

@luixxiul luixxiul May 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These have not really been efficient, as it was impossible to specify common declarations to a single selector.

Also, the class name mx_AppTileBody had been misleading as it did not indicate by itself that the style rules added to the selector were in fact not applied to AppTileBody on mini mode.

mx_AppTile_loading: this.state.loading,
"mx_AppTileBody": true,
"mx_AppTileBody--large": !this.props.miniMode,
"mx_AppTileBody--mini": this.props.miniMode,
"mx_AppTileBody--loading": this.state.loading,
});
const appTileBodyStyles: CSSProperties = {};
if (this.props.pointerEvents) {
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
id="1"
>
<div
class="mx_AppTileBody mx_AppTile_loading"
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
>
<div
class="mx_AppTileBody_fadeInSpinner"
Expand Down Expand Up @@ -383,7 +383,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
</span>
</div>
<div
class="mx_AppTileBody mx_AppTile_loading"
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
>
<div
class="mx_AppTileBody_fadeInSpinner"
Expand Down