From ad74d264a3e59601a3c3b205cb2c64a7018e78a0 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 11:37:40 +0100
Subject: [PATCH 01/43] Selected room highlight teaked to better fit previous
 design

---
 .../css/matrix-react-sdk/views/rooms/RoomTile.css  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

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 770a3a625f..66e1178139 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
@@ -27,6 +27,7 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     padding-left: 18px;
+    padding-right: 6px;
     width: 24px;
     height: 24px;
     vertical-align: middle;
@@ -38,8 +39,10 @@ limitations under the License.
     vertical-align: middle;
     overflow: hidden;
     word-break: break-word;
-    padding-left: 11px;
+    padding-left: 5px;
     padding-right: 15px;
+    padding-top: 4px;
+    padding-bottom: 4px;
     color: rgba(69, 69, 69, 0.8);
 }
 
@@ -128,14 +131,7 @@ style are the same, this style needs to be AFTER it to take effect when matched
     font-weight: bold;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name span {
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    padding: 4px;
-    margin-top: -4px;
-    margin-bottom: -4px;
-    border-radius: 2px;
+.mx_RoomTile_selected .mx_RoomTile_name {
     background-color: rgba(118,207,166,0.2);
 }
 

From 73bb3179253771508c5db6845652c9f3fef0a943 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 12:19:11 +0100
Subject: [PATCH 02/43] Slight tweak to the name padding so there is a little
 less space above and below the name

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 66e1178139..5eb9026870 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
@@ -41,8 +41,8 @@ limitations under the License.
     word-break: break-word;
     padding-left: 5px;
     padding-right: 15px;
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     color: rgba(69, 69, 69, 0.8);
 }
 

From df163d8cb7f06cdf4214a44343446d5fbd82ff45 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 14:33:27 +0100
Subject: [PATCH 03/43] Clean up of the CSS, and refactor to better match
 current code

---
 .../matrix-react-sdk/views/rooms/RoomTile.css | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

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 5eb9026870..d2437c4ef2 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
@@ -56,14 +56,14 @@ limitations under the License.
 */
 }
 
-.collapsed .mx_RoomTile_name {
-    display: none;
-}
-
 .collapsed .mx_RoomTile {
     height: 36px;
 }
 
+.collapsed .mx_RoomTile_name {
+    display: none;
+}
+
 .collapsed .mx_RoomTile_badge {
     top: -40px;
     left: 30px;
@@ -74,6 +74,11 @@ limitations under the License.
     z-index: 200;
 }
 
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
+    display: none;
+}
+
 /* This is the bottom of the speech bubble */
 .mx_RoomTile_highlight .mx_RoomTile_badge:after {
     content: "";
@@ -86,12 +91,6 @@ limitations under the License.
     border-right: 10px solid transparent;
 }
 
-/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after"
-style are the same, this style needs to be AFTER it to take effect when matched */
-.collapsed .mx_RoomTile_badge:after {
-    display: none;
-}
-
 .mx_RoomTile_badge {
     display: inline-block;
     min-width: 14px;
@@ -109,7 +108,7 @@ style are the same, this style needs to be AFTER it to take effect when matched
     padding-right: 4px;
 }
 
-.mx_RoomTile_badge:hover {
+.mx_RoomTile .mx_RoomTile_badge:hover {
     letter-spacing: 0.1em;
     opacity: 1;
 }
@@ -122,7 +121,7 @@ style are the same, this style needs to be AFTER it to take effect when matched
     background-color: #ff0064;
 }
 
