Handle sidebar animations with Velocity, fix delete button transitions

assets/css/src/newsletter_editor/components/blockTools.styl

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

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -26,15 +26,11 @@ $widget-icon-width = 30px
     border-right: 0
 
     &.closed .mailpoet_region_content
-      max-height: 0px
+      display: none
-      margin-top: 0
 
   .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

assets/js/src/newsletter_editor/components/sidebar.js

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

views/newsletter/templates/components/sidebar/layout.hbs

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