diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 9a44423f0..d26baa762 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -200,11 +200,12 @@ define([ allowScrollbar: true, scrollAlwaysVisible: false, showLast: true, - useBSKeydown: false + useBSKeydown: false, + cls: '' }, template: _.template([ - '
', + '
', '<% _.each(groups, function(group) { %>', '<% if (group.headername !== undefined) { %>', '
<%= group.headername %>
', @@ -238,6 +239,7 @@ define([ me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu me.showLast = me.options.showLast; me.style = me.options.style || ''; + me.cls = me.options.cls || ''; me.emptyText = me.options.emptyText || ''; me.listenStoreEvents= (me.options.listenStoreEvents!==undefined) ? me.options.listenStoreEvents : true; me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true; @@ -267,7 +269,8 @@ define([ this.setElement(parentEl, false); this.cmpEl = $(this.template({ groups: me.groups ? me.groups.toJSON() : null, - style: me.style + style: me.style, + cls: me.cls })); parentEl.html(this.cmpEl); @@ -275,7 +278,8 @@ define([ this.cmpEl = me.$el || $(this.el); this.cmpEl.html(this.template({ groups: me.groups ? me.groups.toJSON() : null, - style: me.style + style: me.style, + cls: me.cls })); } @@ -454,7 +458,8 @@ define([ $(this.el).html(this.template({ groups: this.groups ? this.groups.toJSON() : null, - style: this.style + style: this.style, + cls: this.cls })); if (!_.isUndefined(this.scroller)) { diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less index 8591a2e24..1a371e700 100644 --- a/apps/common/main/resources/less/dataview.less +++ b/apps/common/main/resources/less/dataview.less @@ -73,4 +73,9 @@ font-weight: bold; cursor: default; } + + &.bordered { + border: 1px solid @input-border; + .border-radius(@border-radius-small); + } } \ 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 0a8151692..7801608c7 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template @@ -24,27 +24,31 @@
- - - -
- - - - + + + + + + + +
+ + + + + -
+
- - +
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index e205fb0de..39fbcaeab 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -47,7 +47,8 @@ define([ 'common/main/lib/component/MetricSpinner', 'common/main/lib/component/ComboDataView', 'spreadsheeteditor/main/app/view/ChartSettingsDlg', - 'spreadsheeteditor/main/app/view/ChartDataDialog' + 'spreadsheeteditor/main/app/view/ChartDataDialog', + 'spreadsheeteditor/main/app/view/ChartTypeDialog' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -112,6 +113,7 @@ define([ this.ChartTypesContainer = $('#chart-panel-types'); this.SparkTypesContainer = $('#spark-panel-types'); this.SparkPointsContainer = $('#spark-panel-points'); + this.NotCombinedSettings = $('.not-combined'); }, render: function () { @@ -151,21 +153,11 @@ define([ } value = props.asc_getSeveralChartTypes(); - if (this._state.SeveralCharts && value) { - this.btnChartType.setIconCls('svgicon'); - this._state.ChartType = null; - } else { - var type = this.chartProps.getType(); - if (this._state.ChartType !== type) { - var record = this.mnuChartTypePicker.store.findWhere({type: type}); - this.mnuChartTypePicker.selectRecord(record, true); - if (record) { - this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls')); - } else - this.btnChartType.setIconCls('svgicon'); - this.updateChartStyles(this.api.asc_getChartPreviews(type)); - this._state.ChartType = type; - } + var type = (this._state.SeveralCharts && value) ? null : this.chartProps.getType(); + if (this._state.ChartType !== type) { + this.ShowCombinedProps(type); + (type !== null) && this.updateChartStyles(this.api.asc_getChartPreviews(type)); + this._state.ChartType = type; } value = props.asc_getSeveralChartStyles(); @@ -600,30 +592,30 @@ define([ var me = this; // charts - this.btnChartType = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'svgicon chart-bar-normal', - menu : new Common.UI.Menu({ - style: 'width: 364px; padding-top: 12px;', - items: [ - { template: _.template('') } - ] - }) - }); - - this.btnChartType.on('render:after', function(btn) { - me.mnuChartTypePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-type'), - parentMenu: btn.menu, - restoreHeight: 421, - groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), - store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), - itemTemplate: _.template('
\">
') - }); - }); - this.btnChartType.render($('#chart-button-type')); - this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); - this.lockedControls.push(this.btnChartType); + // this.btnChartType = new Common.UI.Button({ + // cls : 'btn-large-dataview', + // iconCls : 'svgicon chart-bar-normal', + // menu : new Common.UI.Menu({ + // style: 'width: 364px; padding-top: 12px;', + // items: [ + // { template: _.template('') } + // ] + // }) + // }); + // + // this.btnChartType.on('render:after', function(btn) { + // me.mnuChartTypePicker = new Common.UI.DataView({ + // el: $('#id-chart-menu-type'), + // parentMenu: btn.menu, + // restoreHeight: 421, + // groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), + // store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), + // itemTemplate: _.template('
\">
') + // }); + // }); + // this.btnChartType.render($('#chart-button-type')); + // this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); + // this.lockedControls.push(this.btnChartType); this.spnWidth = new Common.UI.MetricSpinner({ el: $('#chart-spin-width'), @@ -756,8 +748,22 @@ define([ this.chLastPoint.on('change', _.bind(this.onCheckPointChange, this, 4)); this.chMarkersPoint.on('change', _.bind(this.onCheckPointChange, this, 5)); + this.btnChangeType = new Common.UI.Button({ + parentEl: $('#chart-btn-change-type'), + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-menu-chart', + caption : this.textChangeType, + style : 'width: 100%;text-align: left;' + }); + this.btnChangeType.on('click', _.bind(this.onChangeType, this)); + this.lockedControls.push(this.btnChangeType); + this.btnSelectData = new Common.UI.Button({ - el: $('#chart-btn-select-data') + parentEl: $('#chart-btn-select-data'), + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-select-range', + caption : this.textSelectData, + style : 'width: 100%;text-align: left;' }); this.btnSelectData.on('click', _.bind(this.onSelectData, this)); this.lockedControls.push(this.btnSelectData); @@ -780,6 +786,10 @@ define([ this.SparkPointsContainer.toggleClass('settings-hidden', isChart); }, + ShowCombinedProps: function(type) { + this.NotCombinedSettings.toggleClass('settings-hidden', type==Asc.c_oAscChartTypeSettings.combo); + }, + onWidthChange: function(field, newValue, oldValue, eOpts){ var w = field.getNumberValue(); var h = this.spnHeight.getNumberValue(); @@ -924,35 +934,65 @@ define([ } }, - onSelectType: 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; + onChangeType: function() { + var me = this; + var props; + if (me.api){ + props = me.api.asc_getChartObject(); + if (props) { + me._isEditType = true; + // props.startEdit(); + var win = new SSE.Views.ChartTypeDialog({ + chartSettings: props, + api: me.api, + handler: function(result, value) { + if (result == 'ok') { + // props.endEdit(); + if (me.api) { + me.api.asc_editChartDrawingObject(value.chartSettings); + } + me._isEditType = false; + } + Common.NotificationCenter.trigger('edit:complete', me); + } + }).on('close', function() { + // me._isEditType && props.cancelEdit(); + me._isEditType = false; + }); + win.show(); } - } else { - rawData = record; } - - this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls); - this._state.ChartType = -1; - - if (this.api && !this._noApply && this.chartProps) { - var props = new Asc.asc_CImgProperty(); - this.chartProps.changeType(rawData.type); - props.asc_putChartProperties(this.chartProps); - this.api.asc_setGraphicObjectProps(props); - } - Common.NotificationCenter.trigger('edit:complete', this); }, + // onSelectType: 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.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls); + // this._state.ChartType = -1; + // + // if (this.api && !this._noApply && this.chartProps) { + // var props = new Asc.asc_CImgProperty(); + // this.chartProps.changeType(rawData.type); + // props.asc_putChartProperties(this.chartProps); + // this.api.asc_setGraphicObjectProps(props); + // } + // Common.NotificationCenter.trigger('edit:complete', this); + // }, + onSelectStyle: function(combo, record) { if (this._noApply) return; @@ -1259,7 +1299,8 @@ define([ textType: 'Type', textSelectData: 'Select Data', textRanges: 'Data Range', - textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.' + textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.', + textChangeType: 'Change type' }, SSE.Views.ChartSettings || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js new file mode 100644 index 000000000..a09974821 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js @@ -0,0 +1,303 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * ChartTypeDialog.js + * + * Created by Julia Radzhabova on 03.12.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/ComboBox', + 'common/main/lib/component/ListView', + 'common/main/lib/view/AdvancedSettingsWindow' +], function () { 'use strict'; + + SSE.Views.ChartTypeDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ + options: { + contentWidth: 312, + height: 490 + }, + + initialize : function(options) { + var me = this; + + _.extend(this.options, { + title: this.textTitle, + template: [ + '
', + '
', + '
', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '
', + '', + '
', + '
', + '', + '
', + '
', + '', + '', + '', + '
', + '
', + '
', + '
', + '
', + '
' + ].join('') + }, options); + + this.handler = options.handler; + + Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); + + this._changedProps = null; + + this.api = this.options.api; + this.chartSettings = this.options.chartSettings; + this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal; + }, + + render: function() { + Common.Views.AdvancedSettingsWindow.prototype.render.call(this); + var me = this; + + this.btnChartType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'svgicon chart-bar-normal', + menu : new Common.UI.Menu({ + style: 'width: 364px; padding-top: 12px;', + additionalAlign: this.menuAddAlign, + items: [ + { template: _.template('') } + ] + }) + }); + this.btnChartType.on('render:after', function(btn) { + me.mnuChartTypePicker = new Common.UI.DataView({ + el: $('#chart-type-dlg-menu-type', me.$window), + parentMenu: btn.menu, + restoreHeight: 421, + groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), + store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), + itemTemplate: _.template('
\">
') + }); + }); + this.btnChartType.render($('#chart-type-dlg-button-type'), this.$window); + this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this)); + + this.stylesList = new Common.UI.DataView({ + el: $('#chart-type-dlg-styles-list', this.$window), + store: new Common.UI.DataViewStore(), + cls: 'bordered', + enableKeyEvents: this.options.enableKeyEvents, + itemTemplate : _.template([ + '
', + '', + '<% if (typeof title !== "undefined") {%>', + '<%= title %>', + '<% } %>', + '
' + ].join('')) + }); + this.stylesList.on('item:select', _.bind(this.onSelectStyles, this)); + + this.NotCombinedSettings = $('.simple-chart', this.$window); + this.CombinedSettings = $('.combined-chart', this.$window); + + this.afterRender(); + }, + + afterRender: function() { + this._setDefaults(this.chartSettings); + }, + + show: function() { + Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); + }, + + close: function () { + this.api.asc_onCloseChartFrame(); + Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments); + }, + + _setDefaults: function (props) { + var me = this; + if (props ){ + this.chartSettings = props; + this.currentChartType = props.getType(); + var record = this.mnuChartTypePicker.store.findWhere({type: this.currentChartType}); + this.mnuChartTypePicker.selectRecord(record, true); + if (record) { + this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls')); + } else + this.btnChartType.setIconCls('svgicon'); + this.ShowHideSettings(this.currentChartType); + if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) { + + } else + this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType)); + } + }, + + getSettings: function () { + return { chartSettings: this.chartSettings}; + }, + + onDlgBtnClick: function(event) { + var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; + if (state == 'ok') { + // if (!this.isRangeValid()) return; + this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined); + } + + this.close(); + }, + + onPrimary: function() { + this.onDlgBtnClick('ok'); + return false; + }, + + onSelectType: function(picker, itemView, record) { + var rawData = {}, + isPickerSelect = _.isFunction(record.toJSON); + + if (isPickerSelect){ + if (record.get('selected')) { + rawData = record.toJSON(); + } else { + // record deselected + return; + } + } else { + rawData = record; + } + + this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls); + this.currentChartType = rawData.type; + this.chartSettings.changeType(this.currentChartType); + this.ShowHideSettings(this.currentChartType); + if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) { + + } else + this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType)); + }, + + onSelectStyle: function(combo, record) { + }, + + updateChartStyles: function(styles) { + var me = this; + if (styles && styles.length>0){ + var stylesStore = this.stylesList.store; + if (stylesStore) { + 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_getImage()); + }); + } else { + var stylearray = [], + selectedIdx = -1; + _.each(styles, function(item, index){ + stylearray.push({ + imageUrl: item.asc_getImage(), + data : item.asc_getName(), + tip : me.textStyle + ' ' + item.asc_getName() + }); + }); + stylesStore.reset(stylearray, {silent: false}); + } + } + } else { + this.stylesList.store.reset(); + } + this.stylesList.setDisabled(!styles || styles.length<1); + }, + + onSelectStyles: function(dataView, itemView, record) { + this.chartSettings.putStyle(record.get('data')); + }, + + updateSeriesList: function(series, index) { + this.btnEditCategory.setDisabled(series && series.length>0 ? series[0].asc_IsScatter() : false); + + var arr = []; + var store = this.seriesList.store; + for (var i = 0, len = series.length; i < len; i++) + { + var item = series[i], + rec = new Common.UI.DataViewModel(); + rec.set({ + value: item.asc_getSeriesName(), + index: item.asc_getIdx(), + order: item.asc_getOrder(), + series: item + }); + arr.push(rec); + } + store.reset(arr); + (len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1)); + }, + + ShowHideSettings: function(type) { + this.NotCombinedSettings.toggleClass('hidden', type==Asc.c_oAscChartTypeSettings.combo); + this.CombinedSettings.toggleClass('hidden', type!==Asc.c_oAscChartTypeSettings.combo); + }, + + textTitle: 'Chart Type', + textType: 'Type', + textStyle: 'Style', + textSeries: 'Series', + textSecondary: 'Secondary Axis' + + }, SSE.Views.ChartTypeDialog || {})) +});