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

add header

Browse source
This commit is contained in:
OVSharova 2022-04-14 04:00:17 +03:00
parent b58e49aea1
commit 94f19901a1
3 changed files with 150 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/documenteditor/main/app/controller/Navigation.js
View file

@ -114,6 +114,9 @@ define([
panelNavigation.viewNavigationList.on('item:add', _.bind(this.onItemAdd, this));
panelNavigation.navigationMenu.on('item:click', _.bind(this.onMenuItemClick, this));
panelNavigation.navigationMenu.items[11].menu.on('item:click', _.bind(this.onMenuLevelsItemClick, this));
panelNavigation.btnSettingsMenu.on('item:click', _.bind(this.onMenuSettingsItemClick, this));
panelNavigation.btnSettingsMenu.items[2].menu.on('item:click', _.bind(this.onMenuLevelsItemClick, this));
panelNavigation.btnSettingsMenu.items[4].menu.on('item:click', _.bind(this.onMenuFontSizeClick, this));
var viewport = this.getApplication().getController('Viewport').getView('Viewport');
viewport.hlayout.on('layout:resizedrag', function () {
@ -241,8 +244,6 @@ define([
onMenuItemClick: function (menu, item) {
if (!this._navigationObject && !this._viewerNavigationObject) return;
var index = parseInt(menu.cmpEl.attr('data-value'));
if (item.value == 'promote') {
this._navigationObject.promote(index);
} else if (item.value == 'demote') {
@ -261,11 +262,28 @@ define([
this.panelNavigation.viewNavigationList.collapseAll();
}
},
onMenuSettingsItemClick: function (menu, item){
switch (item.value){
case 'expand':
this.panelNavigation.viewNavigationList.expandAll();
break;
case 'collapse':
this.panelNavigation.viewNavigationList.collapseAll();
break;
case 'wrap':
this.panelNavigation.changeWrapHeadings();
break;
}
},
onMenuLevelsItemClick: function (menu, item) {
this.panelNavigation.viewNavigationList.expandToLevel(item.value-1);
},
onMenuFontSizeClick: function (menu, item){
this.panelNavigation.changeFontSize(item.value);
},
SetDisabled: function(state) {
this._isDisabled = state;
},

113
apps/documenteditor/main/app/view/Navigation.js
View file

@ -49,8 +49,12 @@ define([
storeNavigation: undefined,
template: _.template([
'<div id="navigation-box" class="layout-ct vbox">',
// '<div id="navigation-header"><%= scope.strNavigate %></div>',
'<div id="navigation-list" class="">',
'<div id="navigation-header" className="">',
'<label><%= scope.strNavigate%></label>',
'<div id="navigation-btn-close" style="float:right;margin-left: 4px;"></div>',
'<div id="navigation-btn-settings" style="float:right;"></div>',
'</div>',
'<div id="navigation-list" class="medium">',
'</div>',
'</div>'
].join('')),
@ -64,6 +68,90 @@ define([
el = el || this.el;
$(el).html(this.template({scope: this}));
this.$el = $(el);
this.fontSizeClass = 'medium';
this.btnClose = new Common.UI.Button({
parentEl: $('#navigation-btn-close', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-close',
hint: this.textClosePanel
});
this.btnSettings = new Common.UI.Button({
parentEl: $('#navigation-btn-settings', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-settings',
hint: this.textSort,
menu: new Common.UI.Menu({
menuAlign: 'tr-br',
style: 'min-width: auto;',
items: [
{
caption: this.txtExpand,
value: 'expand',
iconCls : 'menu__icon expand-all'
},
{
caption: this.txtCollapse,
value: 'collapse',
iconCls : 'menu__icon collapse-all'
},
{
caption: this.txtExpandToLevel,
value: 'expand-level',
menu: new Common.UI.Menu({
menuAlign: 'tl-br',
style: 'min-width: auto;',
items: [{ caption : '1', value: 1 }, { caption : '2', value: 2 }, { caption : '3', value: 3 },
{ caption : '4', value: 4 }, { caption : '5', value: 5 }, { caption : '6', value: 6 },
{ caption : '7', value: 7 }, { caption : '8', value: 8 }, { caption : '9', value: 9 }]})
},
{
caption: '--',
visible: true
},
{
caption: this.txtFontSize,
value: 'font-size',
menu: new Common.UI.Menu({
menuAlign: 'tl-br',
style: 'min-width: auto;',
items: [
{
caption: this.txtSmall,
checkable: true,
value: 'small',
toggleGroup: 'fontsize'
},
{
caption: this.txtMedium,
checkable: true,
value: 'medium',
checked: true,
toggleGroup: 'fontsize'
},
{
caption: this.txtLarge,
checkable: true,
value: 'large',
toggleGroup: 'fontsize'
}
]})
},
{
caption: '--',
visible: true
},
{
caption: this.txtWrapHeadings,
checkable: true,
value: 'wrap'
}
]
})
});
this.btnSettingsMenu = this.btnSettings.menu;
this.viewNavigationList = new Common.UI.TreeView({
el: $('#navigation-list'),
@ -75,6 +163,7 @@ define([
delayRenderTips: true,
minScrollbarLength: 25
});
this.viewNavigationList.cmpEl.off('click');
this.navigationMenu = new Common.UI.Menu({
cls: 'shifted-right',
@ -152,6 +241,17 @@ define([
this.fireEvent('hide', this );
},
changeWrapHeadings: function(){
if(!this.btnSettingsMenu.items[6].checked)
this.viewNavigationList.$el.removeClass('wrap');
else
this.viewNavigationList.$el.addClass('wrap');
},
changeFontSize: function (value){
this.viewNavigationList.$el.removeClass();
this.viewNavigationList.$el.addClass( value);
this.changeWrapHeadings();
},
ChangeSettings: function(props) {
},
@ -166,7 +266,12 @@ define([
txtExpandToLevel: 'Expand to level...',
txtEmpty: 'There are no headings in the document.<br>Apply a heading style to the text so that it appears in the table of contents.',
txtEmptyItem: 'Empty Heading',
txtEmptyViewer: 'There are no headings in the document.'
txtEmptyViewer: 'There are no headings in the document.',
strNavigate: "Outline",
txtWrapHeadings: "Wrap long headings",
txtFontSize: "Font size",
txtSmall: "Small",
txtMedium: "Medium",
txtLarge:"Large"
}, DE.Views.Navigation || {}));
});

25
apps/documenteditor/main/resources/less/navigation.less
View file

@ -5,17 +5,23 @@
#navigation-header {
position: absolute;
height: 38px;
height: 40px;
left: 0;
top: 0;
width: 100%;
.font-weight-bold();
padding: 10px 12px;
overflow: hidden;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
label {
font-size: 12px;
.font-weight-bold();
margin-top: 2px;
}
}
#navigation-list {
padding-top: 40px;
height: 100%;
overflow: hidden;
font-size: 12px;
@ -31,13 +37,24 @@
}
}
}
&.small{
font-size: 10px;
}
&.medium{
font-size: 12px;
}
&.large{
font-size: 14px;
}
.name.not-header {
font-style: italic;
}
.name {
&.wrap .name{
white-space: pre-wrap;
}
.name {
word-break: break-all;
max-height: 350px;
}