Carded notifications

UI/Content/base.less

@@ -9,6 +9,7 @@
 @import "backgrid/backgrid";
 @import "../shared/styles/clickable";
 @import "prefixer";
+@import "icons";
 
 .progress {
   width         : 125px;

UI/Content/icons.less

@@ -0,0 +1,55 @@
+@import "FontAwesome/font-awesome.less";
+@import "Bootstrap/variables";
+
+/* Icon rotations and mirroring */
+.icon-rotate-90() {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+
+.icon-rotate-180() {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+.icon-rotate-270() {
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+.icon-flip-horizontal() {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.icon-flip-vertical() {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+.icon-nd-edit:before {
+  .icon(@wrench);
+}
+
+.icon-nd-delete:before {
+  .icon(@remove);
+  color: @errorText;
+}

UI/Settings/Notifications/AddTemplate.html

@@ -3,7 +3,7 @@
     <h3>Add Notification</h3>
 </div>
 <div class="modal-body">
-    <div class="notifications">
+    <div class="add-notifications">
         <ul class="items"></ul>
     </div>
 </div>

UI/Settings/Notifications/AddView.js

@@ -7,7 +7,7 @@ define([
 
     return Marionette.CompositeView.extend({
         itemView         : AddItemView,
-        itemViewContainer: '.notifications .items',
+        itemViewContainer: '.add-notifications .items',
         template         : 'Settings/Notifications/AddTemplate',
 
         itemViewOptions: function () {

UI/Settings/Notifications/CollectionTemplate.html

@@ -1,14 +1,10 @@
-<table class="table table-hover">
-    <thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>On Grab</th>
-        <th>On Download</th>
-        <th>Controls</th>
-    </tr>
-    </thead>
-    <tbody></tbody>
-</table>
-
-<button class="btn btn-success x-add">Add</button>
+<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>
+</div>

UI/Settings/Notifications/CollectionView.js

@@ -8,14 +8,14 @@ define([
 ], function (App, Marionette, NotificationCollection, NotificationItemView, AddSelectionNotificationView) {
     return Marionette.CompositeView.extend({
         itemView         : NotificationItemView,
-        itemViewContainer: 'tbody',
+        itemViewContainer: '.notifications',
         template         : 'Settings/Notifications/CollectionTemplate',
 
         events: {
-            'click .x-add': 'openSchemaModal'
+            'click .x-add': '_openSchemaModal'
         },
 
-        openSchemaModal: function () {
+        _openSchemaModal: function () {
             var schemaCollection = new NotificationCollection();
             schemaCollection.url = '/api/notification/schema';
             schemaCollection.fetch();

UI/Settings/Notifications/EditTemplate.html

@@ -57,7 +57,6 @@
         </div>
 
         {{formBuilder}}
-        index
     </div>
 </div>
 <div class="modal-footer">

UI/Settings/Notifications/EditView.js

@@ -6,7 +6,8 @@ define([
     'Settings/Notifications/Model',
     'Settings/Notifications/DeleteView',
     'Shared/Messenger',
-    'Mixins/AsModelBoundView'
+    'Mixins/AsModelBoundView',
+    'Form/FormBuilder'
 
 ], function (App, Marionette, NotificationModel, DeleteView, Messenger, AsModelBoundView) {
 
@@ -29,10 +30,14 @@ define([
         },
 
         _saveNotification: function () {
+            var self = this;
             var promise = this.model.saveSettings();
 
             if (promise) {
-                promise.done(this._saveSuccess);
+                promise.done(function () {
+                    self.notificationCollection.add(self.model, { merge: true });
+                    App.modalRegion.closeModal();
+                });
             }
         },
 

UI/Settings/Notifications/ItemTemplate.html

@@ -1,9 +1,23 @@
-<td name="name"></td>
-<td name="implementationName"></td>
-<td name="onGrab"></td>
-<td name="onDownload"></td>
-<td name="cutoff.name"></td>
-<td>
-    <i class="icon-cog x-edit" title="Edit"/>
-    <i class="icon-remove x-delete" title="Delete"/>
-</td>
+<div class="notification-item">
+    <div>
+        <h3>{{name}}</h3>
+        <span class="btn-group pull-right">
+            <button class="btn btn-mini x-edit"><i class="icon-nd-edit"/></button>
+            <button class="btn btn-mini x-delete"><i class="icon-nd-delete"/></button>
+        </span>
+    </div>
+
+    <div>
+        {{#if onGrab}}
+            <span class="label label-success">On Grab</span>
+        {{else}}
+            <span class="label">On Grab</span>
+        {{/if}}
+
+        {{#if onDownload}}
+            <span class="label label-success">On Download</span>
+        {{else}}
+            <span class="label">On Download</span>
+        {{/if}}
+    </div>
+</div>

UI/Settings/Notifications/ItemView.js

@@ -10,19 +10,23 @@ define([
 
     return Marionette.ItemView.extend({
         template: 'Settings/Notifications/ItemTemplate',
-        tagName : 'tr',
+        tagName : 'li',
 
         events: {
-            'click .x-edit'  : 'edit',
-            'click .x-delete': 'deleteNotification'
+            'click .x-edit'  : '_editNotification',
+            'click .x-delete': '_deleteNotification'
         },
 
-        edit: function () {
+        initialize: function () {
+            this.listenTo(this.model, 'sync', this.render);
+        },
+
+        _editNotification: function () {
             var view = new EditView({ model: this.model, notificationCollection: this.model.collection});
             App.modalRegion.show(view);
         },
 
-        deleteNotification: function () {
+        _deleteNotification: function () {
             var view = new DeleteView({ model: this.model});
             App.modalRegion.show(view);
         }

UI/Settings/Notifications/Model.js

@@ -1,8 +1,9 @@
-'use strict';
-define(
-    [
-        'backbone.deepmodel'
-    ], function (DeepModel) {
-        return DeepModel.DeepModel.extend({
-        });
+'use strict';
+define([
+    'Settings/SettingsModelBase'], function (ModelBase) {
+    return ModelBase.extend({
+
+        successMessage: 'Notification Saved',
+        errorMessage  : 'Couldn\'t save notification'
     });
+});

UI/Settings/Notifications/notifications.less

@@ -8,7 +8,7 @@
   text-align: center;
 }
 
-.notifications {
+.add-notifications {
   text-align: center;
 
   .items {
@@ -22,3 +22,31 @@
   }
 }
 
+.notifications {
+  li {
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+.notification-item {
+
+  .card;
+
+  width: 250px;
+  height: 80px;
+  padding: 10px 15px;
+
+  h3 {
+    margin-top: 0px;
+    display: inline-block;
+    width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .btn-group {
+    margin-top: 8px;
+  }
+}