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

Show different highlight borders for column and content blocks

Browse Source 
[MAILPOET-1708]
This commit is contained in:
Ján Mikláš
2019-02-09 10:37:08 +01:00
committed by M. Shull
parent 8510e837ab
commit 11cf31a561
4 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/src/newsletter_editor/components/resize.styl
View File

@@ -1,4 +1,4 @@
$resize-active-color = $primary-active-color $resize-active-color = $editor-content-color
$resize-handle-background-color = $primary-active-color $resize-handle-background-color = $primary-active-color
$resize-handle-font-color = $white-color $resize-handle-font-color = $white-color
@@ -44,7 +44,7 @@ $resize-handle-z-index = 2
fill: $resize-handle-font-color fill: $resize-handle-font-color
.mailpoet_block.mailpoet_resize_active > .mailpoet_block_highlight .mailpoet_block.mailpoet_resize_active > .mailpoet_block_highlight
border: 1px dashed $resize-active-color border: 2px solid $resize-active-color
.mailpoet_resize_handle .mailpoet_resize_handle
display: inline-block display: inline-block
@@ -82,7 +82,7 @@ $resize-handle-z-index = 2
fill: $resize-handle-font-color fill: $resize-handle-font-color
.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight .mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight
border: 1px dashed $resize-active-color border: 2px solid $resize-active-color
.mailpoet_image_resize_handle .mailpoet_image_resize_handle
display: inline-block display: inline-block

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

@@ -1,4 +1,3 @@
$block-hover-highlight-color = $primary-active-color
$block-text-line-height = $text-line-height $block-text-line-height = $text-line-height
.mailpoet_block .mailpoet_block
@@ -20,14 +19,27 @@ $block-text-line-height = $text-line-height
bottom: 0 bottom: 0
left: 0 left: 0
pointer-events: none pointer-events: none
border: 1px solid $transparent-color border: 2px solid $transparent-color
transition: 0.3s; transition: 0.3s;
z-index: 1;
&:hover > .mailpoet_block_highlight &:hover > .mailpoet_block_highlight
border: 1px dashed $block-hover-highlight-color border: 2px solid $editor-content-color
&.mailpoet_highlight > .mailpoet_block_highlight &.mailpoet_highlight > .mailpoet_block_highlight
border: 1px dashed $block-hover-highlight-color !important border: 2px solid $editor-content-color !important
& > .mailpoet_container_horizontal ~ .mailpoet_block_highlight
top: -2px
right: -2px
bottom: -2px
left: -2px
&:hover > .mailpoet_container_horizontal ~ .mailpoet_block_highlight
border: 2px solid $editor-column-color
&.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight
border: 2px solid $editor-column-color !important
.mailpoet_content .mailpoet_content
position: relative position: relative

3
assets/css/src/newsletter_editor/variables.styl
View File

@@ -22,6 +22,9 @@ $warning-alternate-text-color = #f4c6c8
$error-text-color = #d54e21 $error-text-color = #d54e21
$editor-column-color = #0078A2
$editor-content-color = #7FBBD0
// Dimensions // Dimensions
$newsletter-width = 660px $newsletter-width = 660px

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

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