From 08dc88dc9885a06a11c325f0f01456c7d3f03eeb Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 5 Apr 2019 17:36:15 +0300 Subject: [PATCH 1/4] [DE] Add crop for images --- apps/common/main/lib/component/Button.js | 1 + apps/common/main/resources/less/buttons.less | 35 ++++++++++- .../main/app/template/ImageSettings.template | 5 ++ .../main/app/view/ImageSettings.js | 59 ++++++++++++++++++- 4 files changed, 97 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 829ec2a76..1d0f3e956 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -491,6 +491,7 @@ define([ if (isSplit) { $('[data-toggle^=dropdown]', el).on('mousedown', _.bind(menuHandler, this)); $('button', el).on('mousedown', _.bind(onMouseDown, this)); + (me.options.width>0) && $('button:first', el).css('width', me.options.width - $('[data-toggle^=dropdown]', el).outerWidth()); } el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow')); diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index f38daee66..ca71178c7 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -408,7 +408,7 @@ &.open { box-shadow: inset 0 0 0 1px @color-gray; - button:not(.active) { + button:not(.active):not(.btn-text-split-default) { background-color: transparent; } } @@ -570,6 +570,39 @@ } } +.btn-text-split-default { + width: 75px; + height: 22px; + background: @input-bg; + border: 1px solid @input-border; + .border-radius(@border-radius-small); + + &.dropdown-toggle { + width: 13px; + } + + &:not(.dropdown-toggle) { + border-right: none; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @secondary !important; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @primary !important; + border-color: @primary; + color: white; + } + + &[disabled], + &.disabled { + opacity: 0.65; + } +} + .btn-icon-default { width: 45px; height: 22px; diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template index 31d181a60..8abc9eaf0 100644 --- a/apps/documenteditor/main/app/template/ImageSettings.template +++ b/apps/documenteditor/main/app/template/ImageSettings.template @@ -22,6 +22,11 @@ + + +
+ +
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js index ef913f8ea..d81a40e52 100644 --- a/apps/documenteditor/main/app/view/ImageSettings.js +++ b/apps/documenteditor/main/app/view/ImageSettings.js @@ -95,8 +95,10 @@ define([ setApi: function(api) { this.api = api; - if (this.api) + if (this.api) { this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this)); + this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this)); + } return this; }, @@ -226,11 +228,64 @@ define([ this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this)); this.lockedControls.push(this.btnFlipH); + this.btnCrop = new Common.UI.Button({ + cls: 'btn-text-split-default', + caption: 'Crop', + split: true, + enableToggle: true, + allowDepress: true, + width: 100, + menu : new Common.UI.Menu({ + style : 'min-width: 100px;', + items: [ + { + caption: 'Crop', + checkable: true, + allowDepress: true, + value: 0 + }, + { + caption: 'Fill', + value: 1 + }, + { + caption: 'Fit', + value: 2 + }] + }) + }); + this.btnCrop.render( $('#image-button-crop')) ; + this.btnCrop.on('click', _.bind(this.onCrop, this)); + this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this)); + this.lockedControls.push(this.btnCrop); + this.linkAdvanced = $('#image-advanced-link'); this.lblReplace = $('#image-lbl-replace'); $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this)); }, - + + onCrop: function(btn, e) { + btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + this.fireEvent('editcomplete', this); + }, + + onCropMenu: function(menu, item) { + if (item.value == 1) { + this.api.asc_cropFill(); + } else if (item.value == 2) { + this.api.asc_cropFit(); + } else { + item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + + this.fireEvent('editcomplete', this); + }, + + _changeCropState: function(state) { + this.btnCrop.toggle(state, true); + this.btnCrop.menu.items[0].setChecked(state, true); + }, + createDelayedElements: function() { this.createDelayedControls(); this.updateMetricUnit(); From 1059e35da2570c27eb5325ec50e40aba001c248c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 8 Apr 2019 11:04:34 +0300 Subject: [PATCH 2/4] [DE] Disable crop button when can't crop image --- .../main/app/view/ImageSettings.js | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js index d81a40e52..07bd5652a 100644 --- a/apps/documenteditor/main/app/view/ImageSettings.js +++ b/apps/documenteditor/main/app/view/ImageSettings.js @@ -264,23 +264,6 @@ define([ $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this)); }, - onCrop: function(btn, e) { - btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); - this.fireEvent('editcomplete', this); - }, - - onCropMenu: function(menu, item) { - if (item.value == 1) { - this.api.asc_cropFill(); - } else if (item.value == 2) { - this.api.asc_cropFit(); - } else { - item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); - } - - this.fireEvent('editcomplete', this); - }, - _changeCropState: function(state) { this.btnCrop.toggle(state, true); this.btnCrop.menu.items[0].setChecked(state, true); @@ -500,6 +483,26 @@ define([ this.fireEvent('editcomplete', this); }, + onCrop: function(btn, e) { + if (this.api) { + btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + this.fireEvent('editcomplete', this); + }, + + onCropMenu: function(menu, item) { + if (this.api) { + if (item.value == 1) { + this.api.asc_cropFill(); + } else if (item.value == 2) { + this.api.asc_cropFit(); + } else { + item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + } + this.fireEvent('editcomplete', this); + }, + openAdvancedSettings: function(e) { if (this.linkAdvanced.hasClass('disabled')) return; @@ -554,6 +557,8 @@ define([ }); this.linkAdvanced.toggleClass('disabled', disable); } + + this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop()); }, textSize: 'Size', From 4aa5927bec3970f03bab5de592319aff191767df Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 9 Apr 2019 10:21:03 +0300 Subject: [PATCH 3/4] [DE] Add translation for crop --- apps/documenteditor/main/app/view/ImageSettings.js | 14 ++++++++------ apps/documenteditor/main/locale/en.json | 3 +++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js index 07bd5652a..e8946327f 100644 --- a/apps/documenteditor/main/app/view/ImageSettings.js +++ b/apps/documenteditor/main/app/view/ImageSettings.js @@ -230,7 +230,7 @@ define([ this.btnCrop = new Common.UI.Button({ cls: 'btn-text-split-default', - caption: 'Crop', + caption: this.textCrop, split: true, enableToggle: true, allowDepress: true, @@ -239,17 +239,17 @@ define([ style : 'min-width: 100px;', items: [ { - caption: 'Crop', + caption: this.textCrop, checkable: true, allowDepress: true, value: 0 }, { - caption: 'Fill', + caption: this.textCropFill, value: 1 }, { - caption: 'Fit', + caption: this.textCropFit, value: 2 }] }) @@ -586,7 +586,9 @@ define([ textHint270: 'Rotate 90° Counterclockwise', textHint90: 'Rotate 90° Clockwise', textHintFlipV: 'Flip Vertically', - textHintFlipH: 'Flip Horizontally' - + textHintFlipH: 'Flip Horizontally', + textCrop: 'Crop', + textCropFill: 'Fill', + textCropFit: 'Fit' }, DE.Views.ImageSettings || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 0b0949f0e..776d39495 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1462,6 +1462,9 @@ "DE.Views.ImageSettings.txtThrough": "Through", "DE.Views.ImageSettings.txtTight": "Tight", "DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom", + "DE.Views.ImageSettings.textCrop": "Crop", + "DE.Views.ImageSettings.textCropFill": "Fill", + "DE.Views.ImageSettings.textCropFit": "Fit", "DE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel", "DE.Views.ImageSettingsAdvanced.okButtonText": "OK", "DE.Views.ImageSettingsAdvanced.strMargins": "Text Padding", From e9e63d0c87cca58c7b4515c7502ff4ce56204f45 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 9 Apr 2019 10:22:01 +0300 Subject: [PATCH 4/4] [PE][SSE] Add crop for images --- .../main/app/template/ImageSettings.template | 5 ++ .../main/app/view/ImageSettings.js | 65 ++++++++++++++++++- apps/presentationeditor/main/locale/en.json | 3 + .../main/app/template/ImageSettings.template | 5 ++ .../main/app/view/ImageSettings.js | 65 ++++++++++++++++++- apps/spreadsheeteditor/main/locale/en.json | 3 + 6 files changed, 144 insertions(+), 2 deletions(-) diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template index d1c9ef2fa..558f0b94b 100644 --- a/apps/presentationeditor/main/app/template/ImageSettings.template +++ b/apps/presentationeditor/main/app/template/ImageSettings.template @@ -17,6 +17,11 @@ + + +
+ +
diff --git a/apps/presentationeditor/main/app/view/ImageSettings.js b/apps/presentationeditor/main/app/view/ImageSettings.js index 274cac1ab..f6c3cc17b 100644 --- a/apps/presentationeditor/main/app/view/ImageSettings.js +++ b/apps/presentationeditor/main/app/view/ImageSettings.js @@ -93,6 +93,9 @@ define([ setApi: function(api) { this.api = api; + if (this.api) { + this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this)); + } return this; }, @@ -139,6 +142,37 @@ define([ this.fireEvent('editcomplete', this); }, this)); + this.btnCrop = new Common.UI.Button({ + cls: 'btn-text-split-default', + caption: this.textCrop, + split: true, + enableToggle: true, + allowDepress: true, + width: 100, + menu : new Common.UI.Menu({ + style : 'min-width: 100px;', + items: [ + { + caption: this.textCrop, + checkable: true, + allowDepress: true, + value: 0 + }, + { + caption: this.textCropFill, + value: 1 + }, + { + caption: this.textCropFit, + value: 2 + }] + }) + }); + this.btnCrop.render( $('#image-button-crop')) ; + this.btnCrop.on('click', _.bind(this.onCrop, this)); + this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this)); + this.lockedControls.push(this.btnCrop); + this.btnRotate270 = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'rotate-270', @@ -312,6 +346,31 @@ define([ } }, + _changeCropState: function(state) { + this.btnCrop.toggle(state, true); + this.btnCrop.menu.items[0].setChecked(state, true); + }, + + onCrop: function(btn, e) { + if (this.api) { + btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + this.fireEvent('editcomplete', this); + }, + + onCropMenu: function(menu, item) { + if (this.api) { + if (item.value == 1) { + this.api.asc_cropFill(); + } else if (item.value == 2) { + this.api.asc_cropFit(); + } else { + item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + } + this.fireEvent('editcomplete', this); + }, + onBtnRotateClick: function(btn) { var properties = new Asc.asc_CImgProperty(); properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180); @@ -343,6 +402,7 @@ define([ }); this.linkAdvanced.toggleClass('disabled', disable); } + this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop()); }, textSize: 'Size', @@ -361,7 +421,10 @@ define([ textHint270: 'Rotate 90° Counterclockwise', textHint90: 'Rotate 90° Clockwise', textHintFlipV: 'Flip Vertically', - textHintFlipH: 'Flip Horizontally' + textHintFlipH: 'Flip Horizontally', + textCrop: 'Crop', + textCropFill: 'Fill', + textCropFit: 'Fit' }, PE.Views.ImageSettings || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index ab110e5d5..0892bb1f1 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -1240,6 +1240,9 @@ "PE.Views.ImageSettings.textRotation": "Rotation", "PE.Views.ImageSettings.textSize": "Size", "PE.Views.ImageSettings.textWidth": "Width", + "PE.Views.ImageSettings.textCrop": "Crop", + "PE.Views.ImageSettings.textCropFill": "Fill", + "PE.Views.ImageSettings.textCropFit": "Fit", "PE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel", "PE.Views.ImageSettingsAdvanced.okButtonText": "OK", "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text", diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template index bef0c6502..8e90e9ace 100644 --- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template @@ -24,6 +24,11 @@ + + +
+ +
diff --git a/apps/spreadsheeteditor/main/app/view/ImageSettings.js b/apps/spreadsheeteditor/main/app/view/ImageSettings.js index 6109babce..46e1c006b 100644 --- a/apps/spreadsheeteditor/main/app/view/ImageSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ImageSettings.js @@ -97,6 +97,9 @@ define([ setApi: function(api) { if ( api == undefined ) return; this.api = api; + if (this.api) { + this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this)); + } return this; }, @@ -195,6 +198,37 @@ define([ this.lblReplace = $('#image-lbl-replace'); + this.btnCrop = new Common.UI.Button({ + cls: 'btn-text-split-default', + caption: this.textCrop, + split: true, + enableToggle: true, + allowDepress: true, + width: 100, + menu : new Common.UI.Menu({ + style : 'min-width: 100px;', + items: [ + { + caption: this.textCrop, + checkable: true, + allowDepress: true, + value: 0 + }, + { + caption: this.textCropFill, + value: 1 + }, + { + caption: this.textCropFit, + value: 2 + }] + }) + }); + this.btnCrop.render( $('#image-button-crop')) ; + this.btnCrop.on('click', _.bind(this.onCrop, this)); + this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this)); + this.lockedControls.push(this.btnCrop); + this.btnRotate270 = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'rotate-270', @@ -410,6 +444,31 @@ define([ })).show(); }, + _changeCropState: function(state) { + this.btnCrop.toggle(state, true); + this.btnCrop.menu.items[0].setChecked(state, true); + }, + + onCrop: function(btn, e) { + if (this.api) { + btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + this.fireEvent('editcomplete', this); + }, + + onCropMenu: function(menu, item) { + if (this.api) { + if (item.value == 1) { + this.api.asc_cropFill(); + } else if (item.value == 2) { + this.api.asc_cropFit(); + } else { + item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop(); + } + } + this.fireEvent('editcomplete', this); + }, + onBtnRotateClick: function(btn) { var properties = new Asc.asc_CImgProperty(); properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180); @@ -441,6 +500,7 @@ define([ }); this.linkAdvanced.toggleClass('disabled', disable); } + this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop()); }, textKeepRatio: 'Constant Proportions', @@ -460,6 +520,9 @@ define([ textHint270: 'Rotate 90° Counterclockwise', textHint90: 'Rotate 90° Clockwise', textHintFlipV: 'Flip Vertically', - textHintFlipH: 'Flip Horizontally' + textHintFlipH: 'Flip Horizontally', + textCrop: 'Crop', + textCropFill: 'Fill', + textCropFit: 'Fit' }, SSE.Views.ImageSettings || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 3d2407280..529def99f 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1605,6 +1605,9 @@ "SSE.Views.ImageSettings.textRotation": "Rotation", "SSE.Views.ImageSettings.textSize": "Size", "SSE.Views.ImageSettings.textWidth": "Width", + "SSE.Views.ImageSettings.textCrop": "Crop", + "SSE.Views.ImageSettings.textCropFill": "Fill", + "SSE.Views.ImageSettings.textCropFit": "Fit", "SSE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel", "SSE.Views.ImageSettingsAdvanced.okButtonText": "Ok", "SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",