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..e8946327f 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,47 @@ 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: 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.linkAdvanced = $('#image-advanced-link');
this.lblReplace = $('#image-lbl-replace');
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
},
-
+
+ _changeCropState: function(state) {
+ this.btnCrop.toggle(state, true);
+ this.btnCrop.menu.items[0].setChecked(state, true);
+ },
+
createDelayedElements: function() {
this.createDelayedControls();
this.updateMetricUnit();
@@ -445,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;
@@ -499,6 +557,8 @@ define([
});
this.linkAdvanced.toggleClass('disabled', disable);
}
+
+ this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop());
},
textSize: 'Size',
@@ -526,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",
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",
|