OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants (#10856) 

* Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants

* Sort style blocks

* Feedback
pull/28788/head^2
Suguru Hirahara 2023-05-15 09:05:14 +00:00 committed by GitHub
parent 857b3085e6
commit fb3f20f70c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
res/css/views/rooms/_AppsDrawer.pcss
View File

@ -29,10 +29,6 @@ limitations under the License.
overflow: hidden; overflow: hidden;
flex-grow: 1; flex-grow: 1;
&.mx_AppsDrawer_maximise {
margin-bottom: var(--container-gap-width);
}
.mx_AppsContainer_resizerHandleContainer { .mx_AppsContainer_resizerHandleContainer {
width: 100%; width: 100%;
height: 10px; height: 10px;
@ -96,7 +92,15 @@ limitations under the License.
min-width: var(--minWidth); min-width: var(--minWidth);
} }
&.mx_AppsDrawer_2apps .mx_AppTile { &.mx_AppsDrawer--maximised {
margin-bottom: var(--container-gap-width);
}
&.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}
&.mx_AppsDrawer--2apps .mx_AppTile {
width: 50%; width: 50%;
&:nth-child(3) { &:nth-child(3) {
@ -105,7 +109,7 @@ limitations under the License.
min-width: var(--minWidth) !important; min-width: var(--minWidth) !important;
} }
} }
&.mx_AppsDrawer_3apps .mx_AppTile { &.mx_AppsDrawer--3apps .mx_AppTile {
width: 33%; width: 33%;
&:nth-child(3) { &:nth-child(3) {
@ -419,7 +423,3 @@ limitations under the License.
opacity: 1; opacity: 1;
} }
} }
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}

14
src/components/views/rooms/AppsDrawer.tsx
View File

@ -114,11 +114,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
}; };
const collapseConfig = { const collapseConfig = {
onResizeStart: () => { onResizeStart: () => {
this.resizeContainer?.classList.add("mx_AppsDrawer_resizing"); this.resizeContainer?.classList.add("mx_AppsDrawer--resizing");
this.setState({ resizingHorizontal: true }); this.setState({ resizingHorizontal: true });
}, },
onResizeStop: () => { onResizeStop: () => {
this.resizeContainer?.classList.remove("mx_AppsDrawer_resizing"); this.resizeContainer?.classList.remove("mx_AppsDrawer--resizing");
WidgetLayoutStore.instance.setResizerDistributions( WidgetLayoutStore.instance.setResizerDistributions(
this.props.room, this.props.room,
Container.Top, Container.Top,
@ -254,11 +254,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
} }
const classes = classNames({ const classes = classNames({
mx_AppsDrawer: true, "mx_AppsDrawer": true,
mx_AppsDrawer_maximise: widgetIsMaxmised, "mx_AppsDrawer--maximised": widgetIsMaxmised,
mx_AppsDrawer_resizing: this.state.resizing, "mx_AppsDrawer--resizing": this.state.resizing,
mx_AppsDrawer_2apps: apps.length === 2, "mx_AppsDrawer--2apps": apps.length === 2,
mx_AppsDrawer_3apps: apps.length === 3, "mx_AppsDrawer--3apps": apps.length === 3,
}); });
const appContainers = ( const appContainers = (
<div className="mx_AppsContainer" ref={this.collectResizer}> <div className="mx_AppsContainer" ref={this.collectResizer}>