Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

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

Browse Source
This commit is contained in:
stoletniy
2017-09-11 16:38:22 +03:00
committed by pavel-mailpoet
parent d645f0cad4
commit 99b6a287f8
5 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/src/newsletter_editor/contentBlocks/base.styl
View File

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

26
assets/js/src/newsletter_editor/behaviors/HighlightContainerBehavior.js Normal file
View File

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

2
assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
View File

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

3
assets/js/src/newsletter_editor/blocks/container.js
View File

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

2
webpack.config.js
View File

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