From 4f1b27a523cca1066182276077137956f080c602 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Fri, 26 Jul 2013 00:04:25 -0700
Subject: [PATCH] Quality Profile add card

---
 UI/Settings/Notifications/CollectionView.js   | 21 +++-----------
 UI/Settings/Notifications/notifications.less  | 28 +++++++++----------
 .../Quality/Profile/AddCardTemplate.html      |  7 +++++
 .../QualityProfileCollectionTemplate.html     |  5 ----
 .../Profile/QualityProfileCollectionView.js   | 11 +++++++-
 UI/Settings/Quality/quality.less              | 18 ++++++++++++
 6 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 UI/Settings/Quality/Profile/AddCardTemplate.html

diff --git a/UI/Settings/Notifications/CollectionView.js b/UI/Settings/Notifications/CollectionView.js
index 5abe0ae5f..67658c995 100644
--- a/UI/Settings/Notifications/CollectionView.js
+++ b/UI/Settings/Notifications/CollectionView.js
@@ -10,34 +10,21 @@ define([
         itemViewContainer: '.notifications',
         template         : 'Settings/Notifications/CollectionTemplate',
 
-        ui: {
-            'addCard': '.x-add-card'
-        },
-
         events: {
-            '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);
+        },
+
+        _openSchemaModal: function () {
+            SchemaModal.open(this.collection);
         }
     });
 });
diff --git a/UI/Settings/Notifications/notifications.less b/UI/Settings/Notifications/notifications.less
index 87a669eea..59c1726ce 100644
--- a/UI/Settings/Notifications/notifications.less
+++ b/UI/Settings/Notifications/notifications.less
@@ -56,22 +56,22 @@
   .settings {
     margin-top: 5px;
   }
-}
 
-.add-card {
-  .clickable;
-  color: #adadad;
-  font-size: 50px;
-  text-align: center;
+  &.add-card {
+    .clickable;
+    color: #adadad;
+    font-size: 50px;
+    text-align: center;
 
-  .center {
-    display: inline-block;
-    padding: 0px 20px;
-    padding-top: 5px;
-    margin-top: 15px;
-  }
+    .center {
+      display: inline-block;
+      padding: 0px 20px;
+      padding-top: 5px;
+      margin-top: 15px;
+    }
 
-  i {
-    .clickable;
+    i {
+      .clickable;
+    }
   }
 }
\ No newline at end of file
diff --git a/UI/Settings/Quality/Profile/AddCardTemplate.html b/UI/Settings/Quality/Profile/AddCardTemplate.html
new file mode 100644
index 000000000..54c8b09be
--- /dev/null
+++ b/UI/Settings/Quality/Profile/AddCardTemplate.html
@@ -0,0 +1,7 @@
+<li>
+    <div class="quality-profile-item add-card x-add-card">
+        <span class="center well">
+            <i class="icon-plus" title="Add Profile"/>
+        </span>
+    </div>
+</li>
diff --git a/UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html b/UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html
index 5353b7a74..c7d6ed762 100644
--- a/UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html
+++ b/UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html
@@ -1,10 +1,5 @@
 <fieldset>
     <legend>Quality Profiles</legend>
-    <div class="row">
-        <div class="span12">
-            <button class="btn btn-success x-add">Add Profile</button>
-        </div>
-    </div>
     <div class="row">
         <div class="span12">
             <ul class="quality-profiles"></ul>
diff --git a/UI/Settings/Quality/Profile/QualityProfileCollectionView.js b/UI/Settings/Quality/Profile/QualityProfileCollectionView.js
index 5588f6cae..cf10aebee 100644
--- a/UI/Settings/Quality/Profile/QualityProfileCollectionView.js
+++ b/UI/Settings/Quality/Profile/QualityProfileCollectionView.js
@@ -13,7 +13,16 @@ define(['app',
         template         : 'Settings/Quality/Profile/QualityProfileCollectionTemplate',
 
         events: {
-            'click .x-add': '_addProfile'
+            'click .x-add-card': '_addProfile'
+        },
+
+        onAfterItemAdded: function () {
+            this.$itemViewContainer.find('.x-add-card').remove();
+
+            this.templateFunction = Marionette.TemplateCache.get('Settings/Quality/Profile/AddCardTemplate');
+            var html = this.templateFunction();
+
+            this.$itemViewContainer.append(html);
         },
 
         _addProfile: function () {
diff --git a/UI/Settings/Quality/quality.less b/UI/Settings/Quality/quality.less
index 92133e7d3..7a64fa495 100644
--- a/UI/Settings/Quality/quality.less
+++ b/UI/Settings/Quality/quality.less
@@ -27,6 +27,24 @@
   .btn-group {
     margin-top: 8px;
   }
+
+  &.add-card {
+    .clickable;
+    color: #adadad;
+    font-size: 50px;
+    text-align: center;
+
+    .center {
+      display: inline-block;
+      padding: 0px 20px;
+      padding-top: 5px;
+      margin-top: 30px;
+    }
+
+    i {
+      .clickable;
+    }
+  }
 }
 
 .quality-size-item {