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

Fix image resizing when aligned right

Browse Source 
[MAILPOET-2184]
This commit is contained in:
Ján Mikláš
2019-08-21 14:59:43 +02:00
committed by M. Shull
parent 82123afc7c
commit 596eb56c5d
3 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/src/components/newsletterEditor/components/_resize.scss
View File

@@ -60,6 +60,12 @@ $resize-handle-z-index: 2;
width: 24px; width: 24px;
} }
.mailpoet_image_resize_handle_container_left {
left: 0;
right: auto;
transform: rotate(90deg);
}
.mailpoet_image_resize_handle { .mailpoet_image_resize_handle {
background: $editor-content-color; background: $editor-content-color;
border-radius: 6px 0 0; border-radius: 6px 0 0;
@@ -78,6 +84,10 @@ $resize-handle-z-index: 2;
.mailpoet_image_resize_handle_icon { .mailpoet_image_resize_handle_icon {
pointer-events: none; pointer-events: none;
} }
.mailpoet_image_resize_handle_container_left & {
cursor: nesw-resize;
}
} }
.mailpoet_image_resize_handle_icon { .mailpoet_image_resize_handle_icon {

9
assets/js/src/newsletter_editor/blocks/image.js
View File

@@ -46,9 +46,14 @@ Module.ImageBlockView = base.BlockView.extend({
elementSelector: '.mailpoet_image', elementSelector: '.mailpoet_image',
resizeHandleSelector: '.mailpoet_image_resize_handle', resizeHandleSelector: '.mailpoet_image_resize_handle',
onResize: function (event) { onResize: function (event) {
var alignment = this.view.model.get('styles.block.textAlign');
var corner = this.$('.mailpoet_image').offset(); var corner = this.$('.mailpoet_image').offset();
var width = event.pageX - corner.left; var currentWidth = this.$('.mailpoet_image').width();
this.view.model.set('width', width + 'px'); var newWidth = event.pageX - corner.left;
if (alignment === 'right') {
newWidth = currentWidth + corner.left - event.pageX;
}
this.view.model.set('width', newWidth + 'px');
}, },
}, },
ShowSettingsBehavior: { ShowSettingsBehavior: {

2
views/newsletter/templates/blocks/image/block.hbs
View File

@@ -4,7 +4,7 @@
<a href="{{ model.link }}" onClick="return false;"> <a href="{{ model.link }}" onClick="return false;">
<img src="{{#ifCond model.src '!=' ''}}{{ model.src }}{{ else }}{{ imageMissingSrc }}{{/ifCond}}" alt="{{ model.alt }}" onerror="if(this.src != '{{ imageMissingSrc }}') {this.src = '{{ imageMissingSrc }}';}" width="{{model.width}}" /> <img src="{{#ifCond model.src '!=' ''}}{{ model.src }}{{ else }}{{ imageMissingSrc }}{{/ifCond}}" alt="{{ model.alt }}" onerror="if(this.src != '{{ imageMissingSrc }}') {this.src = '{{ imageMissingSrc }}';}" width="{{model.width}}" />
</a> </a>
<div class="mailpoet_image_resize_handle_container"> <div class="mailpoet_image_resize_handle_container{{#ifCond model.styles.block.textAlign '==' 'right'}} mailpoet_image_resize_handle_container_left{{/ifCond}}">
<div class="mailpoet_image_resize_handle"> <div class="mailpoet_image_resize_handle">
<span class="mailpoet_image_resize_handle_icon"><%= source('newsletter/templates/svg/block-tools/resize.svg') %></span> <span class="mailpoet_image_resize_handle_icon"><%= source('newsletter/templates/svg/block-tools/resize.svg') %></span>
</div> </div>