[FIX] web_editor: BS4, restore crop dialog UI

This commit is contained in:
Kishan Gajjar
2018-08-02 09:55:20 +02:00
committed by qsm-odoo
parent ad12802228
commit e391ebff98
2 changed files with 11 additions and 14 deletions
@@ -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);
+11 -11
View File
@@ -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>