[DE] ImageSettings: change wrapping style to ComboDataView.

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([
                     '<div class="style" id="<%= id %>">',
                         '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',

apps/common/main/resources/less/combo-dataview.less

@@ -272,3 +272,20 @@
         }
     }
 }
+
+.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);
+            }
+        }
+    }
+};

apps/documenteditor/main/app/template/ImageSettings.template

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

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: 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-image-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
-                    ]
-                })
-            });
-            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,
+                cls: 'combo-wrap'
-                    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.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.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;
+                    this.cmbWrapType.suspendEvents();
-                    var record = this.mnuWrapPicker.store.findWhere({data: value});
+                    var rec = this.cmbWrapType.menuPicker.store.findWhere({
-                    this.mnuWrapPicker.selectRecord(record, true);
+                        data: value
-                    if (record)
+                    });
-                        this.btnWrapType.setIconCls('item-wrap ' + record.get('iconcls'));
+                    this.cmbWrapType.menuPicker.selectRecord(rec);
-                    else
+                    this.cmbWrapType.resumeEvents();
-                        this.btnWrapType.setIconCls('');
-                    this._noApply = false;
                     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;
+                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._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) {
-                var props = new Asc.asc_CImgProperty();
+                var props = new Asc.asc_CImgProperty(),
-                props.put_WrappingStyle((rawData.data));
+                    data = record.get('data');
-                if (this._state.WrappingStyle===Asc.c_oAscWrapStyle2.Inline && rawData.data!==Asc.c_oAscWrapStyle2.Inline ) {
+                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);

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;