-.mx_RoomTile_badge_no_unread {
+.mx_RoomTile_read .mx_RoomTile_badge {
     background-color: rgb(214, 214, 214);
     opacity: 0;
 }

From 633a3f48675ce4cdf439c9e9e957f9aa9414241f Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 17:44:05 +0100
Subject: [PATCH 04/43] New component for testing

---
 src/component-index.js                 |  1 +
 src/components/views/elements/Label.js | 39 ++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/components/views/elements/Label.js

diff --git a/src/component-index.js b/src/component-index.js
index b3baf22aed..fc4a72c7fc 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -35,6 +35,7 @@ module.exports.components['structures.RoomSubList'] = require('./components/stru
 module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
 module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
+module.exports.components['views.elements.Label'] = require('./components/views/elements/Label');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
 module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar');
diff --git a/src/components/views/elements/Label.js b/src/components/views/elements/Label.js
new file mode 100644
index 0000000000..2bfbebc3f9
--- /dev/null
+++ b/src/components/views/elements/Label.js
@@ -0,0 +1,39 @@
+/*
+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 React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'Label',
+
+    propTypes: {
+        label: React.PropTypes.string,
+    },
+
+    getInitialState: function() {
+        return({ label : "LABEL" });
+    },
+
+    render: function() {
+        return (
+            <div>
+                { this.props.label }
+            </div>
+        );
+    }
+});

From e988f5ca3ba9452dde55c05a1c5ba4eb9a63c533 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 17:54:33 +0100
Subject: [PATCH 05/43] Badge visual tweaks

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 d2437c4ef2..1b5c02b961 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
@@ -94,16 +94,16 @@ limitations under the License.
 .mx_RoomTile_badge {
     display: inline-block;
     min-width: 14px;
-    height: 18px;
+    height: 17px;
     position: relative;
     left: 8px;
     top: 2px;
-    border-radius: 18px;
+    border-radius: 14px;
     color: #fff;
-    font-weight: bold;
+    font-weight: 600;
     font-size: 11px;
     text-align: center;
-    padding-top: 2px;
+    padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
 }

From 24e021b91f0474ac8d9ee8ca76891e6e78ece37a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 21 Jul 2016 18:19:52 +0100
Subject: [PATCH 06/43] Badge dohickey shown on name hover and badge hover

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 1b5c02b961..221d707ce4 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
@@ -108,7 +108,7 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge:hover {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton {
     letter-spacing: 0.1em;
     opacity: 1;
 }

From 7eff6d968e6ebdfff2ea6619ce2ecc9a835c2ef3 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 22 Jul 2016 11:16:04 +0100
Subject: [PATCH 07/43] Tweak to z-index as the tooltip was occasionally
 getting occluded.

---
 .../css/vector-web/views/rooms/RoomTooltip.css     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index 3aec0fa7f6..f1ec610eaa 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomTooltip_chevron {
+    position: absolute;
+    left: -9px;
+    top: 7px;
+}
+
 .mx_RoomTooltip {
     display: none;
     position: fixed;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
-    z-index: 1000;
+    z-index: 2000;
     left: 64px;
     padding: 6px;
 }
-
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -9px;
-    top: 8px;
-}

From ce5311191fde6d5fc9df3b824cc8c3714a54a855 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 22 Jul 2016 11:30:41 +0100
Subject: [PATCH 08/43] Tweaked tooltip z-index

---
 .../css/vector-web/views/rooms/RoomTooltip.css     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index 3aec0fa7f6..f1ec610eaa 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomTooltip_chevron {
+    position: absolute;
+    left: -9px;
+    top: 7px;
+}
+
 .mx_RoomTooltip {
     display: none;
     position: fixed;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
-    z-index: 1000;
+    z-index: 2000;
     left: 64px;
     padding: 6px;
 }
-
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -9px;
-    top: 8px;
-}

From 72b4a86eedffc6b9551fc2e88c1036858930554b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 22 Jul 2016 14:59:02 +0100
Subject: [PATCH 09/43] Tweaked the tooltip to be better aligned. Also added
 the fading of the room name if too long

---
 .../css/matrix-react-sdk/views/rooms/RoomTile.css | 15 ++++++++++++++-
 .../css/vector-web/structures/LeftPanel.css       |  1 +
 .../css/vector-web/views/rooms/RoomTooltip.css    |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

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 221d707ce4..fb28b559b5 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
@@ -35,10 +35,12 @@ limitations under the License.
 
 .mx_RoomTile_name {
     display: inline-block;
+    position: relative;
     width: 100px;
     vertical-align: middle;
     overflow: hidden;
-    word-break: break-word;
+    /* word-break: break-word; */
+    white-space: nowrap;
     padding-left: 5px;
     padding-right: 15px;
     padding-top: 2px;
@@ -46,6 +48,17 @@ limitations under the License.
     color: rgba(69, 69, 69, 0.8);
 }
 
+.mx_RoomTile_name:before {
+    content:'';
+    width:100px;
+    height:22px;
+    top: 0px;
+    left: 0px;
+    position:absolute;
+    padding-left: 20px;
+    background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
+}
+
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
     font-style: italic;
     color: #454545;
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index ea12c953fe..0ea76c928a 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -63,6 +63,7 @@ limitations under the License.
     margin-right: 18px;
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
+    z-index: 1;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu_options {
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index f1ec610eaa..deb8cd3f96 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -27,6 +27,6 @@ limitations under the License.
     border-radius: 8px;
     background-color: #fff;
     z-index: 2000;
-    left: 64px;
+    left: 52px;
     padding: 6px;
 }

From 204e42494a6af2745b5178f98d26ef0246048780 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 22 Jul 2016 16:11:42 +0100
Subject: [PATCH 10/43] The default props doesn't seem to be working, hardcoded
 'LABEL' for now. OnClick closes menu

---
 src/components/views/elements/Label.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/Label.js b/src/components/views/elements/Label.js
index 2bfbebc3f9..2608dd4537 100644
--- a/src/components/views/elements/Label.js
+++ b/src/components/views/elements/Label.js
@@ -29,10 +29,16 @@ module.exports = React.createClass({
         return({ label : "LABEL" });
     },
 
+    onLabelClick: function() {
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
     render: function() {
         return (
             <div>
-                { this.props.label }
+                <div className="mx_ContextualMenu_field" onClick={ this.onLabelClick }>
+                    LABEL
+                </div>
             </div>
         );
     }

From 2768cd201038afbb6dd649f12ec64129cb0c68ea Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 22 Jul 2016 17:30:09 +0100
Subject: [PATCH 11/43] Initial unstyled mentions state notifier context menu

---
 src/component-index.js                        |   2 +-
 src/components/views/elements/Label.js        |  45 --------
 .../rooms/NotificationStateContextMenu.js     | 107 ++++++++++++++++++
 3 files changed, 108 insertions(+), 46 deletions(-)
 delete mode 100644 src/components/views/elements/Label.js
 create mode 100644 src/components/views/rooms/NotificationStateContextMenu.js

diff --git a/src/component-index.js b/src/component-index.js
index fc4a72c7fc..029a0a8182 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -35,7 +35,6 @@ module.exports.components['structures.RoomSubList'] = require('./components/stru
 module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
 module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
-module.exports.components['views.elements.Label'] = require('./components/views/elements/Label');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
 module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar');
@@ -48,6 +47,7 @@ module.exports.components['views.messages.MessageTimestamp'] = require('./compon
 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/elements/Label.js b/src/components/views/elements/Label.js
deleted file mode 100644
index 2608dd4537..0000000000
--- a/src/components/views/elements/Label.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-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 React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'Label',
-
-    propTypes: {
-        label: React.PropTypes.string,
-    },
-
-    getInitialState: function() {
-        return({ label : "LABEL" });
-    },
-
-    onLabelClick: function() {
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    render: function() {
-        return (
-            <div>
-                <div className="mx_ContextualMenu_field" onClick={ this.onLabelClick }>
-                    LABEL
-                </div>
-            </div>
-        );
-    }
-});
diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js
new file mode 100644
index 0000000000..d485422d9a
--- /dev/null
+++ b/src/components/views/rooms/NotificationStateContextMenu.js
@@ -0,0 +1,107 @@
+/*
+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 MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'NotificationStateContextMenu',
+
+    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,
+        };
+    },
+
+    onAllClick: function() {
+        if (this.props.onFinished) {
+            this.setState({areNotifsMuted: false});
+            this._save(false);
+            this.props.onFinished();
+        }
+    },
+
+    onMuteClick: function() {
+        if (this.props.onFinished) {
+            this.setState({areNotifsMuted: true});
+            this._save(true);
+            this.props.onFinished();
+        }
+    },
+
+    _save: function( isMuted ) {
+        const roomId = this.props.room.roomId;
+        /*
+        if (this.state.areNotifsMuted !== originalState.areNotifsMuted) {
+            promises.push(MatrixClientPeg.get().setRoomMutePushRule(
+                "global", roomId, this.state.areNotifsMuted
+            ));
+        }
+        */
+        MatrixClientPeg.get().setRoomMutePushRule(
+            "global", roomId, isMuted
+        );
+    },
+
+    _onToggle: function(keyName, checkedValue, uncheckedValue, ev) {
+        console.log("Checkbox toggle: %s %s", keyName, ev.target.checked);
+        var state = {};
+        state[keyName] = ev.target.checked ? checkedValue : uncheckedValue;
+        this.setState(state);
+    },
+
+    render: function() {
+        var cli = MatrixClientPeg.get();
+        return (
+            <div>
+                {/*
+                <div className="mx_ContextualMenu_field">
+                    <input type="checkbox" disabled={ cli.isGuest() }
+                           onChange={this._onToggle.bind(this, "areNotifsMuted", true, false)}
+                           defaultChecked={this.state.areNotifsMuted}/>
+                    Mute notifications for this room
+                </div>
+                */}
+                <div className="mx_ContextualMenu_field" onClick={ this.onAllClick }>
+                    All notifications - { this.state.areNotifsMuted ? "OFF" : "ON" }
+                </div>
+                <div className="mx_ContextualMenu_field" onClick={ this.onMuteClick }>
+                    Mute - { this.state.areNotifsMuted ? "ON" : "OFF" }
+                </div>
+            </div>
+        );
+    }
+});

From 791980cd1f9e22279fc3f8c25cabb1f2bdf67c73 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 25 Jul 2016 17:19:06 +0100
Subject: [PATCH 12/43] Menu context dohickey now sticks when menu shown

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 fb28b559b5..8a32993f52 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
@@ -121,7 +121,7 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge  {
     letter-spacing: 0.1em;
     opacity: 1;
 }

From 30b1e7078faffacb39af8aa9fd8f9f1041202f33 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 25 Jul 2016 18:04:16 +0100
Subject: [PATCH 13/43] Contextual menu restyling

---
 src/skins/vector/css/common.css | 52 ++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index 1d4be178b5..b9dab27069 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -96,27 +96,59 @@ input[type=text]:focus, textarea:focus {
 }
 
 .mx_ContextualMenu {
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #747474;
+    border: solid 1px rgba(187, 187, 187, 0.5);
+    border-radius: 4px;
+    background-color: #f6f6f6;
+    color: #4a4a4a;
     position: fixed;
     z-index: 2001;
     padding: 6px;
 }
 
 .mx_ContextualMenu_chevron_right {
-    padding: 12px;
     position: absolute;
-    right: -21px;
-    top: 0px;
+    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 {
-    padding: 12px;
     position: absolute;
-    left: -21px;
-    top: 0px;
+    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 {

From 187818aaa006f209541e5de500c710f5ec51bb7b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 26 Jul 2016 10:34:03 +0100
Subject: [PATCH 14/43] Radio buttons now added, and only none guests can
 modify notfication state

---
 .../rooms/NotificationStateContextMenu.js     | 64 ++++++++-----------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js
index d485422d9a..3d125d2c14 100644
--- a/src/components/views/rooms/NotificationStateContextMenu.js
+++ b/src/components/views/rooms/NotificationStateContextMenu.js
@@ -46,22 +46,6 @@ module.exports = React.createClass({
         };
     },
 
-    onAllClick: function() {
-        if (this.props.onFinished) {
-            this.setState({areNotifsMuted: false});
-            this._save(false);
-            this.props.onFinished();
-        }
-    },
-
-    onMuteClick: function() {
-        if (this.props.onFinished) {
-            this.setState({areNotifsMuted: true});
-            this._save(true);
-            this.props.onFinished();
-        }
-    },
-
     _save: function( isMuted ) {
         const roomId = this.props.room.roomId;
         /*
@@ -71,35 +55,43 @@ module.exports = React.createClass({
             ));
         }
         */
-        MatrixClientPeg.get().setRoomMutePushRule(
-            "global", roomId, isMuted
-        );
+        var cli = MatrixClientPeg.get();
+        this.setState({areNotifsMuted: isMuted});
+        if (!cli.isGuest()) {
+            cli.setRoomMutePushRule(
+                "global", roomId, isMuted
+            );
+        }
     },
 
-    _onToggle: function(keyName, checkedValue, uncheckedValue, ev) {
-        console.log("Checkbox toggle: %s %s", keyName, ev.target.checked);
-        var state = {};
-        state[keyName] = ev.target.checked ? checkedValue : uncheckedValue;
-        this.setState(state);
+    _onToggle: function(ev) {
+        switch (ev.target.value) {
+            case "all":
+                if (this.props.onFinished) {
+                    this._save(false);
+                    this.props.onFinished();
+                }
+                break;
+            case "mute":
+                if (this.props.onFinished) {
+                    this._save(true);
+                    this.props.onFinished();
+                }
+                break;
+        }
     },
 
     render: function() {
         var cli = MatrixClientPeg.get();
         return (
             <div>
-                {/*
-                <div className="mx_ContextualMenu_field">
-                    <input type="checkbox" disabled={ cli.isGuest() }
-                           onChange={this._onToggle.bind(this, "areNotifsMuted", true, false)}
-                           defaultChecked={this.state.areNotifsMuted}/>
-                    Mute notifications for this room
+                <div className="mx_ContextualMenu_field" >
+                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="all" onChange={this._onToggle} checked={!this.state.areNotifsMuted}/>
+                    All notifications
                 </div>
-                */}
-                <div className="mx_ContextualMenu_field" onClick={ this.onAllClick }>
-                    All notifications - { this.state.areNotifsMuted ? "OFF" : "ON" }
-                </div>
-                <div className="mx_ContextualMenu_field" onClick={ this.onMuteClick }>
-                    Mute - { this.state.areNotifsMuted ? "ON" : "OFF" }
+                <div className="mx_ContextualMenu_field" >
+                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="mute" onChange={this._onToggle} checked={this.state.areNotifsMuted}/>
+                    Mute
                 </div>
             </div>
         );

From 15f9f5dbe80cf86d112128e3051ecb53468821a0 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 26 Jul 2016 17:24:45 +0100
Subject: [PATCH 15/43] Doing the state change via onClick events rather than
 radio buttons, as they were causeing untraceable react errros for some reason

---
 .../rooms/NotificationStateContextMenu.js     | 50 +++++++++++++------
 src/skins/vector/css/common.css               |  5 ++
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js
index 3d125d2c14..d8a79b3062 100644
--- a/src/components/views/rooms/NotificationStateContextMenu.js
+++ b/src/components/views/rooms/NotificationStateContextMenu.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 var q = require("q");
 var React = require('react');
+var classNames = require('classnames');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
 module.exports = React.createClass({
@@ -67,31 +68,52 @@ module.exports = React.createClass({
     _onToggle: function(ev) {
         switch (ev.target.value) {
             case "all":
-                if (this.props.onFinished) {
-                    this._save(false);
-                    this.props.onFinished();
-                }
+                this._save(false);
                 break;
             case "mute":
-                if (this.props.onFinished) {
-                    this._save(true);
-                    this.props.onFinished();
-                }
+                this._save(true);
                 break;
         }
+
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(false);
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickMute: function() {
+        this._save(true);
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
     },
 
     render: function() {
         var cli = MatrixClientPeg.get();
+
+        var allNotifsClasses = classNames({
+            'mx_ContextualMenu_field': true,
+            'mx_ContextualMenu_fieldSet': !this.state.areNotifsMuted,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_ContextualMenu_field': true,
+            'mx_ContextualMenu_fieldSet': this.state.areNotifsMuted,
+        });
+
         return (
             <div>
-                <div className="mx_ContextualMenu_field" >
-                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="all" onChange={this._onToggle} checked={!this.state.areNotifsMuted}/>
-                    All notifications
+                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
+                    { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications
                 </div>
-                <div className="mx_ContextualMenu_field" >
-                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="mute" onChange={this._onToggle} checked={this.state.areNotifsMuted}/>
-                    Mute
+                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
+                    { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute
                 </div>
             </div>
         );
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index b9dab27069..bca1949309 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -103,6 +103,7 @@ input[type=text]:focus, textarea:focus {
     position: fixed;
     z-index: 2001;
     padding: 6px;
+	font-size: 14px;
 }
 
 .mx_ContextualMenu_chevron_right {
@@ -156,6 +157,10 @@ input[type=text]:focus, textarea:focus {
     cursor: pointer;
 }
 
+.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet {
+    font-weight: bold;
+}
+
 .mx_ContextualMenu_spinner {
     display: block;
     margin: 0 auto;

From 37a7ce809ae196074e8062104ce64a01dabd92aa Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 10:40:19 +0100
Subject: [PATCH 16/43] Added two new icons for notifications states

---
 src/skins/vector/img/icon-context-mute-off.svg | 9 +++++++++
 src/skins/vector/img/icon-context-mute.svg     | 9 +++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/skins/vector/img/icon-context-mute-off.svg
 create mode 100644 src/skins/vector/img/icon-context-mute.svg

diff --git a/src/skins/vector/img/icon-context-mute-off.svg b/src/skins/vector/img/icon-context-mute-off.svg
new file mode 100644
index 0000000000..c30ed85b68
--- /dev/null
+++ b/src/skins/vector/img/icon-context-mute-off.svg
@@ -0,0 +1,9 @@
+<?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">
+    <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="M10,8 C11.105,8 12,7.105 12,6 C12,4.895 11.105,4 10,4" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50"/>
+    <path d="M10.207,10 C12.416,10 14.207,8.209 14.207,6 C14.207,3.791 12.416,2 10.207,2" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy"/>
+  </g>
+</svg>
diff --git a/src/skins/vector/img/icon-context-mute.svg b/src/skins/vector/img/icon-context-mute.svg
new file mode 100644
index 0000000000..71c5035aa1
--- /dev/null
+++ b/src/skins/vector/img/icon-context-mute.svg
@@ -0,0 +1,9 @@
+<?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="14" height="12" viewBox="0, 0, 14, 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="M12.55,4.45 L9.722,7.278" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-2"/>
+    <path d="M12.55,7.278 L9.722,4.45" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-5"/>
+  </g>
+</svg>

From 5cf164fcc156823a77e7ed905a33d52cee5fcab5 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 10:40:57 +0100
Subject: [PATCH 17/43] 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 (
             <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>
         );
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;
+}

From dab707a8938dc442c7caacf544de7a613ec0db97 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 11:26:36 +0100
Subject: [PATCH 18/43] Additional refactor to further modularise the context
 menus

---
 .../views/context_menus/MessageContextMenu.js | 12 +++++-----
 .../NotificationStateContextMenu.js           |  8 +++----
 .../structures/ContextualMenu.css             | 20 ++++++++++++----
 .../context_menus/MessageContextMenu.css      | 24 +++++++++++++++++++
 .../NotificationStateContextMenu.css          | 24 +++++++++++++++++++
 5 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
 create mode 100644 src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 91c59bd07b..401c0c6cc0 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -95,7 +95,7 @@ module.exports = React.createClass({
 
         if (eventStatus === 'not_sent') {
             resendButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
                     Resend
                 </div>
             );
@@ -103,7 +103,7 @@ module.exports = React.createClass({
 
         if (!eventStatus) { // sent
             redactButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onRedactClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
                     Redact
                 </div>
             );
@@ -111,14 +111,14 @@ module.exports = React.createClass({
 
         if (eventStatus === "queued" || eventStatus === "not_sent") {
             cancelButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onCancelSendClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
                     Cancel Sending
                 </div>
             );
         }
 
         viewSourceButton = (
-            <div className="mx_ContextualMenu_field" onClick={this.onViewSourceClick}>
+            <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 View Source
             </div>
         );
@@ -126,7 +126,7 @@ module.exports = React.createClass({
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <div className="mx_ContextualMenu_field" onClick={this.onUnhidePreviewClick}>
+                    <div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
                         Unhide Preview
                     </div>
                 )
@@ -136,7 +136,7 @@ module.exports = React.createClass({
         // XXX: this should be https://matrix.to.
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         permalinkButton = (
-            <div className="mx_ContextualMenu_field">
+            <div className="mx_MessageContextMenu_field">
                 <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
                    onClick={ this.onPermalinkClick }>Permalink</a>
             </div>
diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 7859f810ba..1813e20145 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -98,13 +98,13 @@ module.exports = React.createClass({
         var cli = MatrixClientPeg.get();
 
         var allNotifsClasses = classNames({
-            'mx_ContextualMenu_field': true,
-            'mx_ContextualMenu_fieldSet': !this.state.areNotifsMuted,
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
         });
 
         var muteNotifsClasses = classNames({
-            'mx_ContextualMenu_field': true,
-            'mx_ContextualMenu_fieldSet': this.state.areNotifsMuted,
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
         });
 
         return (
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 95282e35f2..1d4f51ea62 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
@@ -1,3 +1,19 @@
+/*
+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_ContextualMenu_background {
     position: fixed;
     top: 0;
@@ -70,10 +86,6 @@
     cursor: pointer;
 }
 
-.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet {
-    font-weight: bold;
-}
-
 .mx_ContextualMenu_spinner {
     display: block;
     margin: 0 auto;
diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
new file mode 100644
index 0000000000..881b11a6c8
--- /dev/null
+++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
@@ -0,0 +1,24 @@
+/*
+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_MessageContextMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+}
+
+.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
+    font-weight: bold;
+}
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
new file mode 100644
index 0000000000..57994d4690
--- /dev/null
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -0,0 +1,24 @@
+/*
+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_NotificationStateContextMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+}
+
+.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
+    font-weight: bold;
+}

From 074bbc71499c7d13bfc1eabd37574d75afc6e4e5 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 12:25:44 +0100
Subject: [PATCH 19/43] Added the two additiona states that don't yet exist on
 the backend, as faded and disabled options

---
 .../NotificationStateContextMenu.js           | 37 ++++++++++++-------
 .../NotificationStateContextMenu.css          |  4 ++
 .../vector/img/icon-context-mute-mentions.svg | 11 ++++++
 .../vector/img/icon-context-mute-off-copy.svg | 10 +++++
 4 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 src/skins/vector/img/icon-context-mute-mentions.svg
 create mode 100644 src/skins/vector/img/icon-context-mute-off-copy.svg

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 1813e20145..bea226a170 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/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" />
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index 57994d4690..009374b7c6 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/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);
+}
diff --git a/src/skins/vector/img/icon-context-mute-mentions.svg b/src/skins/vector/img/icon-context-mute-mentions.svg
new file mode 100644
index 0000000000..46d5022e69
--- /dev/null
+++ b/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>
diff --git a/src/skins/vector/img/icon-context-mute-off-copy.svg b/src/skins/vector/img/icon-context-mute-off-copy.svg
new file mode 100644
index 0000000000..f62eaa97d9
--- /dev/null
+++ b/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>

From 53f4da1d3006389f68534041f6f3116691433bc2 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 16:09:26 +0100
Subject: [PATCH 20/43] Refactor so that chevron and menu can be positioned
 independantly

---
 .../structures/ContextualMenu.css             | 21 +++++++++++++++----
 .../context_menus/MessageContextMenu.css      |  1 +
 .../NotificationStateContextMenu.css          |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

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 1d4f51ea62..f626cddded 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 2000;
+}
+
 .mx_ContextualMenu_background {
     position: fixed;
     top: 0;
@@ -29,16 +34,19 @@ limitations under the License.
     border-radius: 4px;
     background-color: #f6f6f6;
     color: #4a4a4a;
-    position: fixed;
-    z-index: 2001;
+    position: absolute;
     padding: 6px;
 	font-size: 14px;
 }
 
+.mx_ContextualMenu.mx_ContextualMenu_right {
+    right: 8px;
+}
+
 .mx_ContextualMenu_chevron_right {
     position: absolute;
     right: -8px;
-    top: 10px;
+    top: 0px;
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
@@ -58,10 +66,14 @@ limitations under the License.
     right: 1px;
 }
 
+.mx_ContextualMenu.mx_ContextualMenu_left {
+    left: 8px;
+}
+
 .mx_ContextualMenu_chevron_left {
     position: absolute;
     left: -8px;
-    top: 10px;
+    top: 0px;
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
@@ -84,6 +96,7 @@ limitations under the License.
 .mx_ContextualMenu_field {
     padding: 3px 6px 3px 6px;
     cursor: pointer;
+    white-space: nowrap;
 }
 
 .mx_ContextualMenu_spinner {
diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
index 881b11a6c8..85e8080c88 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
@@ -17,6 +17,7 @@ limitations under the License.
 .mx_MessageContextMenu_field {
     padding: 3px 6px 3px 6px;
     cursor: pointer;
+    white-space: nowrap;
 }
 
 .mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index 009374b7c6..b8e312b61d 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -17,6 +17,7 @@ limitations under the License.
 .mx_NotificationStateContextMenu_field {
     padding: 3px 6px 3px 6px;
     cursor: pointer;
+    width: 174px;
 }
 
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {

From d376df478a6b326e477446a30ebbdf617a2cece7 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 17:43:35 +0100
Subject: [PATCH 21/43] Initial context menu with all it's elements

---
 .../NotificationStateContextMenu.js           | 15 ++++++-----
 .../structures/ContextualMenu.css             |  1 +
 .../NotificationStateContextMenu.css          | 25 +++++++++++++++++--
 src/skins/vector/img/notif-active.svg         | 20 +++++++++++++++
 src/skins/vector/img/notif-slider.svg         | 22 ++++++++++++++++
 5 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 src/skins/vector/img/notif-active.svg
 create mode 100644 src/skins/vector/img/notif-slider.svg

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index bea226a170..17f75f807d 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -112,22 +112,25 @@ module.exports = React.createClass({
 
         return (
             <div>
+                <div className="mx_NotificationStateContextMenu_picker" >
+                    <img src="img/notif-slider.svg" width="20" height="107" />
+                </div>
                 <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
-                    <img src="img/icon-context-mute-off-copy.svg" width="15" height="10" />
+                    <img src="img/icon-context-mute-off-copy.svg" width="20" height="12" />
                     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" />
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img src="img/icon-context-mute-off.svg" width="20" height="12" />
                     All notifications
                 </div>
                 <div className={ mentionsClasses } onClick={this._onClickMentions} >
-                    <img src="img/icon-context-mute-mentions.svg" width="15" height="10" />
+                    <img src="img/icon-context-mute-mentions.svg" width="20" height="12" />
                     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" />
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img src="img/icon-context-mute.svg" width="20" height="12" />
                     Mute
                 </div>
             </div>
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 f626cddded..7523bd103c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
@@ -37,6 +37,7 @@ limitations under the License.
     position: absolute;
     padding: 6px;
 	font-size: 14px;
+    z-index: 2001;
 }
 
 .mx_ContextualMenu.mx_ContextualMenu_right {
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index b8e312b61d..86d70e4408 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -14,16 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_NotificationStateContextMenu_picker {
+    position: absolute;
+    top: 16px;
+}
+
 .mx_NotificationStateContextMenu_field {
-    padding: 3px 6px 3px 6px;
+    padding-top: 4px;
+    padding-right: 6px;
+    padding-bottom: 10px;
+    padding-left: 26px;
     cursor: pointer;
-    width: 174px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
 }
 
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
     font-weight: bold;
+    padding-left: 14px;
 }
 
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
     color: rgba(0, 0, 0, 0.2);
 }
+
+.mx_NotificationStateContextMenu_activeIcon {
+    display: none;
+    position: relative;
+    left: -9px;
+}
+
+.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {
+    display: inline-block;
+}
diff --git a/src/skins/vector/img/notif-active.svg b/src/skins/vector/img/notif-active.svg
new file mode 100644
index 0000000000..9eb279f851
--- /dev/null
+++ b/src/skins/vector/img/notif-active.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>E15782FC-B5FA-472A-AE12-CFFF484E7253</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Left-Panel-mention-states" transform="translate(-221.000000, -165.000000)">
+            <g id="notification-shortcuts" transform="translate(206.000000, 119.000000)">
+                <g id="slider" transform="translate(16.000000, 16.000000)">
+                    <g id="notif_active" transform="translate(0.000000, 31.000000)">
+                        <circle id="Oval-190" stroke="#62A887" fill="#76CFA6" cx="5.5" cy="5.5" r="5.5"></circle>
+                        <path d="M2.5,6.5 L4,8" id="Line" stroke="#FFFFFF" stroke-linecap="round"></path>
+                        <path d="M4,2.97753906 L8.30664062,8" id="Line-Copy" stroke="#FFFFFF" stroke-linecap="round" transform="translate(6.153320, 5.488770) scale(-1, 1) translate(-6.153320, -5.488770) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/notif-slider.svg b/src/skins/vector/img/notif-slider.svg
new file mode 100644
index 0000000000..55fa06d11a
--- /dev/null
+++ b/src/skins/vector/img/notif-slider.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="7px" height="109px" viewBox="0 0 7 109" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>16CB4618-0BD3-4568-BB20-FC56EBC46046</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
+        <g id="Left-Panel-mention-states" transform="translate(-224.000000, -134.000000)" stroke="#000000">
+            <g id="notification-shortcuts" transform="translate(206.000000, 119.000000)">
+                <g id="slider" transform="translate(16.000000, 16.000000)">
+                    <g id="notif_slider" transform="translate(3.000000, 0.000000)">
+                        <path d="M2.5,3.49505001 L2.5,104.507355" id="Line" stroke-linecap="square"></path>
+                        <circle id="Oval-187" fill="#F7F7F7" cx="2.5" cy="36.5" r="2.5"></circle>
+                        <path d="M2.5,73 C3.88071187,73 5,71.8807119 5,70.5 C5,69.1192881 3.88071187,68 2.5,68 C1.11928813,68 0,69.1192881 0,70.5 C0,71.8807119 1.11928813,73 2.5,73 Z" id="Oval-187-Copy" fill="#F7F7F7"></path>
+                        <path d="M2.5,5 C3.88071187,5 5,3.88071187 5,2.5 C5,1.11928813 3.88071187,0 2.5,0 C1.11928813,0 0,1.11928813 0,2.5 C0,3.88071187 1.11928813,5 2.5,5 Z" id="Oval-187-Copy-3" fill="#F7F7F7"></path>
+                        <circle id="Oval-187-Copy-2" fill="#F7F7F7" cx="2.5" cy="104.5" r="2.5"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

From 22bf74dc6518ad8e5cd86561793fd717a4948fc7 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 18:01:43 +0100
Subject: [PATCH 22/43] Tweaks to get icons to line up better, still need to
 space labels correctly

---
 .../views/context_menus/NotificationStateContextMenu.css   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index 86d70e4408..9dd0fa9c46 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -17,13 +17,14 @@ limitations under the License.
 .mx_NotificationStateContextMenu_picker {
     position: absolute;
     top: 16px;
+    left: 5px;
 }
 
 .mx_NotificationStateContextMenu_field {
     padding-top: 4px;
     padding-right: 6px;
     padding-bottom: 10px;
-    padding-left: 26px;
+    padding-left: 20px;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
@@ -32,7 +33,7 @@ limitations under the License.
 
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
     font-weight: bold;
-    padding-left: 14px;
+    padding-left: 8px;
 }
 
 .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
@@ -42,7 +43,7 @@ limitations under the License.
 .mx_NotificationStateContextMenu_activeIcon {
     display: none;
     position: relative;
-    left: -9px;
+    left: -5px;
 }
 
 .mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {

From b5fdaac94721a708a7969b4222645c6fa4ea860e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 18:06:47 +0100
Subject: [PATCH 23/43] Final spacing tweaks to get it aligned with the design

---
 .../views/context_menus/NotificationStateContextMenu.js   | 8 ++++----
 .../views/context_menus/NotificationStateContextMenu.css  | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 17f75f807d..2de02112aa 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -116,21 +116,21 @@ module.exports = React.createClass({
                     <img src="img/notif-slider.svg" width="20" height="107" />
                 </div>
                 <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
-                    <img src="img/icon-context-mute-off-copy.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="20" height="12" />
                     Alert me
                 </div>
                 <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img src="img/icon-context-mute-off.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="20" height="12" />
                     All notifications
                 </div>
                 <div className={ mentionsClasses } onClick={this._onClickMentions} >
-                    <img src="img/icon-context-mute-mentions.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="20" height="12" />
                     Mentions only
                 </div>
                 <div className={ muteNotifsClasses } onClick={this._onClickMute} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img src="img/icon-context-mute.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="20" height="12" />
                     Mute
                 </div>
             </div>
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index 9dd0fa9c46..d92355e3df 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -40,6 +40,10 @@ limitations under the License.
     color: rgba(0, 0, 0, 0.2);
 }
 
+.mx_NotificationStateContextMenu_icon {
+    padding-right: 2px;
+}
+
 .mx_NotificationStateContextMenu_activeIcon {
     display: none;
     position: relative;

From 6329e274ab7d7b8a79307fac29569bb5a78dcff5 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 14:20:24 +0100
Subject: [PATCH 24/43] Extra polish to get styling looking like the design

---
 .../views/context_menus/NotificationStateContextMenu.js   | 8 ++++----
 .../views/context_menus/NotificationStateContextMenu.css  | 3 ++-
 src/skins/vector/img/icon-context-mute-mentions.svg       | 8 ++++----
 src/skins/vector/img/icon-context-mute-off-copy.svg       | 2 +-
 src/skins/vector/img/icon-context-mute-off.svg            | 4 ++--
 src/skins/vector/img/icon-context-mute.svg                | 4 ++--
 6 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 2de02112aa..869145aa3b 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -116,21 +116,21 @@ module.exports = React.createClass({
                     <img src="img/notif-slider.svg" width="20" height="107" />
                 </div>
                 <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
                     Alert me
                 </div>
                 <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
                     All notifications
                 </div>
                 <div className={ mentionsClasses } onClick={this._onClickMentions} >
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
                     Mentions only
                 </div>
                 <div className={ muteNotifsClasses } onClick={this._onClickMute} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="20" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
                     Mute
                 </div>
             </div>
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
index d92355e3df..1a186178e1 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
@@ -41,7 +41,8 @@ limitations under the License.
 }
 
 .mx_NotificationStateContextMenu_icon {
-    padding-right: 2px;
+    padding-right: 4px;
+    padding-left: 4px;
 }
 
 .mx_NotificationStateContextMenu_activeIcon {
diff --git a/src/skins/vector/img/icon-context-mute-mentions.svg b/src/skins/vector/img/icon-context-mute-mentions.svg
index 46d5022e69..3693b7a82a 100644
--- a/src/skins/vector/img/icon-context-mute-mentions.svg
+++ b/src/skins/vector/img/icon-context-mute-mentions.svg
@@ -1,10 +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="15" height="12" viewBox="0, 0, 15, 12">
+<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">
-    <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"/>
+    <g>
+      <path d="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
+      <path d="M13,3.928 C13,4.757 12.328,5.428 11.5,5.428 C10.672,5.428 10,4.757 10,3.928 C10,3.1 10.672,2.428 11.5,2.428 C12.328,2.428 13,3.1 13,3.928 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>
diff --git a/src/skins/vector/img/icon-context-mute-off-copy.svg b/src/skins/vector/img/icon-context-mute-off-copy.svg
index f62eaa97d9..861f2975de 100644
--- a/src/skins/vector/img/icon-context-mute-off-copy.svg
+++ b/src/skins/vector/img/icon-context-mute-off-copy.svg
@@ -2,7 +2,7 @@
 <!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="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" 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"/>
diff --git a/src/skins/vector/img/icon-context-mute-off.svg b/src/skins/vector/img/icon-context-mute-off.svg
index c30ed85b68..d801823b5d 100644
--- a/src/skins/vector/img/icon-context-mute-off.svg
+++ b/src/skins/vector/img/icon-context-mute-off.svg
@@ -1,8 +1,8 @@
 <?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">
+<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="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
     <path d="M10,8 C11.105,8 12,7.105 12,6 C12,4.895 11.105,4 10,4" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50"/>
     <path d="M10.207,10 C12.416,10 14.207,8.209 14.207,6 C14.207,3.791 12.416,2 10.207,2" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy"/>
   </g>
diff --git a/src/skins/vector/img/icon-context-mute.svg b/src/skins/vector/img/icon-context-mute.svg
index 71c5035aa1..f53b868a76 100644
--- a/src/skins/vector/img/icon-context-mute.svg
+++ b/src/skins/vector/img/icon-context-mute.svg
@@ -1,8 +1,8 @@
 <?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="14" height="12" viewBox="0, 0, 14, 12">
+<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="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
     <path d="M12.55,4.45 L9.722,7.278" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-2"/>
     <path d="M12.55,7.278 L9.722,4.45" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-5"/>
   </g>

From b87058508ea3748c3c93f519ec8325b9ea7b4d4a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 15:28:05 +0100
Subject: [PATCH 25/43] When a use clicks the state they want, after the change
 has been made it pasues breifly before closing, so that the user can see
 their state change has taken place.

---
 .../NotificationStateContextMenu.js           | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 869145aa3b..8f3152d293 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -48,20 +48,27 @@ module.exports = React.createClass({
     },
 
     _save: function( isMuted ) {
+        var self = this;
         const roomId = this.props.room.roomId;
-        /*
-        if (this.state.areNotifsMuted !== originalState.areNotifsMuted) {
-            promises.push(MatrixClientPeg.get().setRoomMutePushRule(
-                "global", roomId, this.state.areNotifsMuted
-            ));
-        }
-        */
         var cli = MatrixClientPeg.get();
-        this.setState({areNotifsMuted: isMuted});
+
         if (!cli.isGuest()) {
             cli.setRoomMutePushRule(
                 "global", roomId, isMuted
-            );
+            ).then(function() {
+                console.log("DEBUG: then");
+                self.setState({areNotifsMuted: isMuted});
+
+                // delay slightly so that the user can see their state change
+                q.delay(500).then(function() {
+                    if (self.props.onFinished) {
+                        self.props.onFinished();
+                    };
+                });
+            }).fail(function(error) {
+                console.log("DEBUG: fail");
+                console.log(error);
+            });
         }
     },
 
@@ -71,9 +78,6 @@ module.exports = React.createClass({
 
     _onClickAllNotifs: function() {
         this._save(false);
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
     },
 
     _onClickMentions: function() {
@@ -82,9 +86,6 @@ module.exports = React.createClass({
 
     _onClickMute: function() {
         this._save(true);
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
     },
 
     render: function() {

From 49545ce0c2802b0f48b9539edc9ef1a279c37817 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 15:29:57 +0100
Subject: [PATCH 26/43] Leaving the fail promise section blank as a todo, with
 explanitary comment

---
 .../views/context_menus/NotificationStateContextMenu.js      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 8f3152d293..879234fa00 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -56,7 +56,6 @@ module.exports = React.createClass({
             cli.setRoomMutePushRule(
                 "global", roomId, isMuted
             ).then(function() {
-                console.log("DEBUG: then");
                 self.setState({areNotifsMuted: isMuted});
 
                 // delay slightly so that the user can see their state change
@@ -66,8 +65,8 @@ module.exports = React.createClass({
                     };
                 });
             }).fail(function(error) {
-                console.log("DEBUG: fail");
-                console.log(error);
+                // TODO: some form of error notification to the user
+                // to inform them that their state change failed.
             });
         }
     },

From 55a10ee2755c4628645ebaf9e6fa1c3465c47c13 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 17:25:28 +0100
Subject: [PATCH 27/43] Mute state handled corrcectly

---
 .../context_menus/NotificationStateContextMenu.js   | 11 +++++++++++
 .../css/matrix-react-sdk/views/rooms/RoomTile.css   | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 879234fa00..cadc8287b7 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -20,6 +20,7 @@ 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: 'NotificationStateContextMenu',
@@ -59,7 +60,17 @@ module.exports = React.createClass({
                 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();
                     };
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 8a32993f52..2490321e51 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
@@ -22,6 +22,10 @@ limitations under the License.
     display: block;
 }
 
+.mx_RoomTile .mx_RoomTile_mute {
+    opacity: 0.4;
+}
+
 .mx_RoomTile_avatar {
     display: inline-block;
     padding-top: 6px;
@@ -121,11 +125,18 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge  {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
 }
 
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
+    background-color: rgba(0,0,0,0);
+    opacity: 1;
+    top: 4px;
+}
+
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
     background-color: #76cfa6;
 }

From 6c4c0bf57ade4b5fcd9a100659cbe2e9667d826a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 17:35:25 +0100
Subject: [PATCH 28/43] Initial feature set complete, but the state and CSS
 need to be simplified

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 2490321e51..b079069cfb 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
@@ -97,7 +97,7 @@ limitations under the License.
 }
 
 /* This is the bottom of the speech bubble */
-.mx_RoomTile_highlight .mx_RoomTile_badge:after {
+.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
     content: "";
     position: absolute;
     display: block;
@@ -126,6 +126,11 @@ limitations under the License.
 }
 
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    letter-spacing: 0.1em;
+    opacity: 1;
+}
+
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;

From 2f08f2441f3ace1d5ff53e10c7d2e2fde0420fbc Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 17:41:01 +0100
Subject: [PATCH 29/43] CSS tweaks for muted dohickey positioning

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 b079069cfb..783aa32130 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
@@ -125,7 +125,7 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile {
     letter-spacing: 0.1em;
     opacity: 1;
 }
@@ -134,6 +134,7 @@ limitations under the License.
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
+    top: 2px;
 }
 
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {

From 2f650646888cafd49c4708669015470404d261ed Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 28 Jul 2016 17:44:17 +0100
Subject: [PATCH 30/43] CSS bugfix to stop incorrect letter spaceing on room
 names

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 783aa32130..6491d7f7d8 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
@@ -125,7 +125,7 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
     letter-spacing: 0.1em;
     opacity: 1;
 }

From 18701a2daef4b8de99d9bda1594dd68bafecfb88 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 29 Jul 2016 10:01:42 +0100
Subject: [PATCH 31/43] CSS tweaks to get the collapsed mute state properly
 working

---
 .../matrix-react-sdk/views/rooms/RoomTile.css | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

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 6491d7f7d8..050052a032 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
@@ -91,8 +91,23 @@ limitations under the License.
     z-index: 200;
 }
 
+/* Position mute icon when collapsed */
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
+    background-color: rgba(0,0,0,0);
+    opacity: 1;
+    top: -40px;
+}
+
+/* Position menu icon when room muted and collapsed */
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    background-color: rgb(214, 214, 214);
+    letter-spacing: 0.1em;
+    opacity: 1;
+    top: -40px;
+}
+
 /* Hide the bottom of speech bubble */
-.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
+.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
     display: none;
 }
 
@@ -130,6 +145,7 @@ limitations under the License.
     opacity: 1;
 }
 
+/* Position menu icon when room muted and collapsed */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
@@ -137,6 +153,7 @@ limitations under the License.
     top: 2px;
 }
 
+/* Position mute icon when collapsed */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 1;

From 87bddcd8ce93f47294e5de84d9585c24d3a26e50 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 29 Jul 2016 10:50:50 +0100
Subject: [PATCH 32/43] Preliminary fix for showing muted state when collapsed
 - keep faded avatar, but don't show the mute icon

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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 050052a032..c8ac2d9b22 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
@@ -91,15 +91,16 @@ limitations under the License.
     z-index: 200;
 }
 
-/* Position mute icon when collapsed */
+/* Position mute icon when collapsed - invisiible at the moment */
 .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
-    opacity: 1;
+    opacity: 0;
     top: -40px;
 }
 
 /* Position menu icon when room muted and collapsed */
 .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    display: inline-block;
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;

From 0ad84fd7b090463aa03e7cb93d103d30b6470f7a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 29 Jul 2016 10:59:54 +0100
Subject: [PATCH 33/43] Better comments

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 c8ac2d9b22..de58140322 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
@@ -91,7 +91,7 @@ limitations under the License.
     z-index: 200;
 }
 
-/* Position mute icon when collapsed - invisiible at the moment */
+/* Position mute icon when room muted and collapsed - invisible at the moment */
 .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 0;
@@ -112,7 +112,7 @@ limitations under the License.
     display: none;
 }
 
-/* This is the bottom of the speech bubble */
+/* This is the bottom of the speech bubble - not drawn when room muted */
 .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
     content: "";
     position: absolute;
@@ -146,7 +146,7 @@ limitations under the License.
     opacity: 1;
 }
 
-/* Position menu icon when room muted and collapsed */
+/* Position menu icon when room muted */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
@@ -154,7 +154,7 @@ limitations under the License.
     top: 2px;
 }
 
-/* Position mute icon when collapsed */
+/* Position mute icon when room muted */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 1;

From bb93a59cfb6157999426f00905d14ad45a925f5e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 29 Jul 2016 13:49:28 +0100
Subject: [PATCH 34/43] fixed unread hightlight font weight for room name

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 de58140322..ceeac0c620 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
@@ -175,7 +175,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
-    font-weight: bold;
+    font-weight: 600;
 }
 
 .mx_RoomTile_selected .mx_RoomTile_name {

From 4a7d2901ac060faa96e8704d08b2d507e75e41cb Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sat, 30 Jul 2016 12:52:14 +0100
Subject: [PATCH 35/43] Positional tweaks for the name, badge and context menu,
 to better match design in both normal and collapsed states

---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 ceeac0c620..e3e29d69b1 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
@@ -40,7 +40,7 @@ limitations under the License.
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
-    width: 100px;
+    width: 103px;
     vertical-align: middle;
     overflow: hidden;
     /* word-break: break-word; */
@@ -54,7 +54,7 @@ limitations under the License.
 
 .mx_RoomTile_name:before {
     content:'';
-    width:100px;
+    width:103px;
     height:22px;
     top: 0px;
     left: 0px;
@@ -83,7 +83,7 @@ limitations under the License.
 
 .collapsed .mx_RoomTile_badge {
     top: -40px;
-    left: 30px;
+    left: 31px;
     min-width: 12px;
     height: 16px;
     border-radius: 16px;

From ef5ea46830acab688839e20fdad0da4328e0c174 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 1 Aug 2016 09:53:57 +0100
Subject: [PATCH 36/43] Consistent collapsed height across browsers

---
 src/skins/vector/css/vector-web/structures/LeftPanel.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 0ea76c928a..7905f2f658 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -51,6 +51,10 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+   flex: 0 0 120px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu {
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;

From 472acd4792b33184440caf9d80ff599483bf3b37 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 2 Aug 2016 14:46:31 +0100
Subject: [PATCH 37/43] New design for long names

---
 .../structures/MatrixChat.css                 |  2 +-
 .../matrix-react-sdk/views/rooms/RoomTile.css | 57 ++++++++++++-------
 .../css/vector-web/structures/RoomSubList.css |  4 +-
 .../vector-web/views/rooms/RoomDropTarget.css |  5 +-
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
index d28f4d948e..bd6f72e670 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
@@ -94,7 +94,7 @@ limitations under the License.
     background-color: #eaf5f0;
 
     -webkit-flex: 0 0 210px;
-    flex: 0 0 210px;
+    flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
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 e3e29d69b1..97cbceddaa 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
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomTile {
+    position: relative;
     cursor: pointer;
     /* This fixes wrapping of long room names, but breaks drag & drop previews */
     /* display: table-row; */
@@ -26,6 +27,12 @@ limitations under the License.
     opacity: 0.4;
 }
 
+.mx_RoomTile_nameContainer {
+    display: inline-block;
+    width: 170px;
+    height: 36px;
+}
+
 .mx_RoomTile_avatar {
     display: inline-block;
     padding-top: 6px;
@@ -40,18 +47,19 @@ limitations under the License.
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
-    width: 103px;
+    width: 157px;
     vertical-align: middle;
-    overflow: hidden;
-    /* word-break: break-word; */
-    white-space: nowrap;
-    padding-left: 5px;
-    padding-right: 15px;
+    padding-left: 6px;
+    padding-right: 6px;
     padding-top: 2px;
-    padding-bottom: 2px;
+    padding-bottom: 3px;
     color: rgba(69, 69, 69, 0.8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
+/*
 .mx_RoomTile_name:before {
     content:'';
     width:103px;
@@ -62,6 +70,7 @@ limitations under the License.
     padding-left: 20px;
     background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
 }
+*/
 
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
     font-style: italic;
@@ -82,8 +91,7 @@ limitations under the License.
 }
 
 .collapsed .mx_RoomTile_badge {
-    top: -40px;
-    left: 31px;
+    top: -2px;
     min-width: 12px;
     height: 16px;
     border-radius: 16px;
@@ -95,16 +103,17 @@ limitations under the License.
 .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 0;
-    top: -40px;
+    top: -2px;
 }
 
 /* Position menu icon when room muted and collapsed */
-.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     display: inline-block;
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
-    top: -40px;
+    top: -2px;
 }
 
 /* Hide the bottom of speech bubble */
@@ -128,9 +137,9 @@ limitations under the License.
     display: inline-block;
     min-width: 14px;
     height: 17px;
-    position: relative;
-    left: 8px;
-    top: 2px;
+    position: absolute;
+    right: 9px;
+    top: 9px;
     border-radius: 14px;
     color: #fff;
     font-weight: 600;
@@ -141,24 +150,26 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
+.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
     letter-spacing: 0.1em;
     opacity: 1;
 }
 
 /* Position menu icon when room muted */
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
-    top: 2px;
+    top: 9px;
 }
 
 /* Position mute icon when room muted */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 1;
-    top: 4px;
+    top: 11px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -182,6 +193,14 @@ limitations under the License.
     background-color: rgba(118,207,166,0.2);
 }
 
+.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
+    width: 144px;
+}
+
+.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
+    width: 136px;
+}
+
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 8f9db8fec1..83f8c873b0 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -25,8 +25,8 @@ limitations under the License.
     color: #3d3b39;
     font-weight: 600;
     font-size: 13px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 18px;
+    padding-right: 18px;
     margin-top: 8px;
     margin-bottom: 4px;
     cursor: pointer;
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
index 7ad5e89334..61fbbf7400 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_RoomDropTarget {
     font-size: 13px;
-    margin-left: 10px;
-    margin-right: 15px;
+    margin-left: 18px;
+    margin-right: 18px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed #76cfa6;
@@ -28,6 +28,7 @@ limitations under the License.
 
 .collapsed .mx_RoomDropTarget {
     margin-right: 10px;
+    margin-left: 10px;
 }
 
 .mx_RoomDropTarget_placeholder {

From f640be90ada05dd955b255ce0b9301652551749d Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 2 Aug 2016 15:00:47 +0100
Subject: [PATCH 38/43] Container height shrunk, so it doesn't bump the avatars
 when collapsed. Also search box gutters fixed

---
 .../vector/css/matrix-react-sdk/structures/SearchBox.css    | 6 +++---
 .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

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 e25928b926..0acffe4c06 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: 16px;
-    margin-right: 20px;
+    margin-left: 18px;
+    margin-right: 18px;
     padding-top: 24px;
     padding-bottom: 22px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -65,4 +65,4 @@ limitations under the License.
 
 .mx_SearchBox object {
     pointer-events: none;
-}
\ No newline at end of file
+}
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 97cbceddaa..c12956b714 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
@@ -30,7 +30,7 @@ limitations under the License.
 .mx_RoomTile_nameContainer {
     display: inline-block;
     width: 170px;
-    height: 36px;
+    height: 24px;
 }
 
 .mx_RoomTile_avatar {

From ee8572559fdd0f1f4253a3d2ffc5cd74c74ed546 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 2 Aug 2016 15:45:11 +0100
Subject: [PATCH 39/43] Fixed small collapsed state hover issue with badges

---
 .../matrix-react-sdk/views/rooms/RoomTile.css   | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

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 c12956b714..ecf29a00a4 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
@@ -59,19 +59,6 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-/*
-.mx_RoomTile_name:before {
-    content:'';
-    width:103px;
-    height:22px;
-    top: 0px;
-    left: 0px;
-    position:absolute;
-    padding-left: 20px;
-    background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
-}
-*/
-
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
     font-style: italic;
     color: #454545;
@@ -86,6 +73,10 @@ limitations under the License.
     height: 36px;
 }
 
+.collapsed .mx_RoomTile_nameContainer {
+    height: 0;
+}
+
 .collapsed .mx_RoomTile_name {
     display: none;
 }

From 8e0f7f18a0d5f256b6086f5cfcf0f580c9545f30 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 3 Aug 2016 11:21:00 +0100
Subject: [PATCH 40/43] Design update to match the new Zeplin designs

---
 .../matrix-react-sdk/views/rooms/RoomTile.css | 25 +++++++------------
 .../css/vector-web/structures/LeftPanel.css   |  8 ++++--
 .../css/vector-web/structures/RoomSubList.css |  4 +--
 3 files changed, 17 insertions(+), 20 deletions(-)

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 ecf29a00a4..de1b09331c 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
@@ -17,10 +17,9 @@ limitations under the License.
 .mx_RoomTile {
     position: relative;
     cursor: pointer;
-    /* This fixes wrapping of long room names, but breaks drag & drop previews */
-    /* display: table-row; */
     font-size: 13px;
     display: block;
+    height: 34px;
 }
 
 .mx_RoomTile .mx_RoomTile_mute {
@@ -29,14 +28,14 @@ limitations under the License.
 
 .mx_RoomTile_nameContainer {
     display: inline-block;
-    width: 170px;
+    width: 180px;
     height: 24px;
 }
 
 .mx_RoomTile_avatar {
     display: inline-block;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     padding-left: 18px;
     padding-right: 6px;
     width: 24px;
@@ -47,7 +46,7 @@ limitations under the License.
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
-    width: 157px;
+    width: 165px;
     vertical-align: middle;
     padding-left: 6px;
     padding-right: 6px;
@@ -69,10 +68,6 @@ limitations under the License.
 */
 }
 
-.collapsed .mx_RoomTile {
-    height: 36px;
-}
-
 .collapsed .mx_RoomTile_nameContainer {
     height: 0;
 }
@@ -129,7 +124,7 @@ limitations under the License.
     min-width: 14px;
     height: 17px;
     position: absolute;
-    right: 9px;
+    right: 8px; /*gutter */
     top: 9px;
     border-radius: 14px;
     color: #fff;
@@ -154,6 +149,7 @@ limitations under the License.
     letter-spacing: 0.1em;
     opacity: 1;
     top: 9px;
+    right: 8px; /* gutter */
 }
 
 /* Position mute icon when room muted */
@@ -161,6 +157,7 @@ limitations under the License.
     background-color: rgba(0,0,0,0);
     opacity: 1;
     top: 11px;
+    right: 6px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -180,7 +177,7 @@ limitations under the License.
     font-weight: 600;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name {
+.mx_RoomTile_selected {
     background-color: rgba(118,207,166,0.2);
 }
 
@@ -188,10 +185,6 @@ limitations under the License.
     width: 144px;
 }
 
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
-    width: 136px;
-}
-
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 7905f2f658..316246cb33 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -63,8 +63,8 @@ limitations under the License.
     order: 3;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-left: 18px;
-    margin-right: 18px;
+    margin-left: 16px; /* gutter */
+    margin-right: 16px; /* gutter */
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
     z-index: 1;
@@ -100,3 +100,7 @@ limitations under the License.
 .mx_LeftPanel .mx_BottomLeftMenu_settings {
     float: right;
 }
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 83f8c873b0..b54fea9818 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -25,8 +25,8 @@ limitations under the License.
     color: #3d3b39;
     font-weight: 600;
     font-size: 13px;
-    padding-left: 18px;
-    padding-right: 18px;
+    padding-left: 16px; /* gutter */
+    padding-right: 16px; /* gutter */
     margin-top: 8px;
     margin-bottom: 4px;
     cursor: pointer;

From f53f9af1c5e000b0478bc6ec7b43fd69ff179228 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 3 Aug 2016 14:11:17 +0100
Subject: [PATCH 41/43] Badge width fixed, and hover state for badge now only
 on badge itself.

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 de1b09331c..20b78dd4d4 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
@@ -121,7 +121,7 @@ limitations under the License.
 
 .mx_RoomTile_badge {
     display: inline-block;
-    min-width: 14px;
+    min-width: 19px;
     height: 17px;
     position: absolute;
     right: 8px; /*gutter */

From be1f0142943482bc53e35886fb43e926f894b6c9 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 3 Aug 2016 14:22:47 +0100
Subject: [PATCH 42/43] Speech bubble tail shifted slightly, as the badge is
 now larger

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 20b78dd4d4..d995243bdf 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
@@ -114,7 +114,7 @@ limitations under the License.
     display: block;
     width: 0;
     height: 0;
-    margin-left: 4px;
+    margin-left: 6px;
     border-top: 8px solid #ff0064;
     border-right: 10px solid transparent;
 }

From 16f8143f3e2e4d4b5a2546d72e578dcf2efad7ad Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 3 Aug 2016 14:45:31 +0100
Subject: [PATCH 43/43] synced prefix flex with flex

---
 src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
index bd6f72e670..9545560174 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
@@ -93,7 +93,7 @@ limitations under the License.
 
     background-color: #eaf5f0;
 
-    -webkit-flex: 0 0 210px;
+    -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
 }