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

[DE] ImageSettings: change wrapping style to ComboDataView.

Browse source
This commit is contained in:
Julia Radzhabova 2017-04-26 16:28:36 +03:00
parent 142666012d
commit ba6ef75fd8
5 changed files with 74 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -123,6 +123,7 @@ define([
restoreHeight: this.menuMaxHeight,
style: 'max-height: '+this.menuMaxHeight+'px;',
enableKeyEvents: this.options.enableKeyEvents,
store: this.store,
itemTemplate : _.template([
'<div class="style" id="<%= id %>">',
'<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',

19
apps/common/main/resources/less/combo-dataview.less
View file

@ -271,4 +271,21 @@
}
}
}
}
}
.combo-wrap {
.combo-textart(62px, 4px);
.item {
margin-left: 4px;
.box-shadow(0 0 0 1px @gray);
}
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(0 0 0 1px @gray);
}
}
}
};

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

@ -23,13 +23,13 @@
</td>
</tr>
<tr>
<td colspan=2>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textWrap %></label>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-wrap" style=""></div>
<div id="image-combo-wrap" style="width: 100%; height: 64px;"></div>
</td>
</tr>
<tr>

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

@ -78,7 +78,6 @@ define([
this.lockedControls = [];
this._locked = false;
this._noApply = false;
this._originalProps = null;
this.render();
@ -112,36 +111,40 @@ define([
createDelayedControls: function() {
var me = this,
viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind }
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
];
this.btnWrapType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-wrap wrap-inline',
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="id-image-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
]
})
this.cmbWrapType = new Common.UI.ComboDataView({
itemWidth: 50,
itemHeight: 50,
menuMaxHeight: 300,
enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData),
cls: 'combo-wrap'
});
this.btnWrapType.on('render:after', function(btn) {
me.mnuWrapPicker = new Common.UI.DataView({
el: $('#id-image-menu-wrap'),
parentMenu: btn.menu,
store: new Common.UI.DataViewStore(viewData),
allowScrollbar: false,
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>')
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px 0;"/>',
'</div>'
].join(''));
this.cmbWrapType.render($('#image-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,
'max-width': 178
});
this.btnWrapType.render($('#image-button-wrap'));
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
this.lockedControls.push(this.btnWrapType);
this.cmbWrapType.on('click', _.bind(this.onSelectWrap, this));
this.cmbWrapType.openButton.menu.on('show:after', function () {
me.cmbWrapType.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbWrapType);
this.btnOriginalSize = new Common.UI.Button({
el: $('#image-button-original-size')
@ -196,21 +199,19 @@ define([
var value = props.get_WrappingStyle();
if (this._state.WrappingStyle!==value) {
this._noApply = true;
var record = this.mnuWrapPicker.store.findWhere({data: value});
this.mnuWrapPicker.selectRecord(record, true);
if (record)
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconcls'));
else
this.btnWrapType.setIconCls('');
this._noApply = false;
this.cmbWrapType.suspendEvents();
var rec = this.cmbWrapType.menuPicker.store.findWhere({
data: value
});
this.cmbWrapType.menuPicker.selectRecord(rec);
this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=value;
}
value = props.get_CanBeFlow() && !this._locked;
var fromgroup = props.get_FromGroup() || this._locked;
if (this._state.CanBeFlow!==value || this._state.FromGroup!==fromgroup) {
this.btnWrapType.setDisabled(!value || fromgroup);
this.cmbWrapType.setDisabled(!value || fromgroup);
this._state.CanBeFlow=value;
this._state.FromGroup=fromgroup;
}
@ -250,41 +251,24 @@ define([
},
_ImgWrapStyleChanged: function(style) {
if (!this.mnuWrapPicker) return;
if (!this.cmbWrapType) return;
if (this._state.WrappingStyle!==style) {
this._noApply = true;
var record = this.mnuWrapPicker.store.findWhere({data: style});
this.mnuWrapPicker.selectRecord(record, true);
if (record)
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconcls'));
this.cmbWrapType.suspendEvents();
var rec = this.cmbWrapType.menuPicker.store.findWhere({
data: style
});
this.cmbWrapType.menuPicker.selectRecord(rec);
this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=style;
this._noApply = false;
}
},
onSelectWrap: function(btn, picker, itemView, record) {
if (this._noApply) return;
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
}
} else {
rawData = record;
}
this.btnWrapType.setIconCls('item-wrap ' + rawData.iconcls);
onSelectWrap: function(combo, record){
if (this.api) {
var props = new Asc.asc_CImgProperty();
props.put_WrappingStyle((rawData.data));
if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && rawData.data!==Asc.c_oAscWrapStyle2.Inline ) {
var props = new Asc.asc_CImgProperty(),
data = record.get('data');
props.put_WrappingStyle(data);
if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && data!==Asc.c_oAscWrapStyle2.Inline ) {
props.put_PositionH(new Asc.CImagePositionH());
props.get_PositionH().put_UseAlign(false);
props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column);

4
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -132,6 +132,10 @@
.button-otherstates-icon(icon-right-panel, @huge-icon-size);
.combo-wrap-item {
.background-ximage('@{app-image-path}/right-panels/right_panel_wrap_icons.png', '@{app-image-path}/right-panels/right_panel_wrap_icons@2x.png', 350px);
}
.item-wrap {
.background-ximage('@{app-image-path}/right-panels/right_panel_wrap_icons.png', '@{app-image-path}/right-panels/right_panel_wrap_icons@2x.png', 350px);
width:50px;