From 5a97786cc613ee17af0a590734337ea5a84ac749 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 8 Aug 2016 16:55:02 +0100 Subject: [PATCH] Initial pass of the tag menu, still lots of tweaking and bugfixing to do, but most of the mechanics are there now --- .../NotificationStateContextMenu.js | 2 +- .../views/context_menus/RoomTagContextMenu.js | 128 ++++++++++-------- .../context_menus/RoomTagContextMenu.css | 12 +- src/skins/vector/img/icon-context-delete.svg | 16 +++ src/skins/vector/img/icon-context-fave-on.svg | 15 ++ src/skins/vector/img/icon-context-fave.svg | 15 +- src/skins/vector/img/icon-context-low-on.svg | 15 ++ src/skins/vector/img/icon-context-low.svg | 15 ++ 8 files changed, 154 insertions(+), 64 deletions(-) create mode 100644 src/skins/vector/img/icon-context-delete.svg create mode 100644 src/skins/vector/img/icon-context-fave-on.svg create mode 100644 src/skins/vector/img/icon-context-low-on.svg create mode 100644 src/skins/vector/img/icon-context-low.svg diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 6b8852730..8430f8efc 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -57,7 +57,7 @@ module.exports = React.createClass({ // Wrapping this in a q promise, as setRoomMutePushRule can return // a promise or a value q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted)) - .then(function(s) { + .then(function() { self.setState({areNotifsMuted: areNotifsMuted}); // delay slightly so that the user can see their state change diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 1e6363c8b..5b8cf1b26 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -32,63 +32,85 @@ module.exports = React.createClass({ }, getInitialState: function() { -// var areNotifsMuted = false; -// var cli = MatrixClientPeg.get(); -// if (!cli.isGuest()) { -// var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId); -// if (roomPushRule) { -// if (0 <= roomPushRule.actions.indexOf("dont_notify")) { -// areNotifsMuted = true; -// } -// } -// } -// -// return { -// areNotifsMuted: areNotifsMuted, -// }; - return null; + return { + isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"), + isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"), + }; }, -// _save: function( isMuted ) { -// var self = this; -// const roomId = this.props.room.roomId; -// var cli = MatrixClientPeg.get(); -// -// if (!cli.isGuest()) { -// cli.setRoomMutePushRule( -// "global", roomId, isMuted -// ).then(function() { -// self.setState({areNotifsMuted: isMuted}); -// -// // delay slightly so that the user can see their state change -// // before closing the menu -// q.delay(500).then(function() { -// // tell everyone that wants to know of the change in -// // notification state -// dis.dispatch({ -// action: 'notification_change', -// roomId: self.props.room.roomId, -// isMuted: isMuted, -// }); -// -// // Close the context menu -// if (self.props.onFinished) { -// self.props.onFinished(); -// }; -// }); -// }).fail(function(error) { -// // TODO: some form of error notification to the user -// // to inform them that their state change failed. -// }); -// } -// }, + _toggleTag: function(tagNameOn, tagNameOff) { + console.log("DEBUG: _toggleTag"); + console.log("tagNameOn: " + tagNameOn + " tagNameOff: " + tagNameOff); + var self = this; + const roomId = this.props.room.roomId; + var cli = MatrixClientPeg.get(); + if (!cli.isGuest()) { + q.delay(500).then(function() { + if (tagNameOff !== null && tagNameOff !== undefined) { + cli.deleteRoomTag(roomId, tagNameOff).finally(function() { + // Close the context menu + if (self.props.onFinished) { + self.props.onFinished(); + }; + }).fail(function(err) { + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + Modal.createDialog(ErrorDialog, { + title: "Failed to remove tag " + tagNameOff + " from room", + description: err.toString() + }); + }); + } + + if (tagNameOn !== null && tagNameOn !== undefined) { + cli.setRoomTag(roomId, tagNameOn, {}).finally(function() { + // Close the context menu + if (self.props.onFinished) { + self.props.onFinished(); + }; + }).fail(function(err) { + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + Modal.createDialog(ErrorDialog, { + title: "Failed to add tag " + tagNameOn + " to room", + description: err.toString() + }); + }); + } + }); + } + }, _onClickFavourite: function() { // Tag room as 'Favourite' + if (!this.state.isFavourite && this.state.isLowPriority) { + this.setState({ + isFavourite: true, + isLowPriority: false, + }); + this._toggleTag("m.favourite", "m.lowpriority"); + } else if (this.state.isFavourite) { + this.setState({isFavourite: false}); + this._toggleTag(null, "m.favourite"); + } else if (!this.state.isFavourite) { + this.setState({isFavourite: true}); + this._toggleTag("m.favourite"); + } }, _onClickLowPriority: function() { // Tag room as 'Low Priority' + if (!this.state.isLowPriority && this.state.isFavourite) { + this.setState({ + isFavourite: false, + isLowPriority: true, + }); + this._toggleTag("m.lowpriority", "m.favourite"); + } else if (this.state.isLowPriority) { + this.setState({isLowPriority: false}); + this._toggleTag(null, "m.lowpriority"); + } else if (!this.state.isLowPriority) { + this.setState({isLowPriority: true}); + this._toggleTag("m.lowpriority"); + } }, _onClickLeave: function() { @@ -100,13 +122,13 @@ module.exports = React.createClass({ var favouriteClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldSet': false, + 'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite, 'mx_RoomTagContextMenu_fieldDisabled': false, }); var lowPriorityClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldSet': false, + 'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority, 'mx_RoomTagContextMenu_fieldDisabled': false, }); @@ -119,16 +141,16 @@ module.exports = React.createClass({ return (
- + Favourite
- + Low Priority
- + Leave
diff --git a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css index a7c74ce4a..02c87d2fb 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css @@ -15,15 +15,23 @@ limitations under the License. */ .mx_RoomTagContextMenu_field { - padding-top: 4px; + padding-top: 8px; padding-right: 20px; - padding-bottom: 10px; + padding-bottom: 8px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; } +.mx_RoomTagContextMenu_field:first-child { + padding-top: 4px; +} + +.mx_RoomTagContextMenu_field:last-child { + padding-bottom: 4px; +} + .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { font-weight: bold; } diff --git a/src/skins/vector/img/icon-context-delete.svg b/src/skins/vector/img/icon-context-delete.svg new file mode 100644 index 000000000..d96fbd246 --- /dev/null +++ b/src/skins/vector/img/icon-context-delete.svg @@ -0,0 +1,16 @@ + + + + 5E746DC3-8B17-478D-8DB8-DFD20B596F66 + Created with sketchtool. + + + + + + + + + + + diff --git a/src/skins/vector/img/icon-context-fave-on.svg b/src/skins/vector/img/icon-context-fave-on.svg new file mode 100644 index 000000000..2ae172d8e --- /dev/null +++ b/src/skins/vector/img/icon-context-fave-on.svg @@ -0,0 +1,15 @@ + + + + DAE17B64-40B5-478A-8E8D-97AD1A6E25C8 + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icon-context-fave.svg b/src/skins/vector/img/icon-context-fave.svg index f1eb18e28..451e1849c 100644 --- a/src/skins/vector/img/icon-context-fave.svg +++ b/src/skins/vector/img/icon-context-fave.svg @@ -1,15 +1,14 @@ - - 3658772C-9483-49C3-A6B2-B4E3112661C1 + + 8A6E1837-F0F1-432E-A0DA-6F3741F71EBF Created with sketchtool. - - - - - - + + + + + diff --git a/src/skins/vector/img/icon-context-low-on.svg b/src/skins/vector/img/icon-context-low-on.svg new file mode 100644 index 000000000..7578c6335 --- /dev/null +++ b/src/skins/vector/img/icon-context-low-on.svg @@ -0,0 +1,15 @@ + + + + CD51482C-F2D4-4F63-AF9E-86513F9AF87F + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icon-context-low.svg b/src/skins/vector/img/icon-context-low.svg new file mode 100644 index 000000000..663f3ca9e --- /dev/null +++ b/src/skins/vector/img/icon-context-low.svg @@ -0,0 +1,15 @@ + + + + B160345F-40D3-4BE6-A860-6D04BF223EF7 + Created with sketchtool. + + + + + + + + + +