Handle sidebar animations with Velocity, fix delete button transitions

This commit is contained in:
Tautvidas Sipavičius
2016-01-06 12:29:32 +02:00
parent bbe2f69a7f
commit f8f7bc3d3d
4 changed files with 32 additions and 8 deletions

View File

@ -112,6 +112,9 @@ $layer-selector-width = 30px
max-width: 100%
opacity: 1
.mailpoet_delete_block_cancel
margin-left: 3px
.mailpoet_delete_block_confirm
color: $warning-text-color

View File

@ -26,15 +26,11 @@ $widget-icon-width = 30px
border-right: 0
&.closed .mailpoet_region_content
max-height: 0px
margin-top: 0
display: none
.mailpoet_region_content
max-height: 5000px
transition: max-height 400ms ease
padding: 0 20px
margin-top: 12px
overflow: hidden
&, .postbox
background-color: $sidebar-background-color

View File

@ -51,8 +51,33 @@ define([
},
events: {
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
this.$el.find('.mailpoet_sidebar_region').addClass('closed');
this.$el.find(event.target).parent().parent().removeClass('closed');
var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
$targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
if ($openRegion.get(0) === $targetRegion.get(0)) {
return;
}
$openRegion.find('.mailpoet_region_content').velocity(
'slideUp',
{
duration: 250,
easing: "easeOut",
complete: function() {
$openRegion.addClass('closed');
}.bind(this)
}
);
$targetRegion.find('.mailpoet_region_content').velocity(
'slideDown',
{
duration: 250,
easing: "easeIn",
complete: function() {
$targetRegion.removeClass('closed');
},
}
);
},
},
initialize: function(options) {

View File

@ -1,5 +1,5 @@
<div class="handlediv" title="Click to toggle"><br></div>
<h3><%= __('Layout') %></h3>
<div class="mailpoet_region_content">
<div class="mailpoet_region_content clearfix">
</div>
<div style="clear:both;"></div>