[FIX] web_editor: BS4, restore crop dialog UI
This commit is contained in:
@@ -1741,14 +1741,11 @@ var CropImageDialog = Dialog.extend({
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
_onCropOptionClick: function (ev) {
|
||||
ev.preventDefault();
|
||||
var $option = $(ev.currentTarget);
|
||||
var opt = $option.data('event');
|
||||
var value = $option.data('value');
|
||||
switch (opt) {
|
||||
case 'ratio':
|
||||
$option.siblings().removeClass('active');
|
||||
$option.addClass('active');
|
||||
this.$cropperImage.cropper('reset');
|
||||
this.imageData.aspectRatio = $option.data('label');
|
||||
this.$cropperImage.cropper('setAspectRatio', value);
|
||||
|
||||
@@ -311,28 +311,28 @@
|
||||
<img class="img img-fluid o_cropper_image" t-att-src="widget.imageData.originalSrc"/>
|
||||
</div>
|
||||
<div class="o_crop_options text-center mt16">
|
||||
<div class="btn-group" title="Aspect Ratio" data-toggle="buttons">
|
||||
<div class="btn-group btn-group-toggle" title="Aspect Ratio" data-toggle="buttons">
|
||||
<t t-foreach="widget.aspectRatioList" t-as="ratio">
|
||||
<t t-set="is_active" t-value="ratio[1] === widget.imageData.aspectRatio"/>
|
||||
<a href="#" t-attf-class="btn btn-secondary#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]">
|
||||
<t t-esc="ratio[0]"/>
|
||||
</a>
|
||||
<label t-attf-class="btn btn-secondary#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]">
|
||||
<input type="radio" /><t t-esc="ratio[0]"/>
|
||||
</label>
|
||||
</t>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" class="btn btn-secondary" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></a>
|
||||
<a href="#" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></a>
|
||||
<button type="button" class="btn btn-secondary" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></button>
|
||||
<button type="button" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></a>
|
||||
<a href="#" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></a>
|
||||
<button type="button" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></button>
|
||||
<button type="button" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></a>
|
||||
<a href="#" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></a>
|
||||
<button type="button" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></button>
|
||||
<button type="button" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</a>
|
||||
<button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</button>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user