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

[DE] Show preview for list levels

Browse source
This commit is contained in:
Julia Radzhabova 2021-02-03 10:32:18 +03:00
parent 254a57b834
commit f667823e07
3 changed files with 75 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -293,6 +293,12 @@ define([
toolbar.mnuMarkerSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 0));
toolbar.mnuNumberSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 1));
toolbar.mnuMultilevelSettings.on('click', _.bind(this.onMarkerSettingsClick, this, 2));
toolbar.mnuMarkerChangeLevel && toolbar.mnuMarkerChangeLevel.menu &&
toolbar.mnuMarkerChangeLevel.menu.on('show:after', _.bind(this.onChangeLevelShowAfter, this, 0));
toolbar.mnuMarkerChangeLevel.menu.on('item:click', _.bind(this.onChangeLevelClick, this, 0));
toolbar.mnuNumberChangeLevel && toolbar.mnuNumberChangeLevel.menu &&
toolbar.mnuNumberChangeLevel.menu.on('show:after', _.bind(this.onChangeLevelShowAfter, this, 1));
toolbar.mnuNumberChangeLevel.menu.on('item:click', _.bind(this.onChangeLevelClick, this, 1));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
toolbar.btnParagraphColor.on('click', _.bind(this.onBtnParagraphColor, this));
@ -516,6 +522,7 @@ define([
this.toolbar.mnuMarkersPicker.deselectAll(true);
this.toolbar.mnuMultilevelPicker.deselectAll(true);
this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(this._state.bullets.subtype<0);
this.toolbar.mnuMarkerChangeLevel && this.toolbar.mnuMarkerChangeLevel.setDisabled(this._state.bullets.subtype<0);
this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(this._state.bullets.subtype<0);
break;
case 1:
@ -550,6 +557,7 @@ define([
this.toolbar.mnuNumbersPicker.deselectAll(true);
this.toolbar.mnuMultilevelPicker.deselectAll(true);
this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(idx==0);
this.toolbar.mnuNumberChangeLevel && this.toolbar.mnuNumberChangeLevel.setDisabled(idx==0);
this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(idx==0);
break;
case 2:
@ -1396,6 +1404,24 @@ define([
}
},
onChangeLevelShowAfter: function(type, menu) {
var me = this;
var listId = me.api.asc_GetCurrentNumberingId(),
level = me.api.asc_GetCurrentNumberingLvl(),
props = (listId !== null) ? me.api.asc_GetNumberingPr(listId) : null;
if (props) {
this.api.SetDrawImagePreviewBulletChangeListLevel(menu.options.previewIds, props);
}
},
onChangeLevelClick: function(type, menu, item) {
if (this.api) {
// this.api.changeListLevel(item.options.value);
}
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onLineSpaceToggle: function(menu, item, state, e) {
if (!!state) {
this._state.linespace = undefined;
@ -2355,6 +2381,8 @@ define([
this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(true);
this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(true);
this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(true);
this.toolbar.mnuMarkerChangeLevel && this.toolbar.mnuMarkerChangeLevel.setDisabled(true);
this.toolbar.mnuNumberChangeLevel && this.toolbar.mnuNumberChangeLevel.setDisabled(true);
},
_getApiTextSize: function () {

35
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -1694,13 +1694,28 @@ define([
// set menus
var me = this;
var levelTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div id="<%= options.previewId %>" class="menu-list-preview" style="width: 160px; height: 30px;"></div></a>');
var items = [], ids = [];
for (var i=0; i<9; i++) {
ids.push('id-toolbar-menu-markers-level-' + i);
items.push({template: levelTemplate, previewId: ids[i], level: i });
}
this.btnMarkers.setMenu(
new Common.UI.Menu({
cls: 'shifted-left',
style: 'min-width: 139px',
items: [
{template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>')},
this.mnuMarkerChangeLevel = new Common.UI.MenuItem({
caption: this.textChangeLevel,
style: 'padding-right:20px;',
menu: new Common.UI.Menu({
cls: 'list-settings-level',
menuAlign: 'tl-tr',
items: items,
previewIds: ids
})
}),
this.mnuMarkerSettings = new Common.UI.MenuItem({
caption: this.textListSettings,
disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@ -1710,11 +1725,26 @@ define([
})
);
items = [], ids = [];
for (var i=0; i<9; i++) {
ids.push('id-toolbar-menu-numbering-level-' + i);
items.push({template: levelTemplate, previewId: ids[i], level: i });
}
this.btnNumbers.setMenu(
new Common.UI.Menu({
cls: 'shifted-left',
items: [
{template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>')},
this.mnuNumberChangeLevel = new Common.UI.MenuItem({
caption: this.textChangeLevel,
style: 'padding-right:20px;',
menu: new Common.UI.Menu({
cls: 'list-settings-level',
menuAlign: 'tl-tr',
items: items,
previewIds: ids
})
}),
this.mnuNumberSettings = new Common.UI.MenuItem({
caption: this.textListSettings,
disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@ -2416,7 +2446,8 @@ define([
mniLowerCase: 'lowercase',
mniUpperCase: 'UPPERCASE',
mniCapitalizeWords: 'Capitalize Each Word',
mniToggleCase: 'tOGGLE cASE'
mniToggleCase: 'tOGGLE cASE',
textChangeLevel: 'Change List Level'
}
})(), DE.Views.Toolbar || {}));
});

15
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -241,4 +241,17 @@
z-index: @zindex-dropdown - 20;
background-color: @gray-light;
border: 1px solid @gray;
}
}
.dropdown-menu.list-settings-level {
.menu-list-preview {
.box-shadow(0 0 0 1px @gray);
}
a:hover {
background-color: transparent;
.menu-list-preview {
.box-shadow(0 0 0 2px @primary);
}
}
}