Merge pull request from matrix-org/dbkr/persistent_app_css_fixes

Fix persisent apps being the wrong size
This commit is contained in:
David Baker 2018-07-23 16:05:02 +01:00 committed by GitHub
commit c1891aa005
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 7 deletions
res/css
structures
views/rooms
src/components/views/elements

View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -54,7 +55,7 @@ limitations under the License.
}
.mx_LeftPanel .mx_AppTileFullWidth {
.mx_LeftPanel .mx_AppTile_mini {
height: 132px;
}

View file

@ -61,10 +61,6 @@ limitations under the License.
background-color: $dialog-background-bg-color;
}
.mx_AppTile_persistedWrapper {
height: 280px;
}
.mx_AppTile:last-child {
margin-right: 1px;
}
@ -79,6 +75,22 @@ limitations under the License.
border-radius: 2px;
}
.mx_AppTile_mini {
max-width: 960px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mx_AppTile_persistedWrapper {
height: 280px;
}
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px;
}
.mx_AppTileMenuBar {
margin: 0;
padding: 2px 10px;
@ -131,11 +143,17 @@ limitations under the License.
}
.mx_AppTileBody_mini {
height: 132px;
height: 112px;
width: 100%;
overflow: hidden;
}
.mx_AppTileBody_mini iframe {
border: none;
width: 100%;
height: 100%;
}
.mx_AppTileBody iframe {
width: 100%;
height: 280px;

View file

@ -616,8 +616,17 @@ export default class AppTile extends React.Component {
const reloadWidgetIcon = 'img/button-refresh.svg';
const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
let appTileClass;
if (this.props.miniMode) {
appTileClass = 'mx_AppTile_mini';
} else if (this.props.fullWidth) {
appTileClass = 'mx_AppTileFullWidth';
} else {
appTileClass = 'mx_AppTile';
}
return (
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
<div className={appTileClass} id={this.props.id}>
{ this.props.showMenubar &&
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
<span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>