vicious rewrite of the CSS to support the notifications toolbar, removing all height: 100%'s and letting the flexbox stuff calculate auto-height instead. may have slowed down the rendering, especially when the toolbar is visible

This commit is contained in:
Matthew Hodgson 2015-07-21 15:01:05 -07:00
parent e03809b224
commit aaa96f1ac1
9 changed files with 102 additions and 31 deletions

View File

@ -15,10 +15,14 @@ limitations under the License.
*/
.mx_MatrixToolbar {
width: 100%;
text-align: center;
height: 25px;
background-color: #a9dbf4;
border-bottom: 1px solid #000;
background-color: #ff0064;
color: #fff;
font-weight: bold;
padding: 6px;
z-index: 50;
}
.mx_MatrixToolbar button {
margin-left: 12px;
}

View File

@ -37,12 +37,15 @@ limitations under the License.
background-color: #dbdbdb;
}
.mx_MemberTile_inviteEditing {
display: initial ! important;
}
.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
display: none;
}
.mx_MemberTile_inviteEditing .mx_MemberTile_name {
position: absolute;
width: 200px;
}

View File

@ -15,8 +15,9 @@ limitations under the License.
*/
.mx_RoomDirectory {
max-width: 720px;
margin: auto;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.mx_RoomDirectory_input {

View File

@ -24,7 +24,7 @@ limitations under the License.
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
-webkit-flex-direction: column;
}

View File

@ -15,6 +15,7 @@ limitations under the License.
*/
.mx_UserSettings {
max-width: 720px;
margin: auto;
width: 720px;
margin-left: auto;
margin-right: auto;
}

View File

@ -14,8 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
height: 21px;
}
.mx_MatrixChat_toolbarShowing {
height: auto;
}
.mx_MatrixChat {
position: relative;
width: 100%;
height: 100%;
@ -24,6 +51,15 @@ limitations under the License.
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 1;
flex: 1;
}
.mx_MatrixChat .mx_LeftPanel {
@ -35,7 +71,6 @@ limitations under the License.
-webkit-flex: 0 0 230px;
flex: 0 0 230px;
height: 100%;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
@ -49,7 +84,20 @@ limitations under the License.
padding-right: 12px;
background-color: #f3f8fa;
width: 100%;
height: 100%;
/* XXX: Hack: apparently if you try to nest a flex-box
* within a non-flex-box within a flex-box, the height
* of the innermost element gets miscalculated if the
* parents are both auto.
* Ideally we'd launch straight into the RoomView at this
* point, but instead we fudge it and make the middlePanel
* flex itself.
*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.mx_MatrixChat .mx_RightPanel {
@ -62,5 +110,5 @@ limitations under the License.
background-color: #f3f8fa;
-webkit-flex: 0 0 230px;
flex: 0 0 230px;
height: 100%;
height: 100%;
}

View File

@ -31,8 +31,6 @@ var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
var CallView = ComponentBroker.get("molecules/voip/CallView");
var RoomSettings = ComponentBroker.get("molecules/RoomSettings");
var Notifier = ComponentBroker.get('organisms/Notifier');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var RoomViewController = require("../../../../src/controllers/organisms/RoomView");
var Loader = require("react-loader");
@ -143,14 +141,8 @@ module.exports = React.createClass({
roomEdit = <Loader/>;
}
var top_bar;
if (!Notifier.isEnabled()) {
top_bar = <MatrixToolbar />;
}
return (
<div className="mx_RoomView">
{top_bar}
<RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick}/>
<div className="mx_RoomView_auxPanel">

View File

@ -27,11 +27,14 @@ var UserSettings = ComponentBroker.get('organisms/UserSettings');
var Register = ComponentBroker.get('templates/Register');
var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Notifier = ComponentBroker.get('organisms/Notifier');
var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
// should be atomised
var Loader = require("react-loader");
var classNames = require("classnames");
var dis = require("../../../../src/dispatcher");
@ -72,15 +75,31 @@ module.exports = React.createClass({
break;
}
return (
<div className="mx_MatrixChat">
<LeftPanel selectedRoom={this.state.currentRoom} />
<div className="mx_MatrixChat_middlePanel">
{page_element}
</div>
{right_panel}
</div>
);
if (!Notifier.isEnabled()) {
return (
<div className="mx_MatrixChat_wrapper">
<MatrixToolbar />
<div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
<LeftPanel selectedRoom={this.state.currentRoom} />
<div className="mx_MatrixChat_middlePanel">
{page_element}
</div>
{right_panel}
</div>
</div>
);
}
else {
return (
<div className="mx_MatrixChat">
<LeftPanel selectedRoom={this.state.currentRoom} />
<div className="mx_MatrixChat_middlePanel">
{page_element}
</div>
{right_panel}
</div>
);
}
} else if (this.state.logged_in) {
return (
<Loader />

View File

@ -169,6 +169,9 @@ module.exports = {
page_type: this.PageTypes.RoomDirectory,
});
break;
case 'notifier_enabled':
this.forceUpdate();
break;
}
},