Use flexboxes in AppTile/AppDrawer CSS for automatic resizing

Using flexboxes removes the need for pixel constants, and the app
content now resizes to fill the tiles.

Signed-off-by: Pauli Virtanen <pav@iki.fi>
This commit is contained in:
Pauli Virtanen 2020-04-20 23:05:50 +03:00
parent c19338b1d3
commit 2e7bd2e3f0
2 changed files with 45 additions and 22 deletions

View file

@ -775,14 +775,16 @@ export default class AppTile extends React.Component {
const showMinimiseButton = this.props.showMinimise && this.props.show;
const showMaximiseButton = this.props.showMinimise && !this.props.show;
let appTileClass;
let appTileClasses;
if (this.props.miniMode) {
appTileClass = 'mx_AppTile_mini';
appTileClasses = {mx_AppTile_mini: true};
} else if (this.props.fullWidth) {
appTileClass = 'mx_AppTileFullWidth';
appTileClasses = {mx_AppTileFullWidth: true};
} else {
appTileClass = 'mx_AppTile';
appTileClasses = {mx_AppTile: true};
}
appTileClasses.mx_AppTile_minimised = !this.props.show;
appTileClasses = classNames(appTileClasses);
const menuBarClasses = classNames({
mx_AppTileMenuBar: true,
@ -814,7 +816,7 @@ export default class AppTile extends React.Component {
}
return <React.Fragment>
<div className={appTileClass} id={this.props.app.id}>
<div className={appTileClasses} id={this.props.app.id}>
{ this.props.showMenubar &&
<div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
<span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>