From 77d08c3207a184c7e89aa765cd5707a58582e68c Mon Sep 17 00:00:00 2001
From: Austin Burdine <acburdine@gmail.com>
Date: Thu, 21 May 2015 11:03:24 -0600
Subject: [PATCH] fixed notification components

---
 core/client/app/components/gh-alert.js        | 40 +++++++++++++++++++
 core/client/app/components/gh-alerts.js       | 18 +++++++++
 core/client/app/components/gh-notification.js |  4 +-
 .../client/app/components/gh-notifications.js | 19 ++-------
 core/client/app/templates/application.hbs     | 33 ++-------------
 .../app/templates/components/gh-alert.hbs     |  4 ++
 .../app/templates/components/gh-alerts.hbs    |  3 ++
 .../templates/components/gh-notification.hbs  | 10 ++---
 8 files changed, 79 insertions(+), 52 deletions(-)
 create mode 100644 core/client/app/components/gh-alert.js
 create mode 100644 core/client/app/components/gh-alerts.js
 create mode 100644 core/client/app/templates/components/gh-alert.hbs
 create mode 100644 core/client/app/templates/components/gh-alerts.hbs

diff --git a/core/client/app/components/gh-alert.js b/core/client/app/components/gh-alert.js
new file mode 100644
index 0000000000..b8e35b7d7c
--- /dev/null
+++ b/core/client/app/components/gh-alert.js
@@ -0,0 +1,40 @@
+import Ember from 'ember';
+
+var AlertComponent = Ember.Component.extend({
+    tagName: 'article',
+    classNames: ['gh-alert', 'gh-alert-blue'],
+    classNameBindings: ['typeClass'],
+
+    typeClass: Ember.computed(function () {
+        var classes = '',
+            message = this.get('message'),
+            type,
+            dismissible;
+
+        // Check to see if we're working with a DS.Model or a plain JS object
+        if (typeof message.toJSON === 'function') {
+            type = message.get('type');
+            dismissible = message.get('dismissible');
+        } else {
+            type = message.type;
+            dismissible = message.dismissible;
+        }
+
+        classes += 'notification-' + type;
+
+        if (type === 'success' && dismissible !== false) {
+            classes += ' notification-passive';
+        }
+
+        return classes;
+    }),
+
+    actions: {
+        closeNotification: function () {
+            var self = this;
+            self.notifications.closeNotification(self.get('message'));
+        }
+    }
+});
+
+export default AlertComponent;
diff --git a/core/client/app/components/gh-alerts.js b/core/client/app/components/gh-alerts.js
new file mode 100644
index 0000000000..5fd6459163
--- /dev/null
+++ b/core/client/app/components/gh-alerts.js
@@ -0,0 +1,18 @@
+import Ember from 'ember';
+var AlertsComponent = Ember.Component.extend({
+    tagName: 'aside',
+    classNames: 'gh-alerts',
+
+    messages: Ember.computed.filter('notifications', function (notification) {
+        var displayStatus = (typeof notification.toJSON === 'function') ?
+            notification.get('status') : notification.status;
+
+        return displayStatus === 'persistent';
+    }),
+
+    messageCountObserver: Ember.observer('messages.[]', function () {
+        this.sendAction('notify', this.get('messages').length);
+    })
+});
+
+export default AlertsComponent;
diff --git a/core/client/app/components/gh-notification.js b/core/client/app/components/gh-notification.js
index f81a5e2fee..3e69ceca99 100644
--- a/core/client/app/components/gh-notification.js
+++ b/core/client/app/components/gh-notification.js
@@ -1,7 +1,9 @@
 import Ember from 'ember';
 
 var NotificationComponent = Ember.Component.extend({
-    classNames: ['js-bb-notification'],
+    tagName: 'article',
+    classNames: ['gh-notification', 'gh-notification-green'],
+    classNameBindings: ['typeClass'],
 
     typeClass: Ember.computed(function () {
         var classes = '',
diff --git a/core/client/app/components/gh-notifications.js b/core/client/app/components/gh-notifications.js
index 0d764f3db5..e0ecf2b559 100644
--- a/core/client/app/components/gh-notifications.js
+++ b/core/client/app/components/gh-notifications.js
@@ -1,25 +1,14 @@
 import Ember from 'ember';
 var NotificationsComponent = Ember.Component.extend({
     tagName: 'aside',
-    classNames: 'notifications',
-    classNameBindings: ['location'],
+    classNames: 'gh-notifications',
 
     messages: Ember.computed.filter('notifications', function (notification) {
-        // If this instance of the notifications component has no location affinity
-        // then it gets all notifications
-        if (!this.get('location')) {
-            return true;
-        }
+        var displayStatus = (typeof notification.toJSON === 'function') ?
+            notification.get('status') : notification.status;
 
-        var displayLocation = (typeof notification.toJSON === 'function') ?
-            notification.get('location') : notification.location;
-
-        return this.get('location') === displayLocation;
+        return displayStatus === 'passive';
     }),
-
-    messageCountObserver: function () {
-        this.sendAction('notify', this.get('messages').length);
-    }.observes('messages.[]')
 });
 
 export default NotificationsComponent;
diff --git a/core/client/app/templates/application.hbs b/core/client/app/templates/application.hbs
index ab6236d4b2..676f6a0672 100644
--- a/core/client/app/templates/application.hbs
+++ b/core/client/app/templates/application.hbs
@@ -1,17 +1,6 @@
 <a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
 
-<!-- TODO: Rename gh-alerts, remove location attr -->
-{{gh-notifications location="top" notify="topNotificationChange"}}
-<!-- TODO: SHOULD RENDER LIKE
-<aside id="ember754" class="gh-alerts">
-    <article class="gh-alert gh-alert-blue">
-        <div class="gh-alert-content">
-            <a href="https://ghost.org/download">Ghost 0.6.4</a> is available! Hot Damn. Please <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">upgrade</a> now.
-        </div>
-        <button class="gh-alert-close icon-x" data-ember-action="779"><span class="hidden">Close</span></button>
-    </article>
-</aside>
--->
+{{gh-alerts notify="topNotificationChange"}}
 
 <div class="gh-viewport">
 
@@ -23,24 +12,8 @@
         {{outlet}}
     </main>
 
-    <!-- TODO: Remove location attr -->
-    {{gh-notifications location="bottom"}}
-    <!-- TODO: SHOULD RENDER LIKE
-    <aside id="ember721" class="ember-view gh-notifications">
-        <article class="gh-notification gh-notification-green">
-            <div class="gh-notification-content">
-                <strong>Hannah Wolfe</strong> just updated the post <em>12 Reasons Why You're Not Selling Anything</em>.
-            </div>
-            <button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
-        </article>
-        <article class="gh-notification">
-            <div class="gh-notification-content">
-                <strong>Hannah Wolfe</strong> just updated the post <em>20 Reasons Why You're Not Selling Anything</em>.
-            </div>
-            <button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
-        </article>
-    </aside>
-    -->
+    {{gh-notifications}}
+
     {{outlet "modal"}}
     {{outlet "settings-menu"}}
 
diff --git a/core/client/app/templates/components/gh-alert.hbs b/core/client/app/templates/components/gh-alert.hbs
new file mode 100644
index 0000000000..c370b231e6
--- /dev/null
+++ b/core/client/app/templates/components/gh-alert.hbs
@@ -0,0 +1,4 @@
+<div class="gh-alert-content">
+    {{message.message}}
+</div>
+ <button class="gh-alert-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
\ No newline at end of file
diff --git a/core/client/app/templates/components/gh-alerts.hbs b/core/client/app/templates/components/gh-alerts.hbs
new file mode 100644
index 0000000000..895ae7979b
--- /dev/null
+++ b/core/client/app/templates/components/gh-alerts.hbs
@@ -0,0 +1,3 @@
+{{#each message in messages}}
+    {{gh-alert message=message}}
+{{/each}}
\ No newline at end of file
diff --git a/core/client/app/templates/components/gh-notification.hbs b/core/client/app/templates/components/gh-notification.hbs
index 1d52cf25a3..8dc1a21626 100644
--- a/core/client/app/templates/components/gh-notification.hbs
+++ b/core/client/app/templates/components/gh-notification.hbs
@@ -1,6 +1,4 @@
-<article class="gh-notification js-notification {{typeClass}}">
-    <div class="gh-notification-content">
-        {{message.message}}
-    </div>
-    <button class="gh-notification-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
-</article>
+<div class="gh-notification-content">
+    {{message.message}}
+</div>
+<button class="gh-notification-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
\ No newline at end of file