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