diff --git a/assets/css/src/components/newsletterEditor/components/_resize.scss b/assets/css/src/components/newsletterEditor/components/_resize.scss index 94ef1b2117..957f2ab61d 100644 --- a/assets/css/src/components/newsletterEditor/components/_resize.scss +++ b/assets/css/src/components/newsletterEditor/components/_resize.scss @@ -60,6 +60,12 @@ $resize-handle-z-index: 2; width: 24px; } +.mailpoet_image_resize_handle_container_left { + left: 0; + right: auto; + transform: rotate(90deg); +} + .mailpoet_image_resize_handle { background: $editor-content-color; border-radius: 6px 0 0; @@ -78,6 +84,10 @@ $resize-handle-z-index: 2; .mailpoet_image_resize_handle_icon { pointer-events: none; } + + .mailpoet_image_resize_handle_container_left & { + cursor: nesw-resize; + } } .mailpoet_image_resize_handle_icon { diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js index fdc0f4e3da..cf44715d6e 100644 --- a/assets/js/src/newsletter_editor/blocks/image.js +++ b/assets/js/src/newsletter_editor/blocks/image.js @@ -46,9 +46,14 @@ Module.ImageBlockView = base.BlockView.extend({ elementSelector: '.mailpoet_image', resizeHandleSelector: '.mailpoet_image_resize_handle', onResize: function (event) { + var alignment = this.view.model.get('styles.block.textAlign'); var corner = this.$('.mailpoet_image').offset(); - var width = event.pageX - corner.left; - this.view.model.set('width', width + 'px'); + var currentWidth = this.$('.mailpoet_image').width(); + var newWidth = event.pageX - corner.left; + if (alignment === 'right') { + newWidth = currentWidth + corner.left - event.pageX; + } + this.view.model.set('width', newWidth + 'px'); }, }, ShowSettingsBehavior: { diff --git a/views/newsletter/templates/blocks/image/block.hbs b/views/newsletter/templates/blocks/image/block.hbs index 079ea6b31b..574e38d981 100644 --- a/views/newsletter/templates/blocks/image/block.hbs +++ b/views/newsletter/templates/blocks/image/block.hbs @@ -4,7 +4,7 @@ {{ model.alt }} -
+
<%= source('newsletter/templates/svg/block-tools/resize.svg') %>