Merge pull request #1245 from ONLYOFFICE/feature/de-page-thumbnails

Feature/de page thumbnails

apps/documenteditor/main/app.js

@@ -153,6 +153,7 @@ require([
             'Links',
             'FormsTab',
             'Navigation',
+            'PageThumbnails',
             'RightMenu',
             'LeftMenu',
             'Main',
@@ -180,6 +181,7 @@ require([
                 'documenteditor/main/app/controller/FormsTab',
                 'documenteditor/main/app/controller/Links',
                 'documenteditor/main/app/controller/Navigation',
+                'documenteditor/main/app/controller/PageThumbnails',
                 'documenteditor/main/app/controller/RightMenu',
                 'documenteditor/main/app/controller/LeftMenu',
                 'documenteditor/main/app/controller/Main',

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

@@ -167,6 +167,7 @@ define([
             this.leftMenu.getMenu('file').setApi(api);
             if (this.mode.canUseHistory)
                 this.getApplication().getController('Common.Controllers.History').setApi(this.api).setMode(this.mode);
+            this.getApplication().getController('PageThumbnails').setApi(this.api).setMode(this.mode);
             return this;
         },
 
@@ -207,6 +208,13 @@ define([
 
             this.leftMenu.setOptionsPanel('navigation', this.getApplication().getController('Navigation').getView('Navigation'));
 
+            if (this.mode.canUseThumbnails) {
+                this.leftMenu.btnThumbnails.show();
+                this.leftMenu.setOptionsPanel('thumbnails', this.getApplication().getController('PageThumbnails').getView('PageThumbnails'));
+            } else {
+                this.leftMenu.btnThumbnails.hide();
+            }
+
             (this.mode.trialMode || this.mode.isBeta) && this.leftMenu.setDeveloperMode(this.mode.trialMode, this.mode.isBeta, this.mode.buildVersion);
 
             Common.util.Shortcuts.resumeEvents();
@@ -770,12 +778,17 @@ define([
 
         onMenuChange: function (value) {
             if ('hide' === value) {
-                if (this.leftMenu.btnComments.isActive() && this.api) {
-                    this.leftMenu.btnComments.toggle(false);
-                    this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
+                if (this.api) {
+                    if (this.leftMenu.btnComments.isActive()) {
+                        this.leftMenu.btnComments.toggle(false);
+                        this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
 
-                    // focus to sdk
-                    this.api.asc_enableKeyEvents(true);
+                        // focus to sdk
+                        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/controller/Main.js

@@ -1436,6 +1436,7 @@ define([
                 var type = /^(?:(pdf|djvu|xps|oxps))$/.exec(this.document.fileType);
                 this.appOptions.canDownloadOrigin = this.permissions.download !== false && (type && typeof type[1] === 'string');
                 this.appOptions.canDownload       = this.permissions.download !== false && (!type || typeof type[1] !== 'string');
+                this.appOptions.canUseThumbnails = this.appOptions.canUseViwerNavigation = /^(?:(pdf|djvu|xps))$/.test(this.document.fileType);
                 this.appOptions.canDownloadForms = this.appOptions.canLicense && this.appOptions.canDownload;
 
                 this.appOptions.fileKey = this.document.key;

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

@@ -56,13 +56,17 @@ define([
             this.addListeners({
                 'Navigation': {
                     'show': function() {
-                        var obj = me.api.asc_ShowDocumentOutline();
-                        if (!me._navigationObject)
-                            me._navigationObject = obj;
-                        me.updateNavigation();
+                        if (!this.canUseViwerNavigation) {
+                            var obj = me.api.asc_ShowDocumentOutline();
+                            if (!me._navigationObject)
+                                me._navigationObject = obj;
+                            me.updateNavigation();
+                        }
                     },
                     'hide': function() {
-                        me.api && me.api.asc_HideDocumentOutline();
+                        if (!this.canUseViwerNavigation) {
+                            me.api && me.api.asc_HideDocumentOutline();
+                        }
                     }
                 }
             });
@@ -77,6 +81,7 @@ define([
             });
             this.panelNavigation.on('render:after', _.bind(this.onAfterRender, this));
             this._navigationObject = null;
+            this._viewerNavigationObject = null;
             this._isDisabled = false;
         },
 
@@ -87,11 +92,14 @@ define([
             this.api.asc_registerCallback('asc_onDocumentOutlineUpdateAdd', _.bind(this.updateNavigation, this));
             this.api.asc_registerCallback('asc_onDocumentOutlineUpdateChange', _.bind(this.updateChangeNavigation, this));
             this.api.asc_registerCallback('asc_onDocumentOutlineUpdateRemove', _.bind(this.updateNavigation, this));
+
+            this.api.asc_registerCallback('asc_onViewerBookmarksUpdate', _.bind(this.updateViewerNavigation, this));
             return this;
         },
 
         setMode: function(mode) {
             this.mode = mode;
+            this.canUseViwerNavigation = this.mode.canUseViwerNavigation;
             return this;
         },
 
@@ -171,6 +179,9 @@ define([
                 menu.items[i].setVisible(this.mode.isEdit);
             }
 
+            menu.items[7].setVisible(!this.canUseViwerNavigation);
+            menu.items[8].setVisible(!this.canUseViwerNavigation);
+
             var isNotHeader = record.get('isNotHeader');
             menu.items[0].setDisabled(isNotHeader || this._isDisabled);
             menu.items[1].setDisabled(isNotHeader || this._isDisabled);
@@ -203,13 +214,16 @@ define([
         },
 
         onSelectItem: function(picker, item, record, e){
-            if (!this._navigationObject) return;
-            this._navigationObject.goto(record.get('index'));
+            if (this._navigationObject) {
+                this._navigationObject.goto(record.get('index'));
+            } else if (this._viewerNavigationObject) {
+                this.api.asc_viewerNavigateTo(record.get('index'));
+            }
             Common.NotificationCenter.trigger('edit:complete', this.panelNavigation);
         },
 
         onMenuItemClick: function (menu, item) {
-            if (!this._navigationObject) return;
+            if (!this._navigationObject && !this._viewerNavigationObject) return;
 
             var index = parseInt(menu.cmpEl.attr('data-value'));
             if (item.value == 'promote') {
@@ -239,6 +253,43 @@ define([
             this._isDisabled = state;
         },
 
+        updateViewerNavigation: function (bookmarks) {
+            this._viewerNavigationObject = bookmarks.length > 0 ? bookmarks : null;
+            if (this._viewerNavigationObject) {
+                var count = this._viewerNavigationObject.length,
+                    prev_level = -1,
+                    header_level = -1,
+                    first_header = true,//!this._navigationObject.isFirstItemNotHeader(),
+                    arr = [];
+                for (var i = 0; i < count; i++) {
+                    var level = this._viewerNavigationObject[i].level - 1,
+                        hasParent = true;
+                    if (level > prev_level && i > 0)
+                        arr[i - 1].set('hasSubItems', true);
+                    if (header_level < 0 || level <= header_level) {
+                        if (i > 0 || first_header)
+                            header_level = level;
+                        hasParent = false;
+                    }
+                    arr.push(new Common.UI.TreeViewModel({
+                        name: this._viewerNavigationObject[i].description,
+                        level: level,
+                        index: i,
+                        hasParent: hasParent,
+                        isEmptyItem: !this._viewerNavigationObject[i].description
+                    }));
+                    prev_level = level;
+                }
+                if (count > 0 && !first_header) {
+                    arr[0].set('hasSubItems', false);
+                    arr[0].set('isNotHeader', true);
+                    arr[0].set('name', this.txtBeginning);
+                    arr[0].set('tip', this.txtGotoBeginning);
+                }
+                this.getApplication().getCollection('Navigation').reset(arr);
+            }
+        },
+
         txtBeginning: 'Beginning of document',
         txtGotoBeginning: 'Go to the beginning of the document'
 

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

@@ -0,0 +1,126 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * User: Julia.Svinareva
+ * Date: 23.08.2021
+ */
+
+define([
+    'core',
+    /*'documenteditor/main/app/collection/Thumbnails',*/
+    'documenteditor/main/app/view/PageThumbnails'
+], function () {
+    'use strict';
+
+    DE.Controllers.PageThumbnails = Backbone.Controller.extend(_.extend({
+        models: [],
+        /*collections: [
+            'Thumbnails'
+        ],*/
+        views: [
+            'PageThumbnails'
+        ],
+
+        initialize: function() {
+            this._sendUndoPoint = true;
+            this.firstShow = true;
+            this.addListeners({
+                'PageThumbnails': {
+                    'show': _.bind(function () {
+                        if (this.firstShow) {
+                            this.api.asc_viewerThumbnailsResize();
+                            this.api.asc_setViewerThumbnailsUsePageRect(Common.localStorage.getBool("de-thumbnails-highlight", true));
+                            this.firstShow = false;
+                        }
+                    }, this)
+                }
+            });
+        },
+
+        events: function() {
+        },
+
+        onLaunch: function() {
+            this.panelThumbnails = this.createView('PageThumbnails');
+            this.panelThumbnails.on('render:after', _.bind(this.onAfterRender, this));
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            this.api.asc_registerCallback('asc_onViewerThumbnailsZoomUpdate', _.bind(this.updateSize, this));
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+            return this;
+        },
+
+        onAfterRender: function(panelThumbnails) {
+            panelThumbnails.sldrThumbnailsSize.on('change', _.bind(this.onChangeSize, this));
+
+            panelThumbnails.buttonSettings.menu.on('item:click', _.bind(this.onHighlightVisiblePart, this));
+            panelThumbnails.buttonSettings.menu.on('show:before', _.bind(function () {
+                this.panelThumbnails.sldrThumbnailsSize.setValue(this.thumbnailsSize);
+            }, this));
+
+
+            var viewport = DE.getController('Viewport').getView('Viewport');
+            viewport.hlayout.on('layout:resizedrag',  _.bind(function () {
+                if (!this.firstShow) {
+                    this.api.asc_viewerThumbnailsResize();
+                }
+            }, this));
+        },
+
+        onHighlightVisiblePart: function(menu, item, e) {
+            if (item.value === 'highlight') {
+                var checked = item.isChecked();
+                this.api.asc_setViewerThumbnailsUsePageRect(checked);
+                Common.localStorage.setBool("de-thumbnails-highlight", checked);
+            }
+        },
+
+        updateSize: function (size) {
+            this.thumbnailsSize = size * 100;
+        },
+
+        onChangeSize: function(field, newValue) {
+            if (newValue!==undefined) {
+                this.thumbnailsSize = newValue;
+                this.api.asc_setViewerThumbnailsZoom(newValue / 100);
+            }
+        },
+
+    }, DE.Controllers.PageThumbnails || {}));
+});

apps/documenteditor/main/app/template/LeftMenu.template

@@ -7,6 +7,7 @@
         <!-- /** coauthoring end **/ -->
         <button id="left-btn-plugins" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-plugin">&nbsp;</i></button>
         <button id="left-btn-navigation" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button>
+        <button id="left-btn-thumbnails" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-thumbs">&nbsp;</i></button>
         <button id="left-btn-support" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button>
         <button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
     </div>
@@ -17,5 +18,6 @@
         <!-- /** coauthoring end **/ -->
         <div id="left-panel-navigation" class="" style="display: none; height: 100%;"></div>
         <div id="left-panel-plugins" class="" style="display: none; height: 100%;"></div>
+        <div id="left-panel-thumbnails" class="" style="display: none; height: 100%;"></div>
     </div>
 </div>

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

@@ -75,6 +75,7 @@ define([
                 /** coauthoring end **/
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-navigation': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-thumbnails': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -166,6 +167,17 @@ define([
             this.menuFile = new DE.Views.FileMenu();
             this.btnAbout.panel = new Common.Views.About({el: '#about-menu-panel', appName: 'Document Editor'});
 
+            this.btnThumbnails = new Common.UI.Button({
+                el: $markup.elementById('#left-btn-thumbnails'),
+                hint: this.tipPageThumbnails,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+            this.btnThumbnails.hide();
+
+            this.btnThumbnails.on('click', this.onBtnMenuClick.bind(this));
+
             this.$el.html($markup);
 
             return this;
@@ -238,6 +250,13 @@ define([
                 } else
                     this.panelNavigation['hide']();
             }
+            if (this.panelThumbnails) {
+                if (this.btnThumbnails.pressed) {
+                    this.panelThumbnails.show();
+                } else {
+                    this.panelThumbnails.hide();
+                }
+            }
             /** coauthoring end **/
             // if (this.mode.canPlugins && this.panelPlugins) {
             //     if (this.btnPlugins.pressed) {
@@ -262,6 +281,9 @@ define([
             } else
             if (name == 'navigation' && !this.panelNavigation) {
                 this.panelNavigation = panel.render('#left-panel-navigation');
+            } else
+            if (name == 'thumbnails') {
+                this.panelThumbnails = panel.render('#left-panel-thumbnails');
             }
         },
 
@@ -328,6 +350,7 @@ define([
             /** coauthoring end **/
             this.btnPlugins.setDisabled(false);
             this.btnNavigation.setDisabled(false);
+            this.btnThumbnails.setDisabled(false);
         },
 
         showMenu: function(menu, opts) {
@@ -462,6 +485,7 @@ define([
         tipSupport  : 'Feedback & Support',
         tipSearch   : 'Search',
         tipPlugins  : 'Plugins',
+        tipPageThumbnails: 'Page Thumbnails',
         txtDeveloper: 'DEVELOPER MODE',
         txtTrial: 'TRIAL MODE',
         txtTrialDev: 'Trial Developer Mode',

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

@@ -0,0 +1,157 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * User: Julia.Svinareva
+ * Date: 23.08.2021
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout',
+    'common/main/lib/component/TreeView'
+], function (template) {
+    'use strict';
+
+    DE.Views.PageThumbnails = Common.UI.BaseView.extend(_.extend({
+        el: '#left-panel-thumbnails',
+
+        storeThumbnails: undefined,
+        template: _.template([
+            '<div id="thumbnails-box" class="layout-ct vbox">',
+                '<div id="thumbnails-header">',
+                    '<label><%= scope.textPageThumbnails %></label>',
+                    '<div id="thumbnails-btn-close"></div>',
+                    '<div id="thumbnails-btn-settings"></div>',
+                '</div>',
+                '<div id="thumbnails-list">',
+                '</div>',
+            '</div>'
+        ].join('')),
+
+        initialize: function(options) {
+            _.extend(this, options);
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+        },
+
+        render: function(el) {
+            if (!this.rendered) {
+                el = el || this.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));
+
+                this.mnuSizeSetting = new Common.UI.MenuItem({
+                    template: _.template([
+                        '<div id="thumbnails-size"',
+                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                'data-stopPropagation="true"',
+                            '<% } %>', '>',
+                            '<label>' + this.textThumbnailsSize + '</label>',
+                            '<div class="thumbnails-sld-box">',
+                                '<span class="menu-item-icon menu__icon thumbnail-small"></span>',
+                                '<div id="sld-thumbnails-size"></div>',
+                                '<span class="menu-item-icon menu__icon thumbnail-big"></span>',
+                            '</div>',
+                        '</div>'
+                    ].join('')),
+                    stopPropagation: true
+                });
+
+                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: 198px;',
+                        items: [
+                            this.mnuSizeSetting,
+                            {caption: '--'},
+                            {
+                                caption: this.textHighlightVisiblePart,
+                                checkable: true,
+                                value: 'highlight',
+                                checked: Common.localStorage.getBool("de-thumbnails-highlight", true)
+                            }
+                        ]
+                    })
+                });
+            }
+
+            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;
+        },
+
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            this.fireEvent('show', this );
+        },
+
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+            this.fireEvent('hide', this );
+        },
+
+        ChangeSettings: function(props) {
+        },
+
+        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/app_dev.js

@@ -143,6 +143,7 @@ require([
             'Links',
             'FormsTab',
             'Navigation',
+            'PageThumbnails',
             'RightMenu',
             'LeftMenu',
             'Main',
@@ -169,6 +170,7 @@ require([
                 'documenteditor/main/app/controller/Links',
                 'documenteditor/main/app/controller/FormsTab',
                 'documenteditor/main/app/controller/Navigation',
+                'documenteditor/main/app/controller/PageThumbnails',
                 'documenteditor/main/app/controller/Statusbar',
                 'documenteditor/main/app/controller/RightMenu',
                 'documenteditor/main/app/controller/LeftMenu',

apps/documenteditor/main/locale/en.json

@@ -2812,5 +2812,10 @@
   "DE.Views.WatermarkSettingsDialog.textTransparency": "Semitransparent",
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Underline",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Font Name",
-  "DE.Views.WatermarkSettingsDialog.tipFontSize": "Font Size"
+  "DE.Views.WatermarkSettingsDialog.tipFontSize": "Font Size",
+  "DE.Views.PageThumbnails.textPageThumbnails": "Page Thumbnails",
+  "DE.Views.PageThumbnails.textClosePanel": "Close page thumbnails",
+  "DE.Views.PageThumbnails.textThumbnailsSettings": "Thumbnails settings",
+  "DE.Views.PageThumbnails.textThumbnailsSize": "Thumbnails size",
+  "DE.Views.PageThumbnails.textHighlightVisiblePart": "Highlight visible part of page"
 }

apps/documenteditor/main/resources/less/app.less

@@ -136,6 +136,7 @@
 @import "rightmenu.less";
 @import "advanced-settings.less";
 @import "navigation.less";
+@import "thumbnails.less";
 
 @import "sprites/iconssmall@1x";
 @import "sprites/iconsbig@1x";

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

@@ -0,0 +1,70 @@
+#thumbnails-box {
+    display: table;
+    position: relative;
+    border-collapse: collapse;
+
+    #thumbnails-list {
+        position: relative;
+        height: calc(100% - 45px);
+        width: 100%;
+        overflow: hidden;
+    }
+
+    #thumbnails-header {
+        position: relative;
+        height: 45px;
+        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;
+        }
+
+        #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: 12px;
+                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 0 8px;
+                }
+            }
+        }
+
+        .dropdown-menu {
+            li {
+                a {
+                    padding: 5px 20px 5px 33px;
+                    &.checked:before {
+                        margin-left: -24px;
+                    }
+                }
+            }
+        }
+  }
+}