rework tom's welcome page to fit in slightly better with riot's UI/UX

* moves login button to top-left
* switches from iframe to a request() to load the welcome page to inherit CSS (probably breaks RTS :/)
* namespace CSS
* change the layout a bit.
This commit is contained in:
Matthew Hodgson 2017-05-30 03:58:45 +01:00
parent 1af86405bd
commit 1f4f86b5f8
21 changed files with 548 additions and 238 deletions

View file

@ -21,10 +21,13 @@ var DragDropContext = require('react-dnd').DragDropContext;
var HTML5Backend = require('react-dnd-html5-backend');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
var VectorConferenceHandler = require('../../VectorConferenceHandler');
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
var LeftPanel = React.createClass({
displayName: 'LeftPanel',
@ -96,17 +99,21 @@ var LeftPanel = React.createClass({
render: function() {
var RoomList = sdk.getComponent('rooms.RoomList');
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
var SearchBox = sdk.getComponent('structures.SearchBox');
var collapseButton;
var topBox;
if (MatrixClientPeg.get().isGuest()) {
var LoginBox = sdk.getComponent('structures.LoginBox');
topBox = <LoginBox collapsed={ this.props.collapsed }/>;
}
else {
var SearchBox = sdk.getComponent('structures.SearchBox');
topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
}
var classes = "mx_LeftPanel mx_fadable";
if (this.props.collapsed) {
classes += " collapsed";
}
else {
// Hide the collapse button until we work out how to display it in the new skin
// collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
}
var callPreview;
if (this.state.showCallElement && !this.props.collapsed) {
@ -120,8 +127,7 @@ var LeftPanel = React.createClass({
return (
<aside className={classes} style={{ opacity: this.props.opacity }}>
<SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
{ collapseButton }
{ topBox }
{ callPreview }
<RoomList
selectedRoom={this.props.selectedRoom}