From 5ce1aba49397b4793bf765d3412ddcdac1fd48ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 15:23:07 +0100 Subject: [PATCH] Created initial RoomTagContextMenu component --- src/component-index.js | 1 + .../views/context_menus/RoomTagContextMenu.js | 132 ++++++++++++++++++ .../context_menus/RoomTagContextMenu.css | 44 ++++++ src/skins/vector/img/icon-context-fave.svg | 16 +++ 4 files changed, 193 insertions(+) create mode 100644 src/components/views/context_menus/RoomTagContextMenu.js create mode 100644 src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css create mode 100644 src/skins/vector/img/icon-context-fave.svg diff --git a/src/component-index.js b/src/component-index.js index 819420f8ea..30282ff9ea 100644 --- a/src/component-index.js +++ b/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'); diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js new file mode 100644 index 0000000000..5405f92a35 --- /dev/null +++ b/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 ( +
+
+ + 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 new file mode 100644 index 0000000000..47d7381edf --- /dev/null +++ b/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 { + +} diff --git a/src/skins/vector/img/icon-context-fave.svg b/src/skins/vector/img/icon-context-fave.svg new file mode 100644 index 0000000000..f1eb18e284 --- /dev/null +++ b/src/skins/vector/img/icon-context-fave.svg @@ -0,0 +1,16 @@ + + + + 3658772C-9483-49C3-A6B2-B4E3112661C1 + Created with sketchtool. + + + + + + + + + + +