Added the two additiona states that don't yet exist on the backend, as faded and disabled options

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -65,19 +65,8 @@ module.exports = React.createClass({
         }
     },
 
-    _onToggle: function(ev) {
-        switch (ev.target.value) {
-            case "all":
-                this._save(false);
-                break;
-            case "mute":
-                this._save(true);
-                break;
-        }
-
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
+    _onClickAlertMe: function() {
+        // Placeholder
     },
 
     _onClickAllNotifs: function() {
@@ -87,6 +76,10 @@ module.exports = React.createClass({
         };
     },
 
+    _onClickMentions: function() {
+        // Placeholder
+    },
+
     _onClickMute: function() {
         this._save(true);
         if (this.props.onFinished) {
@@ -97,11 +90,21 @@ module.exports = React.createClass({
     render: function() {
         var cli = MatrixClientPeg.get();
 
+        var alertMeClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
         var allNotifsClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
             'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
         });
 
+        var mentionsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
         var muteNotifsClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
             'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
@@ -109,11 +112,19 @@ module.exports = React.createClass({
 
         return (
             <div>
+                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
+                    <img src="img/icon-context-mute-off-copy.svg" width="15" height="10" />
+                    Alert me
+                </div>
                 <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
                     { !this.state.areNotifsMuted ? "ON" : "OFF" }
                     <img src="img/icon-context-mute-off.svg" width="15" height="10" />
                     All notifications
                 </div>
+                <div className={ mentionsClasses } onClick={this._onClickMentions} >
+                    <img src="img/icon-context-mute-mentions.svg" width="15" height="10" />
+                    Mentions only
+                </div>
                 <div className={ muteNotifsClasses } onClick={this._onClickMute} >
                     { this.state.areNotifsMuted ? "ON" : "OFF" }
                     <img src="img/icon-context-mute.svg" width="15" height="10" />

src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css

@@ -22,3 +22,7 @@ limitations under the License.
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
     font-weight: bold;
 }
+
+.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}

src/skins/vector/img/icon-context-mute-mentions.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="15" height="12" viewBox="0, 0, 15, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <g id="icon_context_mute_mentions">
+      <path d="M1,4 L3.661,4 L7,1 L7,11 L3.672,8 L1,8 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-1"/>
+      <path d="M13,4.5 C13,5.328 12.328,6 11.5,6 C10.672,6 10,5.328 10,4.5 C10,3.672 10.672,3 11.5,3 C12.328,3 13,3.672 13,4.5 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-3"/>
+      <path d="M14,9.5 C14,6.84 12.881,6 11.5,6 C10.119,6 9,6.884 9,9.5 L14,9.5 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-5"/>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icon-context-mute-off-copy.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="16" height="12" viewBox="0, 0, 16, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <path d="M1,4 L3.661,4 L7,1 L7,11 L3.672,8 L1,8 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-1"/>
+    <path d="M9.878,7.667 C10.82,7.667 11.584,6.92 11.584,6 C11.584,5.08 10.82,4.333 9.878,4.333" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50"/>
+    <path d="M10.055,9.333 C11.939,9.333 13.466,7.841 13.466,6 C13.466,4.159 11.939,2.667 10.055,2.667" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy"/>
+    <path d="M10.055,11 C12.881,11 15.172,8.761 15.172,6 C15.172,3.239 12.881,1 10.055,1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy-2"/>
+  </g>
+</svg>