From 4a46aba0c28408cfbbe9634ee25b35b53c0e0317 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 15:24:53 +0100 Subject: [PATCH 1/6] Added new onClick function for the avatar, but not wired in yet, waitin go pull up from develop once previous commits have been merged --- src/components/views/rooms/RoomTile.js | 28 ++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 602ed4ee04..ae87e6737d 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -139,6 +139,34 @@ module.exports = React.createClass({ } }, + onAvatarClicked: function(e) { + // Only allow none guests to access the context menu + if (!MatrixClientPeg.get().isGuest()) { + + // If the badge is clicked, then no longer show tooltip + if (this.props.collapsed) { + this.setState({ hover: false }); + } + + var Menu = sdk.getComponent('context_menus.RoomTagContextMenu'); + var elementRect = e.target.getBoundingClientRect(); + // The window X and Y offsets are to adjust position when zoomed in to page + var x = elementRect.right + window.pageXOffset + 3; + var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; + var self = this; + ContextualMenu.createMenu(Menu, {wmwragg + chevronOffset: 10, + left: x, + top: y, + room: this.props.room, + onFinished: function() { + self.setState({ menu: false }); + } + }); + this.setState({ menu: true }); + } + }, + render: function() { var myUserId = MatrixClientPeg.get().credentials.userId; var me = this.props.room.currentState.members[myUserId]; From 5b812fead9d4e6a024ceb7c8dd3b15b1bab88926 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 15:48:28 +0100 Subject: [PATCH 2/6] Initial RoomTagContextMenu wired in --- src/components/views/rooms/RoomTile.js | 33 ++++++++++++++------------ 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 132f02a1e2..6938cda14e 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -58,7 +58,8 @@ module.exports = React.createClass({ return({ hover : false, badgeHover : false, - menu: false, + notificationTagMenu: false, + roomTagMenu: false, areNotifsMuted: areNotifsMuted, }); }, @@ -118,13 +119,13 @@ module.exports = React.createClass({ this.setState({ hover: false }); } - var Menu = sdk.getComponent('context_menus.NotificationStateContextMenu'); + var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu'); var elementRect = e.target.getBoundingClientRect(); // The window X and Y offsets are to adjust position when zoomed in to page var x = elementRect.right + window.pageXOffset + 3; var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; var self = this; - ContextualMenu.createMenu(Menu, { + ContextualMenu.createMenu(NotificationStateMenu, { menuWidth: 188, menuHeight: 126, chevronOffset: 45, @@ -132,10 +133,10 @@ module.exports = React.createClass({ top: y, room: this.props.room, onFinished: function() { - self.setState({ menu: false }); + self.setState({ notificationTagMenu: false }); } }); - this.setState({ menu: true }); + this.setState({ notificationTagMenu: true }); } // Prevent the RoomTile onClick event firing as well e.stopPropagation(); @@ -150,23 +151,25 @@ module.exports = React.createClass({ this.setState({ hover: false }); } - var Menu = sdk.getComponent('context_menus.RoomTagContextMenu'); + var RoomTagMenu = sdk.getComponent('context_menus.RoomTagContextMenu'); var elementRect = e.target.getBoundingClientRect(); // The window X and Y offsets are to adjust position when zoomed in to page var x = elementRect.right + window.pageXOffset + 3; - var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; + var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 19; var self = this; - ContextualMenu.createMenu(Menu, {wmwragg + ContextualMenu.createMenu(RoomTagMenu, { chevronOffset: 10, left: x, top: y, room: this.props.room, onFinished: function() { - self.setState({ menu: false }); + self.setState({ roomTagMenu: false }); } }); - this.setState({ menu: true }); + this.setState({ roomTagMenu: true }); } + // Prevent the RoomTile onClick event firing as well + e.stopPropagation(); }, render: function() { @@ -183,7 +186,7 @@ module.exports = React.createClass({ 'mx_RoomTile_unreadNotify': notificationCount > 0 && !this.state.areNotifsMuted, 'mx_RoomTile_highlight': this.props.highlight, 'mx_RoomTile_invited': (me && me.membership == 'invite'), - 'mx_RoomTile_menu': this.state.menu, + 'mx_RoomTile_notificationTagMenu': this.state.notificationTagMenu, 'mx_RoomTile_noBadges': !(this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) }); @@ -193,7 +196,7 @@ module.exports = React.createClass({ var badgeClasses = classNames({ 'mx_RoomTile_badge': true, - 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menu, + 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu, }); // XXX: We should never display raw room IDs, but sometimes the @@ -204,7 +207,7 @@ module.exports = React.createClass({ var badge; var badgeContent; - if (this.state.badgeHover || this.state.menu) { + if (this.state.badgeHover || this.state.notificationTagMenu) { badgeContent = "\u00B7\u00B7\u00B7"; } else if (this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) { var limitedCount = (notificationCount > 99) ? '99+' : notificationCount; @@ -221,7 +224,7 @@ module.exports = React.createClass({ var nameClasses = classNames({ 'mx_RoomTile_name': true, 'mx_RoomTile_invite': this.props.isInvite, - 'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.menu, + 'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.notificationTagMenu, }); let nameHTML = emojifyText(name); @@ -255,7 +258,7 @@ module.exports = React.createClass({ return connectDragSource(connectDropTarget(
- +
{ label } From 75e1277961982cbbe230663d45207ebd85f36b57 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 8 Aug 2016 16:55:27 +0100 Subject: [PATCH 3/6] Initial pass of the tag menu, still lots of tweaking and bugfixing to do, but most of the mechanics are there now --- src/components/views/rooms/RoomTile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 6938cda14e..58293670be 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -163,10 +163,10 @@ module.exports = React.createClass({ top: y, room: this.props.room, onFinished: function() { - self.setState({ roomTagMenu: false }); + //self.setState({ roomTagMenu: false }); } }); - this.setState({ roomTagMenu: true }); + //this.setState({ roomTagMenu: true }); } // Prevent the RoomTile onClick event firing as well e.stopPropagation(); From 667264420ca81a37529f094d1e25d53346b2c604 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 14:46:05 +0100 Subject: [PATCH 4/6] hover state elements for the room tag menu, allong with CSS class updates --- src/components/views/rooms/RoomTile.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 58293670be..60e4bd10b1 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -144,7 +144,7 @@ module.exports = React.createClass({ onAvatarClicked: function(e) { // Only allow none guests to access the context menu - if (!MatrixClientPeg.get().isGuest()) { + if (!MatrixClientPeg.get().isGuest() && !this.props.collapsed) { // If the badge is clicked, then no longer show tooltip if (this.props.collapsed) { @@ -163,13 +163,13 @@ module.exports = React.createClass({ top: y, room: this.props.room, onFinished: function() { - //self.setState({ roomTagMenu: false }); + self.setState({ roomTagMenu: false }); } }); - //this.setState({ roomTagMenu: true }); + this.setState({ roomTagMenu: true }); + // Prevent the RoomTile onClick event firing as well + e.stopPropagation(); } - // Prevent the RoomTile onClick event firing as well - e.stopPropagation(); }, render: function() { @@ -194,6 +194,11 @@ module.exports = React.createClass({ 'mx_RoomTile_avatar': true, }); + var avatarContainerClasses = classNames({ + 'mx_RoomTile_avatar_container': true, + 'mx_RoomTile_avatar_roomTagMenu': this.state.roomTagMenu, + }) + var badgeClasses = classNames({ 'mx_RoomTile_badge': true, 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu, @@ -258,7 +263,11 @@ module.exports = React.createClass({ return connectDragSource(connectDropTarget(
- +
+
+ +
+
{ label } From e2d3631e7c13cf4f7ca9e1f75c92c7a7aa8bd03b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 16:34:49 +0100 Subject: [PATCH 5/6] Menu colour now changeable, and leave room item hooked up --- src/components/structures/ContextualMenu.js | 35 ++++++++++++++++----- src/components/views/rooms/RoomHeader.js | 15 +++++---- src/components/views/rooms/RoomTile.js | 3 +- 3 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index fcfc5d5e50..ab557e77d7 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -28,10 +28,11 @@ var ReactDOM = require('react-dom'); module.exports = { ContextualMenuContainerId: "mx_ContextualMenu_Container", - propTypes: { + propTypes: { menuWidth: React.PropTypes.number, menuHeight: React.PropTypes.number, chevronOffset: React.PropTypes.number, + menuColour: React.PropTypes.string, }, getOrCreateContainer: function() { @@ -61,8 +62,23 @@ module.exports = { top: props.top, }; - var chevronOffset = { - top: props.chevronOffset, + var chevronOffset = {}; + if (props.chevronOffset) { + chevronOffset.top = props.chevronOffset; + } + + // To overide the deafult chevron colour, if it's been set + var chevronCSS = ""; + if (props.menuColour) { + chevronCSS = ` + .mx_ContextualMenu_chevron_left:after { + border-right-color: ${props.menuColour}; + } + + .mx_ContextualMenu_chevron_right:after { + border-left-color: ${props.menuColour}; + } + ` } var chevron = null; @@ -82,24 +98,29 @@ module.exports = { 'mx_ContextualMenu_right': !props.left, }); - var menuSize = {}; + var menuStyle = {}; if (props.menuWidth) { - menuSize.width = props.menuWidth; + menuStyle.width = props.menuWidth; } if (props.menuHeight) { - menuSize.height = props.menuHeight; + menuStyle.height = props.menuHeight; + } + + if (props.menuColour) { + menuStyle["background-color"] = props.menuColour; } // FIXME: If a menu uses getDefaultProps it clobbers the onFinished // property set here so you can't close the menu from a button click! var menu = (
-
+
{chevron}
+
); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 8c1b2aaff8..d5090d0659 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -271,13 +271,13 @@ module.exports = React.createClass({
; } - var leave_button; - if (this.props.onLeaveClick) { - leave_button = -
- -
; - } +// var leave_button; +// if (this.props.onLeaveClick) { +// leave_button = +//
+// +//
; +// } var forget_button; if (this.props.onForgetClick) { @@ -298,7 +298,6 @@ module.exports = React.createClass({
{ settings_button } { forget_button } - { leave_button }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 60e4bd10b1..b2efa1a966 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -159,6 +159,7 @@ module.exports = React.createClass({ var self = this; ContextualMenu.createMenu(RoomTagMenu, { chevronOffset: 10, + menuColour: "#FFFFFF", left: x, top: y, room: this.props.room, @@ -265,7 +266,7 @@ module.exports = React.createClass({
- +
From 6d1eebe6f27484c220e52ec4255cd678d40f39e3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 17:01:06 +0100 Subject: [PATCH 6/6] Resized the avatar back to 24px, from 25px, as it has to be even so that the Text avatar aligns vertically correctly --- src/components/views/rooms/RoomTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index b2efa1a966..e5970b4eb1 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -266,7 +266,7 @@ module.exports = React.createClass({
- +