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

[DE] Chart/Shape Settings: change wrapping style to ComboDataView.

Browse source
This commit is contained in:
Julia Radzhabova 2017-04-27 16:26:12 +03:00
parent 8f9ea6907e
commit 720e8e5afa
7 changed files with 106 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -272,20 +272,3 @@
} }
} }
} }
.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/ChartSettings.template
View file

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

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

@ -34,7 +34,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div id="image-combo-wrap" style="width: 100%; height: 64px;"></div> <div id="image-combo-wrap" style="width: 100%;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

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

@ -122,13 +122,13 @@
</td> </td>
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">
<td> <td class="padding-small">
<label class="header"><%= scope.textWrap %></label> <label class="header"><%= scope.textWrap %></label>
</td> </td>
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">
<td> <td>
<div id="shape-button-wrap" style=""></div> <div id="shape-combo-wrap" style="width: 100%;"></div>
</td> </td>
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">

110
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -117,12 +117,12 @@ define([
this._noApply = true; this._noApply = true;
var value = props.get_WrappingStyle(); var value = props.get_WrappingStyle();
if (this._state.WrappingStyle!==value) { if (this._state.WrappingStyle!==value) {
var record = this.mnuWrapPicker.store.findWhere({data: value}); this.cmbWrapType.suspendEvents();
this.mnuWrapPicker.selectRecord(record, true); var rec = this.cmbWrapType.menuPicker.store.findWhere({
if (record) data: value
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconCls')); });
else this.cmbWrapType.menuPicker.selectRecord(rec);
this.btnWrapType.setIconCls(''); this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=value; this._state.WrappingStyle=value;
} }
@ -180,7 +180,7 @@ define([
value = props.get_CanBeFlow() && !this._locked; value = props.get_CanBeFlow() && !this._locked;
var fromgroup = props.get_FromGroup() || this._locked; var fromgroup = props.get_FromGroup() || this._locked;
if (this._state.CanBeFlow!==value || this._state.FromGroup!==fromgroup) { 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.CanBeFlow=value;
this._state.FromGroup=fromgroup; this._state.FromGroup=fromgroup;
} }
@ -210,35 +210,40 @@ define([
createDelayedControls: function() { createDelayedControls: function() {
var me = this, var me = this,
viewData = [ viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconCls:'wrap-inline', tip: this.txtInline, selected: true }, { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconCls:'wrap-square', tip: this.txtSquare }, { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconCls:'wrap-tight', tip: this.txtTight }, { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconCls:'wrap-through', tip: this.txtThrough }, { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconCls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconCls:'wrap-inFront', tip: this.txtInFront }, { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconCls:'wrap-behind', tip: this.txtBehind } { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
]; ];
this.btnWrapType = new Common.UI.Button({ this.cmbWrapType = new Common.UI.ComboDataView({
cls : 'btn-large-dataview', itemWidth: 50,
iconCls : 'item-wrap wrap-inline', itemHeight: 50,
menu : new Common.UI.Menu({ menuMaxHeight: 300,
items: [ enableKeyEvents: true,
{ template: _.template('<div id="id-chart-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
]
})
});
this.btnWrapType.on('render:after', function(btn) {
me.mnuWrapPicker = new Common.UI.DataView({
el: $('#id-chart-menu-wrap'),
parentMenu: btn.menu,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>') cls: 'combo-chart-style'
}); });
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($('#chart-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,
'max-width': 178
}); });
this.btnWrapType.render($('#chart-button-wrap')); this.cmbWrapType.on('click', _.bind(this.onSelectWrap, this));
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); this.cmbWrapType.openButton.menu.on('show:after', function () {
this.lockedControls.push(this.btnWrapType); me.cmbWrapType.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbWrapType);
this.btnChartType = new Common.UI.Button({ this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview', cls : 'btn-large-dataview',
@ -315,42 +320,24 @@ define([
}, },
_ChartWrapStyleChanged: function(style) { _ChartWrapStyleChanged: function(style) {
if (!this.mnuWrapPicker) return; if (!this.cmbWrapType) return;
if (this._state.WrappingStyle!==style) { if (this._state.WrappingStyle!==style) {
this._noApply = true; this.cmbWrapType.suspendEvents();
var record = this.mnuWrapPicker.store.findWhere({data: style}); var rec = this.cmbWrapType.menuPicker.store.findWhere({
this.mnuWrapPicker.selectRecord(record, true); data: style
if (record) });
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconCls')); this.cmbWrapType.menuPicker.selectRecord(rec);
this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=style; this._state.WrappingStyle=style;
this._noApply = false;
} }
}, },
onSelectWrap: function(btn, picker, itemView, record) { onSelectWrap: function(combo, 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);
if (this.api) { if (this.api) {
var props = new Asc.asc_CImgProperty(); var props = new Asc.asc_CImgProperty(),
props.put_WrappingStyle((rawData.data)); data = record.get('data');
props.put_WrappingStyle(data);
if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && rawData.data!==Asc.c_oAscWrapStyle2.Inline ) { if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && data!==Asc.c_oAscWrapStyle2.Inline ) {
props.put_PositionH(new Asc.CImagePositionH()); props.put_PositionH(new Asc.CImagePositionH());
props.get_PositionH().put_UseAlign(false); props.get_PositionH().put_UseAlign(false);
props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column); props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column);
@ -366,7 +353,6 @@ define([
this.api.ImgApply(props); this.api.ImgApply(props);
} }
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },

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

@ -126,7 +126,7 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-wrap' cls: 'combo-chart-style'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

111
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -640,42 +640,24 @@ define([
}, },
_ImgWrapStyleChanged: function(style) { _ImgWrapStyleChanged: function(style) {
if (!this.mnuWrapPicker) return; if (!this.cmbWrapType) return;
if (this._state.WrappingStyle!==style) { if (this._state.WrappingStyle!==style) {
this._noApply = true; this.cmbWrapType.suspendEvents();
var record = this.mnuWrapPicker.store.findWhere({data: style}); var rec = this.cmbWrapType.menuPicker.store.findWhere({
this.mnuWrapPicker.selectRecord(record, true); data: style
if (record) });
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconcls')); this.cmbWrapType.menuPicker.selectRecord(rec);
this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=style; this._state.WrappingStyle=style;
this._noApply = false;
} }
}, },
onSelectWrap: function(btn, picker, itemView, record) { onSelectWrap: function(combo, 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);
if (this.api) { if (this.api) {
var props = new Asc.asc_CImgProperty(); var props = new Asc.asc_CImgProperty(),
props.put_WrappingStyle((rawData.data)); data = record.get('data');
props.put_WrappingStyle(data);
if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && rawData.data!==Asc.c_oAscWrapStyle2.Inline ) { if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && data!==Asc.c_oAscWrapStyle2.Inline ) {
props.put_PositionH(new Asc.CImagePositionH()); props.put_PositionH(new Asc.CImagePositionH());
props.get_PositionH().put_UseAlign(false); props.get_PositionH().put_UseAlign(false);
props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column); props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column);
@ -691,7 +673,6 @@ define([
this.api.ImgApply(props); this.api.ImgApply(props);
} }
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
@ -782,19 +763,19 @@ define([
var value = props.get_WrappingStyle(); var value = props.get_WrappingStyle();
if (this._state.WrappingStyle!==value) { if (this._state.WrappingStyle!==value) {
var record = this.mnuWrapPicker.store.findWhere({data: value}); this.cmbWrapType.suspendEvents();
this.mnuWrapPicker.selectRecord(record, true); var rec = this.cmbWrapType.menuPicker.store.findWhere({
if (record) data: value
this.btnWrapType.setIconCls('item-wrap ' + record.get('iconcls')); });
else this.cmbWrapType.menuPicker.selectRecord(rec);
this.btnWrapType.setIconCls(''); this.cmbWrapType.resumeEvents();
this._state.WrappingStyle=value; this._state.WrappingStyle=value;
} }
value = props.get_CanBeFlow() && !this._locked; value = props.get_CanBeFlow() && !this._locked;
var fromgroup = props.get_FromGroup() || this._locked; var fromgroup = props.get_FromGroup() || this._locked;
if (this._state.CanBeFlow!==value || this._state.FromGroup!==fromgroup) { 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.CanBeFlow=value;
this._state.FromGroup=fromgroup; this._state.FromGroup=fromgroup;
} }
@ -1379,35 +1360,41 @@ define([
this.lockedControls.push(this.cmbBorderType); this.lockedControls.push(this.cmbBorderType);
var viewData = [ var viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true }, { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare }, { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight }, { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough }, { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront }, { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind } { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
]; ];
this.btnWrapType = new Common.UI.Button({
cls : 'btn-large-dataview', this.cmbWrapType = new Common.UI.ComboDataView({
iconCls : 'item-wrap wrap-inline', itemWidth: 50,
menu : new Common.UI.Menu({ itemHeight: 50,
items: [ menuMaxHeight: 300,
{ template: _.template('<div id="id-shape-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') } enableKeyEvents: true,
]
})
});
this.btnWrapType.on('render:after', function(btn) {
me.mnuWrapPicker = new Common.UI.DataView({
el: $('#id-shape-menu-wrap'),
parentMenu: btn.menu,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>') cls: 'combo-chart-style'
}); });
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($('#shape-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,
'max-width': 178
}); });
this.btnWrapType.render($('#shape-button-wrap')); this.cmbWrapType.on('click', _.bind(this.onSelectWrap, this));
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); this.cmbWrapType.openButton.menu.on('show:after', function () {
this.lockedControls.push(this.btnWrapType); me.cmbWrapType.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbWrapType);
this.btnChangeShape = new Common.UI.Button({ this.btnChangeShape = new Common.UI.Button({
cls: 'btn-icon-default', cls: 'btn-icon-default',