Basic structure of user settings

pull/1/head
Erik Johnston 2015-07-15 15:04:24 +01:00
parent 844a883ad8
commit dfd54f3b95
5 changed files with 42 additions and 10 deletions

View File

@ -38,7 +38,7 @@ limitations under the License.
height: 100%;
}
.mx_MatrixChat .mx_RoomView {
.mx_MatrixChat .mx_MainView {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
@ -47,7 +47,7 @@ limitations under the License.
background-color: #f3f8fa;
width: 100%;
height: 100%;
height: 100%;
}
.mx_MatrixChat .mx_RightPanel {
@ -60,5 +60,5 @@ limitations under the License.
background-color: #f3f8fa;
-webkit-flex: 0 0 230px;
flex: 0 0 230px;
height: 100%;
height: 100%;
}

View File

@ -19,6 +19,8 @@ limitations under the License.
var React = require('react');
var classNames = require('classnames');
var dis = require("../../../../src/dispatcher");
//var DirectoryMenuController = require("../../../../src/controllers/molecules/DirectoryMenuController");
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
@ -26,6 +28,11 @@ var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
module.exports = React.createClass({
displayName: 'DirectoryMenu',
// mixins: [DirectoryMenuController],
onSettingsClick: function() {
dis.dispatch({action: 'view_user_settings'});
},
render: function() {
return (
<div className="mx_DirectoryMenu">
@ -42,7 +49,7 @@ module.exports = React.createClass({
</div>
<div className="mx_RoomTile_name">Directory</div>
</div>
<div className="mx_RoomTile">
<div className="mx_RoomTile" onClick={this.onSettingsClick}>
<div className="mx_RoomTile_avatar">
<img src="img/settings-big.png" width="42" height="42"/>
</div>

View File

@ -23,6 +23,7 @@ var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
var RoomView = ComponentBroker.get('organisms/RoomView');
var RightPanel = ComponentBroker.get('organisms/RightPanel');
var Login = ComponentBroker.get('templates/Login');
var UserSettings = ComponentBroker.get('organisms/UserSettings');
var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
@ -36,11 +37,24 @@ module.exports = React.createClass({
render: function() {
if (this.state.logged_in && this.state.ready) {
var page_element;
var right_panel = "";
if (this.state.page_type == this.PageTypes.RoomView) {
page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
right_panel = <RightPanel roomId={this.state.currentRoom} />
} else if (this.state.page_type == this.PageTypes.UserSettings) {
page_element = <UserSettings />
}
return (
<div className="mx_MatrixChat">
<LeftPanel selectedRoom={this.state.currentRoom} />
<RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
<RightPanel roomId={this.state.currentRoom} />
<div className="mx_MainView">
{page_element}
</div>
{right_panel}
</div>
);
} else if (this.state.logged_in) {
@ -54,4 +68,3 @@ module.exports = React.createClass({
}
}
});

View File

@ -88,6 +88,7 @@ require('../skins/base/views/templates/Login');
require('../skins/base/views/organisms/Notifier');
require('../skins/base/views/organisms/CreateRoom');
require('../skins/base/views/molecules/UserSelector');
require('../skins/base/views/organisms/UserSettings');
// new for vector
require('../skins/base/views/organisms/LeftPanel');
require('../skins/base/views/organisms/RightPanel');

View File

@ -29,10 +29,16 @@ var ComponentBroker = require('../../ComponentBroker');
var Notifier = ComponentBroker.get('organisms/Notifier');
module.exports = {
PageTypes: {
RoomView: "room_view",
UserSettings: "user_settings",
},
getInitialState: function() {
return {
logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials),
ready: false
ready: false,
page_type: this.PageTypes.RoomView,
};
},
@ -74,7 +80,8 @@ module.exports = {
case 'view_room':
this.focusComposer = true;
this.setState({
currentRoom: payload.room_id
currentRoom: payload.room_id,
page_type: this.PageTypes.RoomView,
});
break;
case 'view_prev_room':
@ -95,6 +102,11 @@ module.exports = {
currentRoom: allRooms[roomIndex].roomId
});
break;
case 'view_user_settings':
this.setState({
page_type: this.PageTypes.UserSettings,
});
break;
}
},
@ -139,4 +151,3 @@ module.exports = {
dis.dispatch({action: 'focus_composer'});
}
};