Highlight a container block when hovering over its tools [MAILPOET-1088]

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -23,8 +23,10 @@ $block-text-line-height = $text-line-height
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
-  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
+    
+  &.mailpoet_highlight > .mailpoet_block_highlight
+    border: 1px dashed $block-hover-highlight-color !important
 
 .mailpoet_content
   position: relative

assets/js/src/newsletter_editor/behaviors/HighlightContainerBehavior.js

@@ -0,0 +1,26 @@
+/**
+ * Highlight Container Behavior
+ *
+ * Highlights a container block when hovering over its tools
+ */
+define([
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function(Marionette, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
+
+  BL.HighlightContainerBehavior = Marionette.Behavior.extend({
+    events: {
+      'mouseenter @ui.tools': 'enableHighlight',
+      'mouseleave @ui.tools': 'disableHighlight'
+    },
+    enableHighlight: function() {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function() {
+      if (!this.view._isBeingEdited) {
+        this.$el.removeClass('mailpoet_highlight');
+      }
+    }
+  });
+});

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -15,9 +15,11 @@ define([
       stopEditing: 'disableHighlight'
     },
     enableHighlight: function() {
+      this.view._isBeingEdited = true;
       this.$el.addClass('mailpoet_highlight');
     },
     disableHighlight: function() {
+      this.view._isBeingEdited = false;
       this.$el.removeClass('mailpoet_highlight');
     }
   });

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

@@ -138,7 +138,8 @@ define([
           // for root and column containers.
           return view.renderOptions.depth === 1;
         }
-      }
+      },
+      HighlightContainerBehavior: {}
     }),
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,

webpack.config.js

@@ -204,6 +204,7 @@ var adminConfig = {
       'newsletter_editor/behaviors/ColorPickerBehavior.js',
       'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
       'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightContainerBehavior.js',
       'newsletter_editor/behaviors/HighlightEditingBehavior.js',
       'newsletter_editor/behaviors/ResizableBehavior.js',
       'newsletter_editor/behaviors/SortableBehavior.js',
@@ -307,6 +308,7 @@ var testConfig = {
       'newsletter_editor/behaviors/ColorPickerBehavior.js',
       'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
       'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightContainerBehavior.js',
       'newsletter_editor/behaviors/HighlightEditingBehavior.js',
       'newsletter_editor/behaviors/ResizableBehavior.js',
       'newsletter_editor/behaviors/SortableBehavior.js',