diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 421f85653..fc4436af0 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -123,6 +123,7 @@ define([
restoreHeight: this.menuMaxHeight,
style: 'max-height: '+this.menuMaxHeight+'px;',
enableKeyEvents: this.options.enableKeyEvents,
+ store: this.store,
itemTemplate : _.template([
'
',
'

',
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 56ff8ed16..102eb21c5 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -271,4 +271,21 @@
}
}
}
-}
\ No newline at end of file
+}
+
+.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);
+ }
+ }
+ }
+};
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index c52e502b0..0976f8f32 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -23,13 +23,13 @@
-
+ |
|
-
+
|
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
index 8b4c727b7..90d5fc967 100644
--- a/apps/documenteditor/main/app/view/ImageSettings.js
+++ b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -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('') }
- ]
- })
+ 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('')
- });
+ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
+ '',
+ '

px 0;"/>',
+ '
'
+ ].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);
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index f040093df..250aca36f 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -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;