Added some structure to notifications, with workarea-detail displayin…

…g the notification's description
sueastside · Jan 30, 2014 · 4c08d54 · 4c08d54
1 parent 44247d4
commit 4c08d54
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 24 deletions.
diff --git a/app/index.html b/app/index.html
@@ -36,19 +36,19 @@
                         <a href="#"><img src="/images/logo32x32.png"></a>
                     </li>
                     <li class="active">
-                        <a href="#!dashboard"><i class="fa fa-pagelines"></i> Dashboard</a>
+                        <a href="#!dashboard"><i class="fa fa-dashboard"></i> Dashboard</a>
                     </li>
                     <li>
-                        <a href="#!users"><i class="fa fa-bullhorn"></i> Projects</a>
+                        <a href="#!users"><i class="fa fa-group"></i> Projects</a>
                     </li>
                     <li>
-                        <a href="#"><i class="fa fa-desktop"></i> Tasks</a>
+                        <a href="#"><i class="fa fa-tasks"></i> Tasks</a>
                     </li>
                     <li>
                         <a href="#"><i class="fa fa-dot-circle-o"></i> Assets</a>
                     </li>
                     <li>
-                        <a href="#"><i class="fa fa-fire"></i> Scenes</a>
+                        <a href="#"><i class="fa fa-film"></i> Scenes</a>
                     </li>
                 </ul>
                 <ul id="user">

diff --git a/app/scripts/components/notificationstream.js b/app/scripts/components/notificationstream.js
@@ -2,41 +2,77 @@
 
 (function() {
     "use strict";
+
+
+    var ProfilePic = React.createClass({
+      render: function() {
+        return (
+          <img src={'http://placekitten.com/32/32?username=' + this.props.username} />
+        );
+      }
+    });
+
 
     var Notification = React.createClass({
+        handleClick: function(event) {
+            console.log(event);
+            var id = $(event.target).attr('data-id');
+            this.props.onClick(this.props.data);
+            return false;
+        },
         render: function() {
             return (
-                <li>
-                    <h3>{this.props.data.timesince}</h3>
-                    <span>{this.props.data.__str__}</span>
+                <li className="notification" onClick={this.handleClick} data-id={this.props.data.id}>
+                    <div className="notification-user">
+                        <ProfilePic user={this.props.data.actor} username={this.props.data.actor_descr} />
+                        <div className="notification-summary">
+                            <div>
+                                <a href={this.props.data.actor}>{this.props.data.actor_descr}</a>
+                                 {' '+this.props.data.verb+' '}
+                                <a href={this.props.data.action_object}>{this.props.data.action_object_descr}</a>
+                            </div>
+                            <div>{this.props.data.timesince}</div>
+                        </div>
+                    </div>
                 </li>
             );
         }
     });
 
 
     var NotificationStream = React.createClass({
-        loadCommentsFromServer: function() {
+        loadFromServer: function() {
             var component = this;
             var data_xhr = Request(this.props.url);
             data_xhr.done(function( data ) {
-                component.setState({data: data});
+                component.state.data = data;
+                component.setState(component.state);
             });
           },
         getInitialState: function() {
-            return {data: []};
+            return {data: [], active: null};
         },
         componentWillMount: function() {
-            this.loadCommentsFromServer();
-            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+            this.loadFromServer();
+            setInterval(this.loadFromServer, this.props.pollInterval);
+        },
+        handleonNavigate: function(data) {
+            var component = this;
+            component.state.active = data;
+            component.setState(component.state);
         },
         render: function() {
             return (
-                <ul className="workspace-list">
-                    {this.state.data.map(function(itm)  {
-                        return <Notification data={itm} />
-                    })}
-                </ul>
+                <div className="active">
+                    <ul className="workspace-list">
+                        {this.state.data.map(function(itm)  {
+                            return <Notification onClick={this.handleonNavigate} key={itm.id} data={itm} />
+                        }, this)}
+                    </ul>
+                    <div className="workspace-detail">
+                        {this.state.active?this.state.active.description:''} 
+                    </div>
+                </div>
             );
         }
     });

diff --git a/app/scripts/dashboard.js b/app/scripts/dashboard.js
@@ -44,7 +44,7 @@
         } else if (state=='projects') {
             React.renderComponent(<FilteredList type={Project} url="/projects/"></FilteredList>, $("#workspace-area")[0]);
         } else {
-            React.renderComponent(<NotificationStream url="/users/1/activity/" pollInterval={2000}></NotificationStream>, $("#workspace-area")[0]);
+            React.renderComponent(<NotificationStream url="/users/1/activity/" pollInterval={5000}></NotificationStream>, $("#workspace-area")[0]);
         }
     };
 } ());
diff --git a/app/scripts/main.js b/app/scripts/main.js
@@ -51,10 +51,12 @@
     });
 
     $(document).ready(function () {
-        if ( window.location.hash ) {
-            var hash = window.location.hash.substr(2).split(";")[0];
-            LoadView( window[hash.charAt(0).toUpperCase() + hash.slice(1)], hash, window.location.hash.substr(2).split(";")[1] );
-        }
-        setTimeout(function () {window.renderUserMenu();}, 100);
+        setTimeout(function () {
+            if ( window.location.hash ) {
+                var hash = window.location.hash.substr(2).split(";")[0];
+                LoadView( window[hash.charAt(0).toUpperCase() + hash.slice(1)], hash, window.location.hash.substr(2).split(";")[1] );
+            }
+            window.renderUserMenu();
+        }, 100);
     });
 } ());
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -161,19 +161,24 @@ a {
 }
 
 #workspace-area {
+    height: 100%;
 	padding-left: 200px;
 
+
 	> div {
 		display: none;
-
+        height: 100%;
 		&.active {
 			display: block;
 		}
 	}
 
 	.workspace-list {
+        display: inline-block;
+
 		list-style-type: none;
 		background: #222222;
+        height: 100%;
 		width: 40%;
 		margin: 0;
 		padding: 0;
@@ -184,4 +189,36 @@ a {
 			}
 		}
 	}
+
+    .workspace-detail {
+        vertical-align: top;
+        display: inline-block;
+        background: #333;
+        height: 100%;
+        width: 60%;
+        padding: 12px;
+    }
+}
+
+.notification {
+    display: block;
+    padding: 10px;
+    text-decoration: none;
+    background: #242424;
+    transition: background .1s ease-in-out;
+    border-bottom: 2px solid #333333;
+    cursor: pointer;
+
+    &:hover {
+				background: #434343;
+			}
+
+    .notification-user {
+        img {
+            margin: 5px;
+        }
+        .notification-summary {
+            display: inline-block;
+        }
+    }
 }