[DE] Add settings and close buttons in page thumbnails

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

@@ -772,12 +772,17 @@ define([
 
         onMenuChange: function (value) {
             if ('hide' === value) {
-                if (this.leftMenu.btnComments.isActive() && this.api) {
+                if (this.api) {
-                    this.leftMenu.btnComments.toggle(false);
+                    if (this.leftMenu.btnComments.isActive()) {
-                    this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
+                        this.leftMenu.btnComments.toggle(false);
+                        this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
 
-                    // focus to sdk
+                        // focus to sdk
-                    this.api.asc_enableKeyEvents(true);
+                        this.api.asc_enableKeyEvents(true);
+                    } else if (this.leftMenu.btnThumbnails.isActive()) {
+                        this.leftMenu.btnThumbnails.toggle(false);
+                        this.leftMenu.onBtnMenuClick(this.leftMenu.btnThumbnails);
+                    }
                 }
             }
         },

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

@@ -49,9 +49,13 @@ define([
         storeThumbnails: undefined,
         template: _.template([
             '<div id="thumbnails-box" class="layout-ct vbox">',
-            '<div id="thumbnails-header"><label><%= scope.textPageThumbnails %></label></div>',
+                '<div id="thumbnails-header">',
-            '<div id="thumbnails-list" class="">',
+                    '<label><%= scope.textPageThumbnails %></label>',
-            '</div>',
+                    '<div id="thumbnails-btn-close"></div>',
+                    '<div id="thumbnails-btn-settings"></div>',
+                '</div>',
+                '<div id="thumbnails-list">',
+                '</div>',
             '</div>'
         ].join('')),
 
@@ -61,12 +65,62 @@ define([
         },
 
         render: function(el) {
-            el = el || this.el;
+            if (!this.rendered) {
-            $(el).html(this.template({scope: this}));
+                el = el || this.el;
-            this.$el = $(el);
+                $(el).html(this.template({scope: this}));
+                this.$el = $(el);
 
+                this.buttonClose = new Common.UI.Button({
+                    parentEl: $('#thumbnails-btn-close', this.$el),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-close',
+                    hint: this.textClosePanel
+                });
+                this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
 
+                var sizeSettingTemplate = _.template('<div id="thumbnails-size">' +
+                    '<label><%= caption %></label>' +
+                    '<div class="thumbnails-sld-box">' +
+                        '<span class="menu-item-icon menu__icon thumbnail-small btn-zoomdown"></span>' +
+                        '<div id="sld-thumbnails-size"></div>' +
+                        '<span class="menu-item-icon menu__icon thumbnail-big btn-zoomup"></span>' +
+                    '</div>',
+                    '</div>');
 
+                this.buttonSettings = new Common.UI.Button({
+                    parentEl: $('#thumbnails-btn-settings', this.$el),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-settings',
+                    hint: this.textThumbnailsSettings,
+                    menu: new Common.UI.Menu({
+                        menuAlign: 'tr-br',
+                        style: 'min-width: 200px;',
+                        items: [
+                            {
+                                caption: this.textThumbnailsSize,
+                                template: sizeSettingTemplate,
+                                toggleGroup: 'menuThumbnails'
+                            },
+                            {caption: '--'},
+                            {
+                                caption: this.textHighlightVisiblePart,
+                                checkable: true,
+                                toggleGroup: 'menuThumbnails'
+                            }
+                        ]
+                    })
+                });
+            }
+
+            this.sldrthumbnailsSize = new Common.UI.SingleSlider({
+                el: $('#sld-thumbnails-size'),
+                width: 120,
+                minValue: 0,
+                maxValue: 100,
+                value: 50
+            });
+
+            this.rendered = true;
             this.trigger('render:after', this);
             return this;
         },
@@ -84,7 +138,15 @@ define([
         ChangeSettings: function(props) {
         },
 
-        textPageThumbnails: 'Page Thumbnails'
+        onClickClosePanel: function() {
+            Common.NotificationCenter.trigger('leftmenu:change', 'hide');
+        },
+
+        textPageThumbnails: 'Page Thumbnails',
+        textClosePanel: 'Close page thumbnails',
+        textThumbnailsSettings: 'Thumbnails settings',
+        textThumbnailsSize: 'Thumbnails size',
+        textHighlightVisiblePart: 'Highlight visible part of page'
 
     }, DE.Views.PageThumbnails || {}));
 });

apps/documenteditor/main/resources/less/thumbnails.less

@@ -3,7 +3,13 @@
     position: relative;
     border-collapse: collapse;
 
+    #thumbnails-list {
+        height: 100%;
+        overflow: hidden;
+    }
+
     #thumbnails-header {
+        position: absolute;
         height: 45px;
         left: 0;
         top: 0;
@@ -18,5 +24,37 @@
             font-weight: bold;
             margin-top: 2px;
         }
+
+        #thumbnails-btn-close {
+            float:right;
+            margin-left: 4px;
+        }
+
+        #thumbnails-btn-settings {
+            float:right;
+        }
+
+        #thumbnails-size {
+            label {
+                font-size: 11px;
+                font-weight: normal;
+                margin: 0;
+                padding-left: 8px;
+                line-height: 25px;
+            }
+            .thumbnails-sld-box {
+                height: 25px;
+                padding-left: 8px;
+                .menu-item-icon {
+                    position: relative;
+                    float: none;
+                    margin: 0;
+                }
+                #sld-thumbnails-size {
+                    display: inline-block;
+                    margin: 0 10px;
+                }
+            }
+        }
   }
 }