From 3134a3f73c1810c28d97bf01216ff2987d2c2e54 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 10 Nov 2016 12:37:28 +0300 Subject: [PATCH] [DE] [PE] Change layout for chart settings in the right panel. --- .../main/app/template/ChartSettings.template | 8 +- .../main/app/view/ChartSettings.js | 130 +++++++---------- .../main/app/template/ChartSettings.template | 14 +- .../main/app/view/ChartSettings.js | 132 +++++++----------- 4 files changed, 118 insertions(+), 166 deletions(-) diff --git a/apps/documenteditor/main/app/template/ChartSettings.template b/apps/documenteditor/main/app/template/ChartSettings.template index 54b76e318..409261c55 100644 --- a/apps/documenteditor/main/app/template/ChartSettings.template +++ b/apps/documenteditor/main/app/template/ChartSettings.template @@ -38,11 +38,13 @@ - +
- -
+ + + +
diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js index 1eba1e243..08ca005e6 100644 --- a/apps/documenteditor/main/app/view/ChartSettings.js +++ b/apps/documenteditor/main/app/view/ChartSettings.js @@ -44,6 +44,7 @@ define([ 'underscore', 'backbone', 'common/main/lib/component/Button', + 'common/main/lib/component/ComboDataView', 'documenteditor/main/app/view/ImageSettingsAdvanced' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -152,22 +153,27 @@ define([ value = props.get_SeveralChartStyles(); 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; @@ -443,34 +449,15 @@ define([ this.fireEvent('editcomplete', 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.put_ChartProperties(this.chartProps); this.api.ImgApply(props); } - this.fireEvent('editcomplete', this); }, @@ -481,64 +468,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/presentationeditor/main/app/template/ChartSettings.template b/apps/presentationeditor/main/app/template/ChartSettings.template index 6e18ad1ed..e6fcb591e 100644 --- a/apps/presentationeditor/main/app/template/ChartSettings.template +++ b/apps/presentationeditor/main/app/template/ChartSettings.template @@ -18,14 +18,14 @@ - +
- - @@ -33,17 +33,19 @@ + + - - diff --git a/apps/presentationeditor/main/app/view/ChartSettings.js b/apps/presentationeditor/main/app/view/ChartSettings.js index 9eb840695..80ab24a9c 100644 --- a/apps/presentationeditor/main/app/view/ChartSettings.js +++ b/apps/presentationeditor/main/app/view/ChartSettings.js @@ -43,7 +43,8 @@ define([ 'jquery', 'underscore', 'backbone', - 'common/main/lib/component/Button' + 'common/main/lib/component/Button', + 'common/main/lib/component/ComboDataView' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -134,22 +135,27 @@ define([ value = props.get_SeveralChartStyles(); 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 = props.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; @@ -352,33 +358,14 @@ define([ this.fireEvent('editcomplete', 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) { var props = new Asc.CAscChartProp(); - props.putStyle(rawData.data); + props.putStyle(record.get('data')); this.api.ChartApply(props); } - this.fireEvent('editcomplete', this); }, @@ -389,64 +376,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); - } }, onWidthChange: function(field, newValue, oldValue, eOpts){
+
+
-
+
+
+