From 5cf164fcc156823a77e7ed905a33d52cee5fcab5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 10:40:57 +0100 Subject: [PATCH] Re-modularised the context menus --- src/component-index.js | 4 +- .../MessageContextMenu.js | 0 .../NotificationStateContextMenu.js | 8 +- src/skins/vector/css/common.css | 81 ------------------- .../structures/ContextualMenu.css | 80 ++++++++++++++++++ 5 files changed, 88 insertions(+), 85 deletions(-) rename src/components/views/{rooms => context_menus}/MessageContextMenu.js (100%) rename src/components/views/{rooms => context_menus}/NotificationStateContextMenu.js (93%) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css diff --git a/src/component-index.js b/src/component-index.js index 029a0a8182..819420f8ea 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -34,6 +34,8 @@ module.exports.components['structures.RoomDirectory'] = require('./components/st module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList'); module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); 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.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'); @@ -46,8 +48,6 @@ module.exports.components['views.messages.DateSeparator'] = require('./component module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile'); module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); -module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu'); -module.exports.components['views.rooms.NotificationStateContextMenu'] = require('./components/views/rooms/NotificationStateContextMenu'); module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); diff --git a/src/components/views/rooms/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js similarity index 100% rename from src/components/views/rooms/MessageContextMenu.js rename to src/components/views/context_menus/MessageContextMenu.js diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js similarity index 93% rename from src/components/views/rooms/NotificationStateContextMenu.js rename to src/components/views/context_menus/NotificationStateContextMenu.js index d8a79b3062..7859f810ba 100644 --- a/src/components/views/rooms/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -110,10 +110,14 @@ module.exports = React.createClass({ return (
- { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications + { !this.state.areNotifsMuted ? "ON" : "OFF" } + + All notifications
- { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute + { this.state.areNotifsMuted ? "ON" : "OFF" } + + Mute
); diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index bca1949309..d542850df2 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -85,87 +85,6 @@ input[type=text]:focus, textarea:focus { border-left: 6px solid transparent; } -.mx_ContextualMenu_background { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1.0; - z-index: 2000; -} - -.mx_ContextualMenu { - border: solid 1px rgba(187, 187, 187, 0.5); - border-radius: 4px; - background-color: #f6f6f6; - color: #4a4a4a; - position: fixed; - z-index: 2001; - padding: 6px; - font-size: 14px; -} - -.mx_ContextualMenu_chevron_right { - position: absolute; - right: -8px; - top: 10px; - width: 0; - height: 0; - border-top: 8px solid transparent; - border-left: 8px solid rgba(187, 187, 187, 0.5); - border-bottom: 8px solid transparent; -} - -.mx_ContextualMenu_chevron_right:after{ - content:''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-left: 7px solid #f6f6f6; - border-bottom: 7px solid transparent; - position:absolute; - top: -7px; - right: 1px; -} - -.mx_ContextualMenu_chevron_left { - position: absolute; - left: -8px; - top: 10px; - width: 0; - height: 0; - border-top: 8px solid transparent; - border-right: 8px solid rgba(187, 187, 187, 0.5); - border-bottom: 8px solid transparent; -} - -.mx_ContextualMenu_chevron_left:after{ - content:''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-right: 7px solid #f6f6f6; - border-bottom: 7px solid transparent; - position:absolute; - top: -7px; - left: 1px; -} - -.mx_ContextualMenu_field { - padding: 3px 6px 3px 6px; - cursor: pointer; -} - -.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { - font-weight: bold; -} - -.mx_ContextualMenu_spinner { - display: block; - margin: 0 auto; -} - .mx_Dialog_wrapper { position: fixed; z-index: 4000; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css new file mode 100644 index 0000000000..95282e35f2 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -0,0 +1,80 @@ +.mx_ContextualMenu_background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 2000; +} + +.mx_ContextualMenu { + border: solid 1px rgba(187, 187, 187, 0.5); + border-radius: 4px; + background-color: #f6f6f6; + color: #4a4a4a; + position: fixed; + z-index: 2001; + padding: 6px; + font-size: 14px; +} + +.mx_ContextualMenu_chevron_right { + position: absolute; + right: -8px; + top: 10px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-left: 8px solid rgba(187, 187, 187, 0.5); + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_right:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-left: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + right: 1px; +} + +.mx_ContextualMenu_chevron_left { + position: absolute; + left: -8px; + top: 10px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-right: 8px solid rgba(187, 187, 187, 0.5); + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_left:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; +} + +.mx_ContextualMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; +} + +.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { + font-weight: bold; +} + +.mx_ContextualMenu_spinner { + display: block; + margin: 0 auto; +}