Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Add settings for marker list

Browse source
This commit is contained in:
Julia Radzhabova 2019-10-30 14:01:02 +03:00
parent 302199918d
commit 25715efe9b
5 changed files with 263 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -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);
},

213
apps/presentationeditor/main/app/view/ListSettingsDialog.js Normal file
View file

@ -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 = [
'<div class="box">',
'<div class="input-row">',
'<label class="text" style="width: 70px;">' + this.txtSize + '</label><div id="id-dlg-list-size"></div><label class="text" style="margin-left: 10px;">' + this.txtOfText + '</label>',
'</div>',
'<div style="margin-top: 10px;">',
'<label class="text" style="width: 70px;">' + this.txtColor + '</label><div id="id-dlg-list-color" style="display: inline-block;"></div>',
'</div>',
'</div>'
].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('<div id="id-dlg-list-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="id-dlg-list-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
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 || {}))
});

4
apps/presentationeditor/main/app/view/SlideSizeSettings.js
View file

@ -61,7 +61,7 @@ define([
this.template = [
'<div class="box" style="height: 148px;">',
'<div class="input-row">',
'<label class="text columns-text" style="font-weight: bold;">' + this.textSlideSize + '</label>',
'<label class="text" style="font-weight: bold;">' + this.textSlideSize + '</label>',
'</div>',
'<div id="slide-size-combo" class="" style="margin-bottom: 10px;"></div>',
'<table cols="2" style="width: 100%;margin-bottom: 7px;">',
@ -77,7 +77,7 @@ define([
'</tr>',
'</table>',
'<div class="input-row">',
'<label class="text columns-text" style="font-weight: bold;">' + this.textSlideOrientation + '</label>',
'<label class="text" style="font-weight: bold;">' + this.textSlideOrientation + '</label>',
'</div>',
'<div id="slide-orientation-combo" class="" style="margin-bottom: 10px;"></div>',
'</div>',

10
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1062,7 +1062,12 @@ define([
new Common.UI.Menu({
style: 'min-width: 139px',
items: [
{template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 5px;"></div>')}
{template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 16px;"></div>')},
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 || {}));
});

8
apps/presentationeditor/main/locale/en.json
View file

@ -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"
}