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([ + '
', + '', + '
' + ].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;