From dcecdc826013ef5dc23e00b77db97be7c69c9d7e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 20 Jul 2015 12:09:24 -0700 Subject: [PATCH 1/6] lipstick for hangup button and typing notifs --- skins/base/css/molecules/MemberInfo.css | 2 ++ skins/base/css/molecules/RoomHeader.css | 30 +++++++++++++++++++---- skins/base/css/organisms/RoomView.css | 14 +++++++++++ skins/base/img/typing.png | Bin 0 -> 236 bytes skins/base/views/molecules/RoomHeader.js | 6 ++--- skins/base/views/organisms/RoomView.js | 1 + 6 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 skins/base/img/typing.png diff --git a/skins/base/css/molecules/MemberInfo.css b/skins/base/css/molecules/MemberInfo.css index db41c51e50..144212d766 100644 --- a/skins/base/css/molecules/MemberInfo.css +++ b/skins/base/css/molecules/MemberInfo.css @@ -55,6 +55,8 @@ limitations under the License. .mx_MemberInfo_field { padding: 6px; + overflow: hidden; + text-overflow: ellipsis; } .mx_MemberInfo_button { diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css index c107e18157..e13a21df6f 100644 --- a/skins/base/css/molecules/RoomHeader.css +++ b/skins/base/css/molecules/RoomHeader.css @@ -43,6 +43,26 @@ limitations under the License. width: 100%; } +.mx_RoomHeader_hangupButton { + height: 48px; + margin-top: 18px; + background-color: #80cef4; + border-radius: 48px; + margin-right: 8px; + color: #fff; + line-height: 48px; + text-align: center; + + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + -webkit-flex: 0 0 90px; + flex: 0 0 90px; +} + .mx_RoomHeader_rightRow { height: 48px; margin-top: 18px; @@ -50,11 +70,11 @@ limitations under the License. border-radius: 48px; border: 1px solid #a9dbf4; - -webkit-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; -webkit-flex: 0 0 200px; flex: 0 0 200px; diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 9341f21335..07eeebf1b7 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -105,6 +105,20 @@ limitations under the License. border-top: 1px solid #a8dbf3; } +.mx_RoomView_typingBar { + margin-top: 17px; + margin-left: 56px; + color: #818794; +} + +.mx_RoomView_typingBar img { + padding-left: 12px; + padding-right: 12px; + margin-left: -64px; + margin-top: -7px; + float: left; +} + .mx_RoomView .mx_MessageComposer { -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; diff --git a/skins/base/img/typing.png b/skins/base/img/typing.png new file mode 100644 index 0000000000000000000000000000000000000000..066a0ce8fdad969d262f00d0434d3a4c8a4ee6a8 GIT binary patch literal 236 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*D5X`aE46Ln>}1{rUgj{%``D4^Oj9k5$2y#>IRxr4LpxyUSX< zIuOX-XH}45J)t$C^=rCarIC^Gd8Up3|NotRE#=gH*~oqGzPL|%BJKNQTkzFJg~O7P z5-A5{I$SqhnIiu$Q$R%bz`Lu$25g&F>h>EybE_`JFd1T*0xN^U0frATPF@pQo*f6e OjKR~@&t;ucLK6TpLRvfk literal 0 HcmV?d00001 diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js index a67699772c..6958333bfc 100644 --- a/skins/base/views/molecules/RoomHeader.js +++ b/skins/base/views/molecules/RoomHeader.js @@ -44,8 +44,8 @@ module.exports = React.createClass({ case "ringback": case "connected": callButtons = ( -
- BYEBYE +
+ End call
); break; @@ -66,6 +66,7 @@ module.exports = React.createClass({ { topic }
+ {callButtons}
@@ -73,7 +74,6 @@ module.exports = React.createClass({
- {callButtons}
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index 9130dcc047..c20f9a8c58 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -97,6 +97,7 @@ module.exports = React.createClass({ if (typingString) { statusBar = (
+ {typingString}
); From 36b1280f0c0a4a9c06b1b3f11c261275011d22d3 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 20 Jul 2015 12:20:17 -0700 Subject: [PATCH 2/6] Bookmarkable room URLs --- examples/trivial/index.js | 8 ++++++++ src/controllers/pages/MatrixChat.js | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/examples/trivial/index.js b/examples/trivial/index.js index 2be9054954..b601cfce6b 100644 --- a/examples/trivial/index.js +++ b/examples/trivial/index.js @@ -40,9 +40,17 @@ function routeUrl(location) { } } window.matrixChat.showScreen('register', params); + } else { + window.matrixChat.showScreen(location.hash.substring(2)); } } +function onHashChange(ev) { + routeUrl(window.location); +} + +window.addEventListener('hashchange', onHashChange); + var loaded = false; window.onload = function() { diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 1e38a2150c..6ff62c9692 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -127,6 +127,7 @@ module.exports = { currentRoom: payload.room_id, page_type: this.PageTypes.RoomView, }); + this.notifyNewScreen('room/'+payload.room_id); break; case 'view_prev_room': roomIndexDelta = -1; @@ -179,6 +180,7 @@ module.exports = { )[0].roomId; } self.setState({ready: true, currentRoom: firstRoom}); + self.notifyNewScreen('room/'+firstRoom); dis.dispatch({action: 'focus_composer'}); }); cli.on('Call.incoming', function(call) { @@ -222,6 +224,12 @@ module.exports = { action: 'start_login', params: params }); + } else if (screen.indexOf('room/') == 0) { + var roomId = screen.split('/')[1]; + dis.dispatch({ + action: 'view_room', + room_id: roomId + }); } }, From e0673eee29375952a4d7cc8f9c5212664585ce06 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 20 Jul 2015 14:09:41 -0700 Subject: [PATCH 3/6] Don't go & load the first room if we've already been told to load a different one. --- src/controllers/pages/MatrixChat.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 6ff62c9692..21c40467ac 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -173,14 +173,18 @@ module.exports = { var cli = MatrixClientPeg.get(); var self = this; cli.on('syncComplete', function() { - var firstRoom = null; - if (cli.getRooms() && cli.getRooms().length) { - firstRoom = RoomListSorter.mostRecentActivityFirst( - cli.getRooms() - )[0].roomId; + if (!self.state.currentRoom) { + var firstRoom = null; + if (cli.getRooms() && cli.getRooms().length) { + firstRoom = RoomListSorter.mostRecentActivityFirst( + cli.getRooms() + )[0].roomId; + } + self.setState({ready: true, currentRoom: firstRoom}); + self.notifyNewScreen('room/'+firstRoom); + } else { + self.setState({ready: true}); } - self.setState({ready: true, currentRoom: firstRoom}); - self.notifyNewScreen('room/'+firstRoom); dis.dispatch({action: 'focus_composer'}); }); cli.on('Call.incoming', function(call) { From fe71f69f0afff80643242551469266ca1dc357a9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 20 Jul 2015 16:31:11 -0700 Subject: [PATCH 4/6] rename EditableText's placeHolder parameter to be 'label' to avoid colliding with the HTML5 placeholder parameter --- skins/base/css/molecules/MemberTile.css | 19 +++++++++++ skins/base/views/atoms/EditableText.js | 5 +-- skins/base/views/molecules/MemberTile.js | 3 +- skins/base/views/organisms/MemberList.js | 36 ++++++++++++++++---- skins/base/views/organisms/UserSettings.js | 2 +- src/controllers/atoms/EditableText.js | 5 ++- src/controllers/molecules/MessageComposer.js | 4 +-- src/controllers/organisms/MemberList.js | 2 +- 8 files changed, 60 insertions(+), 16 deletions(-) diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index 2f735f624b..af78ce06b8 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -17,6 +17,7 @@ limitations under the License. .mx_MemberTile { cursor: pointer; display: table-row; + height: 49px; } .mx_MemberTile_avatar { @@ -36,6 +37,24 @@ limitations under the License. background-color: #dbdbdb; } +.mx_MemberTile_inviteEditing .mx_MemberTile_avatar { + display: none; +} + +.mx_MemberTile_inviteEditing .mx_MemberTile_name { + position: absolute; + width: 200px; +} + +.mx_MemberTile_inviteEditing .mx_MemberTile_name input { + border-radius: 3px; + border: 1px solid #c7c7c7; + font-weight: 300; + font-size: 14px; + padding: 9px; + margin-top: 6px; +} + .mx_MemberTile_power { z-index: 10; position: absolute; diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js index a450874468..38aa5c8d87 100644 --- a/skins/base/views/atoms/EditableText.js +++ b/skins/base/views/atoms/EditableText.js @@ -33,6 +33,7 @@ module.exports = React.createClass({ }, onClickDiv: function() { + console.log("onClickDiv triggered"); this.setState({ phase: this.Phases.Edit, }) @@ -57,12 +58,12 @@ module.exports = React.createClass({ if (this.state.value) { editable_el =
{this.state.value}
; } else { - editable_el =
{this.props.placeHolder}
; + editable_el =
{this.props.label}
; } } else if (this.state.phase == this.Phases.Edit) { editable_el = (
- +
); } diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 1286173d38..8dd3f00ab1 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -59,8 +59,7 @@ module.exports = React.createClass({ mainClassName += presenceClass; return ( -
+
- ); - } + // if (this.state.inviting) { + // return ( + //
+ // ); + // } + + var classes = classNames({ + mx_MemberTile: true, + mx_MemberTile_inviteEditing: this.state.editing, + }); + + console.log("rendering inviteTile, with phase as " + (this.refs.invite ? this.refs.invite.state.phase : "unknown")); + return ( -
+
- +
); diff --git a/skins/base/views/organisms/UserSettings.js b/skins/base/views/organisms/UserSettings.js index 9afa3c0360..7a57ec768e 100644 --- a/skins/base/views/organisms/UserSettings.js +++ b/skins/base/views/organisms/UserSettings.js @@ -73,7 +73,7 @@ module.exports = React.createClass({
- +
Edit
diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js index 15ee58a7f3..5ea4ce8c4a 100644 --- a/src/controllers/atoms/EditableText.js +++ b/src/controllers/atoms/EditableText.js @@ -22,6 +22,7 @@ module.exports = { propTypes: { onValueChanged: React.PropTypes.func, initialValue: React.PropTypes.string, + label: React.PropTypes.string, placeHolder: React.PropTypes.string, }, @@ -34,7 +35,8 @@ module.exports = { return { onValueChanged: function() {}, initialValue: '', - placeHolder: 'Click to set', + label: 'Click to set', + placeholder: '', }; }, @@ -77,6 +79,7 @@ module.exports = { this.setState({ phase: this.Phases.Display, }); + this.onValueChanged(false); }, onValueChanged: function(shouldSubmit) { diff --git a/src/controllers/molecules/MessageComposer.js b/src/controllers/molecules/MessageComposer.js index a9de008d6f..2ece5636ad 100644 --- a/src/controllers/molecules/MessageComposer.js +++ b/src/controllers/molecules/MessageComposer.js @@ -200,7 +200,7 @@ module.exports = { }, function(err) { console.error("Command failure: %s", err); Modal.createDialog(ErrorDialog, { - title: "Server Error", + title: "Server error", description: err.message }); }); @@ -208,7 +208,7 @@ module.exports = { else if (cmd.error) { console.error(cmd.error); Modal.createDialog(ErrorDialog, { - title: "Command Error", + title: "Command error", description: cmd.error }); } diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js index 0695270066..29d4f20a60 100644 --- a/src/controllers/organisms/MemberList.js +++ b/src/controllers/organisms/MemberList.js @@ -101,7 +101,7 @@ module.exports = { }, function(err) { console.error("Failed to invite: %s", JSON.stringify(err)); Modal.createDialog(ErrorDialog, { - title: "Invite Server Error", + title: "Server error whilst inviting", description: err.message }); self.setState({ From 12c824323d2a1ee664268b51f8e5a088aa72f566 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 20 Jul 2015 20:11:24 -0700 Subject: [PATCH 5/6] rename DirectoryMenu as BottomLeftMenu and implement a really really really basic RoomDirectory --- examples/trivial/fonts | 1 + skins/base/css/molecules/RoomHeader.css | 9 ++ skins/base/css/organisms/LeftPanel.css | 8 +- skins/base/css/organisms/RoomDirectory.css | 40 ++++++ .../{DirectoryMenu.js => BottomLeftMenu.js} | 16 +-- skins/base/views/molecules/RoomHeader.js | 48 ++++--- skins/base/views/organisms/LeftPanel.js | 4 +- skins/base/views/organisms/RightPanel.js | 45 +++++- skins/base/views/organisms/RoomDirectory.js | 130 ++++++++++++++++++ skins/base/views/pages/MatrixChat.js | 7 + src/ComponentBroker.js | 3 +- src/controllers/pages/MatrixChat.js | 8 +- 12 files changed, 280 insertions(+), 39 deletions(-) create mode 120000 examples/trivial/fonts create mode 100644 skins/base/css/organisms/RoomDirectory.css rename skins/base/views/molecules/{DirectoryMenu.js => BottomLeftMenu.js} (83%) create mode 100644 skins/base/views/organisms/RoomDirectory.js diff --git a/examples/trivial/fonts b/examples/trivial/fonts new file mode 120000 index 0000000000..27f04cad54 --- /dev/null +++ b/examples/trivial/fonts @@ -0,0 +1 @@ +../../skins/base/fonts/ \ No newline at end of file diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css index e13a21df6f..6774387726 100644 --- a/skins/base/css/molecules/RoomHeader.css +++ b/skins/base/css/molecules/RoomHeader.css @@ -86,6 +86,15 @@ limitations under the License. vertical-align: middle; } +.mx_RoomHeader_simpleHeader { + line-height: 88px; + color: #80cef4; + font-weight: 400; + font-size: 20px; + overflow: scroll; + text-overflow: ellipsis; +} + .mx_RoomHeader_name { vertical-align: middle; height: 28px; diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css index ac10942d2a..bfc4302655 100644 --- a/skins/base/css/organisms/LeftPanel.css +++ b/skins/base/css/organisms/LeftPanel.css @@ -43,7 +43,7 @@ limitations under the License. overflow-y: scroll; } -.mx_LeftPanel .mx_DirectoryMenu { +.mx_LeftPanel .mx_BottomLeftMenu { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; @@ -56,15 +56,15 @@ limitations under the License. border-top: 1px solid #f3f8fa; } -.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile { +.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile { color: #378bb4; } -.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile_avatar { +.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar { padding-left: 14px; } -.mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options { +.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { margin-top: 12px; width: 100%; } \ No newline at end of file diff --git a/skins/base/css/organisms/RoomDirectory.css b/skins/base/css/organisms/RoomDirectory.css new file mode 100644 index 0000000000..9ca7811f21 --- /dev/null +++ b/skins/base/css/organisms/RoomDirectory.css @@ -0,0 +1,40 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoomDirectory { + max-width: 720px; + margin: auto; +} + +.mx_RoomDirectory_input { + margin: auto; + border-radius: 3px; + border: 1px solid #c7c7c7; + font-weight: 300; + font-size: 14px; + padding: 9px; + margin-top: 12px; + margin-bottom: 12px; +} + +.mx_RoomDirectory_table { + width: 100%; +} + +.mx_RoomDirectory_table td, +.mx_RoomDirectory_table th, { + padding: 6px; +} \ No newline at end of file diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/BottomLeftMenu.js similarity index 83% rename from skins/base/views/molecules/DirectoryMenu.js rename to skins/base/views/molecules/BottomLeftMenu.js index 8ffb418014..d2340d7bfa 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/BottomLeftMenu.js @@ -21,34 +21,34 @@ var classNames = require('classnames'); var dis = require("../../../../src/dispatcher"); -//var DirectoryMenuController = require("../../../../src/controllers/molecules/DirectoryMenuController"); - var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); module.exports = React.createClass({ - displayName: 'DirectoryMenu', - // mixins: [DirectoryMenuController], + displayName: 'BottomLeftMenu', - // FIXME: should these onClicks be in the controller instead? onSettingsClick: function() { dis.dispatch({action: 'view_user_settings'}); }, + onRoomDirectoryClick: function() { + dis.dispatch({action: 'view_room_directory'}); + }, + onCreateRoomClick: function() { dis.dispatch({action: 'view_create_room'}); }, render: function() { return ( -
-
+
+
Create new room
-
+
diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js index 6958333bfc..22e05868a9 100644 --- a/skins/base/views/molecules/RoomHeader.js +++ b/skins/base/views/molecules/RoomHeader.js @@ -35,25 +35,34 @@ module.exports = React.createClass({ render: function() { - var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); - topic = topic ?
{ topic.getContent().topic }
: null; - - var callButtons; - if (this.state) { - switch (this.state.call_state) { - case "ringback": - case "connected": - callButtons = ( -
- End call -
- ); - break; - } + var header; + if (this.props.simpleHeader) { + header = +
+
+ { this.props.simpleHeader } +
+
} + else { + var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); + topic = topic ?
{ topic.getContent().topic }
: null; - return ( -
+ var callButtons; + if (this.state) { + switch (this.state.call_state) { + case "ringback": + case "connected": + callButtons = ( +
+ End call +
+ ); + break; + } + } + + header =
@@ -82,6 +91,11 @@ module.exports = React.createClass({
+ } + + return ( +
+ { header }
); }, diff --git a/skins/base/views/organisms/LeftPanel.js b/skins/base/views/organisms/LeftPanel.js index 252a5d064d..165759109c 100644 --- a/skins/base/views/organisms/LeftPanel.js +++ b/skins/base/views/organisms/LeftPanel.js @@ -20,7 +20,7 @@ var React = require('react'); var ComponentBroker = require('../../../../src/ComponentBroker'); var RoomList = ComponentBroker.get('organisms/RoomList'); -var DirectoryMenu = ComponentBroker.get('molecules/DirectoryMenu'); +var BottomLeftMenu = ComponentBroker.get('molecules/BottomLeftMenu'); var IncomingCallBox = ComponentBroker.get('molecules/voip/IncomingCallBox'); var RoomCreate = ComponentBroker.get('molecules/RoomCreate'); @@ -33,7 +33,7 @@ module.exports = React.createClass({ < - +
); } diff --git a/skins/base/views/organisms/RightPanel.js b/skins/base/views/organisms/RightPanel.js index e1634adc1e..5b6477a0d0 100644 --- a/skins/base/views/organisms/RightPanel.js +++ b/skins/base/views/organisms/RightPanel.js @@ -24,20 +24,53 @@ var MemberList = ComponentBroker.get('organisms/MemberList'); module.exports = React.createClass({ displayName: 'RightPanel', + Phase : { + Blank: 'Blank', + None: 'None', + MemberList: 'MemberList', + FileList: 'FileList', + }, + + getInitialState: function() { + return { + phase : this.Phase.None + } + }, + + onMemberListButtonClick: function() { + if (this.state.phase == this.Phase.None) { + this.setState({ phase: this.Phase.MemberList }); + } + else { + this.setState({ phase: this.Phase.None }); + } + }, + render: function() { - return ( -
-
+ var buttonGroup; + var panel; + if (this.props.roomId) { + buttonGroup =
Files
-
+
Members
-
+
; + + if (this.state.phase == this.Phase.MemberList) { + panel = + } + } + + return ( +
+
+ { buttonGroup }
- + { panel }
); } diff --git a/skins/base/views/organisms/RoomDirectory.js b/skins/base/views/organisms/RoomDirectory.js new file mode 100644 index 0000000000..7ffb4977ad --- /dev/null +++ b/skins/base/views/organisms/RoomDirectory.js @@ -0,0 +1,130 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); + +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); +var Modal = require("../../../../src/Modal"); +var ComponentBroker = require('../../../../src/ComponentBroker'); +var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog"); +var RoomHeader = ComponentBroker.get('molecules/RoomHeader'); +var dis = require("../../../../src/dispatcher"); + + +module.exports = React.createClass({ + displayName: 'RoomDirectory', + + getInitialState: function() { + return { + publicRooms: [], + roomAlias: '', + } + }, + + componentDidMount: function() { + var self = this; + MatrixClientPeg.get().publicRooms(function (err, data) { + if (err) { + console.error("Failed to get publicRooms: %s", JSON.stringify(err)); + Modal.createDialog(ErrorDialog, { + title: "Failed to get public room list", + description: err.message + }); + } + else { + self.setState({ + publicRooms: data.chunk + }); + self.forceUpdate(); + } + }); + }, + + joinRoom: function(roomId) { + // XXX: check that JS SDK suppresses duplicate attempts to join the same room + MatrixClientPeg.get().joinRoom(roomId).done(function() { + dis.dispatch({ + action: 'view_room', + room_id: roomId + }); + }, function(err) { + console.error("Failed to join room: %s", JSON.stringify(err)); + Modal.createDialog(ErrorDialog, { + title: "Failed to join room", + description: err.message + }); + }); + }, + + getRows: function(filter) { + if (!this.state.publicRooms) return []; + + var rooms = this.state.publicRooms.filter(function(a) { + // FIXME: if incrementally typing, keep narrowing down the search set + return (a.aliases[0].search(filter) >= 0); + }).sort(function(a,b) { + return a.num_joined_members > b.num_joined_members; + }); + var rows = []; + var self = this; + for (var i = 0; i < rooms.length; i++) { + var name = rooms[i].name; + if (!name) { + if (rooms[i].aliases[0]) name = rooms[i].aliases[0] + } + else { + if (rooms[i].aliases[0]) name += " (" + rooms[i].aliases[0] + ")"; + } + rows.unshift( + + { name } + { rooms[i].topic } + { rooms[i].num_joined_members } + + ); + } + return rows; + }, + + onKeyUp: function(ev) { + this.forceUpdate(); + this.setState({ roomAlias : this.refs.roomAlias.getDOMNode().value }) + if (ev.key == "Enter") { + this.joinRoom(this.refs.roomAlias.getDOMNode().value); + } + if (ev.key == "Down") { + + } + }, + + render: function() { + return ( +
+ +
+ + + + { this.getRows(this.state.roomAlias) } +
RoomTopicUsers
+
+
+ ); + } +}); + diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 85a29264b3..73af508243 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -26,6 +26,7 @@ var Login = ComponentBroker.get('templates/Login'); 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 MatrixChatController = require("../../../../src/controllers/pages/MatrixChat"); @@ -59,9 +60,15 @@ module.exports = React.createClass({ break; case this.PageTypes.UserSettings: page_element = + right_panel = break; case this.PageTypes.CreateRoom: page_element = + right_panel = + break; + case this.PageTypes.RoomDirectory: + page_element = + right_panel = break; } diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index ac82a906b9..49fb487b7b 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -96,9 +96,10 @@ require('../skins/base/views/molecules/ChangePassword'); require('../skins/base/views/organisms/LeftPanel'); require('../skins/base/views/organisms/RightPanel'); require('../skins/base/views/organisms/LogoutPrompt'); +require('../skins/base/views/organisms/RoomDirectory'); require('../skins/base/views/molecules/RoomCreate'); require('../skins/base/views/molecules/RoomDropTarget'); -require('../skins/base/views/molecules/DirectoryMenu'); +require('../skins/base/views/molecules/BottomLeftMenu'); require('../skins/base/views/molecules/DateSeparator'); require('../skins/base/views/atoms/voip/VideoFeed'); require('../skins/base/views/molecules/voip/VideoView'); diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 21c40467ac..30135a2b87 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -33,6 +33,7 @@ module.exports = { RoomView: "room_view", UserSettings: "user_settings", CreateRoom: "create_room", + RoomDirectory: "room_directory", }, AuxPanel: { @@ -43,7 +44,7 @@ module.exports = { return { logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials), ready: false, - page_type: this.PageTypes.RoomView, + page_type: MatrixClientPeg.get().getRooms().length ? this.PageTypes.RoomView : this.PageTypes.RoomDirectory, aux_panel: null, }; }, @@ -157,6 +158,11 @@ module.exports = { page_type: this.PageTypes.CreateRoom, }); break; + case 'view_room_directory': + this.setState({ + page_type: this.PageTypes.RoomDirectory, + }); + break; } }, From 3657029fc7bf0f4f81c702ce37669c1afb04ef8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 20 Jul 2015 22:18:29 -0700 Subject: [PATCH 6/6] apply opacity only to the subelements to avoid breaking hoverover on yosemite --- skins/base/css/molecules/MemberTile.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index af78ce06b8..d47768f390 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -71,10 +71,14 @@ limitations under the License. text-overflow: ellipsis; } -.mx_MemberTile_unavailable { +.mx_MemberTile_unavailable .mx_MemberTile_avatar, +.mx_MemberTile_unavailable .mx_MemberTile_name +{ opacity: 0.75; } -.mx_MemberTile_offline { +.mx_MemberTile_offline .mx_MemberTile_avatar, +.mx_MemberTile_offline .mx_MemberTile_name +{ opacity: 0.5; } \ No newline at end of file