Save and add, notif settings cleanup

UI/Settings/Notifications/CollectionView.js

@@ -2,10 +2,9 @@
 define([
     'app',
     'marionette',
-    'Settings/Notifications/Collection',
     'Settings/Notifications/ItemView',
-    'Settings/Notifications/AddView'
-], function (App, Marionette, NotificationCollection, NotificationItemView, AddSelectionNotificationView) {
+    'Settings/Notifications/SchemaModal'
+], function (App, Marionette, NotificationItemView, SchemaModal) {
     return Marionette.CompositeView.extend({
         itemView         : NotificationItemView,
         itemViewContainer: '.notifications',
@@ -16,13 +15,7 @@ define([
         },
 
         _openSchemaModal: function () {
-            var schemaCollection = new NotificationCollection();
-            schemaCollection.url = '/api/notification/schema';
-            schemaCollection.fetch();
-            schemaCollection.url = '/api/notification';
-
-            var view = new AddSelectionNotificationView({ collection: schemaCollection, notificationCollection: this.collection});
-            App.modalRegion.show(view);
+            SchemaModal.open(this.collection);
         }
     });
 });

UI/Settings/Notifications/EditTemplate.html

@@ -61,10 +61,23 @@
 </div>
 <div class="modal-footer">
     {{#if id}}
-        <button class="btn btn-danger pull-left x-remove">delete</button>
+        <button class="btn btn-danger pull-left x-delete">delete</button>
+    {{else}}
+        <button class="btn pull-left x-back">back</button>
     {{/if}}
-    <button class="btn x-test">test <i class="x-test-icon"/></button>
 
+    <button class="btn x-test">test <i class="x-test-icon"/></button>
     <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-primary x-save">save</button>
+
+    <div class="btn-group">
+        <button class="btn btn-primary x-save">save</button>
+        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li class="save-and-add x-save-and-add">
+                save and add
+            </li>
+        </ul>
+    </div>
 </div>

UI/Settings/Notifications/EditView.js

@@ -15,9 +15,11 @@ define([
         template: 'Settings/Notifications/EditTemplate',
 
         events: {
-            'click .x-save'  : '_saveNotification',
-            'click .x-remove': '_deleteNotification',
-            'click .x-test'  : '_test'
+            'click .x-save'          : '_saveNotification',
+            'click .x-save-and-add'  : '_saveAndAddNotification',
+            'click .x-delete'        : '_deleteNotification',
+            'click .x-back'          : '_back',
+            'click .x-test'          : '_test'
         },
 
         ui: {
@@ -41,14 +43,26 @@ define([
             }
         },
 
+        _saveAndAddNotification: function () {
+            var self = this;
+            var promise = this.model.saveSettings();
+
+            if (promise) {
+                promise.done(function () {
+                    self.notificationCollection.add(self.model, { merge: true });
+
+                    require('Settings/Notifications/SchemaModal').open(self.notificationCollection);
+                });
+            }
+        },
+
         _deleteNotification: function () {
             var view = new DeleteView({ model: this.model });
             App.modalRegion.show(view);
         },
 
-        _saveSuccess: function () {
-            this.notificationCollection.add(this.model, { merge: true });
-            App.modalRegion.closeModal();
+        _back: function () {
+            require('Settings/Notifications/SchemaModal').open(this.notificationCollection);
         },
 
         _test: function () {

UI/Settings/Notifications/ItemTemplate.html

@@ -7,7 +7,7 @@
         </span>
     </div>
 
-    <div>
+    <div class="settings">
         {{#if onGrab}}
             <span class="label label-success">On Grab</span>
         {{else}}

UI/Settings/Notifications/SchemaModal.js

@@ -0,0 +1,19 @@
+'use strict';
+define([
+    'app',
+    'Settings/Notifications/Collection',
+    'Settings/Notifications/AddView'
+], function (App, NotificationCollection, AddSelectionNotificationView) {
+    return ({
+
+        open: function (collection) {
+            var schemaCollection = new NotificationCollection();
+            schemaCollection.url = '/api/notification/schema';
+            schemaCollection.fetch();
+            schemaCollection.url = '/api/notification';
+
+            var view = new AddSelectionNotificationView({ collection: schemaCollection, notificationCollection: collection});
+            App.modalRegion.show(view);
+        }
+    });
+});

UI/Settings/Notifications/notifications.less

@@ -23,24 +23,27 @@
 }
 
 .notifications {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+
   li {
     display: inline-block;
     vertical-align: top;
   }
 }
-
 .notification-item {
 
   .card;
 
-  width: 250px;
-  height: 80px;
-  padding: 10px 15px;
+  width: 290px;
+  height: 90px;
+  padding: 20px 20px;
 
   h3 {
     margin-top: 0px;
     display: inline-block;
-    width: 200px;
+    width: 230px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -49,4 +52,8 @@
   .btn-group {
     margin-top: 8px;
   }
+
+  .settings {
+    margin-top: 5px;
+  }
 }