diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 5216035c5..8cb8df299 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -750,6 +750,14 @@ border: 1px solid @input-border; .border-radius(@border-radius-small); + &.template-table { + width: 92px; + } + &.sheet-template-table { + width: 83px; + height: 54px; + } + .icon { display: inline-block; .btn.btnsize(52px); diff --git a/apps/documenteditor/main/app/template/TableSettings.template b/apps/documenteditor/main/app/template/TableSettings.template index c840cf208..689724965 100644 --- a/apps/documenteditor/main/app/template/TableSettings.template +++ b/apps/documenteditor/main/app/template/TableSettings.template @@ -38,7 +38,7 @@ -
+
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index 553f08134..89d622520 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -130,7 +130,7 @@ define([ this.fireEvent('editcomplete', this); }, - onTableTemplateSelect: function(combo, record){ + onTableTemplateSelect: function(btn, picker, itemView, record){ if (this.api && !this._noApply) { var properties = new Asc.CTableProp(); properties.put_TableStyle(record.get('templateId')); @@ -466,22 +466,21 @@ define([ } //for table-template - value = props.get_TableStyle(); + value = props.get_TableStyle(); if (this._state.TemplateId!==value || this._isTemplatesChanged) { - this.cmbTableTemplate.suspendEvents(); - var rec = this.cmbTableTemplate.menuPicker.store.findWhere({ + var rec = this.mnuTableTemplatePicker.store.findWhere({ templateId: value }); - this.cmbTableTemplate.menuPicker.selectRecord(rec); - this.cmbTableTemplate.resumeEvents(); - - if (this._isTemplatesChanged) { - if (rec) - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true); - else - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true); + if (!rec) { + rec = this.mnuTableTemplatePicker.store.at(0); } - this._state.TemplateId=value; + this.btnTableTemplate.suspendEvents(); + this.mnuTableTemplatePicker.selectRecord(rec, true); + this.btnTableTemplate.resumeEvents(); + + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center'}); + + this._state.TemplateId = value; } this._isTemplatesChanged = false; @@ -693,29 +692,36 @@ define([ var self = this; this._isTemplatesChanged = true; - if (!this.cmbTableTemplate) { - this.cmbTableTemplate = new Common.UI.ComboDataView({ - itemWidth: 70, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-template' + if (!this.btnTableTemplate) { + this.btnTableTemplate = new Common.UI.Button({ + cls : 'btn-large-dataview template-table', + iconCls : 'icon-template-table', + menu : new Common.UI.Menu({ + style: 'width: 575px;', + items: [ + { template: _.template('') } + ] + }) }); - this.cmbTableTemplate.render($('#table-combo-template')); - this.cmbTableTemplate.openButton.menu.cmpEl.css({ - 'min-width': 175, - 'max-width': 175 + this.btnTableTemplate.on('render:after', function(btn) { + self.mnuTableTemplatePicker = new Common.UI.DataView({ + el: $('#id-table-menu-template'), + parentMenu: btn.menu, + restoreHeight: 350, + groups: new Common.UI.DataViewGroupStore(), + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
'), + style: 'max-height: 350px;' + }); }); - this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); - this.cmbTableTemplate.openButton.menu.on('show:after', function () { - self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTableTemplate); + this.btnTableTemplate.render($('#table-btn-template')); + this.lockedControls.push(this.btnTableTemplate); + this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate)); } - var count = self.cmbTableTemplate.menuPicker.store.length; + var count = self.mnuTableTemplatePicker.store.length; if (count>0 && count==Templates.length) { - var data = self.cmbTableTemplate.menuPicker.store.models; + var data = self.mnuTableTemplatePicker.store.models; _.each(Templates, function(template, index){ data[index].set('imageUrl', template.asc_getImage()); }); @@ -738,7 +744,7 @@ define([ tip : tip }); }); - self.cmbTableTemplate.menuPicker.store.reset(arr); + self.mnuTableTemplatePicker.store.reset(arr); } }, diff --git a/apps/presentationeditor/main/app/template/TableSettings.template b/apps/presentationeditor/main/app/template/TableSettings.template index 6d3db0d7e..4a1829672 100644 --- a/apps/presentationeditor/main/app/template/TableSettings.template +++ b/apps/presentationeditor/main/app/template/TableSettings.template @@ -38,7 +38,7 @@ -
+
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js index dae5bb44a..75976eb32 100644 --- a/apps/presentationeditor/main/app/view/TableSettings.js +++ b/apps/presentationeditor/main/app/view/TableSettings.js @@ -128,7 +128,7 @@ define([ this.fireEvent('editcomplete', this); }, - onTableTemplateSelect: function(combo, record){ + onTableTemplateSelect: function(btn, picker, itemView, record){ if (this.api && !this._noApply) { var properties = new Asc.CTableProp(); properties.put_TableStyle(record.get('templateId')); @@ -436,20 +436,19 @@ define([ //for table-template value = props.get_TableStyle(); if (this._state.TemplateId!==value || this._isTemplatesChanged) { - this.cmbTableTemplate.suspendEvents(); - var rec = this.cmbTableTemplate.menuPicker.store.findWhere({ + var rec = this.mnuTableTemplatePicker.store.findWhere({ templateId: value }); - this.cmbTableTemplate.menuPicker.selectRecord(rec); - this.cmbTableTemplate.resumeEvents(); - - if (this._isTemplatesChanged) { - if (rec) - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true); - else - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true); + if (!rec) { + rec = this.mnuTableTemplatePicker.store.at(0); } - this._state.TemplateId=value; + this.btnTableTemplate.suspendEvents(); + this.mnuTableTemplatePicker.selectRecord(rec, true); + this.btnTableTemplate.resumeEvents(); + + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center'}); + + this._state.TemplateId = value; } this._isTemplatesChanged = false; @@ -660,29 +659,36 @@ define([ var self = this; this._isTemplatesChanged = true; - if (!this.cmbTableTemplate) { - this.cmbTableTemplate = new Common.UI.ComboDataView({ - itemWidth: 70, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-template' + if (!this.btnTableTemplate) { + this.btnTableTemplate = new Common.UI.Button({ + cls : 'btn-large-dataview template-table', + iconCls : 'icon-template-table', + menu : new Common.UI.Menu({ + style: 'width: 575px;', + items: [ + { template: _.template('') } + ] + }) }); - this.cmbTableTemplate.render($('#table-combo-template')); - this.cmbTableTemplate.openButton.menu.cmpEl.css({ - 'min-width': 175, - 'max-width': 175 + this.btnTableTemplate.on('render:after', function(btn) { + self.mnuTableTemplatePicker = new Common.UI.DataView({ + el: $('#id-table-menu-template'), + parentMenu: btn.menu, + restoreHeight: 350, + groups: new Common.UI.DataViewGroupStore(), + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
'), + style: 'max-height: 350px;' + }); }); - this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); - this.cmbTableTemplate.openButton.menu.on('show:after', function () { - self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTableTemplate); + this.btnTableTemplate.render($('#table-btn-template')); + this.lockedControls.push(this.btnTableTemplate); + this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate)); } - - var count = self.cmbTableTemplate.menuPicker.store.length; + + var count = self.mnuTableTemplatePicker.store.length; if (count>0 && count==Templates.length) { - var data = self.cmbTableTemplate.menuPicker.store.models; + var data = self.mnuTableTemplatePicker.store.models; _.each(Templates, function(template, index){ data[index].set('imageUrl', template.asc_getImage()); }); @@ -705,7 +711,7 @@ define([ tip : tip }); }); - self.cmbTableTemplate.menuPicker.store.reset(arr); + self.mnuTableTemplatePicker.store.reset(arr); } }, diff --git a/apps/spreadsheeteditor/main/app/template/TableSettings.template b/apps/spreadsheeteditor/main/app/template/TableSettings.template index 829d2ff50..2ed6e5d01 100644 --- a/apps/spreadsheeteditor/main/app/template/TableSettings.template +++ b/apps/spreadsheeteditor/main/app/template/TableSettings.template @@ -43,7 +43,7 @@ -
+
diff --git a/apps/spreadsheeteditor/main/app/view/TableSettings.js b/apps/spreadsheeteditor/main/app/view/TableSettings.js index 6747876c7..14ef3f5de 100644 --- a/apps/spreadsheeteditor/main/app/view/TableSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TableSettings.js @@ -100,7 +100,7 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, - onTableTemplateSelect: function(combo, record){ + onTableTemplateSelect: function(btn, picker, itemView, record){ if (this.api && !this._noApply) { this.api.asc_changeAutoFilter(this._state.TableName, Asc.c_oAscChangeFilterOptions.style, record.get('name')); } @@ -398,19 +398,18 @@ define([ //for table-template value = props.asc_getTableStyleName(); if (this._state.TemplateName!==value || this._isTemplatesChanged) { - this.cmbTableTemplate.suspendEvents(); - var rec = this.cmbTableTemplate.menuPicker.store.findWhere({ + var rec = this.mnuTableTemplatePicker.store.findWhere({ name: value }); - this.cmbTableTemplate.menuPicker.selectRecord(rec); - this.cmbTableTemplate.resumeEvents(); - - if (this._isTemplatesChanged) { - if (rec) - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true); - else - this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true); + if (!rec) { + rec = this.mnuTableTemplatePicker.store.at(0); } + this.btnTableTemplate.suspendEvents(); + this.mnuTableTemplatePicker.selectRecord(rec, true); + this.btnTableTemplate.resumeEvents(); + + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center'}); + this._state.TemplateName=value; } this._isTemplatesChanged = false; @@ -429,29 +428,38 @@ define([ var self = this; this._isTemplatesChanged = true; - if (!this.cmbTableTemplate) { - this.cmbTableTemplate = new Common.UI.ComboDataView({ - itemWidth: 61, - itemHeight: 46, - menuMaxHeight: 300, - enableKeyEvents: true + if (!this.btnTableTemplate) { + this.btnTableTemplate = new Common.UI.Button({ + cls : 'btn-large-dataview sheet-template-table', + iconCls : 'icon-template-table', + menu : new Common.UI.Menu({ + style: 'width: 512px;', + items: [ + { template: _.template('') } + ] + }) }); - this.cmbTableTemplate.render($('#table-combo-template')); - this.cmbTableTemplate.openButton.menu.cmpEl.css({ - 'min-width': 175, - 'max-width': 175 + this.btnTableTemplate.on('render:after', function(btn) { + self.mnuTableTemplatePicker = new Common.UI.DataView({ + el: $('#id-table-menu-template'), + parentMenu: btn.menu, + restoreHeight: 325, + groups: new Common.UI.DataViewGroupStore(), + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
'), + style: 'max-height: 325px;' + }); }); - this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); - this.cmbTableTemplate.openButton.menu.on('show:after', function () { - self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTableTemplate); - if (this._locked) this.cmbTableTemplate.setDisabled(this._locked); + this.btnTableTemplate.render($('#table-btn-template')); + this.lockedControls.push(this.btnTableTemplate); + this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate)); + if (this._locked) this.btnTableTemplate.setDisabled(this._locked); } - var count = self.cmbTableTemplate.menuPicker.store.length; + + var count = self.mnuTableTemplatePicker.store.length; if (count>0 && count==Templates.length) { - var data = self.cmbTableTemplate.menuPicker.store.models; + var data = self.mnuTableTemplatePicker.store.models; _.each(Templates, function(template, index){ data[index].set('imageUrl', template.asc_getImage()); }); @@ -469,7 +477,7 @@ define([ tip : template.asc_getDisplayName() }); }); - self.cmbTableTemplate.menuPicker.store.reset(arr); + self.mnuTableTemplatePicker.store.reset(arr); } }, diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 81b8ff23f..7a06d91bd 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -736,7 +736,7 @@ define([ lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.multiselect, _set.cantModifyFilter], menu : new Common.UI.Menu({ items: [ - { template: _.template('
') } + { template: _.template('
') } ] }) });