Re-modularised the context menus

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');

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -110,10 +110,14 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
-                    { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications
+                    { !this.state.areNotifsMuted ? "ON" : "OFF" }
+                    <img src="img/icon-context-mute-off.svg" width="15" height="10" />
+                    All notifications
                 </div>
                 <div className={ muteNotifsClasses } onClick={this._onClickMute} >
-                    { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute
+                    { this.state.areNotifsMuted ? "ON" : "OFF" }
+                    <img src="img/icon-context-mute.svg" width="15" height="10" />
+                    Mute
                 </div>
             </div>
         );

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;

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