From 25715efe9b6aab1e3806777f1e423200e7052d5c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Oct 2019 14:01:02 +0300 Subject: [PATCH] [PE] Add settings for marker list --- .../main/app/controller/Toolbar.js | 34 ++- .../main/app/view/ListSettingsDialog.js | 213 ++++++++++++++++++ .../main/app/view/SlideSizeSettings.js | 4 +- .../main/app/view/Toolbar.js | 10 +- apps/presentationeditor/main/locale/en.json | 8 +- 5 files changed, 263 insertions(+), 6 deletions(-) create mode 100644 apps/presentationeditor/main/app/view/ListSettingsDialog.js diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 668643fa5..0a424e2e0 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -55,7 +55,8 @@ define([ 'presentationeditor/main/app/view/HeaderFooterDialog', 'presentationeditor/main/app/view/HyperlinkSettingsDialog', 'presentationeditor/main/app/view/SlideSizeSettings', - 'presentationeditor/main/app/view/SlideshowSettings' + 'presentationeditor/main/app/view/SlideshowSettings', + 'presentationeditor/main/app/view/ListSettingsDialog' ], function () { 'use strict'; PE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({ @@ -275,6 +276,7 @@ define([ toolbar.btnDecLeftOffset.on('click', _.bind(this.onDecOffset, this)); toolbar.btnIncLeftOffset.on('click', _.bind(this.onIncOffset, this)); toolbar.btnMarkers.on('click', _.bind(this.onMarkers, this)); + toolbar.mnuListSettings.on('click', _.bind(this.onMarkerSettingsClick, this)); toolbar.btnNumbers.on('click', _.bind(this.onNumbers, this)); toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this)); toolbar.cmbFontName.on('show:after', _.bind(this.onComboOpen, this, true)); @@ -470,6 +472,7 @@ define([ case 0: this.toolbar.btnMarkers.toggle(true, true); this.toolbar.mnuMarkersPicker.selectByIndex(this._state.bullets.subtype, true); + this.toolbar.mnuListSettings.setDisabled(this._state.bullets.subtype<0); break; case 1: var idx = 0; @@ -1092,6 +1095,34 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, + onMarkerSettingsClick: function() { + var me = this, + props; + + var selectedElements = me.api.getSelectedElements(); + if (selectedElements && _.isArray(selectedElements)) { + for (var i = 0; i< selectedElements.length; i++) { + if (Asc.c_oAscTypeSelectElement.Paragraph == selectedElements[i].get_ObjectType()) { + props = selectedElements[i].get_ObjectValue(); + break; + } + } + } + if (props) { + (new PE.Views.ListSettingsDialog({ + props: props, + handler: function(result, value) { + if (result == 'ok') { + if (me.api) { + me.api.paraApply(value); + } + } + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); + } + }, + onComboBlur: function() { Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, @@ -1633,6 +1664,7 @@ define([ this.toolbar.btnNumbers.toggle(false, true); this.toolbar.mnuMarkersPicker.selectByIndex(0, true); + this.toolbar.mnuListSettings.setDisabled(true); this.toolbar.mnuNumbersPicker.selectByIndex(0, true); }, diff --git a/apps/presentationeditor/main/app/view/ListSettingsDialog.js b/apps/presentationeditor/main/app/view/ListSettingsDialog.js new file mode 100644 index 000000000..bf7a3838f --- /dev/null +++ b/apps/presentationeditor/main/app/view/ListSettingsDialog.js @@ -0,0 +1,213 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 + * + */ + +/** + * ListSettingsDialog.js + * + * Created by Julia Radzhabova on 30.10.2019 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/component/Window', + 'common/main/lib/component/MetricSpinner', + 'common/main/lib/component/ThemeColorPalette', + 'common/main/lib/component/ColorButton' +], function () { 'use strict'; + + PE.Views.ListSettingsDialog = Common.UI.Window.extend(_.extend({ + options: { + width: 230, + height: 156, + style: 'min-width: 230px;', + cls: 'modal-dlg', + split: false, + buttons: ['ok', 'cancel'] + }, + + initialize : function(options) { + _.extend(this.options, { + title: this.txtTitle + }, options || {}); + + this.template = [ + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
' + ].join(''); + + this.props = options.props; + this.options.tpl = _.template(this.template)(this.options); + + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.UI.Window.prototype.render.call(this); + + var me = this, + $window = this.getChild(); + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); + + this.spnSize = new Common.UI.MetricSpinner({ + el : $window.find('#id-dlg-list-size'), + step : 1, + width : 45, + value : 100, + defaultUnit : '', + maxValue : 400, + minValue : 25, + allowDecimal: false + }).on('change', function(field, newValue, oldValue, eOpts){ + if (me._changedProps) { + me._changedProps.asc_putBulletSize(field.getNumberValue()); + } + }); + + this.btnColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + additionalAlign: this.menuAddAlign, + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnColor.on('render:after', function(btn) { + me.colors = new Common.UI.ThemeColorPalette({ + el: $('#id-dlg-list-color-menu'), + transparent: false + }); + me.colors.on('select', _.bind(me.onColorsSelect, me)); + }); + this.btnColor.render($window.find('#id-dlg-list-color')); + $('#id-dlg-list-color-new').on('click', _.bind(this.addNewColor, this, this.colors)); + + this.menuAddAlign = function(menuRoot, left, top) { + var self = this; + if (!$window.hasClass('notransform')) { + $window.addClass('notransform'); + menuRoot.addClass('hidden'); + setTimeout(function() { + menuRoot.removeClass('hidden'); + menuRoot.css({left: left, top: top}); + self.options.additionalAlign = null; + }, 300); + } else { + menuRoot.css({left: left, top: top}); + self.options.additionalAlign = null; + } + }; + + this.afterRender(); + }, + + afterRender: function() { + this.updateThemeColors(); + this._setDefaults(this.props); + }, + + updateThemeColors: function() { + this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + }, + + addNewColor: function(picker, btn) { + picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color); + }, + + onColorsSelect: function(picker, color) { + this.btnColor.setColor(color); + if (this._changedProps) { + this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + }, + + _handleInput: function(state) { + if (this.options.handler) { + this.options.handler.call(this, state, this._changedProps); + } + this.close(); + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + onPrimary: function(event) { + this._handleInput('ok'); + return false; + }, + + _setDefaults: function (props) { + if (props) { + this.spnSize.setValue(props.asc_getBulletSize() || '', true); + var color = props.asc_getBulletColor(); + if (color) { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + color = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()}; + } else { + color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } else + color = 'transparent'; + this.btnColor.setColor(color); + if ( typeof(color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) { + this.colors.select(color,true); + isselected = true; + break; + } + } + if (!isselected) this.colors.clearSelection(); + } else + this.colors.select(color,true); + } + this._changedProps = new Asc.asc_CParagraphProperty(); + }, + + txtTitle: 'List Settings', + txtSize: 'Size', + txtColor: 'Color', + txtOfText: '% of text', + textNewColor: 'Add New Custom Color' + }, PE.Views.ListSettingsDialog || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/SlideSizeSettings.js b/apps/presentationeditor/main/app/view/SlideSizeSettings.js index 19ec636ca..2d82c2ea9 100644 --- a/apps/presentationeditor/main/app/view/SlideSizeSettings.js +++ b/apps/presentationeditor/main/app/view/SlideSizeSettings.js @@ -61,7 +61,7 @@ define([ this.template = [ '
', '
', - '', + '', '
', '
', '', @@ -77,7 +77,7 @@ define([ '', '
', '
', - '', + '', '
', '
', '
', diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 6184c11ba..8cc57da85 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1062,7 +1062,12 @@ define([ new Common.UI.Menu({ style: 'min-width: 139px', items: [ - {template: _.template('')} + {template: _.template('')}, + this.mnuListSettings = new Common.UI.MenuItem({ + caption: this.textListSettings, + disabled: (this.mnuMarkersPicker.conf.index || 0)==0, + value: 'settings' + }) ] }) ); @@ -1665,7 +1670,8 @@ define([ tipDateTime: 'Insert current date and time', capBtnInsHeader: 'Header/Footer', capBtnSlideNum: 'Slide Number', - capBtnDateTime: 'Date & Time' + capBtnDateTime: 'Date & Time', + textListSettings: 'List Settings' } }()), PE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index c243b71c8..e4d4949e3 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -1285,6 +1285,11 @@ "PE.Views.LeftMenu.tipTitles": "Titles", "PE.Views.LeftMenu.txtDeveloper": "DEVELOPER MODE", "PE.Views.LeftMenu.txtTrial": "TRIAL MODE", + "PE.Views.ListSettingsDialog.txtTitle": "List Settings", + "PE.Views.ListSettingsDialog.txtSize": "Size", + "PE.Views.ListSettingsDialog.txtColor": "Color", + "PE.Views.ListSettingsDialog.txtOfText": "% of text", + "PE.Views.ListSettingsDialog.textNewColor": "Add New Custom Color", "PE.Views.ParagraphSettings.strLineHeight": "Line Spacing", "PE.Views.ParagraphSettings.strParagraphSpacing": "Paragraph Spacing", "PE.Views.ParagraphSettings.strSpacingAfter": "After", @@ -1789,5 +1794,6 @@ "PE.Views.Toolbar.txtScheme8": "Flow", "PE.Views.Toolbar.txtScheme9": "Foundry", "PE.Views.Toolbar.txtSlideAlign": "Align to Slide", - "PE.Views.Toolbar.txtUngroup": "Ungroup" + "PE.Views.Toolbar.txtUngroup": "Ungroup", + "PE.Views.Toolbar.textListSettings": "List Settings" } \ No newline at end of file