mirror of https://github.com/vector-im/riot-web
Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants (#10856)
* Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants * Sort style blocks * Feedbackpull/28217/head
parent
857b3085e6
commit
fb3f20f70c
|
@ -29,10 +29,6 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
&.mx_AppsDrawer_maximise {
|
||||
margin-bottom: var(--container-gap-width);
|
||||
}
|
||||
|
||||
.mx_AppsContainer_resizerHandleContainer {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
|
@ -96,7 +92,15 @@ limitations under the License.
|
|||
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%;
|
||||
|
||||
&:nth-child(3) {
|
||||
|
@ -105,7 +109,7 @@ limitations under the License.
|
|||
min-width: var(--minWidth) !important;
|
||||
}
|
||||
}
|
||||
&.mx_AppsDrawer_3apps .mx_AppTile {
|
||||
&.mx_AppsDrawer--3apps .mx_AppTile {
|
||||
width: 33%;
|
||||
|
||||
&:nth-child(3) {
|
||||
|
@ -419,7 +423,3 @@ limitations under the License.
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
@ -114,11 +114,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
|
|||
};
|
||||
const collapseConfig = {
|
||||
onResizeStart: () => {
|
||||
this.resizeContainer?.classList.add("mx_AppsDrawer_resizing");
|
||||
this.resizeContainer?.classList.add("mx_AppsDrawer--resizing");
|
||||
this.setState({ resizingHorizontal: true });
|
||||
},
|
||||
onResizeStop: () => {
|
||||
this.resizeContainer?.classList.remove("mx_AppsDrawer_resizing");
|
||||
this.resizeContainer?.classList.remove("mx_AppsDrawer--resizing");
|
||||
WidgetLayoutStore.instance.setResizerDistributions(
|
||||
this.props.room,
|
||||
Container.Top,
|
||||
|
@ -254,11 +254,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
const classes = classNames({
|
||||
mx_AppsDrawer: true,
|
||||
mx_AppsDrawer_maximise: widgetIsMaxmised,
|
||||
mx_AppsDrawer_resizing: this.state.resizing,
|
||||
mx_AppsDrawer_2apps: apps.length === 2,
|
||||
mx_AppsDrawer_3apps: apps.length === 3,
|
||||
"mx_AppsDrawer": true,
|
||||
"mx_AppsDrawer--maximised": widgetIsMaxmised,
|
||||
"mx_AppsDrawer--resizing": this.state.resizing,
|
||||
"mx_AppsDrawer--2apps": apps.length === 2,
|
||||
"mx_AppsDrawer--3apps": apps.length === 3,
|
||||
});
|
||||
const appContainers = (
|
||||
<div className="mx_AppsContainer" ref={this.collectResizer}>
|
||||
|
|
Loading…
Reference in New Issue