From 1a90a2c42656ee2ecebd06c67e8459a893b72ebc Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 17 Dec 2015 02:53:53 +0000 Subject: [PATCH 1/9] position the inbound call box correctly, and fix various issues with when the video preview and callview are shown --- src/components/structures/LeftPanel.js | 6 ++---- src/components/structures/RoomSubList.js | 7 +++++-- .../vector/css/molecules/voip/IncomingCallbox.css | 13 +++++++------ vector/index.html | 12 ++++++++---- 4 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index aaab8084..1bc08cbe 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -62,7 +62,7 @@ var LeftPanel = React.createClass({ // audio/video not crap out var activeCall = CallHandler.getAnyActiveCall(); var callForRoom = CallHandler.getCallForRoom(selectedRoomId); - var showCall = (activeCall && !callForRoom); + var showCall = (activeCall && activeCall.call_state === 'connected' && !callForRoom); this.setState({ showCallElement: showCall }); @@ -87,7 +87,6 @@ var LeftPanel = React.createClass({ render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); - var IncomingCallBox = sdk.getComponent('voip.IncomingCallBox'); var collapseButton; var classes = "mx_LeftPanel"; @@ -100,7 +99,7 @@ var LeftPanel = React.createClass({ } var callPreview; - if (this.state.showCallElement) { + if (this.state.showCallElement && !this.props.collapsed) { var CallView = sdk.getComponent('voip.CallView'); callPreview = ( { collapseButton } - { callPreview } + isInvite={ self.props.label === 'Invites' } + incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } + /> ); }); }, diff --git a/src/skins/vector/css/molecules/voip/IncomingCallbox.css b/src/skins/vector/css/molecules/voip/IncomingCallbox.css index 24b24cc2..163ec43f 100644 --- a/src/skins/vector/css/molecules/voip/IncomingCallbox.css +++ b/src/skins/vector/css/molecules/voip/IncomingCallbox.css @@ -19,11 +19,12 @@ limitations under the License. border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; - position: absolute; + position: fixed; z-index: 1000; - left: 235px; - top: 155px; padding: 6px; + margin-top: -3px; + margin-left: -20px; + width: 200px; } .mx_IncomingCallBox_chevron { @@ -39,14 +40,13 @@ limitations under the License. } .mx_IncomingCallBox_buttons { - display: table-row; + display: flex; } .mx_IncomingCallBox_buttons_cell { vertical-align: middle; - display: table-cell; padding: 6px; - width: 50%; + flex: 1; } .mx_IncomingCallBox_buttons_decline, @@ -57,6 +57,7 @@ limitations under the License. line-height: 36px; border-radius: 36px; color: #fff; + margin: auto; } .mx_IncomingCallBox_buttons_decline { diff --git a/vector/index.html b/vector/index.html index 273cb439..f926cea5 100644 --- a/vector/index.html +++ b/vector/index.html @@ -27,6 +27,14 @@ +
+ + + + -
- - - From 63d04772234be600ec2898bdcb7f13fcc33dcb88 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 17 Dec 2015 15:01:07 +0000 Subject: [PATCH 2/9] Pass through the starting query params from the URL --- src/vector/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/vector/index.js b/src/vector/index.js index efca1e82..3812e654 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -153,7 +153,8 @@ function loadApp() { onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} ConferenceHandler={VectorConferenceHandler} - config={configJson} />, + config={configJson} + startingQueryParams={parseQsFromFragment(window.location)} />, document.getElementById('matrixchat') ); } From 869c08a790e62ddb3f11189bc7eae8f658487688 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 11:56:22 +0000 Subject: [PATCH 3/9] Add onHeaderClick and alwaysShowHeader props to RoomSubList for archived room clicking --- src/components/structures/RoomSubList.js | 30 ++++++++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f7efb425..f6f10ec6 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,7 +64,9 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, - collapsed: React.PropTypes.bool.isRequired + collapsed: React.PropTypes.bool.isRequired, + onHeaderClick: React.PropTypes.func, + alwaysShowHeader: React.PropTypes.bool }, getInitialState: function() { @@ -74,6 +76,12 @@ var RoomSubList = React.createClass({ }; }, + getDefaultProps: function() { + return { + onHeaderClick: function() {} // NOP + }; + }, + componentWillMount: function() { this.sortList(this.props.list, this.props.order); }, @@ -85,7 +93,9 @@ var RoomSubList = React.createClass({ }, onClick: function(ev) { - this.setState({ hidden : !this.state.hidden }); + var isHidden = !this.state.hidden; + this.setState({ hidden : isHidden }); + this.props.onHeaderClick(isHidden); }, tsOfNewestEvent: function(room) { @@ -244,6 +254,17 @@ var RoomSubList = React.createClass({ }); }, + _getHeaderJsx: function() { + return ( +

+ { this.props.collapsed ? '' : this.props.label } + +

+ ); + }, + render: function() { var connectDropTarget = this.props.connectDropTarget; var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); @@ -275,9 +296,7 @@ var RoomSubList = React.createClass({ return connectDropTarget(
-

{ this.props.collapsed ? '' : this.props.label } - -

+ { this._getHeaderJsx() } { subList }
); @@ -285,6 +304,7 @@ var RoomSubList = React.createClass({ else { return (
+ { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
); } From f7c4cca67535810ee0c561a6dc3d1e4e9b0f1ebb Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 13:32:22 +0000 Subject: [PATCH 4/9] Add TODO after spending 15 mins trying to figure out the difference between props.collapsed and state.hidden --- src/components/structures/RoomSubList.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f6f10ec6..b71d3285 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,6 +64,11 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, + + // TODO: Fix the name of this. This is too easily confused with the + // "hidden" state which is the expanded (or not) view of the list of rooms. + // What this prop *really* does is control whether the room name is displayed + // so it should be named as such. collapsed: React.PropTypes.bool.isRequired, onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool From 7cc1573f335ef19527a022509e883244fc27a83d Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 15:17:18 +0000 Subject: [PATCH 5/9] Add startAsHidden and showSpinner props to RoomSubList startAsHidden: Previously we never started in the hidden state and all was well. But with archived rooms you DO want to start hidden as you haven't fetched the room list yet. Without this, you need to click twice (close/open) before the archived room list will load. showSpinner: If true, will show a spinner iff there are 0 elements being displayed. Used when fetching the archived room list in RoomList. --- src/components/structures/RoomSubList.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index b71d3285..7ebedbe1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,6 +64,8 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, + startAsHidden: React.PropTypes.bool, + showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded // TODO: Fix the name of this. This is too easily confused with the // "hidden" state which is the expanded (or not) view of the list of rooms. @@ -76,7 +78,7 @@ var RoomSubList = React.createClass({ getInitialState: function() { return { - hidden: false, + hidden: this.props.startAsHidden || false, sortedList: [], }; }, @@ -307,9 +309,11 @@ var RoomSubList = React.createClass({ ); } else { + var Loader = sdk.getComponent("elements.Spinner"); return (
{ this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined } + { (this.props.showSpinner && !this.state.hidden) ? : undefined }
); } From dcea0dd601d314c40a77bdcfe6e9666a4f1ab2ed Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 17:13:57 +0000 Subject: [PATCH 6/9] Move min-height to RoomList; remove bottommost prop --- src/components/structures/RoomSubList.js | 4 +--- src/skins/vector/css/organisms/RoomList.css | 1 + src/skins/vector/css/organisms/RoomSubList.css | 5 ----- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index afa4fdaa..461c87fb 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -61,7 +61,6 @@ var RoomSubList = React.createClass({ tagName: React.PropTypes.string, editable: React.PropTypes.bool, order: React.PropTypes.string.isRequired, - bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, startAsHidden: React.PropTypes.bool, @@ -290,8 +289,7 @@ var RoomSubList = React.createClass({ if (this.state.sortedList.length > 0 || this.props.editable) { var subList; - var classes = "mx_RoomSubList" + - (this.props.bottommost ? " mx_RoomSubList_bottommost" : ""); + var classes = "mx_RoomSubList"; if (!this.state.hidden) { subList =
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css index bb81686c..6b8152e0 100644 --- a/src/skins/vector/css/organisms/RoomList.css +++ b/src/skins/vector/css/organisms/RoomList.css @@ -17,6 +17,7 @@ limitations under the License. .mx_RoomList { padding-top: 24px; padding-bottom: 12px; + min-height: 400px; } .mx_RoomList_expandButton { diff --git a/src/skins/vector/css/organisms/RoomSubList.css b/src/skins/vector/css/organisms/RoomSubList.css index b143c998..46bcc64a 100644 --- a/src/skins/vector/css/organisms/RoomSubList.css +++ b/src/skins/vector/css/organisms/RoomSubList.css @@ -20,11 +20,6 @@ limitations under the License. width: 100%; } -.mx_RoomSubList_bottommost { - /* XXX: this should really be 100% of the RoomList height, but can't seem to get at it */ - min-height: 400px; -} - .mx_RoomSubList_label { text-transform: uppercase; color: #3d3b39; From fdc94ccf9858dacdfae468c67efd6949fc9f1601 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 18 Dec 2015 17:18:33 +0000 Subject: [PATCH 7/9] ensure even hyperlinks are highlighted --- src/skins/vector/css/molecules/EventTile.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index e3956bdb..17d1599e 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -106,6 +106,11 @@ limitations under the License. padding: 4px; } +.mx_MessageTile_searchHighlight a { + background-color: #76cfa6; + color: #fff; +} + .mx_EventTile_sending { color: #ddd; } From 50aa988a344f2e6c17174840da6b23261d212702 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 18 Dec 2015 17:18:36 +0000 Subject: [PATCH 8/9] fix layout --- src/skins/vector/css/molecules/RoomHeader.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index 31d6539a..70d9bf31 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -118,7 +118,6 @@ limitations under the License. .mx_RoomHeader_searchStatus { display: inline-block; font-weight: normal; - overflow-y: hidden; opacity: 0.6; } From 67aff6b9f235f9cb01a5ab87959210778c66bf67 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 21 Dec 2015 12:37:38 +0000 Subject: [PATCH 9/9] adopt MacOS style chevrons --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 461c87fb..f190c584 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -268,7 +268,7 @@ var RoomSubList = React.createClass({

{ this.props.collapsed ? '' : this.props.label }

);