diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 04190efbf..9058c3c4f 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -199,9 +199,8 @@ .combo-template(64px); } -.combo-pattern { +.combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) { @combo-dataview-button-width: 15px; - @combo-dataview-height: 40px; height: @combo-dataview-height; @@ -216,16 +215,8 @@ } .item { - margin: 4px 0 4px 4px; + margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins; .box-shadow(none); - - &:hover { - .box-shadow(0 0 0 1px @gray); - } - -// &.selected { -// .box-shadow(0 0 0 2px @primary); -// } } &.disabled { @@ -235,6 +226,16 @@ } } } +}; + +.combo-pattern { + .combo-textart(40px); + + .item { + &:hover { + .box-shadow(0 0 0 1px @gray); + } + } .dropdown-menu { padding-right: 2px; @@ -247,31 +248,22 @@ }; .combo-textart { - @combo-dataview-button-width: 15px; - @combo-dataview-height: 62px; + .combo-textart(); +} - height: @combo-dataview-height; - - .view { - margin-right: -@combo-dataview-button-width; - padding-right: @combo-dataview-button-width; - } - - .button { - width: @combo-dataview-button-width; - height: @combo-dataview-height; - } +.combo-chart-style { + .combo-textart(58px, 2px); .item { - margin: 4px 0 4px 4px; - .box-shadow(none); + margin-left: 4px; + .box-shadow(0 0 0 1px @gray); } &.disabled { .item { &:hover:not(.selected) { - .box-shadow(none); + .box-shadow(0 0 0 1px @gray); } } } -}; +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template index f91491b05..74fca39ff 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template @@ -18,9 +18,9 @@ - +
- @@ -29,29 +29,31 @@
+ + - - - - diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index 41d60a7e7..4dbbe03c6 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -1,15 +1,11 @@
-
+
- -
+ +
+
+
+
+
+
-
- -
-
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index d4c8f019e..1ff0d0eb9 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -45,6 +45,7 @@ define([ 'backbone', 'common/main/lib/component/Button', 'common/main/lib/component/MetricSpinner', + 'common/main/lib/component/ComboDataView', 'spreadsheeteditor/main/app/view/ChartSettingsDlg' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -138,22 +139,27 @@ define([ value = props.asc_getSeveralChartStyles(); if (this._state.SeveralCharts && value) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'none'); - this.mnuChartStylePicker.selectRecord(null, true); + this.cmbChartStyle.fieldPicker.deselectAll(); + this.cmbChartStyle.menuPicker.deselectAll(); this._state.ChartStyle = null; } else { value = this.chartProps.getStyle(); - if (this._state.ChartStyle!==value) { - var record = this.mnuChartStylePicker.store.findWhere({data: value}); - this.mnuChartStylePicker.selectRecord(record, true); - if (record) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); + if (this._state.ChartStyle!==value || this._isChartStylesChanged) { + this.cmbChartStyle.suspendEvents(); + var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value}); + this.cmbChartStyle.menuPicker.selectRecord(rec); + this.cmbChartStyle.resumeEvents(); + + if (this._isChartStylesChanged) { + if (rec) + this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true); + else + this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true); } this._state.ChartStyle=value; } } + this._isChartStylesChanged = false; this._noApply = false; @@ -457,30 +463,12 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, - onSelectStyle: function(btn, picker, itemView, record) { + onSelectStyle: 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; - } - - var style = 'url(' + rawData.imageUrl + ')'; - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', style); - if (this.api && !this._noApply && this.chartProps) { var props = new Asc.asc_CImgProperty(); - this.chartProps.putStyle(rawData.data); + this.chartProps.putStyle(record.get('data')); props.asc_putChartProperties(this.chartProps); this.api.asc_setGraphicObjectProps(props); } @@ -494,64 +482,51 @@ define([ updateChartStyles: function(styles) { var me = this; + this._isChartStylesChanged = true; - if (!this.btnChartStyle) { - this.btnChartStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) + if (!this.cmbChartStyle) { + this.cmbChartStyle = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 270, + enableKeyEvents: true, + cls: 'combo-chart-style' }); - this.btnChartStyle.render($('#chart-button-style')); - this.lockedControls.push(this.btnChartStyle); - this.mnuChartStylePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-style'), - style: 'max-height: 411px;', - parentMenu: this.btnChartStyle.menu, - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') + this.cmbChartStyle.render($('#chart-combo-style')); + this.cmbChartStyle.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 }); - - if (this.btnChartStyle.menu) { - this.btnChartStyle.menu.on('show:after', function () { - me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } - this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); + this.cmbChartStyle.on('click', _.bind(this.onSelectStyle, this)); + this.cmbChartStyle.openButton.menu.on('show:after', function () { + me.cmbChartStyle.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbChartStyle); } - + if (styles && styles.length>0){ - var stylesStore = this.mnuChartStylePicker.store; + var stylesStore = this.cmbChartStyle.menuPicker.store; if (stylesStore) { - var stylearray = [], - selectedIdx = -1, - selectedUrl; - _.each(styles, function(item, index){ - stylearray.push({ - imageUrl: item.asc_getImageUrl(), - data : item.asc_getStyle(), - tip : me.textStyle + ' ' + item.asc_getStyle() + var count = stylesStore.length; + if (count>0 && count==styles.length) { + var data = stylesStore.models; + _.each(styles, function(style, index){ + data[index].set('imageUrl', style.asc_getImageUrl()); }); - if (me._state.ChartStyle == item.asc_getStyle()) { - selectedIdx = index; - selectedUrl = item.asc_getImageUrl(); - } - - }); - - stylesStore.reset(stylearray, {silent: false}); + } else { + var stylearray = [], + selectedIdx = -1; + _.each(styles, function(item, index){ + stylearray.push({ + imageUrl: item.asc_getImageUrl(), + data : item.asc_getStyle(), + tip : me.textStyle + ' ' + item.asc_getStyle() + }); + }); + stylesStore.reset(stylearray, {silent: false}); + } } } - this.mnuChartStylePicker.selectByIndex(selectedIdx, true); - if (selectedIdx>=0 && this.btnChartStyle.cmpEl) { - var style = 'url(' + selectedUrl + ')'; - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', style); - } }, setLocked: function (locked) { diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 5200a82ae..31eb1f28a 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -79,7 +79,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); this._state = { - ChartStyle: 1, ChartType: Asc.c_oAscChartTypeSettings.barNormal }; this._noApply = true; @@ -174,34 +173,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnChartType.render($('#chart-dlg-button-type')); this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); - this.btnChartStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - additionalAlign: menuAddAlign, - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnChartStyle.on('render:after', function(btn) { - me.mnuChartStylePicker = new Common.UI.DataView({ - el: $('#id-chart-dlg-menu-style'), - parentMenu: btn.menu, - style: 'max-height: 411px;', - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') - }); - - if (me.btnChartStyle.menu) { - me.btnChartStyle.menu.on('show:after', function () { - me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } - }); - this.btnChartStyle.render($('#chart-dlg-button-style')); - this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); - this.cmbDataDirect = new Common.UI.ComboBox({ el : $('#chart-dlg-combo-range'), menuStyle : 'min-width: 120px;', @@ -804,9 +775,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' afterRender: function() { - if (this.api) - this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); - this._setDefaults(this.chartSettings); if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); @@ -835,7 +803,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls); - this.updateChartStyles(this.api.asc_getChartPreviews(rawData.type)); this.chartSettings.changeType(rawData.type); this.updateAxisProps(rawData.type, true); this.vertAxisProps = this.chartSettings.getVertAxisProps(); @@ -1018,62 +985,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.currentAxisProps = props; }, - onSelectStyle: 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; - } - - var style = 'url(' + rawData.imageUrl + ')'; - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', style); - - this._state.ChartStyle = rawData.data; - }, - - updateChartStyles: function(styles) { - var me = this; - if (styles && styles.length>0){ - var stylesStore = this.mnuChartStylePicker.store; - if (stylesStore) { - var stylearray = [], - selectedIdx = -1, - selectedUrl; - _.each(styles, function(item, index){ - stylearray.push({ - imageUrl: item.asc_getImageUrl(), - data : item.asc_getStyle(), - tip : me.textStyle + ' ' + item.asc_getStyle() - }); - if (me._state.ChartStyle == item.asc_getStyle()) { - selectedIdx = index; - selectedUrl = item.asc_getImageUrl(); - } - - }); - - stylesStore.reset(stylearray, {silent: false}); - } - } - this.mnuChartStylePicker.selectByIndex(selectedIdx, true); - if (selectedIdx>=0 && this.btnChartStyle.cmpEl) { - var style = 'url(' + selectedUrl + ')'; - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', style); - } - }, - _setDefaults: function(props) { var me = this; if (props ){ @@ -1090,18 +1001,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' if (record) { this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); } - this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); this._noApply = false; - this._state.ChartStyle = props.getStyle(); - record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle}); - this.mnuChartStylePicker.selectRecord(record, true); - if (record) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); - } - var value = props.getRange(); this.txtDataRange.setValue((value) ? value : ''); this.dataRangeValid = value; @@ -1151,7 +1053,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' // Layout this.chartSettings.putType(type); - this.chartSettings.putStyle(this._state.ChartStyle); this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); this.chartSettings.putRange(this.txtDataRange.getValue());