Created initial RoomTagContextMenu component

src/component-index.js

@@ -36,6 +36,7 @@ module.exports.components['structures.SearchBox'] = require('./components/struct
 module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
 module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
 module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
+module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');

src/components/views/context_menus/RoomTagContextMenu.js

@@ -0,0 +1,132 @@
+/*
+Copyright 2015, 2016 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 q = require("q");
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = React.createClass({
+    displayName: 'RoomTagContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    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,
+//        };
+    },
+
+//    _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.
+//            });
+//        }
+//    },
+
+    _onClickFavourite: function() {
+        // Tag room as 'Favourite'
+    },
+
+    _onClickLowPriority: function() {
+        // Tag room as 'Low Priority'
+    },
+
+    _onClickLeave: function() {
+        // Leave room - tag room as 'Archive'?
+    },
+
+    render: function() {
+        var cli = MatrixClientPeg.get();
+
+        var favouriteClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldDisabled': true,
+        });
+
+        var lowPriorityClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': !this.state.areNotifsMuted,
+        });
+
+        var leaveClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldDisabled': true,
+        });
+
+        return (
+            <div>
+                <div className={ favouriteClasses } onClick={this._onClickFavourite} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    Favourite
+                </div>
+                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    Low Priority
+                </div>
+                <div className={ leaveClasses } onClick={this._onClickLeave} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
+                    Leave
+                </div>
+            </div>
+        );
+    }
+});

src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css

@@ -0,0 +1,44 @@
+/*
+Copyright 2015, 2016 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_RoomTagContextMenu_field {
+    padding-top: 4px;
+    padding-right: 6px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
+    font-weight: bold;
+    padding-left: 8px;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTagContextMenu_icon {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
+
+}

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

@@ -0,0 +1,16 @@
+<?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 -->
+    <title>3658772C-9483-49C3-A6B2-B4E3112661C1</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="02_15-Context-Menus" transform="translate(-64.000000, -304.000000)" stroke="#000000">
+            <g id="Rectangle-2-Copy-+-General" transform="translate(48.000000, 293.000000)">
+                <g id="icon_context_fave" transform="translate(16.000000, 11.000000)">
+                    <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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>