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

Merge branch 'feature/outline-settings-menu' into develop

Browse source
This commit is contained in:
Julia Radzhabova 2022-04-29 16:29:50 +03:00
parent 8e1096aa67 afbcbcac63
commit ea6f831a8e
7 changed files with 196 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/documenteditor/main/app/controller/LeftMenu.js
View file

@ -816,6 +816,11 @@ define([
this.leftMenu.panelThumbnails.hide();
this.leftMenu.onBtnMenuClick(this.leftMenu.btnThumbnails);
}
else if (this.leftMenu.btnNavigation.isActive()) {
this.leftMenu.btnNavigation.toggle(false);
this.leftMenu.panelNavigation.hide();
this.leftMenu.onBtnMenuClick(this.leftMenu.btnNavigation);
}
}
}
},

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

@ -118,6 +118,10 @@ 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));
panelNavigation.btnClose.on('click', _.bind(this.onClickClosePanel, this));
var viewport = this.getApplication().getController('Viewport').getView('Viewport');
viewport.hlayout.on('layout:resizedrag', function () {
@ -245,7 +249,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);
@ -265,11 +268,32 @@ define([
this.panelNavigation.viewNavigationList.collapseAll();
}
},
onClickClosePanel: function() {
Common.NotificationCenter.trigger('leftmenu:change', 'hide');
},
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;
},

3
apps/documenteditor/main/app/view/LeftMenu.js
View file

