Carded notifications

This commit is contained in:
Mark McDowall 2013-06-25 17:34:33 -07:00
parent 3d2a47627f
commit 195f9d9d27
12 changed files with 147 additions and 44 deletions

View File

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

55
UI/Content/icons.less Normal file
View File

@ -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;
}

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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();

View File

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

View File

@ -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();
});
}
},

View File

@ -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>

View File

@ -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);
}

View File

@ -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'
});
});

View File

@ -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;
}
}