From d7c70a9c917397fb5fda3efb5e8461148db3874a Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Thu, 25 Jul 2013 23:53:37 -0700
Subject: [PATCH] Add notification card

---
 .../Notifications/AddCardTemplate.html        |  7 ++++++
 .../Notifications/CollectionTemplate.html     |  5 ----
 UI/Settings/Notifications/CollectionView.js   | 24 ++++++++++++++++++-
 UI/Settings/Notifications/notifications.less  | 18 ++++++++++++++
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 UI/Settings/Notifications/AddCardTemplate.html

diff --git a/UI/Settings/Notifications/AddCardTemplate.html b/UI/Settings/Notifications/AddCardTemplate.html
new file mode 100644
index 000000000..b32a4ab00
--- /dev/null
+++ b/UI/Settings/Notifications/AddCardTemplate.html
@@ -0,0 +1,7 @@
+<li>
+    <div class="notification-item add-card x-add-card">
+        <span class="center well">
+            <i class="icon-plus" title="Add Notification"/>
+        </span>
+    </div>
+</li>
diff --git a/UI/Settings/Notifications/CollectionTemplate.html b/UI/Settings/Notifications/CollectionTemplate.html
index ba9a5bbf5..c4ebae92a 100644
--- a/UI/Settings/Notifications/CollectionTemplate.html
+++ b/UI/Settings/Notifications/CollectionTemplate.html
@@ -1,9 +1,4 @@
 <div class="row">
-    <div class="span12">
-        <button class="btn btn-success x-add">Add Notification</button>
-    </div>
-</div>
-<div class="row">
     <div class="span12">
         <ul class="notifications"></ul>
     </div>
diff --git a/UI/Settings/Notifications/CollectionView.js b/UI/Settings/Notifications/CollectionView.js
index 8c00dc559..5abe0ae5f 100644
--- a/UI/Settings/Notifications/CollectionView.js
+++ b/UI/Settings/Notifications/CollectionView.js
@@ -10,12 +10,34 @@ define([
         itemViewContainer: '.notifications',
         template         : 'Settings/Notifications/CollectionTemplate',
 
+        ui: {
+            'addCard': '.x-add-card'
+        },
+
         events: {
-            'click .x-add': '_openSchemaModal'
+            'click .x-add': '_openSchemaModal',
+            'click .x-add-card': '_openSchemaModal'
+        },
+
+        onBeforeItemAdded: function () {
+            this.ui.addCard.remove();
+        },
+
+        onAfterItemAdded: function () {
+            this._appendAddCard();
         },
 
         _openSchemaModal: function () {
             SchemaModal.open(this.collection);
+        },
+
+        _appendAddCard: function () {
+            this.$itemViewContainer.find('.x-add-card').remove();
+
+            this.templateFunction = Marionette.TemplateCache.get('Settings/Notifications/AddCardTemplate');
+            var html = this.templateFunction();
+
+            this.$itemViewContainer.append(html);
         }
     });
 });
diff --git a/UI/Settings/Notifications/notifications.less b/UI/Settings/Notifications/notifications.less
index 06ec6f3d3..87a669eea 100644
--- a/UI/Settings/Notifications/notifications.less
+++ b/UI/Settings/Notifications/notifications.less
@@ -56,4 +56,22 @@
   .settings {
     margin-top: 5px;
   }
+}
+
+.add-card {
+  .clickable;
+  color: #adadad;
+  font-size: 50px;
+  text-align: center;
+
+  .center {
+    display: inline-block;
+    padding: 0px 20px;
+    padding-top: 5px;
+    margin-top: 15px;
+  }
+
+  i {
+    .clickable;
+  }
 }
\ No newline at end of file