add header

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

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

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

@@ -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-header" className="">',
-                '<div id="navigation-list" class="">',
+                '<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 || {}));
 });

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

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