From 195f9d9d2713ee729313581751c78565dc0bc381 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Tue, 25 Jun 2013 17:34:33 -0700 Subject: [PATCH] Carded notifications --- UI/Content/base.less | 1 + UI/Content/icons.less | 55 +++++++++++++++++++ UI/Settings/Notifications/AddTemplate.html | 2 +- UI/Settings/Notifications/AddView.js | 2 +- .../Notifications/CollectionTemplate.html | 24 ++++---- UI/Settings/Notifications/CollectionView.js | 6 +- UI/Settings/Notifications/EditTemplate.html | 1 - UI/Settings/Notifications/EditView.js | 9 ++- UI/Settings/Notifications/ItemTemplate.html | 32 ++++++++--- UI/Settings/Notifications/ItemView.js | 14 +++-- UI/Settings/Notifications/Model.js | 15 ++--- UI/Settings/Notifications/notifications.less | 30 +++++++++- 12 files changed, 147 insertions(+), 44 deletions(-) create mode 100644 UI/Content/icons.less diff --git a/UI/Content/base.less b/UI/Content/base.less index 8f61632ea..87c3d8914 100644 --- a/UI/Content/base.less +++ b/UI/Content/base.less @@ -9,6 +9,7 @@ @import "backgrid/backgrid"; @import "../shared/styles/clickable"; @import "prefixer"; +@import "icons"; .progress { width : 125px; diff --git a/UI/Content/icons.less b/UI/Content/icons.less new file mode 100644 index 000000000..82dd713df --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/UI/Settings/Notifications/AddTemplate.html b/UI/Settings/Notifications/AddTemplate.html index 621e83d85..2f3ba9f31 100644 --- a/UI/Settings/Notifications/AddTemplate.html +++ b/UI/Settings/Notifications/AddTemplate.html @@ -3,7 +3,7 @@

Add Notification

-
+
    diff --git a/UI/Settings/Notifications/AddView.js b/UI/Settings/Notifications/AddView.js index f0049a46e..17e1064d2 100644 --- a/UI/Settings/Notifications/AddView.js +++ b/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 () { diff --git a/UI/Settings/Notifications/CollectionTemplate.html b/UI/Settings/Notifications/CollectionTemplate.html index 839167b1e..ba9a5bbf5 100644 --- a/UI/Settings/Notifications/CollectionTemplate.html +++ b/UI/Settings/Notifications/CollectionTemplate.html @@ -1,14 +1,10 @@ - - - - - - - - - - - -
    NameTypeOn GrabOn DownloadControls
    - - \ No newline at end of file +
    +
    + +
    +
    +
    +
    +
      +
      +
      \ No newline at end of file diff --git a/UI/Settings/Notifications/CollectionView.js b/UI/Settings/Notifications/CollectionView.js index 2a6f51fae..2de13cc75 100644 --- a/UI/Settings/Notifications/CollectionView.js +++ b/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(); diff --git a/UI/Settings/Notifications/EditTemplate.html b/UI/Settings/Notifications/EditTemplate.html index 859d4825f..aba6fb573 100644 --- a/UI/Settings/Notifications/EditTemplate.html +++ b/UI/Settings/Notifications/EditTemplate.html @@ -57,7 +57,6 @@
      {{formBuilder}} - index
      diff --git a/UI/Settings/Notifications/EditView.js b/UI/Settings/Notifications/EditView.js index 41673c85b..44c497290 100644 --- a/UI/Settings/Notifications/EditView.js +++ b/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(); + }); } }, diff --git a/UI/Settings/Notifications/ItemTemplate.html b/UI/Settings/Notifications/ItemTemplate.html index 2b8eb04a5..085f960a4 100644 --- a/UI/Settings/Notifications/ItemTemplate.html +++ b/UI/Settings/Notifications/ItemTemplate.html @@ -1,9 +1,23 @@ - - - - - - - - - +
      +
      +

      {{name}}

      + + + + +
      + +
      + {{#if onGrab}} + On Grab + {{else}} + On Grab + {{/if}} + + {{#if onDownload}} + On Download + {{else}} + On Download + {{/if}} +
      +
      diff --git a/UI/Settings/Notifications/ItemView.js b/UI/Settings/Notifications/ItemView.js index 504e75a17..3bc0ac117 100644 --- a/UI/Settings/Notifications/ItemView.js +++ b/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); } diff --git a/UI/Settings/Notifications/Model.js b/UI/Settings/Notifications/Model.js index be52ad81c..b384b0c3d 100644 --- a/UI/Settings/Notifications/Model.js +++ b/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' }); +}); diff --git a/UI/Settings/Notifications/notifications.less b/UI/Settings/Notifications/notifications.less index 8eb103d77..2903562eb 100644 --- a/UI/Settings/Notifications/notifications.less +++ b/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; + } +} \ No newline at end of file