feat(notifications): move to sidebar

Summary: feat(notifications): move to sidebar

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1282

internal_packages/notification-mailto/lib/main.coffee

@@ -17,20 +17,20 @@ module.exports =
 
     @services.isRegisteredForURLScheme 'mailto', (registered) =>
       # Prompt them to make Inbox their default client
-      unless registered
-        @_unlisten = Actions.notificationActionTaken.listen(@_onNotificationActionTaken, @)
-        Actions.postNotification
-          type: 'info',
-          sticky: true
-          message: "Thanks for trying out Edgehill! Would you like to make it your default mail client?",
-          icon: 'fa-inbox',
-          actions: [{
-            label: 'Yes'
-            id: NOTIF_ACTION_YES
-          },{
-            label: 'Not Now'
-            id: NOTIF_ACTION_NO
-          }]
+      # unless registered
+      @_unlisten = Actions.notificationActionTaken.listen(@_onNotificationActionTaken, @)
+      Actions.postNotification
+        type: 'info',
+        sticky: true
+        message: "Thanks for trying out Edgehill! Would you like to make it your default mail client?",
+        icon: 'fa-inbox',
+        actions: [{
+          label: 'Yes'
+          id: NOTIF_ACTION_YES
+        },{
+          label: 'Not Now'
+          id: NOTIF_ACTION_NO
+        }]
 
   deactivate: ->
     @_unlisten()

internal_packages/notifications/lib/main.cjsx

@@ -10,7 +10,7 @@ module.exports =
     ComponentRegistry.register
       view: Notifications
       name: 'Notifications'
-      role: 'Root:Center'
+      role: 'Root:Left'
 
     ComponentRegistry.register
       view: NotificationsStickyBar

internal_packages/notifications/lib/notifications.cjsx

@@ -15,14 +15,13 @@ Notifications = React.createClass
 
   render: ->
     <div className="notifications-momentary">
-      <div className="inner">
-        {@_notificationComponents()}
-      </div>
+      {@_notificationComponents()}
     </div>
 
   _notificationComponents: ->
     @state.notifications.map (notification) ->
-      <div className={"notification-item notification-#{notification.type}"}>
+      <div key={notification.id}
+           className={"notification-item notification-#{notification.type}"}>
         {notification.message}
       </div>
 

internal_packages/notifications/spec/notifications-store-spec.coffee

@@ -51,7 +51,7 @@ describe 'NotificationStore', ->
       Actions.postNotification({type: 'info', message: 'B', sticky: false})
       Actions.postNotification({type: 'info', message: 'C'})
       Actions.postNotification({type: 'info', message: 'D', sticky: true})
-      
+
     describe "stickyNotifications", ->
       it 'should return all of the notifications with the sticky flag, ordered by date DESC', ->
         messages = NotificationsStore.stickyNotifications().map (n) -> n.message

internal_packages/notifications/stylesheets/notifications.less

@@ -1,64 +1,59 @@
 @import "ui-variables";
 @import "ui-mixins";
 
-// Notification Colors
-.notifications-momentary,
-.notifications-sticky {
-  .notification-info { background: @background-color-info; }
-  .notification-error { background: @background-color-error; }
-  .notification-success { background: @background-color-success; }
-
-  order: -1;
-
-  .notifications-sticky-item {
-      height: 25px;
-      display:block;
-      padding-left:10px;
-      padding-right:10px;
-      padding-top:2px;
-      color:@text-color-inverse;
-      border-bottom:1px solid rgba(0,0,0,0.25);
-      a {
-        float:right;
-        font-size:13px;
-        background-color: rgba(255,255,255,0.2);
-        color:@text-color-inverse;
-        border-radius: 4px;
-        padding:1px;
-        padding-left:6px;
-        padding-right:6px;
-        margin-left:10px;
-        border-top:1px solid transparent;
-        border-bottom:none;
-      }
-      a:hover {
-        background-color: rgba(0,0,0,0.2);
-        border-top:1px solid rgba(0,0,0,0.35);
-        text-decoration:none;
-        color:@text-color-inverse;
-      }
-
-      i {
-        margin-right:8px;
-      }
-  }
-}
-
 // Notifications Above Threads
 .notifications-momentary {
+  width: 100%;
+  bottom: 0;
   position: absolute;
-  order: 1;
-  z-index: 400;
-  width:100%;
+  background: @background-off-primary;
+  border-top: 1px solid @border-secondary-bg;
+  box-shadow: @standard-shadow-up;
 
-  .inner {
+  .notification-info { border-color: @background-color-info; }
+  .notification-error {
+    border-color: @background-color-error;
+    color: @error-color;
+  }
+  .notification-success { border-color: @background-color-success; }
+
+  .notification-item {
     text-align: center;
-    font-size: @font-size-small;
-    overflow: auto;
-
-    .notification-item {
-      color: @text-color-inverse;
-      padding: 3px 15px 2px 1px;
-    }
+    border-top-width: 3px;
+    border-top-style: solid;
+    padding: @spacing-standard;
   }
 }
+
+.notifications-sticky-item {
+    height: 25px;
+    display:block;
+    padding-left:10px;
+    padding-right:10px;
+    padding-top:2px;
+    color:@text-color-inverse;
+    border-bottom:1px solid rgba(0,0,0,0.25);
+    a {
+      float:right;
+      font-size:13px;
+      background-color: rgba(255,255,255,0.2);
+      color:@text-color-inverse;
+      border-radius: 4px;
+      padding:1px;
+      padding-left:6px;
+      padding-right:6px;
+      margin-left:10px;
+      border-top:1px solid transparent;
+      border-bottom:none;
+    }
+    a:hover {
+      background-color: rgba(0,0,0,0.2);
+      border-top:1px solid rgba(0,0,0,0.35);
+      text-decoration:none;
+      color:@text-color-inverse;
+    }
+
+    i {
+      margin-right:8px;
+    }
+}

static/variables/ui-variables.less

@@ -43,9 +43,10 @@
 @accent-primary-dark: @blue-dark;
 @accent-secondary:    @nilas-yellow;
 
-@background-primary:   #ffffff;
-@background-secondary: #f6f6f6;
-@background-tertiary:  #6d7987;
+@background-primary:     #ffffff;
+@background-off-primary: #fdfdfd;
+@background-secondary:   #f6f6f6;
+@background-tertiary:    #6d7987;
 
 @border-primary-bg: darken(@background-primary, 10%);
 @border-secondary-bg: darken(@background-secondary, 10%);
@@ -198,6 +199,11 @@
 @border-radius-small:       3px;
 
 
+//============================== Shadows ===============================//
+@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
+@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21);
+
+
 //============================== Tables ===============================//
 // Customizes the `.table` component with basic values, each used across
 // all table variations.
@@ -221,7 +227,7 @@
 
 //=============================== Buttons ==============================//
 
-@btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
+@btn-shadow: @standard-shadow;
 
 @btn-default-bg-color:    @background-primary;
 @btn-default-text-color:  @text-color;
@@ -478,10 +484,6 @@
 @component-border-radius: 2px;
 
 
-// Other
-
-@standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
-@standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);
 
 @body-bg: @white;
 //== Panels and Sidebars