Add an animation to display tools

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

@@ -12,21 +12,42 @@ $master-column-tool-width = 24px
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -1,12 +1,12 @@
-animation-slide-open-downwards()
+animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
-  max-height: 2000px
+  max-height: $max-height
   opacity: 1
+  overflow-y: hidden
 
   &.mailpoet_closed
-    max-height: 0
+    max-height: 0px
     opacity: 0
-    overflow-y: hidden
 
 animation-background-color()
   transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */

assets/js/src/newsletter_editor/blocks/base.js

@@ -99,12 +99,12 @@ define([
     },
     showTools: function(_event) {
       if (!this.showingToolsDisabled) {
-        this.$('> .mailpoet_tools').show();
+        this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function(e) {
-      this.$('> .mailpoet_tools').hide();
+      this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('hideTools');
     },
     enableShowingTools: function() {

assets/js/src/newsletter_editor/blocks/container.js

@@ -186,13 +186,13 @@ define([
     },
     showTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).show();
+        this.$(this.ui.tools).addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).hide();
+        this.$(this.ui.tools).removeClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('hideTools');
       }
     },

assets/js/src/newsletter_editor/blocks/social.js

@@ -171,11 +171,11 @@ define([
       this.regionManager.destroy();
     },
     showTools: function(_event) {
-      this.$(this.ui.tools).show();
+      this.$(this.ui.tools).addClass('mailpoet_display_tools');
       _event.stopPropagation();
     },
     hideTools: function(_event) {
-      this.$(this.ui.tools).hide();
+      this.$(this.ui.tools).removeClass('mailpoet_display_tools');
       _event.stopPropagation();
     },
     showSettings: function(options) {

views/newsletter/templates/blocks/base/toolsGeneric.hbs

@@ -1,3 +1,4 @@
+<div class="mailpoet_tool_slider">
 {{#if tools.layerSelector}}<a href="javascript:;" class="mailpoet_tool mailpoet_newsletter_layer_selector mailpoet_ignore_drag" title="<%= __('Switch editing layer') %>">
     <%= source('newsletter/templates/svg/block-tools/settings-column.svg') %>
 </a>{{/if}}{{#if tools.settings}}<a href="javascript:;" class="mailpoet_tool mailpoet_edit_block mailpoet_ignore_drag" title="<%= __('Edit settings') %>">
@@ -5,3 +6,4 @@
 </a>{{/if}}{{#if tools.delete}}<div class="mailpoet_delete_block mailpoet_ignore_drag"><a href="javascript:;" class="mailpoet_tool mailpoet_delete_block_activate" title="<%= __('Delete') %>"><%= source('newsletter/templates/svg/block-tools/trash.svg') %></a><a href="javascript:;" class="mailpoet_delete_block_confirm" title="<%= __('Confirm deletion') %>"><%= __('Delete') %></a><a href="javascript:;" class="mailpoet_delete_block_cancel" title="<%= __('Cancel deletion') %>"><%= __('Cancel') %></a></div>{{/if}}{{#if tools.move}}<a href="javascript:;" class="mailpoet_tool mailpoet_move_block" title="<%= __('Drag to move') %>">
 <%= source('newsletter/templates/svg/block-tools/move.svg') %>
 </a>{{/if}}
+</div>