Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Merge pull request #559 from matthojo/Notification-Animations

Browse source 
Improved notification animations
This commit is contained in:
Hannah Wolfe 2013-08-29 07:40:44 -07:00
commit a8790ee81f
2 changed files with 60 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
core/client/assets/sass/modules/global.scss
View file

@ -834,6 +834,9 @@ nav {
/* ========================================================================== /* ==========================================================================
Notifications Notifications
========================================================================== */ ========================================================================== */
.js-bb-notification {
@include transform(translateZ(0));
}
%notification, .notification { %notification, .notification {
@include box-sizing(border-box); @include box-sizing(border-box);
@ -845,6 +848,7 @@ nav {
background: $blue; background: $blue;
position:relative; position:relative;
box-shadow: $shadow; box-shadow: $shadow;
@include transform(translateZ(0));
@include icon($i-notification) { @include icon($i-notification) {
position: absolute; position: absolute;

67
core/client/views/base.js
View file

@ -174,44 +174,89 @@
}, this); }, this);
}, },
renderItem: function (item) { renderItem: function (item) {
var itemView = new Ghost.Views.Notification({ model: item }); var itemView = new Ghost.Views.Notification({ model: item }),
this.$el.html(itemView.render().el); height,
self = this;
this.$el.html(itemView.render().el).css({height: 0});
height = this.$('.js-notification').hide().outerHeight(true);
this.$el.animate({height: height}, 250, function () {
$(this).css({height: "auto"});
self.$('.js-notification').fadeIn(250);
});
}, },
addItem: function (item) { addItem: function (item) {
this.model.push(item); this.model.push(item);
this.renderItem(item); this.renderItem(item);
}, },
clearEverything: function () { clearEverything: function () {
this.$el.find('.js-notification.notification-passive').fadeOut(200, function () { $(this).remove(); }); var height = this.$('.js-notification').outerHeight(true),
self = this;
this.$el.css({height: height});
this.$el.find('.js-notification.notification-passive').fadeOut(250, function () {
$(this).remove();
self.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
});
});
}, },
removeItem: function (e) { removeItem: function (e) {
e.preventDefault(); e.preventDefault();
var self = e.currentTarget; var self = e.currentTarget,
bbSelf = this;
if (self.className.indexOf('notification-persistent') !== -1) { if (self.className.indexOf('notification-persistent') !== -1) {
$.ajax({ $.ajax({
type: "DELETE", type: "DELETE",
url: '/api/v0.1/notifications/' + $(self).find('.close').data('id') url: '/api/v0.1/notifications/' + $(self).find('.close').data('id')
}).done(function (result) { }).done(function (result) {
$(e.currentTarget).remove(); bbSelf.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
$(self).remove();
});
}); });
} else { } else {
$(e.currentTarget).remove(); this.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
$(self).remove();
});
} }
}, },
closePassive: function (e) { closePassive: function (e) {
$(e.currentTarget).parent().fadeOut(200, function () { $(this).remove(); }); var height = this.$('.js-notification').outerHeight(true),
self = this;
this.$el.css({height: height});
$(e.currentTarget).parent().fadeOut(250, function () {
$(this).remove();
self.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
});
});
}, },
closePersistent: function (e) { closePersistent: function (e) {
var self = e.currentTarget; var self = e.currentTarget,
bbSelf = this;
$.ajax({ $.ajax({
type: "DELETE", type: "DELETE",
url: '/api/v0.1/notifications/' + $(self).data('id') url: '/api/v0.1/notifications/' + $(self).data('id')
}).done(function (result) { }).done(function (result) {
if ($(self).parent().parent().hasClass('js-bb-notification')) { var height = bbSelf.$('.js-notification').outerHeight(true),
$(self).parent().parent().fadeOut(200, function () { $(self).remove(); }); $parent = $(self).parent();
bbSelf.$el.css({height: height});
if ($parent.parent().hasClass('js-bb-notification')) {
$parent.parent().fadeOut(200, function () {
$(this).remove();
bbSelf.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
});
});
} else { } else {
$(self).parent().fadeOut(200, function () { $(self).remove(); }); $parent.fadeOut(200, function () {
$(this).remove();
bbSelf.$el.slideUp(250, function () {
$(this).show().css({height: "auto"});
});
});
} }
}); });
} }