From dfd54f3b95db9e70b9ad9c98c6ecb3d04e8f1159 Mon Sep 17 00:00:00 2001 From: Erik Johnston <erikj@matrix.org> Date: Wed, 15 Jul 2015 15:04:24 +0100 Subject: [PATCH] Basic structure of user settings --- skins/base/css/pages/MatrixChat.css | 6 +++--- skins/base/views/molecules/DirectoryMenu.js | 9 ++++++++- skins/base/views/pages/MatrixChat.js | 19 ++++++++++++++++--- src/ComponentBroker.js | 1 + src/controllers/pages/MatrixChat.js | 17 ++++++++++++++--- 5 files changed, 42 insertions(+), 10 deletions(-) diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index 5ff442cf..b0f30c11 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -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%; } diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index b6c0f808..f3b9e592 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -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> diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 11e2be9c..ecfbd96f 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -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({ } } }); - diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 6636ada1..d57ee34b 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -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'); diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 717f91e7..d0afc3ae 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -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'}); } }; -