Merge pull request #7 from ekonstantinidis/notifications-style

Style Notifications & Split to Repo & Notifications

Author: ekonstantinidis

src/js/components/notification.js

@@ -40,9 +40,11 @@ var Notification = React.createClass({
 
     return (
       <div className='row notification'>
-        <span className={typeIconClass} />
-        <span onClick={this.openBrowser}>{this.props.notification.subject.title}</span>
-        <span className="octicon octicon-check" onClick={this.markAsRead}></span>
+        <div className='col-xs-1'><span className={typeIconClass} /></div>
+        <div className='col-xs-10 subject' onClick={this.openBrowser}>
+          {this.props.notification.subject.title}
+        </div>
+        <div className='col-xs-1 check-wrapper'><span className="octicon octicon-check" onClick={this.markAsRead} /></div>
       </div>
     );
   }

src/js/components/notifications.js

@@ -7,7 +7,7 @@ var shell = remote.require('shell');
 
 var Actions = require('../actions/actions');
 var NotificationsStore = require('../stores/notifications');
-var SingleNotification = require('../components/notification');
+var Repository = require('../components/repository');
 
 var Notifications = React.createClass({
   mixins: [
@@ -43,16 +43,8 @@ var Notifications = React.createClass({
     if (!_.isEmpty(this.state.notifications)) {
       notifications = (
         _.map(this.state.notifications, function(repo, i) {
-          return (
-            <div key={i}>
-              <h4 onClick={self.openRepoBrowser.bind(self, i)}>{i}</h4>
-              {repo.map(function(as, df) {
-                return (
-                  <SingleNotification notification={as} key={as.id} />
-                );
-              })}
-            </div>
-          );
+          var repoFullName = repo[0].repository.full_name;
+          return <Repository repo={repo} repoName={repoFullName} key={i} />;
         })
       );
     } else {

src/js/components/repository.js

@@ -0,0 +1,32 @@
+var React = require('react');
+var SingleNotification = require('../components/notification');
+var _ = require('underscore');
+
+var Repository = React.createClass({
+
+  getAvatar: function () {
+    return this.props.repo[0].repository.owner.avatar_url;
+  },
+
+  render: function () {
+    var notifications = (
+      _.map(this.props.repo, function(notification, i) {
+        return (
+          <SingleNotification notification={notification} key={i} />
+        );
+      })
+    );
+
+    return (
+      <div>
+        <div className='row repository'>
+          <div className='col-xs-2'><img className='avatar' src={this.getAvatar()} /></div>
+          <div className='col-xs-10 name'>{this.props.repoName}</div>
+        </div>
+        {notifications}
+      </div>
+    );
+  }
+});
+
+module.exports = Repository;

src/less/style.less

@@ -237,6 +237,29 @@ html, body {
 /* @end Component / Login  */
 
 
+/* @group Component / Repository  */
+
+.repository {
+  padding: 10px 20px;
+  margin: 0;
+  background-color: #f5f5f5;
+
+  .avatar {
+    .BorderRadius(50%);
+    width: 25px;
+    height: 25px;
+  }
+
+  .name {
+    font-size: 18px;
+    .FontOpenSansSemibold();
+    text-align: right;
+  }
+}
+
+/* @end Component / Repository  */
+
+
 /* @group Component / Notifications  */
 
 .notifications {
@@ -257,10 +280,26 @@ html, body {
 
 .notification {
   margin: 0;
-  padding: 10px 20px;
+  padding: 3px 20px;
+
+  .col-xs-1,
+  .col-xs-10 {
+    padding: 5px 0;
+  }
+
+  .check-wrapper {
+    text-align: right;
+  }
+
+  .subject {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   .octicon {
     margin-right: 10px;
+    font-size: 20px;
   }
 }