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/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

src/components/views/context_menus/RoomTagContextMenu.js

@@ -32,63 +32,85 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-//        var areNotifsMuted = false;
+        return {
-//        var cli = MatrixClientPeg.get();
+            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
-//        if (!cli.isGuest()) {
+            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
-//            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;
     },
 
-//    _save: function( isMuted ) {
+    _toggleTag: function(tagNameOn, tagNameOff) {
-//        var self = this;
+        console.log("DEBUG: _toggleTag");
-//        const roomId = this.props.room.roomId;
+        console.log("tagNameOn: " + tagNameOn + " tagNameOff: " + tagNameOff);
-//        var cli = MatrixClientPeg.get();
+        var self = this;
-//
+        const roomId = this.props.room.roomId;
-//        if (!cli.isGuest()) {
+        var cli = MatrixClientPeg.get();
-//            cli.setRoomMutePushRule(
+        if (!cli.isGuest()) {
-//                "global", roomId, isMuted
+            q.delay(500).then(function() {
-//            ).then(function() {
+                if (tagNameOff !== null && tagNameOff !== undefined) {
-//                self.setState({areNotifsMuted: isMuted});
+                    cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
-//
+                        // Close the context menu
-//                // delay slightly so that the user can see their state change
+                        if (self.props.onFinished) {
-//                // before closing the menu
+                            self.props.onFinished();
-//                q.delay(500).then(function() {
+                        };
-//                    // tell everyone that wants to know of the change in
+                    }).fail(function(err) {
-//                    // notification state
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-//                    dis.dispatch({
+                        Modal.createDialog(ErrorDialog, {
-//                        action: 'notification_change',
+                            title: "Failed to remove tag " + tagNameOff + " from room",
-//                        roomId: self.props.room.roomId,
+                            description: err.toString()
-//                        isMuted: isMuted,
+                        });
-//                    });
+                    });
-//
+                }
-//                    // Close the context menu
+
-//                    if (self.props.onFinished) {
+                if (tagNameOn !== null && tagNameOn !== undefined) {
-//                        self.props.onFinished();
+                    cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
-//                    };
+                        // Close the context menu
-//                });
+                        if (self.props.onFinished) {
-//            }).fail(function(error) {
+                            self.props.onFinished();
-//                // TODO: some form of error notification to the user
+                        };
-//                // to inform them that their state change failed.
+                    }).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 (
             <div>
                 <div className={ favouriteClasses } onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="15" height="15" />
                     Favourite
                 </div>
                 <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-low.svg" width="15" height="15" />
                     Low Priority
                 </div>
                 <hr className="mx_RoomTagContextMenu_separator" />
                 <div className={ leaveClasses } onClick={this._onClickLeave} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-delete.svg" width="15" height="15" />
                     Leave
                 </div>
             </div>

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;
 }

src/skins/vector/img/icon-context-delete.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>5E746DC3-8B17-478D-8DB8-DFD20B596F66</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-icons-sheet" transform="translate(-64.000000, -364.000000)">
+            <g id="icon_context_delete" transform="translate(62.000000, 361.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <path d="M3.45,3.45 L11.55,11.55" id="Line" stroke="#FF0064" stroke-linecap="round"></path>
+                <path d="M3.45,3.45 L11.55,11.55" id="Line-Copy-2" stroke="#FF0064" stroke-linecap="round" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-context-fave-on.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>DAE17B64-40B5-478A-8E8D-97AD1A6E25C8</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-icons-sheet" transform="translate(-93.000000, -313.000000)">
+            <g id="icon_context_fave_on" transform="translate(92.000000, 312.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <polygon id="Star-1" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-context-fave.svg

@@ -1,15 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>3658772C-9483-49C3-A6B2-B4E3112661C1</title>
+    <title>8A6E1837-F0F1-432E-A0DA-6F3741F71EBF</title>
     <desc>Created with sketchtool.</desc>
     <defs></defs>
-    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2" stroke-linejoin="round">
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
-        <g id="02_15-Context-Menus" transform="translate(-64.000000, -304.000000)" stroke="#000000">
+        <g id="Extra-icons-sheet" transform="translate(-63.000000, -313.000000)">
-            <g id="Rectangle-2-Copy-+-General" transform="translate(48.000000, 293.000000)">
+            <g id="icon_context_fave" transform="translate(62.000000, 312.000000)">
-                <g id="icon_context_fave" transform="translate(16.000000, 11.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
-                    <polygon id="Star-1" points="6.5 9.75 2.67939586 11.7586105 3.40906632 7.50430523 0.318132644 4.49138954 4.58969793 3.87069477 6.5 0 8.41030207 3.87069477 12.6818674 4.49138954 9.59093368 7.50430523 10.3206041 11.7586105"></polygon>
+                <polygon id="Star-1" stroke="#000000" stroke-linejoin="round" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
-                </g>
             </g>
         </g>
     </g>

src/skins/vector/img/icon-context-low-on.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>CD51482C-F2D4-4F63-AF9E-86513F9AF87F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-icons-sheet" transform="translate(-93.000000, -338.000000)">
+            <g id="icon_context_low_on" transform="translate(92.000000, 337.000000)">
+                <rect id="Rectangle-Copy" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-context-low.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>B160345F-40D3-4BE6-A860-6D04BF223EF7</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-icons-sheet" transform="translate(-63.000000, -338.000000)">
+            <g id="icon_context_low" transform="translate(62.000000, 337.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#000000" stroke-linejoin="round" opacity="0.2"></path>
+            </g>
+        </g>
+    </g>
+</svg>