[DE] Show settings for numbered list

This commit is contained in:
Julia Radzhabova 2019-12-17 14:52:30 +03:00
parent 969a248690
commit 8a3edb0239
3 changed files with 58 additions and 11 deletions

View file

@ -287,6 +287,7 @@ define([
toolbar.mnuNumbersPicker.on('item:click', _.bind(this.onSelectBullets, this, toolbar.btnNumbers)); toolbar.mnuNumbersPicker.on('item:click', _.bind(this.onSelectBullets, this, toolbar.btnNumbers));
toolbar.mnuMultilevelPicker.on('item:click', _.bind(this.onSelectBullets, this, toolbar.btnMultilevels)); toolbar.mnuMultilevelPicker.on('item:click', _.bind(this.onSelectBullets, this, toolbar.btnMultilevels));
toolbar.mnuMarkerSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 0)); toolbar.mnuMarkerSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 0));
toolbar.mnuNumberSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 1));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this)); toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this)); toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
toolbar.btnParagraphColor.on('click', _.bind(this.onBtnParagraphColor, this)); toolbar.btnParagraphColor.on('click', _.bind(this.onBtnParagraphColor, this));
@ -500,10 +501,14 @@ define([
else else
this.toolbar.mnuMarkersPicker.deselectAll(true); this.toolbar.mnuMarkersPicker.deselectAll(true);
this.toolbar.mnuMultilevelPicker.deselectAll(true); this.toolbar.mnuMultilevelPicker.deselectAll(true);
this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(this._state.bullets.subtype<0);
break; break;
case 1: case 1:
var idx = 0; var idx;
switch(this._state.bullets.subtype) { switch(this._state.bullets.subtype) {
case 0:
idx = 0;
break;
case 1: case 1:
idx = 4; idx = 4;
break; break;
@ -527,11 +532,12 @@ define([
break; break;
} }
this.toolbar.btnNumbers.toggle(true, true); this.toolbar.btnNumbers.toggle(true, true);
if (this._state.bullets.subtype!==undefined) if (idx!==undefined)
this.toolbar.mnuNumbersPicker.selectByIndex(idx, true); this.toolbar.mnuNumbersPicker.selectByIndex(idx, true);
else else
this.toolbar.mnuNumbersPicker.deselectAll(true); this.toolbar.mnuNumbersPicker.deselectAll(true);
this.toolbar.mnuMultilevelPicker.deselectAll(true); this.toolbar.mnuMultilevelPicker.deselectAll(true);
this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(idx==0);
break; break;
case 2: case 2:
this.toolbar.btnMultilevels.toggle(true, true); this.toolbar.btnMultilevels.toggle(true, true);
@ -1326,11 +1332,13 @@ define([
var listId = me.api.asc_GetCurrentNumberingId(), var listId = me.api.asc_GetCurrentNumberingId(),
level = me.api.asc_GetCurrentNumberingLvl(), level = me.api.asc_GetCurrentNumberingLvl(),
props = (listId !== null) ? me.api.asc_GetNumberingPr(listId).get_Lvl(level) : null; props = (listId !== null) ? me.api.asc_GetNumberingPr(listId).get_Lvl(level) : null;
if (props && props.get_Format() == Asc.c_oAscNumberingFormat.Bullet) { if (props) {
var type = props.get_Format();
(new DE.Views.BulletSettingsDialog({ (new DE.Views.BulletSettingsDialog({
api: me.api, api: me.api,
props: props, props: props,
level: level, level: level,
type: type,
interfaceLang: me.mode.lang, interfaceLang: me.mode.lang,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
@ -2207,6 +2215,8 @@ define([
this.toolbar.mnuMarkersPicker.selectByIndex(0, true); this.toolbar.mnuMarkersPicker.selectByIndex(0, true);
this.toolbar.mnuNumbersPicker.selectByIndex(0, true); this.toolbar.mnuNumbersPicker.selectByIndex(0, true);
this.toolbar.mnuMultilevelPicker.selectByIndex(0, true); this.toolbar.mnuMultilevelPicker.selectByIndex(0, true);
this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(true);
this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(true);
}, },
_getApiTextSize: function () { _getApiTextSize: function () {

View file

@ -52,6 +52,7 @@ define([
DE.Views.BulletSettingsDialog = Common.UI.Window.extend(_.extend({ DE.Views.BulletSettingsDialog = Common.UI.Window.extend(_.extend({
options: { options: {
type: Asc.c_oAscNumberingFormat.Bullet,
width: 300, width: 300,
height: 334, height: 334,
style: 'min-width: 240px;', style: 'min-width: 240px;',
@ -61,6 +62,8 @@ define([
}, },
initialize : function(options) { initialize : function(options) {
this.type = (options.type!==undefined) ? options.type : Asc.c_oAscNumberingFormat.Bullet;
_.extend(this.options, { _.extend(this.options, {
title: this.txtTitle title: this.txtTitle
}, options || {}); }, options || {});
@ -70,8 +73,13 @@ define([
'<table cols="2" style="width: 100%;">', '<table cols="2" style="width: 100%;">',
'<tr>', '<tr>',
'<td style="padding-right: 5px;">', '<td style="padding-right: 5px;">',
'<% if (type == Asc.c_oAscNumberingFormat.Bullet) { %>',
'<label class="input-label">' + this.txtBullet + '</label>', '<label class="input-label">' + this.txtBullet + '</label>',
'<button type="button" class="btn btn-text-default" id="id-dlg-bullet-font" style="width: 100%;margin-bottom: 10px;">' + this.txtFont + '</button>', '<button type="button" class="btn btn-text-default" id="id-dlg-bullet-font" style="width: 100%;margin-bottom: 10px;">' + this.txtFont + '</button>',
'<% } else { %>',
'<label class="input-label">' + this.txtType + '</label>',
'<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
'<% } %>',
'</td>', '</td>',
'<td style="padding-left: 5px;">', '<td style="padding-left: 5px;">',
'<label class="input-label">' + this.txtAlign + '</label>', '<label class="input-label">' + this.txtAlign + '</label>',
@ -160,6 +168,27 @@ define([
}); });
this.btnEdit.on('click', _.bind(this.onEditBullet, this)); this.btnEdit.on('click', _.bind(this.onEditBullet, this));
this.cmbFormat = new Common.UI.ComboBox({
el : $window.find('#id-dlg-numbering-format'),
menuStyle : 'min-width: 100%;',
editable : false,
cls : 'input-group-nr',
data : [
{ displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal },
{ displayValue: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter },
{ displayValue: 'A, B, C,...', value: Asc.c_oAscNumberingFormat.UpperLetter },
{ displayValue: 'i, ii, iii,...', value: Asc.c_oAscNumberingFormat.LowerRoman },
{ displayValue: 'I, II, III,...', value: Asc.c_oAscNumberingFormat.UpperRoman }
]
});
this.cmbFormat.on('selected', _.bind(function (combo, record) {
if (this._changedProps)
this._changedProps.put_Format(record.value);
if (this.api) {
//this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps);
}
}, this));
this.cmbAlign = new Common.UI.ComboBox({ this.cmbAlign = new Common.UI.ComboBox({
el : $window.find('#id-dlg-bullet-align'), el : $window.find('#id-dlg-bullet-align'),
menuStyle : 'min-width: 100%;', menuStyle : 'min-width: 100%;',
@ -185,7 +214,7 @@ define([
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : [
{ value: -1, displayValue: this.textAuto }, { value: -1, displayValue: this.txtLikeText },
{ value: 8, displayValue: "8" }, { value: 8, displayValue: "8" },
{ value: 9, displayValue: "9" }, { value: 9, displayValue: "9" },
{ value: 10, displayValue: "10" }, { value: 10, displayValue: "10" },
@ -316,6 +345,7 @@ define([
this.bulletProps = {}; this.bulletProps = {};
if (props) { if (props) {
this.cmbAlign.setValue(props.get_Align() || ''); this.cmbAlign.setValue(props.get_Align() || '');
this.cmbFormat.setValue(props.get_Format() || '');
var textPr = props.get_TextPr(), var textPr = props.get_TextPr(),
text = props.get_Text(); text = props.get_Text();
if (text) { if (text) {
@ -356,7 +386,7 @@ define([
this._changedProps = props || new Asc.CAscNumberingLvl(this.level); this._changedProps = props || new Asc.CAscNumberingLvl(this.level);
}, },
txtTitle: 'Define New Bullet', txtTitle: 'List Settings',
txtSize: 'Size', txtSize: 'Size',
txtColor: 'Color', txtColor: 'Color',
textNewColor: 'Add New Custom Color', textNewColor: 'Add New Custom Color',
@ -367,6 +397,8 @@ define([
textCenter: 'Center', textCenter: 'Center',
textRight: 'Right', textRight: 'Right',
textAuto: 'Auto', textAuto: 'Auto',
textPreview: 'Preview' textPreview: 'Preview',
txtType: 'Type',
txtLikeText: 'Like a text'
}, DE.Views.BulletSettingsDialog || {})) }, DE.Views.BulletSettingsDialog || {}))
}); });

View file

@ -1608,10 +1608,10 @@ define([
new Common.UI.Menu({ new Common.UI.Menu({
style: 'min-width: 139px', style: 'min-width: 139px',
items: [ 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.mnuMarkerSettings = new Common.UI.MenuItem({ this.mnuMarkerSettings = new Common.UI.MenuItem({
caption: this.textBulletSettings, caption: this.textListSettings,
// disabled: (this.mnuMarkersPicker.conf.index || 0)==0, disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
value: 'settings' value: 'settings'
}) })
] ]
@ -1621,7 +1621,12 @@ define([
this.btnNumbers.setMenu( this.btnNumbers.setMenu(
new Common.UI.Menu({ new Common.UI.Menu({
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 5px;"></div>')} {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 16px;"></div>')},
this.mnuNumberSettings = new Common.UI.MenuItem({
caption: this.textListSettings,
disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
value: 'settings'
})
] ]
}) })
); );
@ -2295,7 +2300,7 @@ define([
tipInsertSymbol: 'Insert symbol', tipInsertSymbol: 'Insert symbol',
mniDrawTable: 'Draw Table', mniDrawTable: 'Draw Table',
mniEraseTable: 'Erase Table', mniEraseTable: 'Erase Table',
textBulletSettings: 'Define New Bullet' textListSettings: 'List Settings'
} }
})(), DE.Views.Toolbar || {})); })(), DE.Views.Toolbar || {}));
}); });