From 5ce1aba49397b4793bf765d3412ddcdac1fd48ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 15:23:07 +0100 Subject: [PATCH 01/14] 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 819420f8e..30282ff9e 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 000000000..5405f92a3 --- /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 000000000..47d7381ed --- /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 000000000..f1eb18e28 --- /dev/null +++ b/src/skins/vector/img/icon-context-fave.svg @@ -0,0 +1,16 @@ + + + + 3658772C-9483-49C3-A6B2-B4E3112661C1 + Created with sketchtool. + + + + + + + + + + + From b3459be7077204c31dc910c4d5817a4a72cd95e0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 15:49:03 +0100 Subject: [PATCH 02/14] Initial RoomTagContextMenu wired in --- src/components/views/context_menus/RoomTagContextMenu.js | 3 ++- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 5405f92a3..1d5bd5547 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -46,6 +46,7 @@ module.exports = React.createClass({ // return { // areNotifsMuted: areNotifsMuted, // }; + return null; }, // _save: function( isMuted ) { @@ -104,7 +105,7 @@ module.exports = React.createClass({ var lowPriorityClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldSet': !this.state.areNotifsMuted, + 'mx_RoomTagContextMenu_fieldSet': true, }); var leaveClasses = classNames({ diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index eca63c782..b86f39a2d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -116,13 +116,13 @@ limitations under the License. } .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, -.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { +.mx_RoomTile.mx_RoomTile_notificationStateMenu .mx_RoomTile_badge { letter-spacing: 0.1em; opacity: 1; } .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, -.mx_RoomTile.mx_RoomTile_menu.mx_RoomTile_noBadges .mx_RoomTile_badge { +.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge { background-color: rgb(214, 214, 214); } From 72ba708bfed3a1c87159dc910bab85e9a8c13c54 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 5 Aug 2016 16:35:59 +0100 Subject: [PATCH 03/14] Menu separator styling --- .../views/context_menus/RoomTagContextMenu.js | 10 ++++++--- .../context_menus/RoomTagContextMenu.css | 22 ++++++++++++++----- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 1d5bd5547..1e6363c8b 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -100,17 +100,20 @@ module.exports = React.createClass({ var favouriteClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldDisabled': true, + 'mx_RoomTagContextMenu_fieldSet': false, + 'mx_RoomTagContextMenu_fieldDisabled': false, }); var lowPriorityClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldSet': true, + 'mx_RoomTagContextMenu_fieldSet': false, + 'mx_RoomTagContextMenu_fieldDisabled': false, }); var leaveClasses = classNames({ 'mx_RoomTagContextMenu_field': true, - 'mx_RoomTagContextMenu_fieldDisabled': true, + 'mx_RoomTagContextMenu_fieldSet': false, + 'mx_RoomTagContextMenu_fieldDisabled': false, }); return ( @@ -123,6 +126,7 @@ module.exports = React.createClass({ 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 47d7381ed..a7c74ce4a 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 @@ -16,9 +16,8 @@ limitations under the License. .mx_RoomTagContextMenu_field { padding-top: 4px; - padding-right: 6px; + padding-right: 20px; padding-bottom: 10px; - padding-left: 20px; cursor: pointer; white-space: nowrap; display: flex; @@ -27,7 +26,6 @@ limitations under the License. .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { font-weight: bold; - padding-left: 8px; } .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled { @@ -35,10 +33,22 @@ limitations under the License. } .mx_RoomTagContextMenu_icon { - padding-right: 4px; + padding-right: 8px; padding-left: 4px; } -.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { - +.mx_RoomTagContextMenu_separator { + margin-top: 0; + margin-bottom: 0; + border-bottom-style: none; + border-left-style: none; + border-right-style: none; + border-top-style: solid; + border-top-width: 1px; + border-color: #bbbbbb; + opacity: 0.4; +} + +.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { + /* Something to indicate that the icon is the set tag */ } From 5a97786cc613ee17af0a590734337ea5a84ac749 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 8 Aug 2016 16:55:02 +0100 Subject: [PATCH 04/14] 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. + + + + + + + + + + From 33612b7076691f4a3d8d62fcb905881f7b1ea4a5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 8 Aug 2016 17:11:08 +0100 Subject: [PATCH 05/14] New dekete icon and ignoring olm.js --- .gitignore | 1 + src/skins/vector/img/icon-context-delete.svg | 22 +++++++------------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 0d9bc9d54..f0d35b4da 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ /vector/bundle.* /vector/components.css /vector/config.json +/vector/olm.js .DS_Store diff --git a/src/skins/vector/img/icon-context-delete.svg b/src/skins/vector/img/icon-context-delete.svg index d96fbd246..fba9fa117 100644 --- a/src/skins/vector/img/icon-context-delete.svg +++ b/src/skins/vector/img/icon-context-delete.svg @@ -1,16 +1,10 @@ - - - - 5E746DC3-8B17-478D-8DB8-DFD20B596F66 - Created with sketchtool. - - - - - - - - - + + + + + + + + From cf8164bcc38b1b83b2647fc2b649e544c54e3bd6 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 8 Aug 2016 18:11:18 +0100 Subject: [PATCH 06/14] New icons --- .../views/context_menus/RoomTagContextMenu.js | 6 ++-- .../context_menus/RoomTagContextMenu.css | 1 + src/skins/vector/img/icon_context_delete.svg | 19 ++++++++++++ src/skins/vector/img/icon_context_fave.svg | 12 ++++++++ src/skins/vector/img/icon_context_fave_on.svg | 29 ++++++++++++++++++ src/skins/vector/img/icon_context_low.svg | 11 +++++++ src/skins/vector/img/icon_context_low_on.svg | 30 +++++++++++++++++++ 7 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 src/skins/vector/img/icon_context_delete.svg create mode 100644 src/skins/vector/img/icon_context_fave.svg create mode 100644 src/skins/vector/img/icon_context_fave_on.svg create mode 100644 src/skins/vector/img/icon_context_low.svg create mode 100644 src/skins/vector/img/icon_context_low_on.svg diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 5b8cf1b26..fd917c041 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -141,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 02c87d2fb..a1f29f1fd 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 @@ -30,6 +30,7 @@ limitations under the License. .mx_RoomTagContextMenu_field:last-child { padding-bottom: 4px; + color: #ff0064; } .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { 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..7e8eb51e7 --- /dev/null +++ b/src/skins/vector/img/icon_context_delete.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + 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 000000000..da7b14a1f --- /dev/null +++ b/src/skins/vector/img/icon_context_fave.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + 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..e22e92d36 --- /dev/null +++ b/src/skins/vector/img/icon_context_fave_on.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..ea579ef4c --- /dev/null +++ b/src/skins/vector/img/icon_context_low.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + 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..28300f9a7 --- /dev/null +++ b/src/skins/vector/img/icon_context_low_on.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 1c812b340d2505d37bf48b034cd2f7806b053052 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 9 Aug 2016 19:20:27 +0100 Subject: [PATCH 07/14] Initial pass at handling room tags that don't have an order element, but need one manual ordering --- src/components/structures/RoomSubList.js | 51 ++++++++++++++++--- .../views/context_menus/RoomTagContextMenu.js | 4 +- 2 files changed, 47 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index a5a6fd217..94a46d75b 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -149,11 +149,33 @@ var RoomSubList = React.createClass({ return this.tsOfNewestEvent(roomB) - this.tsOfNewestEvent(roomA); }, - manualComparator: function(roomA, roomB) { - if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0; - var a = roomA.tags[this.props.tagName].order; - var b = roomB.tags[this.props.tagName].order; - return a == b ? this.recentsComparator(roomA, roomB) : ( a > b ? 1 : -1); + lexicographicalComparator: function(roomA, roomB) { + return roomA.name > roomB.name ? 1 : -1; + }, + + // Generates the manual comparator using the given list + manualComparator: function(list) { + var self = this; + var roomList = list; + + return function(roomA, roomB) { + if (!roomA.tags[self.props.tagName] || !roomB.tags[self.props.tagName]) return 0; + + // Make sure the room tag has an order element, if not set it to be the bottom + var a = roomA.tags[self.props.tagName].order; + var b = roomB.tags[self.props.tagName].order; + + if (a === undefined) { + a = (self._getHighestOrder(roomList) + 1.0) / 2.0; + roomA.tags[self.props.tagName].order = a; + }; + if (b === undefined) { + b = (self._getHighestOrder(roomList) + 1.0) / 2.0; + roomB.tags[self.props.tagName].order = b; + }; + + return a == b ? self.lexicographicalComparator(roomA, roomB) : ( a > b ? 1 : -1); + } }, sortList: function(list, order) { @@ -161,13 +183,30 @@ var RoomSubList = React.createClass({ if (order === undefined) order = this.props.order; var comparator; list = list || []; - if (order === "manual") comparator = this.manualComparator; + if (order === "manual") comparator = this.manualComparator(list); if (order === "recent") comparator = this.recentsComparator; //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list); this.setState({ sortedList: list.sort(comparator) }); }, + // Finds the highest (lowest position) order of a room in a manual ordered list + // room.tag[tagname].order + _getHighestOrder: function(list) { + var order = 0.0; + if (this.props.order === "manual") { + var self = this; + list.forEach(function(room) { + if (room.tags.hasOwnProperty(self.props.tagName)) { + if (order < room.tags[self.props.tagName].order) { + order = room.tags[self.props.tagName].order; + } + } + }) + } + return order; + }, + moveRoomTile: function(room, atIndex) { if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex); //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms)); diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index fd917c041..68da3648a 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -39,8 +39,6 @@ module.exports = React.createClass({ }, _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(); @@ -62,6 +60,8 @@ module.exports = React.createClass({ } if (tagNameOn !== null && tagNameOn !== undefined) { + // If the tag ordering meta data is required, it is added by + // the RoomSubList when it sorts its rooms cli.setRoomTag(roomId, tagNameOn, {}).finally(function() { // Close the context menu if (self.props.onFinished) { From 699a58e0b37ca50c9e20c630ba20b1ef97fba445 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 11:39:10 +0100 Subject: [PATCH 08/14] Fix for historic and new undefined order issues --- src/components/structures/RoomSubList.js | 93 ++++++++++++++---------- 1 file changed, 56 insertions(+), 37 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 94a46d75b..74ddb879a 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -154,28 +154,21 @@ var RoomSubList = React.createClass({ }, // Generates the manual comparator using the given list - manualComparator: function(list) { - var self = this; - var roomList = list; + manualComparator: function(roomA, roomB) { + if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0; - return function(roomA, roomB) { - if (!roomA.tags[self.props.tagName] || !roomB.tags[self.props.tagName]) return 0; + // Make sure the room tag has an order element, if not set it to be the bottom + var a = roomA.tags[this.props.tagName].order; + var b = roomB.tags[this.props.tagName].order; - // Make sure the room tag has an order element, if not set it to be the bottom - var a = roomA.tags[self.props.tagName].order; - var b = roomB.tags[self.props.tagName].order; - - if (a === undefined) { - a = (self._getHighestOrder(roomList) + 1.0) / 2.0; - roomA.tags[self.props.tagName].order = a; - }; - if (b === undefined) { - b = (self._getHighestOrder(roomList) + 1.0) / 2.0; - roomB.tags[self.props.tagName].order = b; - }; - - return a == b ? self.lexicographicalComparator(roomA, roomB) : ( a > b ? 1 : -1); + // Order undefined room tag orders to the bottom + if (a === undefined && b !== undefined) { + return 1; + } else if (a !== undefined && b === undefined) { + return -1; } + + return a == b ? this.lexicographicalComparator(roomA, roomB) : ( a > b ? 1 : -1); }, sortList: function(list, order) { @@ -183,30 +176,16 @@ var RoomSubList = React.createClass({ if (order === undefined) order = this.props.order; var comparator; list = list || []; - if (order === "manual") comparator = this.manualComparator(list); + if (order === "manual") comparator = this.manualComparator; if (order === "recent") comparator = this.recentsComparator; + // Fix undefined orders here, and make sure the backend gets updated as well + this._fixUndefinedOrder(list); + //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list); this.setState({ sortedList: list.sort(comparator) }); }, - // Finds the highest (lowest position) order of a room in a manual ordered list - // room.tag[tagname].order - _getHighestOrder: function(list) { - var order = 0.0; - if (this.props.order === "manual") { - var self = this; - list.forEach(function(room) { - if (room.tags.hasOwnProperty(self.props.tagName)) { - if (order < room.tags[self.props.tagName].order) { - order = room.tags[self.props.tagName].order; - } - } - }) - } - return order; - }, - moveRoomTile: function(room, atIndex) { if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex); //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms)); @@ -351,6 +330,46 @@ var RoomSubList = React.createClass({ this.props.onShowMoreRooms(); }, + // Fix any undefined order elements of a room in a manual ordered list + // room.tag[tagname].order + _fixUndefinedOrder: function(list) { + if (this.props.order === "manual") { + var order = 0.0; + var self = this; + + // Find the highest (lowest position) order of a room in a manual ordered list + list.forEach(function(room) { + if (room.tags.hasOwnProperty(self.props.tagName)) { + if (order < room.tags[self.props.tagName].order) { + order = room.tags[self.props.tagName].order; + } + } + }); + + // Fix any undefined order elements of a room in a manual ordered list + // Do this one at a time, as each time a rooms tag data is updated the RoomList + // gets triggered and another list is passed in. Doing it one at a time means that + // we always correctly calculate the highest order for the list - stops multiple + // rooms getting the same order. This is only really relevant for the first time this + // is run with historical room tag data, after that there should only be undefined + // in the list at a time anyway. + for (let i = 0; i < list.length; i++) { + if (list[i].tags[self.props.tagName].order === undefined) { + MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() { + // Do any final stuff here + }).fail(function(err) { + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + Modal.createDialog(ErrorDialog, { + title: "Failed to add tag " + self.props.tagName + " to room", + description: err.toString() + }); + }); + break; + }; + }; + } + }, + render: function() { var connectDropTarget = this.props.connectDropTarget; var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); From b1dd7efed8d36c0696c0500c8157f906971d73e2 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 11:51:23 +0100 Subject: [PATCH 09/14] Fixed weird lightening of fonts on a refresh of page on safari --- src/skins/vector/css/common.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index fb87668a8..b2952d5ba 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -32,6 +32,8 @@ body { color: #454545; border: 0px; margin: 0px; + /* This should render the fonts the same accross browsers */ + -webkit-font-smoothing: subpixel-antialiased; } div.error { From ff13782ab53bd73560c5156ed2f723c9183a01eb Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 12:06:03 +0100 Subject: [PATCH 10/14] Added set icons --- .../views/context_menus/RoomTagContextMenu.js | 2 ++ .../views/context_menus/RoomTagContextMenu.css | 17 +++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 68da3648a..8c42dbc82 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -142,10 +142,12 @@ module.exports = React.createClass({
+ Favourite
+ Low Priority
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 a1f29f1fd..556d404ac 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 @@ -33,10 +33,20 @@ limitations under the License. color: #ff0064; } + + .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { font-weight: bold; } +.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { + display: none; +} + +.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon_set { + display: inline-block; +} + .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled { color: rgba(0, 0, 0, 0.2); } @@ -44,6 +54,13 @@ limitations under the License. .mx_RoomTagContextMenu_icon { padding-right: 8px; padding-left: 4px; + display: inline-block +} + +.mx_RoomTagContextMenu_icon_set { + padding-right: 8px; + padding-left: 4px; + display: none; } .mx_RoomTagContextMenu_separator { From f8fa19ed47a4b8150267c9c89b7dfde778231300 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 15:04:02 +0100 Subject: [PATCH 11/14] Room tag menu dohickey on the avatar on hover --- .../matrix-react-sdk/views/rooms/RoomTile.css | 36 +++++++++++++++++++ .../context_menus/RoomTagContextMenu.css | 2 -- src/skins/vector/img/icon_context_delete.svg | 14 ++------ src/skins/vector/img/icons_ellipsis.svg | 11 ++++++ 4 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 src/skins/vector/img/icons_ellipsis.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index b86f39a2d..eb55f63f0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -39,6 +39,42 @@ limitations under the License. vertical-align: middle; } +.mx_RoomTile_avatar_container:hover:before, +.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before { + display: block; + position: absolute; + content: ""; + border-radius: 40px; + background-image: url("img/icons_ellipsis.svg"); + background-size: 25px; + left: 17px; + width: 24px; + height: 24px; + z-index: 4; +} + +.mx_RoomTile_avatar_container:hover:after, +.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after { + display: block; + position: absolute; + content: ""; + border-radius: 40px; + background: #4A4A4A; + top: 5px; + width: 24px; + height: 24px; + opacity: 0.6; + z-index: 2; +} + +.collapsed .mx_RoomTile_avatar_container:hover:before { + display: none; +} + +.collapsed .mx_RoomTile_avatar_container:hover:after { + display: none; +} + .mx_RoomTile_name { display: inline-block; position: relative; 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 556d404ac..b9684b070 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 @@ -33,8 +33,6 @@ limitations under the License. color: #ff0064; } - - .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 index 7e8eb51e7..896b94ad1 100644 --- a/src/skins/vector/img/icon_context_delete.svg +++ b/src/skins/vector/img/icon_context_delete.svg @@ -1,18 +1,10 @@ - + - - - - - - - - - - + + diff --git a/src/skins/vector/img/icons_ellipsis.svg b/src/skins/vector/img/icons_ellipsis.svg new file mode 100644 index 000000000..43a5496e4 --- /dev/null +++ b/src/skins/vector/img/icons_ellipsis.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 9798e14733e178d27dc20173e16a9d9718043927 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 16:35:22 +0100 Subject: [PATCH 12/14] Menu colour now changeable, and leave room item hooked up. Some additional CSS tweaks to fit current design changes --- .../views/context_menus/RoomTagContextMenu.js | 16 ++++++++++++--- .../structures/ContextualMenu.css | 2 +- .../matrix-react-sdk/structures/SearchBox.css | 4 ++-- .../views/avatars/BaseAvatar.css | 1 + .../views/rooms/RoomHeader.css | 2 +- .../matrix-react-sdk/views/rooms/RoomTile.css | 20 +++++++++---------- .../context_menus/RoomTagContextMenu.css | 5 +++-- 7 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 8c42dbc82..776f95227 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -114,11 +114,21 @@ module.exports = React.createClass({ }, _onClickLeave: function() { - // Leave room - tag room as 'Archive'? + // Leave room + dis.dispatch({ + action: 'leave_room', + room_id: this.props.room.roomId, + }); + + // Close the context menu + if (this.props.onFinished) { + this.props.onFinished(); + }; }, render: function() { - var cli = MatrixClientPeg.get(); + var myUserId = MatrixClientPeg.get().credentials.userId; + var myMember = this.props.room.getMember(myUserId); var favouriteClasses = classNames({ 'mx_RoomTagContextMenu_field': true, @@ -151,7 +161,7 @@ module.exports = React.createClass({ Low Priority
-
+
Leave
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css index 7523bd103..d317363dd 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -55,7 +55,7 @@ limitations under the License. border-bottom: 8px solid transparent; } -.mx_ContextualMenu_chevron_right:after{ +.mx_ContextualMenu_chevron_right:after { content:''; width: 0; height: 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 598952380..d9e4e05fd 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -16,8 +16,8 @@ limitations under the License. .mx_SearchBox { height: 24px; - margin-left: 18px; - margin-right: 18px; + margin-left: 16px; + margin-right: 16px; padding-top: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css index 901a29599..6cbd673b2 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css @@ -23,6 +23,7 @@ limitations under the License. z-index: 1; color: #fff; text-align: center; + padding-top: 1px; speak: none; pointer-events: none; font-weight: normal; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 824568775..056fa8794 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -233,7 +233,7 @@ limitations under the License. } .mx_RoomHeader_button { - margin-left: 8px; + margin-left: 12px; cursor: pointer; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index eb55f63f0..69b9dd4e0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -19,23 +19,23 @@ limitations under the License. cursor: pointer; font-size: 13px; display: block; - height: 34px; + height: 35px; } .mx_RoomTile_nameContainer { display: inline-block; width: 180px; - height: 24px; + height: 25px; } .mx_RoomTile_avatar { display: inline-block; padding-top: 5px; padding-bottom: 5px; - padding-left: 18px; + padding-left: 16px; padding-right: 6px; - width: 24px; - height: 24px; + width: 25px; + height: 25px; vertical-align: middle; } @@ -47,9 +47,9 @@ limitations under the License. border-radius: 40px; background-image: url("img/icons_ellipsis.svg"); background-size: 25px; - left: 17px; - width: 24px; - height: 24px; + left: 16px; + width: 25px; + height: 25px; z-index: 4; } @@ -61,8 +61,8 @@ limitations under the License. border-radius: 40px; background: #4A4A4A; top: 5px; - width: 24px; - height: 24px; + width: 25px; + height: 25px; opacity: 0.6; z-index: 2; } 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 b9684b070..1dd38589d 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,13 +15,14 @@ limitations under the License. */ .mx_RoomTagContextMenu_field { - padding-top: 8px; + padding-top: 10px; padding-right: 20px; - padding-bottom: 8px; + padding-bottom: 10px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; + line-height: 10px; } .mx_RoomTagContextMenu_field:first-child { From 804b17fbf12842639a274ce2b15cb26d57ad4817 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 17:00:06 +0100 Subject: [PATCH 13/14] Teaks to the CSS for the new ellipsis icon, and resizing the avatar back to 24px from 25px, as needs to be even number for the Text letter to align vertically --- .../views/avatars/BaseAvatar.css | 1 - .../matrix-react-sdk/views/rooms/RoomTile.css | 18 +++++++++--------- src/skins/vector/img/icons_ellipsis.svg | 12 +----------- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css index 6cbd673b2..901a29599 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css @@ -23,7 +23,6 @@ limitations under the License. z-index: 1; color: #fff; text-align: center; - padding-top: 1px; speak: none; pointer-events: none; font-weight: normal; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 69b9dd4e0..c266b027d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -19,13 +19,13 @@ limitations under the License. cursor: pointer; font-size: 13px; display: block; - height: 35px; + height: 34px; } .mx_RoomTile_nameContainer { display: inline-block; width: 180px; - height: 25px; + height: 24px; } .mx_RoomTile_avatar { @@ -34,8 +34,8 @@ limitations under the License. padding-bottom: 5px; padding-left: 16px; padding-right: 6px; - width: 25px; - height: 25px; + width: 24px; + height: 24px; vertical-align: middle; } @@ -47,9 +47,9 @@ limitations under the License. border-radius: 40px; background-image: url("img/icons_ellipsis.svg"); background-size: 25px; - left: 16px; - width: 25px; - height: 25px; + left: 15px; + width: 24px; + height: 24px; z-index: 4; } @@ -61,8 +61,8 @@ limitations under the License. border-radius: 40px; background: #4A4A4A; top: 5px; - width: 25px; - height: 25px; + width: 24px; + height: 24px; opacity: 0.6; z-index: 2; } diff --git a/src/skins/vector/img/icons_ellipsis.svg b/src/skins/vector/img/icons_ellipsis.svg index 43a5496e4..ba600ccac 100644 --- a/src/skins/vector/img/icons_ellipsis.svg +++ b/src/skins/vector/img/icons_ellipsis.svg @@ -1,11 +1 @@ - - - - - - - - - - - + From 28343aaa33d535e2baf9ae305b7f64eb418e9502 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 10 Aug 2016 17:44:49 +0100 Subject: [PATCH 14/14] Aignment tweak for the room tag menu so the icons better align --- .../vector-web/views/context_menus/RoomTagContextMenu.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 1dd38589d..947fd480f 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,14 +15,14 @@ limitations under the License. */ .mx_RoomTagContextMenu_field { - padding-top: 10px; + padding-top: 8px; padding-right: 20px; - padding-bottom: 10px; + padding-bottom: 8px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; - line-height: 10px; + line-height: 16px; } .mx_RoomTagContextMenu_field:first-child {