From f888ec6e81362f645d7aff01279075845229f594 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 23 Aug 2016 14:27:58 +0100
Subject: [PATCH] notification panel WIP

---
 src/components/structures/RightPanel.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index ca9376e1b4..0f8cdf2cab 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -28,6 +28,7 @@ module.exports = React.createClass({
     Phase : {
         MemberList: 'MemberList',
         FileList: 'FileList',
+        NotificationPanel: 'NotificationPanel',
         MemberInfo: 'MemberInfo',
     },
 
@@ -108,12 +109,14 @@ module.exports = React.createClass({
 
     render: function() {
         var MemberList = sdk.getComponent('rooms.MemberList');
+        var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var buttonGroup;
         var panel;
 
         var filesHighlight;
         var membersHighlight;
+        var notificationsHighlight;
         if (!this.props.collapsed) {
             if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                 membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
@@ -121,6 +124,9 @@ module.exports = React.createClass({
             else if (this.state.phase == this.Phase.FileList) {
                 filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
         }
 
         var membersBadge;
@@ -144,16 +150,23 @@ module.exports = React.createClass({
                             <TintableSvg src="img/files.svg" width="17" height="22"/>
                             { filesHighlight }
                         </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications">
+                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                            { notificationsHighlight }
+                        </div>
                     </div>;
 
             if (!this.props.collapsed) {
-                if(this.state.phase == this.Phase.MemberList) {
+                if (this.state.phase == this.Phase.MemberList) {
                     panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
                 }
-                else if(this.state.phase == this.Phase.MemberInfo) {
+                else if (this.state.phase == this.Phase.MemberInfo) {
                     var MemberInfo = sdk.getComponent('rooms.MemberInfo');
                     panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
                 }
+                else if (this.state.phase == this.Phase.NotificationPanel) {
+                    panel = <NotificationPanel />
+                }
             }
         }