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

apps/documenteditor/main/app/controller/LeftMenu.js

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

apps/documenteditor/main/app/controller/Navigation.js

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

apps/documenteditor/main/app/view/LeftMenu.js

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

apps/documenteditor/main/app/view/Navigation.js

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

apps/documenteditor/main/app/view/ViewTab.js

@@ -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',

apps/documenteditor/main/locale/en.json

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

apps/documenteditor/main/resources/less/navigation.less

@@ -5,17 +5,23 @@
 
     #navigation-header {
         position: absolute;
-        height: 38px;
+        height: 45px;
         left: 0;
         top: 0;
         width: 100%;
-        .font-weight-bold();
+        padding: 12px;
-        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: 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;
         }