TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Improved notification animations

Browse Source 
Notifications now slide down and fade in, and then fade out and slide
up.
This commit is contained in:
Matthew Harrison-Jones 2013-08-29 11:06:16 +01:00
parent 02a8482447
commit e68b4df8c3
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

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

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

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