Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #156 from ONLYOFFICE/feature/crop

Browse source 
Feature/crop
This commit is contained in:
Julia Radzhabova 2019-04-09 10:29:06 +03:00 committed by GitHub
parent 3adde58fde e9e63d0c87
commit 022ea639e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 253 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/common/main/lib/component/Button.js
View file

@ -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'));

35
apps/common/main/resources/less/buttons.less
View file

@ -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;

5
apps/documenteditor/main/app/template/ImageSettings.template
View file

@ -22,6 +22,11 @@
<button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="width:100px;"><%= scope.textFitMargins %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-crop" style="width: 100px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

70
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -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 || {}));
});

3
apps/documenteditor/main/locale/en.json
View file

@ -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",

5
apps/presentationeditor/main/app/template/ImageSettings.template
View file

@ -17,6 +17,11 @@
<button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-crop" style="width: 100px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

65
apps/presentationeditor/main/app/view/ImageSettings.js
View file

@ -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 || {}));
});

3
apps/presentationeditor/main/locale/en.json
View file

@ -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",

5
apps/spreadsheeteditor/main/app/template/ImageSettings.template
View file

@ -24,6 +24,11 @@
<button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-crop" style="width: 100px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

65
apps/spreadsheeteditor/main/app/view/ImageSettings.js
View file

@ -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 || {}));
});

3
apps/spreadsheeteditor/main/locale/en.json
View file

@ -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",