Handle sidebar animations with Velocity, fix delete button transitions
This commit is contained in:
@ -112,6 +112,9 @@ $layer-selector-width = 30px
|
|||||||
max-width: 100%
|
max-width: 100%
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
|
.mailpoet_delete_block_cancel
|
||||||
|
margin-left: 3px
|
||||||
|
|
||||||
.mailpoet_delete_block_confirm
|
.mailpoet_delete_block_confirm
|
||||||
color: $warning-text-color
|
color: $warning-text-color
|
||||||
|
|
||||||
|
@ -26,15 +26,11 @@ $widget-icon-width = 30px
|
|||||||
border-right: 0
|
border-right: 0
|
||||||
|
|
||||||
&.closed .mailpoet_region_content
|
&.closed .mailpoet_region_content
|
||||||
max-height: 0px
|
display: none
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
.mailpoet_region_content
|
.mailpoet_region_content
|
||||||
max-height: 5000px
|
|
||||||
transition: max-height 400ms ease
|
|
||||||
padding: 0 20px
|
padding: 0 20px
|
||||||
margin-top: 12px
|
margin-top: 12px
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
&, .postbox
|
&, .postbox
|
||||||
background-color: $sidebar-background-color
|
background-color: $sidebar-background-color
|
||||||
|
@ -51,8 +51,33 @@ define([
|
|||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
|
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
|
||||||
this.$el.find('.mailpoet_sidebar_region').addClass('closed');
|
var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
|
||||||
this.$el.find(event.target).parent().parent().removeClass('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) {
|
initialize: function(options) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<div class="handlediv" title="Click to toggle"><br></div>
|
<div class="handlediv" title="Click to toggle"><br></div>
|
||||||
<h3><%= __('Layout') %></h3>
|
<h3><%= __('Layout') %></h3>
|
||||||
<div class="mailpoet_region_content">
|
<div class="mailpoet_region_content clearfix">
|
||||||
</div>
|
</div>
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
|
Reference in New Issue
Block a user