@ -154,7 +154,7 @@ define([
this.btnNavigation = new Common.UI.Button({
el: $markup.elementById('#left-btn-navigation'),
hint: this.tipNavigation,
hint: this.tipOutline,
enableToggle: true,
disabled: true,
toggleGroup: 'leftMenuGroup'
@ -501,6 +501,7 @@ define([
txtTrial: 'TRIAL MODE',
txtTrialDev: 'Trial Developer Mode',
tipNavigation: 'Navigation',
tipOutline: 'Headings',
txtLimit: 'Limit Access'
}, DE.Views.LeftMenu || {}));
});

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

@ -49,7 +49,11 @@ define([
storeNavigation: undefined,
template: _.template([
'<div id="navigation-box" class="layout-ct vbox">',
// '<div id="navigation-header"><%= scope.strNavigate %></div>',
'<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="">',
'</div>',
'</div>'
@ -63,8 +67,97 @@ define([
render: function(el) {
el = el || this.el;
$(el).html(this.template({scope: this}));
var isWrap = Common.localStorage.getBool("de-outline-wrap",true);
var fontSizeClass = Common.localStorage.getItem("de-outline-fontsize");
if(!fontSizeClass) fontSizeClass = 'medium';
this.$el = $(el);
this.btnClose = new Common.UI.Button({
parentEl: $('#navigation-btn-close', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-close',
hint: this.txtClosePanel,
});
this.btnSettings = new Common.UI.Button({
parentEl: $('#navigation-btn-settings', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-settings',
hint: this.txtSettings,
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-tr',
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-tr',
style: 'min-width: auto;',
items: [
{
caption: this.txtSmall,
checkable: true,
value: 'small',
checked: fontSizeClass == 'small',
toggleGroup: 'fontsize'
},
{
caption: this.txtMedium,
checkable: true,
value: 'medium',
checked: fontSizeClass == 'medium',
toggleGroup: 'fontsize'
},
{
caption: this.txtLarge,
checkable: true,
checked: fontSizeClass == 'large',
value: 'large',
toggleGroup: 'fontsize'
}
]})
},
{
caption: '--',
visible: true
},
{
caption: this.txtWrapHeadings,
checkable: true,
checked: isWrap,
value: 'wrap'
}
]
})
});
this.btnSettingsMenu = this.btnSettings.menu;
this.viewNavigationList = new Common.UI.TreeView({
el: $('#navigation-list'),
store: this.storeNavigation,
@ -75,7 +168,10 @@ define([
delayRenderTips: true,
minScrollbarLength: 25
});
this.viewNavigationList.cmpEl.off('click');
this.viewNavigationList.$el.addClass( fontSizeClass);
isWrap && this.viewNavigationList.$el.addClass( 'wrap');
this.navigationMenu = new Common.UI.Menu({
cls: 'shifted-right',
items: [{
@ -137,7 +233,6 @@ define([
}
]
});
this.trigger('render:after', this);
return this;
},
@ -152,6 +247,21 @@ define([
this.fireEvent('hide', this );
},
changeWrapHeadings: function(){
Common.localStorage.setBool("de-outline-wrap", this.btnSettingsMenu.items[6].checked);
if(!this.btnSettingsMenu.items[6].checked)
this.viewNavigationList.$el.removeClass('wrap');
else
this.viewNavigationList.$el.addClass('wrap');
},
changeFontSize: function (value){
Common.localStorage.setItem("de-outline-fontsize", value);
this.viewNavigationList.$el.removeClass();
this.viewNavigationList.$el.addClass( value);
this.changeWrapHeadings();
},
ChangeSettings: function(props) {
},
@ -166,7 +276,15 @@ 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: "Headings",
txtWrapHeadings: "Wrap long headings",
txtFontSize: "Font size",
txtSmall: "Small",
txtMedium: "Medium",
txtLarge:"Large",
txtClosePanel: "Close headings",
txtSettings: "Headings settings"
}, DE.Views.Navigation || {}));
});

3
apps/documenteditor/main/app/view/ViewTab.js
View file

@ -135,7 +135,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-menu-navigation',
lock: [_set.lostConnect, _set.disableOnStart],
caption: this.textNavigation,
caption: this.textOutline,
enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom',
@ -305,6 +305,7 @@ define([
},
textNavigation: 'Navigation',
textOutline: 'Headings',
textZoom: 'Zoom',
textFitToPage: 'Fit To Page',
textFitToWidth: 'Fit To Width',

10
apps/documenteditor/main/locale/en.json
View file

@ -2022,6 +2022,7 @@
"DE.Views.LeftMenu.tipChat": "Chat",
"DE.Views.LeftMenu.tipComments": "Comments",
"DE.Views.LeftMenu.tipNavigation": "Navigation",
"DE.Views.LeftMenu.tipOutline": "Headings",
"DE.Views.LeftMenu.tipPlugins": "Plugins",
"DE.Views.LeftMenu.tipSearch": "Search",
"DE.Views.LeftMenu.tipSupport": "Feedback & Support",
@ -2146,6 +2147,8 @@
"DE.Views.MailMergeSettings.txtPrev": "To previous record",
"DE.Views.MailMergeSettings.txtUntitled": "Untitled",
"DE.Views.MailMergeSettings.warnProcessMailMerge": "Starting merge failed",
"DE.Views.Navigation.strNavigate": "Headings",
"DE.Views.Navigation.txtClosePanel": "Close headings",
"DE.Views.Navigation.txtCollapse": "Collapse all",
"DE.Views.Navigation.txtDemote": "Demote",
"DE.Views.Navigation.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.",
@ -2153,11 +2156,17 @@
"DE.Views.Navigation.txtEmptyViewer": "There are no headings in the document.",
"DE.Views.Navigation.txtExpand": "Expand all",
"DE.Views.Navigation.txtExpandToLevel": "Expand to level",
"DE.Views.Navigation.txtFontSize": "Font size",
"DE.Views.Navigation.txtHeadingAfter": "New heading after",
"DE.Views.Navigation.txtHeadingBefore": "New heading before",
"DE.Views.Navigation.txtLarge":"Large",
"DE.Views.Navigation.txtMedium": "Medium",
"DE.Views.Navigation.txtNewHeading": "New subheading",
"DE.Views.Navigation.txtPromote": "Promote",
"DE.Views.Navigation.txtSelect": "Select content",
"DE.Views.Navigation.txtSettings": "Headings settings",
"DE.Views.Navigation.txtSmall": "Small",
"DE.Views.Navigation.txtWrapHeadings": "Wrap long headings",
"DE.Views.NoteSettingsDialog.textApply": "Apply",
"DE.Views.NoteSettingsDialog.textApplyTo": "Apply changes to",
"DE.Views.NoteSettingsDialog.textContinue": "Continuous",
@ -2851,6 +2860,7 @@
"DE.Views.ViewTab.textFitToWidth": "Fit To Width",
"DE.Views.ViewTab.textInterfaceTheme": "Interface theme",
"DE.Views.ViewTab.textNavigation": "Navigation",
"DE.Views.ViewTab.textOutline": "Headings",
"DE.Views.ViewTab.textRulers": "Rulers",
"DE.Views.ViewTab.textStatusBar": "Status Bar",
"DE.Views.ViewTab.textZoom": "Zoom",

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

@ -5,17 +5,23 @@
#navigation-header {
position: absolute;
height: 38px;
height: 45px;
left: 0;
top: 0;
width: 100%;
.font-weight-bold();
padding: 10px 12px;
padding: 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: 45px;
height: 100%;
overflow: hidden;
font-size: 12px;
@ -30,14 +36,34 @@
}
}
}
.tree-item {
min-height: 25px;
.name {
padding: 5px 0;
}
}
}
&.small{
font-size: 10px;
}
&.medium{
font-size: 12px;
.name {
padding: 4px 0;
}
}
&.large{
font-size: 14px;
}
.name.not-header {
font-style: italic;
}
.name {
&.wrap .name{
white-space: pre-wrap;
}
.name {
word-break: break-word;
max-height: 350px;
}