Merge branch 'develop' into feature/mobile-comments

apps/api/documents/api.js

@@ -74,15 +74,16 @@
                 recent: [
                     {
                         title: 'document title',
+                        image: 'recent icon url',
                         url: 'document url',
-                        folder: 'path to document'
+                        folder: 'path to document',
                     },
                     ...
                 ],
                 templates: [
                     {
-                        name: 'template name',
-                        icon: 'template icon url',
+                        title: 'template name', // name - is deprecated
+                        image: 'template icon url',
                         url: 'http://...'
                     },
                     ...
@@ -385,8 +386,6 @@
                     if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
                     _config.editorConfig.customization.about = false;
                     _config.editorConfig.customization.compactHeader = false;
-
-                    if ( window.AscDesktopEditor ) window.AscDesktopEditor.execCommand('webapps:events', 'loading');
                 }
             }
         })();

apps/common/locale.js

@@ -74,6 +74,9 @@ Common.Locale = new(function() {
         var res = '';
         if (l10n && scope && scope.name) {
             res = l10n[scope.name + '.' + prop];
+
+            if ( !res && scope.default )
+                res = scope.default;
         }
 
         return res || (scope ? eval(scope.name).prototype[prop] : '');

apps/common/main/lib/component/Button.js

@@ -313,7 +313,8 @@ define([
 
             if (me.options.el) {
                 me.render();
-            }
+            } else if (me.options.parentEl)
+                me.render(me.options.parentEl);
         },
 
         render: function(parentEl) {
@@ -646,8 +647,14 @@ define([
                 oldCls = this.iconCls;
 
             this.iconCls = cls;
-            btnIconEl.removeClass(oldCls);
-            btnIconEl.addClass(cls || '');
+            if (/svgicon/.test(this.iconCls)) {
+                var icon = /svgicon\s(\S+)/.exec(this.iconCls);
+                btnIconEl.find('use.zoom-int').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1]: '');
+                btnIconEl.find('use.zoom-grit').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1] + '-150' : '');
+            } else {
+                btnIconEl.removeClass(oldCls);
+                btnIconEl.addClass(cls || '');
+            }
         },
 
         changeIcon: function(opts) {

apps/common/main/lib/component/Calendar.js

@@ -91,17 +91,17 @@ define([
             me.currentDate = me.options.date || new Date();
 
             me.btnPrev = new Common.UI.Button({
+                parentEl: me.cmpEl.find('#prev-arrow'),
                 cls: '',
                 iconCls: 'arrow-prev img-commonctrl'
             });
-            me.btnPrev.render(me.cmpEl.find('#prev-arrow'));
             me.btnPrev.on('click', _.bind(me.onClickPrev, me));
 
             me.btnNext = new Common.UI.Button({
+                parentEl: me.cmpEl.find('#next-arrow'),
                 cls: '',
                 iconCls: 'arrow-next img-commonctrl'
             });
-            me.btnNext.render(me.cmpEl.find('#next-arrow'));
             me.btnNext.on('click', _.bind(me.onClickNext, me));
 
             me.cmpEl.on('keydown', function(e) {

apps/common/main/lib/component/ColorButton.js

@@ -34,11 +34,12 @@ if (Common === undefined)
     var Common = {};
 
 define([
-    'common/main/lib/component/Button'
+    'common/main/lib/component/Button',
+    'common/main/lib/component/ThemeColorPalette'
 ], function () {
     'use strict';
 
-    Common.UI.ColorButton = Common.UI.Button.extend({
+    Common.UI.ColorButton = Common.UI.Button.extend(_.extend({
         options : {
             hint: false,
             enableToggle: false,
@@ -49,25 +50,85 @@ define([
             '<div class="btn-group" id="<%= id %>">',
                 '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
                     '<span>&nbsp;</span>',
+                    '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
                 '</button>',
             '</div>'
         ].join('')),
 
+        initialize : function(options) {
+            if (!options.menu && options.menu !== false) {// menu==null or undefined
+                // set default menu
+                var me = this;
+                options.menu = me.getMenu(options);
+                me.on('render:after', function(btn) {
+                    me.getPicker(options.color);
+                });
+            }
+
+            Common.UI.Button.prototype.initialize.call(this, options);
+        },
+
+        render: function(parentEl) {
+            Common.UI.Button.prototype.render.call(this, parentEl);
+
+            if (this.options.color!==undefined)
+                this.setColor(this.options.color);
+        },
+
+        onColorSelect: function(picker, color) {
+            this.setColor(color);
+            this.trigger('color:select', this, color);
+        },
+
         setColor: function(color) {
-            var border_color, clr,
-                span = $(this.cmpEl).find('button span');
+            var span = $(this.cmpEl).find('button span:nth-child(1)');
             this.color = color;
 
-            if ( color== 'transparent' ) {
-                border_color = '#BEBEBE';
-                clr = color;
-                span.addClass('color-transparent');
-            } else {
-                border_color = 'transparent';
-                clr = (typeof(color) == 'object') ? '#'+color.color : '#'+color;
-                span.removeClass('color-transparent');
+            span.toggleClass('color-transparent', color=='transparent');
+            span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
+        },
+
+        getPicker: function(color) {
+            if (!this.colorPicker) {
+                this.colorPicker = new Common.UI.ThemeColorPalette({
+                    el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
+                    transparent: this.options.transparent,
+                    value: color
+                });
+                this.colorPicker.on('select', _.bind(this.onColorSelect, this));
+                this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
             }
-            span.css({'background-color': clr, 'border-color': border_color});
-        }
-    });
+            return this.colorPicker;
+        },
+
+        getMenu: function(options) {
+            if (typeof this.menu !== 'object') {
+                options = options || this.options;
+                var id = Common.UI.getId(),
+                    menu = new Common.UI.Menu({
+                    id: id,
+                    additionalAlign: options.additionalAlign,
+                    items: (options.additionalItems ? options.additionalItems : []).concat([
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<a id="' + id + '-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
+                    ])
+                });
+                return menu;
+            }
+            return this.menu;
+        },
+
+        setMenu: function (m) {
+            m = m || this.getMenu();
+            Common.UI.Button.prototype.setMenu.call(this, m);
+            this.getPicker(this.options.color);
+        },
+
+        addNewColor: function() {
+            this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
+        },
+
+        textNewColor: 'Add New Custom Color'
+
+    }, Common.UI.ColorButton || {}));
 });

apps/common/main/lib/component/ComboBorderSize.js

@@ -142,7 +142,7 @@ define([
             if (record.get('value')>0) {
                 formcontrol[0].innerHTML = '';
                 formcontrol.removeClass('text').addClass('image');
-                formcontrol.css('background-position', '0 -' + record.get('offsety') + 'px');
+                formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
             } else {
                 formcontrol[0].innerHTML = this.txtNoBorders;
                 formcontrol.removeClass('image').addClass('text');
@@ -229,7 +229,7 @@ define([
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
                             '<span style="margin-top: 0;"></span>',
                             '<% if (item.offsety!==undefined) { %>',
                                 '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
@@ -265,7 +265,7 @@ define([
             var formcontrol = $(this.el).find('.form-control');
             formcontrol[0].innerHTML = '';
             formcontrol.removeClass('text').addClass('image');
-            formcontrol.css('background-position', '0 -' + record.get('offsety') + 'px');
+            formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
         }
     }, Common.UI.ComboBorderType || {}));
 

apps/common/main/lib/component/ComboBox.js

@@ -644,7 +644,7 @@ define([
                 } else {
                     $(this.el).find('ul').html(_.template([
                         '<% _.each(items, function(item) { %>',
-                           '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                           '<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% }); %>'
                     ].join(''))({
                         items: this.store.toJSON(),

apps/common/main/lib/component/DataView.js

@@ -575,8 +575,8 @@ define([
             
             var div_top = div.offset().top,
                 div_first = $(this.dataViewItems[0].el),
-                div_first_top = (div_first.length>0) ? div_first[0].offsetTop : 0;
-            if (div_top < inner_top + div_first_top || div_top+div.outerHeight() > inner_top + innerEl.height()) {
+                div_first_top = (div_first.length>0) ? div_first[0].clientTop : 0;
+            if (div_top < inner_top + div_first_top || div_top+div.outerHeight()*0.9 > inner_top + div_first_top + innerEl.height()) {
                 if (this.scroller && this.allowScrollbar) {
                     this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
                 } else {

apps/common/main/lib/component/InputField.js

@@ -53,7 +53,8 @@ if (Common === undefined)
 
 define([
     'common/main/lib/component/BaseView',
-    'common/main/lib/component/Tooltip'
+    'common/main/lib/component/Tooltip',
+    'common/main/lib/component/Button'
 ], function () { 'use strict';
 
     Common.UI.InputField = Common.UI.BaseView.extend((function() {
@@ -379,4 +380,136 @@ define([
             }
         }
     })());
+
+    Common.UI.InputFieldBtn = Common.UI.InputField.extend((function() {
+        return {
+            options : {
+                id          : null,
+                cls         : '',
+                style       : '',
+                value       : '',
+                type        : 'text',
+                name        : '',
+                validation  : null,
+                allowBlank  : true,
+                placeHolder : '',
+                blankError  : null,
+                spellcheck  : false,
+                maskExp     : '',
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false,
+                editable: true,
+                iconCls: 'btn-select-range',
+                btnHint: ''
+            },
+
+            template: _.template([
+                '<div class="input-field input-field-btn" style="<%= style %>">',
+                    '<input ',
+                        'type="<%= type %>" ',
+                        'name="<%= name %>" ',
+                        'spellcheck="<%= spellcheck %>" ',
+                        'class="form-control <%= cls %>" ',
+                        'placeholder="<%= placeHolder %>" ',
+                        'value="<%= value %>"',
+                    '>',
+                    '<span class="input-error"/>',
+                    '<div class="select-button">' +
+                        '<button type="button" class="btn btn-toolbar"><i class="icon toolbar__icon <%= iconCls %>"></i></button>' +
+                    '</div>',
+                '</div>'
+            ].join('')),
+
+            render : function(parentEl) {
+                var me = this;
+
+                if (!me.rendered) {
+                    this.cmpEl = $(this.template({
+                        id          : this.id,
+                        cls         : this.cls,
+                        style       : this.style,
+                        value       : this.value,
+                        type        : this.type,
+                        name        : this.name,
+                        placeHolder : this.placeHolder,
+                        spellcheck  : this.spellcheck,
+                        iconCls     : this.options.iconCls,
+                        scope       : me
+                    }));
+
+                    if (parentEl) {
+                        this.setElement(parentEl, false);
+                        parentEl.html(this.cmpEl);
+                    } else {
+                        this.$el.html(this.cmpEl);
+                    }
+                } else {
+                    this.cmpEl = this.$el;
+                }
+
+                if (!me.rendered) {
+                    var el = this.cmpEl;
+
+                    this._button = new Common.UI.Button({
+                        el: this.cmpEl.find('button'),
+                        hint: this.options.btnHint || ''
+                    });
+                    this._button.on('click', _.bind(this.onButtonClick, this));
+
+                    this._input = this.cmpEl.find('input').addBack().filter('input');
+
+                    if (this.editable) {
+                        this._input.on('blur',   _.bind(this.onInputChanged, this));
+                        this._input.on('keypress', _.bind(this.onKeyPress, this));
+                        this._input.on('keydown',    _.bind(this.onKeyDown, this));
+                        this._input.on('keyup',    _.bind(this.onKeyUp, this));
+                        if (this.validateOnChange) this._input.on('input', _.bind(this.onInputChanging, this));
+                        if (this.maxLength) this._input.attr('maxlength', this.maxLength);
+                    }
+
+                    this.setEditable(this.editable);
+
+                    if (this.disabled)
+                        this.setDisabled(this.disabled);
+
+                    if (this._input.closest('.asc-window').length>0)
+                        var onModalClose = function() {
+                            var errorTip = el.find('.input-error').data('bs.tooltip');
+                            if (errorTip) errorTip.tip().remove();
+                            Common.NotificationCenter.off({'modal:close': onModalClose});
+                        };
+                    Common.NotificationCenter.on({'modal:close': onModalClose});
+                }
+
+                me.rendered = true;
+
+                return this;
+            },
+
+            onButtonClick: function(btn, e) {
+                this.trigger('button:click', this, e);
+            },
+
+            setDisabled: function(disabled) {
+                this.disabled = disabled;
+                $(this.el).toggleClass('disabled', disabled);
+                disabled
+                    ? this._input.attr('disabled', true)
+                    : this._input.removeAttr('disabled');
+                this._button.setDisabled(disabled);
+            },
+
+            setBtnDisabled: function(disabled) {
+                this._button.setDisabled(disabled);
+            },
+
+            updateBtnHint: function(hint) {
+                this.options.hint = hint;
+
+                if (!this.rendered) return;
+                this._button.updateHint(this.options.hint);
+            }
+        }
+    })());
 });

apps/common/main/lib/component/Mixtbar.js

@@ -374,20 +374,67 @@ define([
                     if ( $active && $active.length ) {
                         var _maxright = $active.parents('.box-controls').width();
                         var data = $active.data(),
-                            _rightedge = data.rightedge;
+                            _rightedge = data.rightedge,
+                            _btns = data.buttons,
+                            _flex = data.flex;
 
                         if ( !_rightedge ) {
                             _rightedge = $active.get(0).getBoundingClientRect().right;
                         }
+                        if ( !_btns ) {
+                            _btns = [];
+                            _.each($active.find('.btn-slot .x-huge'), function(item) {
+                                _btns.push($(item).closest('.btn-slot'));
+                            });
+                            data.buttons = _btns;
+                        }
+                        if (!_flex) {
+                            _flex = [];
+                            _.each($active.find('.group.flex'), function(item) {
+                                _flex.push($(item));
+                            });
+                            data.flex = _flex;
+                        }
 
-                        if ( _rightedge > _maxright ) {
-                            if ( !$active.hasClass('compactwidth') ) {
-                                $active.addClass('compactwidth');
-                                data.rightedge = _rightedge;
+                        if ( _rightedge > _maxright) {
+                            if (_flex.length>0) {
+                                for (var i=0; i<_flex.length; i++) {
+                                    var item = _flex[i];
+                                    if (item.outerWidth() > parseInt(item.css('min-width')))
+                                        return;
+                                    else
+                                        item.css('width', item.css('min-width'));
+                                }
                             }
+                            for (var i=_btns.length-1; i>=0; i--) {
+                                var btn = _btns[i];
+                                if ( !btn.hasClass('compactwidth') ) {
+                                    btn.addClass('compactwidth');
+                                    _rightedge = $active.get(0).getBoundingClientRect().right;
+                                    if (_rightedge <= _maxright)
+                                        break;
+                                }
+                            }
+                            data.rightedge = _rightedge;
                         } else {
-                            if ($active.hasClass('compactwidth')) {
-                                $active.removeClass('compactwidth');
+                            for (var i=0; i<_btns.length; i++) {
+                                var btn = _btns[i];
+                                if ( btn.hasClass('compactwidth') ) {
+                                    btn.removeClass('compactwidth');
+                                    _rightedge = $active.get(0).getBoundingClientRect().right;
+                                    if ( _rightedge > _maxright) {
+                                        btn.addClass('compactwidth');
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        break;
+                                    }
+                                }
+                            }
+                            data.rightedge = _rightedge;
+                            if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
+                                for (var i=0; i<_flex.length; i++) {
+                                    var item = _flex[i];
+                                    item.css('width', item.css('max-width'));
+                                }
                             }
                         }
                     }

apps/common/main/lib/component/SynchronizeTip.js

@@ -52,7 +52,7 @@ define([
                     '<div class="asc-synchronizetip">',
                         '<div class="tip-arrow <%= scope.placement %>"></div>',
                         '<div>',
-                            '<div class="tip-text" style="width: 260px;"><%= scope.text %></div>',
+                            '<div class="tip-text"><%= scope.text %></div>',
                             '<div class="close img-commonctrl"></div>',
                         '</div>',
                         '<% if ( scope.showLink ) { %>',
@@ -105,6 +105,10 @@ define([
             applyPlacement: function () {
                 var showxy = this.target.offset(),
                     innerHeight = Common.Utils.innerHeight();
+
+                if (this.placement == 'document') {
+                    // this.cmpEl.css('top', $('#editor_sdk').offset().top);
+                } else
                 if (this.placement == 'top')
                     this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
                 else {// left or right

apps/common/main/lib/component/Tab.js

@@ -52,8 +52,8 @@ define([
         this.label      = 'Tab';
         this.cls        = '';
         this.index = -1;
-        this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
-                                            '<span title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
+        this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%- label %>">',
+                                            '<span title="<%- label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
                                         '</li>'].join(''));
 
         this.initialize.call(this, opts);

apps/common/main/lib/component/TabBar.js

@@ -142,6 +142,7 @@ define([
                                 me.bar.$bar.scrollLeft(me.scrollLeft);
                                 me.bar.scrollX = undefined;
                             }
+                            me.bar.checkInvisible();
 
                             me.drag  = undefined;
                             me.bar.trigger('tab:drop', this);
@@ -542,7 +543,7 @@ define([
                 this.checkInvisible(suppress);
             } else if ( index >= (this.tabs.length - 1) || index == 'last') {
                 var tab = this.tabs[this.tabs.length-1].$el;
-                this.$bar.scrollLeft(this.$bar.scrollLeft() + (tab.position().left + parseInt(tab.css('width')) - this.$bar.width()) + 1);
+                this.$bar.scrollLeft(this.$bar.scrollLeft() + (tab.position().left + parseInt(tab.css('width')) - this.$bar.width()) + (this.$bar.width() > 400 ? 20 : 5));
                 this.checkInvisible(suppress);
             } else {
                 var rightbound = this.$bar.width(),
@@ -554,7 +555,7 @@ define([
                         right = tab.position().left + parseInt(tab.css('width'));
 
                         if (right > rightbound) {
-                            this.$bar.scrollLeft(this.$bar.scrollLeft() + (right - rightbound) + 20);
+                            this.$bar.scrollLeft(this.$bar.scrollLeft() + (right - rightbound) + (this.$bar.width() > 400 ? 20 : 5));
                             this.checkInvisible(suppress);
                             break;
                         }

apps/common/main/lib/component/Window.js

@@ -219,24 +219,34 @@ define([
             }
         }
 
-        function _centre() {
+        function _readDocumetGeometry() {
             if (window.innerHeight == undefined) {
-                var main_width  = document.documentElement.offsetWidth;
-                var main_height = document.documentElement.offsetHeight;
+                var width  = document.documentElement.offsetWidth,
+                height = document.documentElement.offsetHeight;
             } else {
-                main_width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
+                width  = Common.Utils.innerWidth();
+                height = Common.Utils.innerHeight();
             }
+            height -= Common.Utils.InternalSettings.get('window-inactive-area-top');
+            return {width: width, height: height, top: Common.Utils.InternalSettings.get('window-inactive-area-top')};
+        }
+
+        function _centre() {
+            var main_geometry = _readDocumetGeometry(),
+                main_width = main_geometry.width,
+                main_height = main_geometry.height;
 
             if (this.initConfig.height == 'auto') {
                 var win_height = parseInt(this.$window.find('.body').css('height'));
                 this.initConfig.header && (win_height += parseInt(this.$window.find('.header').css('height')));
-            } else
+            } else {
                 win_height = this.initConfig.height;
+                win_height > main_height && (win_height = main_height);
+            }
 
             var win_width = (this.initConfig.width=='auto') ? parseInt(this.$window.find('.body').css('width')) : this.initConfig.width;
             
-            var top  = Math.floor((parseInt(main_height) - parseInt(win_height)) / 2);
+            var top  = main_geometry.top + Math.floor((parseInt(main_height) - parseInt(win_height)) / 2);
             var left = Math.floor((parseInt(main_width) - parseInt(win_width)) / 2);
 
             this.$window.css('left',left);
@@ -244,18 +254,21 @@ define([
         }
 
         function _setVisible() {
-            if (window.innerHeight == undefined) {
-                var main_width  = document.documentElement.offsetWidth;
-                var main_height = document.documentElement.offsetHeight;
-            } else {
-                main_width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
-            }
+            var main_geometry = _readDocumetGeometry(),
+                main_width = main_geometry.width,
+                main_height = main_geometry.height;
 
             if (this.getLeft() + this.getWidth() > main_width)
                 this.$window.css('left', main_width - this.getWidth());
-            if (this.getTop() + this.getHeight() > main_height)
-                this.$window.css('top', main_height - this.getHeight());
+
+            if (this.getTop() < main_geometry.top )
+                this.$window.css('top', main_geometry.top);
+            else
+            if (this.getTop() + this.getHeight() > main_height) {
+                if (main_height - this.getHeight() < 0)
+                    this.$window.css('top', main_geometry.top);
+                else this.$window.css('top', main_geometry.top + main_height - this.getHeight());
+            }
         }
 
         function _getTransformation(end) {
@@ -277,16 +290,15 @@ define([
             this.dragging.initx = event.pageX*zoom - this.getLeft();
             this.dragging.inity = event.pageY*zoom - this.getTop();
 
-            if (window.innerHeight == undefined) {
-                var main_width  = document.documentElement.offsetWidth;
-                var main_height = document.documentElement.offsetHeight;
-            } else {
-                main_width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
-            }
+            var main_geometry = _readDocumetGeometry(),
+                main_width = main_geometry.width,
+                main_height = main_geometry.height;
 
             this.dragging.maxx  = main_width - this.getWidth();
             this.dragging.maxy  = main_height - this.getHeight();
+            if (this.dragging.maxy < 0)
+                    this.dragging.maxy = 0;
+            this.dragging.maxy += main_geometry.top;
 
             $(document).on('mousemove', this.binding.drag);
             $(document).on('mouseup', this.binding.dragStop);
@@ -311,10 +323,11 @@ define([
             if (this.dragging.enabled) {
                 var zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1,
                     left    = event.pageX*zoom - this.dragging.initx,
-                    top     = event.pageY*zoom - this.dragging.inity;
+                    top     = event.pageY*zoom - this.dragging.inity,
+                    topedge = Common.Utils.InternalSettings.get('window-inactive-area-top');
 
                 left < 0 ? (left = 0) : left > this.dragging.maxx && (left = this.dragging.maxx);
-                top < 0 ? (top = 0) : top > this.dragging.maxy && (top = this.dragging.maxy);
+                top < topedge ? (top = topedge) : top > this.dragging.maxy && (top = this.dragging.maxy);
 
                 this.$window.css({left: left, top: top});
             }
@@ -343,9 +356,10 @@ define([
             this.resizing.inith = this.getHeight();
             this.resizing.type = [el.hasClass('left') ? -1 : (el.hasClass('right') ? 1 : 0), el.hasClass('top') ? -1 : (el.hasClass('bottom') ? 1 : 0)];
 
-            var main_width  = (window.innerHeight == undefined) ? document.documentElement.offsetWidth : Common.Utils.innerWidth(),
-                main_height = (window.innerHeight == undefined) ? document.documentElement.offsetHeight : Common.Utils.innerHeight(),
-                maxwidth = (this.initConfig.maxwidth) ? this.initConfig.maxwidth : main_width,
+            var main_geometry = _readDocumetGeometry(),
+                main_width = main_geometry.width,
+                main_height = main_geometry.height;
+            var maxwidth = (this.initConfig.maxwidth) ? this.initConfig.maxwidth : main_width,
                 maxheight = (this.initConfig.maxheight) ? this.initConfig.maxheight : main_height;
 
             this.resizing.minw  = this.initConfig.minwidth;
@@ -594,7 +608,7 @@ define([
                 Common.UI.BaseView.prototype.initialize.call(this, this.initConfig);
             },
 
-            render : function() {
+            render: function() {
                 var renderto = this.initConfig.renderTo || document.body;
                 $(renderto).append(
                     _.template(template)(this.initConfig)
@@ -651,6 +665,22 @@ define([
 
                 this.initConfig.footerCls && this.$window.find('.footer').addClass(this.initConfig.footerCls);
 
+                this.menuAddAlign = function(menuRoot, left, top) {
+                    var self = this;
+                    if (!me.$window.hasClass('notransform')) {
+                        me.$window.addClass('notransform');
+                        menuRoot.addClass('hidden');
+                        setTimeout(function() {
+                            menuRoot.removeClass('hidden');
+                            menuRoot.css({left: left, top: top});
+                            self.options.additionalAlign = null;
+                        }, 300);
+                    } else {
+                        menuRoot.css({left: left, top: top});
+                        self.options.additionalAlign = null;
+                    }
+                };
+
                 this.fireEvent('render:after',this);
                 return this;
             },

apps/common/main/lib/controller/Desktop.js

@@ -41,10 +41,16 @@ define([
 ], function () {
     'use strict';
 
+    var native = window.AscDesktopEditor;
+    !!native && native.execCommand('webapps:features', JSON.stringify({
+        version: '{{PRODUCT_VERSION}}',
+        eventloading: true,
+        titlebuttons: true
+    }));
+
     var Desktop = function () {
         var config = {version:'{{PRODUCT_VERSION}}'};
-        var app = window.AscDesktopEditor,
-            webapp = window.DE || window.PE || window.SSE;
+        var webapp = window.DE || window.PE || window.SSE;
         var titlebuttons;
         var btnsave_icons = {
             'btn-save': 'save',
@@ -52,7 +58,7 @@ define([
             'btn-synch': 'synch' };
 
 
-        if ( !!app ) {
+        if ( !!native ) {
             window.on_native_message = function (cmd, param) {
                 if (/^style:change/.test(cmd)) {
                     var obj = JSON.parse(param);
@@ -81,6 +87,13 @@ define([
                                 Common.NotificationCenter.trigger('app:config', {canUndock:true});
                         }
                     }
+
+                    if (_.isNumber(obj.skiptoparea)) {
+                        if ( $('.asc-window.modal').length && $('.asc-window.modal').position().top < obj.skiptoparea )
+                            $('.asc-window.modal').css('top', obj.skiptoparea);
+
+                        Common.Utils.InternalSettings.set('window-inactive-area-top', obj.skiptoparea);
+                    }
                 } else
                 if (/window:status/.test(cmd)) {
                     var obj = JSON.parse(param);
@@ -104,7 +117,7 @@ define([
                                 }
                             }
 
-                            app.execCommand('editor:config', JSON.stringify(opts));
+                            native.execCommand('editor:config', JSON.stringify(opts));
                         } else
                         if ( !config.callback_editorconfig ) {
                             config.callback_editorconfig = function() {
@@ -128,14 +141,19 @@ define([
                 }
             };
 
+            window.on_native_message('editor:config', 'request');
             if ( !!window.native_message_cmd ) {
                 for ( var c in window.native_message_cmd ) {
                     window.on_native_message(c, window.native_message_cmd[c]);
                 }
             }
 
-            // app.execCommand('window:features', {version: config.version, action: 'request'});
-            app.execCommand('webapps:features', {version: config.version, eventloading:true, titlebuttons:true});
+            native.execCommand('webapps:features', JSON.stringify({version: config.version, eventloading:true, titlebuttons:true}));
+
+            // hide mask for modal window
+            var style = document.createElement('style');
+            style.appendChild(document.createTextNode('.modals-mask{opacity:0 !important;}'));
+            document.getElementsByTagName('head')[0].appendChild(style);
         }
 
         var _serializeHeaderButton = function(action, config) {
@@ -143,31 +161,30 @@ define([
                 action: action,
                 icon: config.icon || undefined,
                 hint: config.btn.options.hint,
-                disabled: config.disabled
+                disabled: config.btn.isDisabled()
             };
         };
 
         var _onTitleButtonDisabled = function (action, e, status) {
-            titlebuttons[action].disabled = status;
             var _buttons = {};
             _buttons[action] = status;
-            app.execCommand('title:button', JSON.stringify({disabled: _buttons}));
+            native.execCommand('title:button', JSON.stringify({disabled: _buttons}));
         };
 
         var _onSaveIconChanged = function (e, opts) {
-            app.execCommand('title:button', JSON.stringify({'icon:changed': {'save': btnsave_icons[opts.next]}}));
+            native.execCommand('title:button', JSON.stringify({'icon:changed': {'save': btnsave_icons[opts.next]}}));
         };
 
         var _onModalDialog = function (status) {
             if ( status == 'open' ) {
-                app.execCommand('title:button', JSON.stringify({disabled: {'all':true}}));
+                native.execCommand('title:button', JSON.stringify({disabled: {'all':true}}));
             } else {
                 var _buttons = {};
                 for (var i in titlebuttons) {
-                    _buttons[i] = titlebuttons[i].disabled;
+                    _buttons[i] = titlebuttons[i].btn.isDisabled();
                 }
 
-                app.execCommand('title:button', JSON.stringify({'disabled': _buttons}));
+                native.execCommand('title:button', JSON.stringify({'disabled': _buttons}));
             }
         };
 
@@ -178,13 +195,22 @@ define([
                 if ( config.isDesktopApp ) {
                     Common.NotificationCenter.on('app:ready', function (opts) {
                         _.extend(config, opts);
-                        !!app && app.execCommand('doc:onready', '');
+                        !!native && native.execCommand('doc:onready', '');
 
                         $('.toolbar').addClass('editor-native-color');
                     });
 
+                    Common.NotificationCenter.on('document:ready', function () {
+                        if ( config.isEdit ) {
+                            var maincontroller = webapp.getController('Main');
+                            if (maincontroller.api.asc_isReadOnly && maincontroller.api.asc_isReadOnly()) {
+                                maincontroller.warningDocumentIsLocked();
+                            }
+                        }
+                    });
+
                     Common.NotificationCenter.on('action:undocking', function (opts) {
-                        app.execCommand('editor:event', JSON.stringify({action:'undocking', state: opts == 'dock' ? 'dock' : 'undock'}));
+                        native.execCommand('editor:event', JSON.stringify({action:'undocking', state: opts == 'dock' ? 'dock' : 'undock'}));
                     });
 
                     Common.NotificationCenter.on('app:face', function (mode) {
@@ -192,32 +218,37 @@ define([
                             Common.NotificationCenter.trigger('app:config', {canUndock: true});
                         }
 
-                        var header = webapp.getController('Viewport').getView('Common.Views.Header');
                         titlebuttons = {};
-                        if ( !!header.btnSave ) {
-                            titlebuttons['save'] = {btn: header.btnSave, disabled:false};
+                        if ( !mode.isEdit ) {
+                            native.execCommand('webapps:features', JSON.stringify(
+                                    {version: config.version, eventloading:true, titlebuttons:true, viewmode:true} ));
+                        } else {
+                            var header = webapp.getController('Viewport').getView('Common.Views.Header');
+                            if (!!header.btnSave) {
+                                titlebuttons['save'] = {btn: header.btnSave};
 
-                            var iconname = /\s?([^\s]+)$/.exec(titlebuttons.save.btn.$icon.attr('class'));
-                            !!iconname && iconname.length && (titlebuttons.save.icon = btnsave_icons[iconname]);
-                        }
+                                var iconname = /\s?([^\s]+)$/.exec(titlebuttons.save.btn.$icon.attr('class'));
+                                !!iconname && iconname.length && (titlebuttons.save.icon = btnsave_icons[iconname]);
+                            }
 
-                        if ( !!header.btnPrint )
-                            titlebuttons['print'] = {btn: header.btnPrint, disabled:false};
+                            if (!!header.btnPrint)
+                                titlebuttons['print'] = {btn: header.btnPrint};
 
-                        if ( !!header.btnUndo )
-                            titlebuttons['undo'] = {btn: header.btnUndo, disabled:false};
+                            if (!!header.btnUndo)
+                                titlebuttons['undo'] = {btn: header.btnUndo};
 
-                        if ( !!header.btnRedo )
-                            titlebuttons['redo'] = {btn: header.btnRedo,  disabled:false};
+                            if (!!header.btnRedo)
+                                titlebuttons['redo'] = {btn: header.btnRedo};
 
-                        for (var i in titlebuttons) {
-                            titlebuttons[i].btn.options.signals = ['disabled'];
-                            titlebuttons[i].btn.on('disabled', _onTitleButtonDisabled.bind(this, i));
-                        }
+                            for (var i in titlebuttons) {
+                                titlebuttons[i].btn.options.signals = ['disabled'];
+                                titlebuttons[i].btn.on('disabled', _onTitleButtonDisabled.bind(this, i));
+                            }
 
-                        if (!!titlebuttons.save) {
-                            titlebuttons.save.btn.options.signals.push('icon:changed');
-                            titlebuttons.save.btn.on('icon:changed', _onSaveIconChanged.bind(this));
+                            if (!!titlebuttons.save) {
+                                titlebuttons.save.btn.options.signals.push('icon:changed');
+                                titlebuttons.save.btn.on('icon:changed', _onSaveIconChanged.bind(this));
+                            }
                         }
 
                         if ( !!config.callback_editorconfig ) {
@@ -233,19 +264,19 @@ define([
                 }
             },
             process: function (opts) {
-                if ( config.isDesktopApp && !!app ) {
+                if ( config.isDesktopApp && !!native ) {
                     if ( opts == 'goback' ) {
-                        app.execCommand('go:folder',
+                        native.execCommand('go:folder',
                             config.isOffline ? 'offline' : config.customization.goback.url);
                         return true;
                     } else
                     if ( opts == 'preloader:hide' ) {
-                        app.execCommand('editor:onready', '');
+                        native.execCommand('editor:onready', '');
                         return true;
                     } else
                     if ( opts == 'create:new' ) {
                         if (config.createUrl == 'desktop://create.new') {
-                            app.LocalFileCreate(!!window.SSE ? 2 : !!window.PE ? 1 : 0);
+                            native.LocalFileCreate(!!window.SSE ? 2 : !!window.PE ? 1 : 0);
                             return true;
                         }
                     }
@@ -254,8 +285,8 @@ define([
                 return false;
             },
             requestClose: function () {
-                if ( config.isDesktopApp && !!app ) {
-                    app.execCommand('editor:event', JSON.stringify({action:'close', url: config.customization.goback.url}));
+                if ( config.isDesktopApp && !!native ) {
+                    native.execCommand('editor:event', JSON.stringify({action:'close', url: config.customization.goback.url}));
                 }
             }
         };

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -99,7 +99,7 @@ define([
                         },this),
                         'show': _.bind(function(cmp){
                             var h = this.diagramEditorView.getHeight(),
-                                innerHeight = Common.Utils.innerHeight();
+                                innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
                             if (innerHeight>h && h<700 || innerHeight<h) {
                                 h = Math.min(innerHeight, 700);
                                 this.diagramEditorView.setHeight(h);

apps/common/main/lib/template/Chat.template

@@ -7,7 +7,7 @@
     </div>
     <div id="chat-options" class="layout-item">
         <div id="chat-options-ct">
-            <textarea id="chat-msg-text" class="user-select" maxlength="<%=maxMsgLength%>"></textarea>
+            <textarea id="chat-msg-text" class="user-select textarea-control" maxlength="<%=maxMsgLength%>"></textarea>
             <button id="chat-msg-btn-add" class="btn normal dlg-btn primary"><%=scope.textSend%></button>
         </div>
     </div>

apps/common/main/lib/template/Comments.template

@@ -14,7 +14,7 @@
             <div class="user-message" data-can-copy="true"><%=scope.pickLink(comment)%></div>
         <% } else { %>
             <div class="inner-edit-ct">
-                <textarea class="msg-reply user-select" maxlength="maxCommLength"><%=comment%></textarea>
+                <textarea class="msg-reply user-select textarea-control" maxlength="maxCommLength"><%=comment%></textarea>
                 <button class="btn normal dlg-btn primary btn-inner-edit" id="id-comments-change">textEdit</button>
                 <button class="btn normal dlg-btn btn-inner-close">textCancel</button>
             </div>
@@ -42,7 +42,7 @@
                         <%}%>
                     <% } else { %>
                         <div class="inner-edit-ct">
-                            <textarea class="msg-reply textarea-fix user-select" maxlength="maxCommLength"><%=item.get("reply")%></textarea>
+                            <textarea class="msg-reply textarea-fix user-select textarea-control" maxlength="maxCommLength"><%=item.get("reply")%></textarea>
                             <button class="btn normal dlg-btn primary btn-inner-edit btn-fix" id="id-comments-change">textEdit</button>
                             <button class="btn normal dlg-btn btn-inner-close">textClose</button>
                         </div>
@@ -81,7 +81,7 @@
 
         <% if (showReply) { %>
             <div class="reply-ct">
-                <textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength"></textarea>
+                <textarea class="msg-reply user-select textarea-control" placeholder="textAddReply" maxlength="maxCommLength"></textarea>
                 <button class="btn normal dlg-btn primary btn-reply" id="id-comments-change">textReply</button>
                 <button class="btn normal dlg-btn btn-close">textClose</button>
             </div>

apps/common/main/lib/template/CommentsPanel.template

@@ -5,7 +5,7 @@
     </div>
     <div style="display: none;" class="layout-item new-comment-ct">
         <div class="inner-ct">
-            <textarea id="comment-msg-new" class="user-select" placeholder="<%=textEnterCommentHint%>" maxlength="<%=maxCommLength%>"/>
+            <textarea id="comment-msg-new" class="user-select textarea-control" placeholder="<%=textEnterCommentHint%>" maxlength="<%=maxCommLength%>"/>
         </div>
         <button class="btn add normal dlg-btn primary"><%=textAddComment%></button>
         <button class="btn cancel normal dlg-btn"><%=textCancel%></button>

apps/common/main/lib/util/utils.js

@@ -214,6 +214,7 @@ Common.Utils = _.extend(new(function() {
         documentSettingsType: documentSettingsType,
         importTextType: importTextType,
         zoom: function() {return me.zoom;},
+        topOffset: 0,
         innerWidth: function() {return me.innerWidth;},
         innerHeight: function() {return me.innerHeight;}
     }
@@ -829,6 +830,7 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
         /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
 
         var button = new Common.UI.Button({
+            parentEl: $slots.eq(index),
             id: id + index,
             cls: _cls,
             iconCls: iconCls,
@@ -838,7 +840,7 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
             enableToggle: toggle || false,
             lock: lock,
             disabled: true
-        }).render( $slots.eq(index) );
+        });
 
         btnsArr.add(button);
     });
@@ -851,6 +853,30 @@ Common.Utils.injectComponent = function ($slot, cmp) {
     }
 };
 
+Common.Utils.warningDocumentIsLocked = function (opts) {
+    if ( opts.disablefunc )
+        opts.disablefunc(true);
+
+    var app = window.DE || window.PE || window.SSE;
+    var tip = new Common.UI.SynchronizeTip({
+        extCls      : 'simple',
+        text        : Common.Locale.get("warnFileLocked",{name:"Common.Translation", default:'Document is in use by another application. You can continue editing and save it as a copy.'}),
+        textLink    : Common.Locale.get("txtContinueEditing",{name:app.nameSpace + ".Views.SignatureSettings", default:'Edit anyway'}),
+        placement   : 'document'
+    });
+    tip.on({
+        'dontshowclick': function() {
+            if ( opts.disablefunc ) opts.disablefunc(false);
+            app.getController('Main').api.asc_setIsReadOnly(false);
+            this.close();
+        },
+        'closeclick': function() {
+            this.close();
+        }
+    });
+    tip.show();
+};
+
 jQuery.fn.extend({
     elementById: function (id, parent) {
         /**
@@ -896,6 +922,24 @@ Common.Utils.InternalSettings.set('toolbar-height-tabs', 32);
 Common.Utils.InternalSettings.set('toolbar-height-tabs-top-title', 28);
 Common.Utils.InternalSettings.set('toolbar-height-controls', 67);
 Common.Utils.InternalSettings.set('document-title-height', 28);
+Common.Utils.InternalSettings.set('window-inactive-area-top', 0);
 
 Common.Utils.InternalSettings.set('toolbar-height-compact', Common.Utils.InternalSettings.get('toolbar-height-tabs'));
 Common.Utils.InternalSettings.set('toolbar-height-normal', Common.Utils.InternalSettings.get('toolbar-height-tabs') + Common.Utils.InternalSettings.get('toolbar-height-controls'));
+
+Common.Utils.ModalWindow = new(function() {
+    var count = 0;
+    return {
+        show: function() {
+            count++;
+        },
+
+        close: function() {
+            count--;
+        },
+
+        isVisible: function() {
+            return count>0;
+        }
+    }
+})();

apps/common/main/lib/view/AdvancedSettingsWindow.js

@@ -107,22 +107,6 @@ define([
             this.content_panels = $window.find('.settings-panel');
             if (this.btnsCategory.length>0)
                 this.btnsCategory[0].toggle(true, true);
-
-            me.menuAddAlign = function(menuRoot, left, top) {
-                var self = this;
-                if (!$window.hasClass('notransform')) {
-                    $window.addClass('notransform');
-                    menuRoot.addClass('hidden');
-                    setTimeout(function() {
-                        menuRoot.removeClass('hidden');
-                        menuRoot.css({left: left, top: top});
-                        self.options.additionalAlign = null;
-                    }, 300);
-                } else {
-                    menuRoot.css({left: left, top: top});
-                    self.options.additionalAlign = null;
-                }
-            }
         },
 
         setHeight: function(height) {

apps/common/main/lib/view/ExternalDiagramEditor.js

@@ -45,10 +45,11 @@ define([
     Common.Views.ExternalDiagramEditor = Common.UI.Window.extend(_.extend({
         initialize : function(options) {
             var _options = {};
+            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
             _.extend(_options,  {
                 title: this.textTitle,
                 width: 910,
-                height: (Common.Utils.innerHeight()-700)<0 ? Common.Utils.innerHeight(): 700,
+                height: (_inner_height - 700)<0 ? _inner_height : 700,
                 cls: 'advanced-settings-dlg',
                 header: true,
                 toolclose: 'hide',
@@ -140,11 +141,11 @@ define([
                 this.$window.find('> .body').css('height', height-header_height);
                 this.$window.find('> .body > .box').css('height', height-85);
 
-                var top  = (Common.Utils.innerHeight() - parseInt(height)) / 2;
+                var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
                 var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
 
                 this.$window.css('left',left);
-                this.$window.css('top',top);
+                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
             }
         },
 

apps/common/main/lib/view/Header.js

@@ -109,14 +109,15 @@ define([
 
         var templateTitleBox = '<section id="box-document-title">' +
                                 '<div class="extra"></div>' +
-                                '<div class="hedset">' +
+                                '<div class="hedset" id="header-tools">' +
                                     '<div class="btn-slot" id="slot-btn-dt-save"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-print"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-undo"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-redo"></div>' +
                                 '</div>' +
-                                '<div class="lr-separator"></div>' +
-                                '<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;" disabled="disabled">' +
+                                '<div class="lr-separator">' +
+                                    '<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;" disabled="disabled">' +
+                                '</div>' +
                                 '<label id="title-user-name" style="pointer-events: none;"></label>' +
                             '</section>';
 
@@ -202,7 +203,19 @@ define([
             }
         }
 
-        function onAppShowed(config) {}
+        function onAppShowed(config) {
+            if ( this.labelDocName && this.labelDocName.get(0).id == 'title-doc-name'
+                && this.labelDocName.is(':visible') )
+            {
+                var $tools = this.btnSave.$el.parent('#header-tools');
+                var _left_width = $tools.prev().outerWidth() + $tools.outerWidth();
+                var _right_width = this.labelUserName.outerWidth();
+
+                if ( _left_width < _right_width )
+                    this.labelDocName.css('padding-left', _right_width - _left_width);
+                else this.labelDocName.css('padding-right', _left_width - _right_width);
+            }
+        }
 
         function onAppReady(mode) {
             appConfig = mode;
@@ -471,6 +484,8 @@ define([
                         if ( me.documentCaption ) {
                             me.labelDocName.text(me.documentCaption);
                         }
+                    } else {
+                        $html.find('#rib-doc-name').hide();
                     }
 
                     if ( !_.isUndefined(this.options.canRename) ) {
@@ -511,7 +526,7 @@ define([
                     var $html = $(_.template(templateTitleBox)());
 
                     !!me.labelDocName && me.labelDocName.hide().off();                  // hide document title if it was created in right box
-                    me.labelDocName = $html.find('> #title-doc-name');
+                    me.labelDocName = $html.find('#title-doc-name');
                     me.labelDocName.text = function (str) {this.val(str);};             // redefine text function to lock temporaly rename docuemnt option
                     me.labelDocName.text( me.documentCaption );
 

apps/common/main/lib/view/ListSettingsDialog.js

@@ -103,22 +103,6 @@ define([
                 $window = this.getChild();
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
-            this.menuAddAlign = function(menuRoot, left, top) {
-                var self = this;
-                if (!$window.hasClass('notransform')) {
-                    $window.addClass('notransform');
-                    menuRoot.addClass('hidden');
-                    setTimeout(function() {
-                        menuRoot.removeClass('hidden');
-                        menuRoot.css({left: left, top: top});
-                        self.options.additionalAlign = null;
-                    }, 300);
-                } else {
-                    menuRoot.css({left: left, top: top});
-                    self.options.additionalAlign = null;
-                }
-            };
-
             this.spnSize = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-size'),
                 step        : 1,
@@ -135,24 +119,12 @@ define([
             });
 
             this.btnColor = new Common.UI.ColorButton({
+                parentEl: $window.find('#id-dlg-list-color'),
                 style: "width:53px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="id-dlg-list-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="id-dlg-list-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign
             });
-            this.btnColor.on('render:after', function(btn) {
-                me.colors = new Common.UI.ThemeColorPalette({
-                    el: $('#id-dlg-list-color-menu'),
-                    transparent: false
-                });
-                me.colors.on('select', _.bind(me.onColorsSelect, me));
-            });
-            this.btnColor.render($window.find('#id-dlg-list-color'));
-            $('#id-dlg-list-color-new').on('click', _.bind(this.addNewColor, this, this.colors));
+            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
+            this.colors = this.btnColor.getPicker();
 
             this.spnStart = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-start'),
@@ -188,12 +160,7 @@ define([
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsSelect: function(picker, color) {
-            this.btnColor.setColor(color);
+        onColorsSelect: function(btn, color) {
             if (this._changedProps) {
                 this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color));
             }
@@ -287,7 +254,6 @@ define([
         txtSize: 'Size',
         txtColor: 'Color',
         txtOfText: '% of text',
-        textNewColor: 'Add New Custom Color',
         txtStart: 'Start at',
         txtBullet: 'Bullet',
         tipChange: 'Change bullet'

apps/common/main/lib/view/OpenDialog.js

@@ -59,7 +59,7 @@ define([
                 width = 414;
                 height = 277;
             } else {
-                width = (options.type !== Common.Utils.importTextType.DRM) ? 340 : (options.warning ? 370 : 262);
+                width = (options.type !== Common.Utils.importTextType.DRM) ? 340 : (options.warning ? 420 : 262);
                 height = (options.type == Common.Utils.importTextType.CSV || options.type == Common.Utils.importTextType.Paste || options.type == Common.Utils.importTextType.Columns) ? 190 : (options.warning ? 187 : 147);
             }
 
@@ -87,7 +87,7 @@ define([
                             '<div class="icon img-commonctrl warn"/>',
                             '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + t.txtProtected+ '</div>',
                                 '<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
-                                '<div id="id-password-txt" style="width: 240px;"></div></div>',
+                                '<div id="id-password-txt" style="width: 290px;"></div></div>',
                         '</div>',
                         '<% } else { %>',
                         '<div>',

apps/common/main/lib/view/ReviewChanges.js

@@ -647,7 +647,8 @@ define([
                     }
                 }, this);
                 this.btnChat && this.btnChat.setDisabled(state);
-                this.btnCommentRemove && this.btnCommentRemove.setDisabled(state);
+
+                this.btnCommentRemove && this.btnCommentRemove.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment"));
             },
 
             onLostEditRights: function() {

apps/common/main/lib/view/SignDialog.js

@@ -188,12 +188,12 @@ define([
             this.cmbFontSize.setValue(this.font.size);
 
             me.btnBold = new Common.UI.Button({
+                parentEl: $('#id-dlg-sign-bold'),
                 cls: 'btn-toolbar',
                 iconCls: 'btn-bold',
                 enableToggle: true,
                 hint: me.textBold
             });
-            me.btnBold.render($('#id-dlg-sign-bold')) ;
             me.btnBold.on('click', function(btn, e) {
                 if (me.signObject) {
                     me.signObject.setText(me.inputName.getValue(), me.font.name, me.font.size, me.font.italic, btn.pressed);
@@ -202,12 +202,12 @@ define([
             });
 
             me.btnItalic = new Common.UI.Button({
+                parentEl: $('#id-dlg-sign-italic'),
                 cls: 'btn-toolbar',
                 iconCls: 'btn-italic',
                 enableToggle: true,
                 hint: me.textItalic
             });
-            me.btnItalic.render($('#id-dlg-sign-italic')) ;
             me.btnItalic.on('click', function(btn, e) {
                 if (me.signObject) {
                     me.signObject.setText(me.inputName.getValue(), me.font.name, me.font.size, btn.pressed, me.font.bold);

apps/common/main/lib/view/SymbolTableDialog.js

@@ -366,14 +366,24 @@ define([
         options: {
             resizable       : true,
             minwidth        : 448,
-            minheight       : 396,
+            minheight       : 434,
             width: 448,
-            height: 396,
+            height: 434,
             cls: 'modal-dlg',
             buttons: ['ok', 'cancel']
         },
 
         initialize : function(options) {
+            var config = {
+                resizable       : true,
+                minwidth        : 448,
+                minheight       : 434,
+                width: 448,
+                height: 434,
+                cls: 'modal-dlg',
+                buttons: ['ok', 'cancel']
+            };
+
             var filter = Common.localStorage.getKeysFilter();
             this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
 
@@ -385,70 +395,96 @@ define([
             }
             size = size ? JSON.parse(size) : [];
 
-            _.extend(this.options, {
+            this.options = _.extend(config, {
                 title: this.textTitle,
                 width           : size[0] || 448,
-                height          : size[1] || 396
+                height          : size[1] || 434
             }, options || {});
 
+            this.api = this.options.api;
+            this.type = this.options.type || 0; // 0 - close on OK, single adding symbol
+            this.special = this.options.special || false; // true - show special tab
+            this.showShortcutKey = this.options.showShortcutKey || false;
+            !this.special && (this.options.height -= 38);
+            !this.special && (this.options.minheight -= 38);
+
             this.template = [
                 '<div class="box">',
-                    '<table cols="2" style="width: 100%;max-width: 497px;">',
-                        '<tr>',
-                            '<td style="padding-right: 5px;padding-bottom: 8px;width: 50%;">',
-                                '<label class="input-label">' + this.textFont + '</label>',
-                                '<div id="symbol-table-cmb-fonts"></div>',
-                            '</td>',
-                            '<td style="padding-left: 5px;padding-bottom: 8px;">',
-                                '<label class="input-label">' + this.textRange + '</label>',
-                                '<div id="symbol-table-cmb-range"></div>',
-                            '</td>',
-                        '</tr>',
-                    '</table>',
-                    '<table cols="1" style="width: 100%;">',
-                        '<tr>',
-                            '<td style="padding-bottom: 16px;">',
-                                '<div id="symbol-table-scrollable-div" style="position: relative;height:'+ (this.options.height-264) + 'px;">',
-                                    '<div style="width: 100%;">',
-                                        '<div id="id-preview">',
-                                            '<div>',
-                                                '<div style="position: absolute; top: 0;"><div id="id-preview-data" tabindex="0" oo_editor_input="true"></div></div>',
+                    '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'hidden') +'">',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textSymbols,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-special" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textSpecial,'</button>',
+                    '</div>',
+                    '<div id="symbol-table-pnl-symbols">',
+                        '<table cols="2" style="width: 100%;max-width: 497px;">',
+                            '<tr>',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 50%;">',
+                                    '<label class="input-label">' + this.textFont + '</label>',
+                                    '<div id="symbol-table-cmb-fonts"></div>',
+                                '</td>',
+                                '<td style="padding-left: 5px;padding-bottom: 8px;">',
+                                    '<label class="input-label">' + this.textRange + '</label>',
+                                    '<div id="symbol-table-cmb-range"></div>',
+                                '</td>',
+                            '</tr>',
+                        '</table>',
+                        '<table cols="1" style="width: 100%;">',
+                            '<tr>',
+                                '<td style="padding-bottom: 16px;">',
+                                    '<div id="symbol-table-scrollable-div" style="position: relative;height:'+ (this.options.height-302 + 38*(this.special ? 0 : 1)) + 'px;">',
+                                        '<div style="width: 100%;">',
+                                            '<div id="id-preview">',
+                                                '<div>',
+                                                    '<div style="position: absolute; top: 0;"><div id="id-preview-data" tabindex="0" oo_editor_input="true"></div></div>',
+                                                '</div>',
                                             '</div>',
                                         '</div>',
                                     '</div>',
-                                '</div>',
-                            '</td>',
-                        '</tr>',
-                        '<tr>',
-                            '<td style="padding-bottom: 16px;">',
-                                '<label class="input-label">' + this.textRecent + '</label>',
-                                '<div id="symbol-table-recent" tabindex="0" oo_editor_input="true" style="width: 100%;"></div>',
-                            '</td>',
-                        '</tr>',
-                    '</table>',
-                    '<table cols="2" style="width: 100%;max-width: 497px;">',
-                        '<tr>',
-                            '<td style="padding-right: 5px; width: 50%;">',
-                                '<label class="input-label">' + this.textCode + '</label>',
-                            '</td>',
-                            '<td style="padding-left: 5px;">',
-                            '</td>',
-                        '</tr>',
-                        '<tr>',
-                            '<td style="padding-right: 5px;">',
-                                '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
-                            '</td>',
-                            '<td style="padding-left: 5px;">',
-                                '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
-                            '</td>',
-                        '</tr>',
-                    '</table>',
+                                '</td>',
+                            '</tr>',
+                            '<tr>',
+                                '<td style="padding-bottom: 16px;">',
+                                    '<label class="input-label">' + this.textRecent + '</label>',
+                                    '<div id="symbol-table-recent" tabindex="0" oo_editor_input="true" style="width: 100%;"></div>',
+                                '</td>',
+                            '</tr>',
+                        '</table>',
+                        '<table cols="2" style="width: 100%;max-width: 497px;">',
+                            '<tr>',
+                                '<td style="padding-right: 5px; width: 50%;">',
+                                    '<label class="input-label">' + this.textCode + '</label>',
+                                '</td>',
+                                '<td style="padding-left: 5px;">',
+                                '</td>',
+                            '</tr>',
+                            '<tr>',
+                                '<td style="padding-right: 5px;">',
+                                    '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
+                                '</td>',
+                                '<td style="padding-left: 5px;">',
+                                    '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
+                                '</td>',
+                            '</tr>',
+                        '</table>',
+                    '</div>',
+                    '<div id="symbol-table-pnl-special">',
+                        '<table cols="1" style="width: 100%;">',
+                            '<tr>',
+                                '<td>',
+                                    '<label>' + this.textCharacter + '</label>',
+                                    '<label id="symbol-table-lbl-shortcut" style="float: right; width: 107px;">' + this.textShortcut + '</label>',
+                                '</td>',
+                            '</tr>',
+                            '<tr>',
+                                '<td>',
+                                    '<div id="symbol-table-special-list" class="no-borders" style="width:100%; height: '+ (this.options.height-156 + 38*(this.special ? 0 : 1)) + 'px;"></div>',
+                                '</td>',
+                            '</tr>',
+                        '</table>',
+                    '</div>',
                 '</div>'
             ].join('');
 
             this.options.tpl = _.template(this.template)(this.options);
-            this.api = this.options.api;
-            this.type = this.options.type || 0; // 0 - close on OK, single adding symbol
 
             var init = (aFontSelects.length<1);
             init && this.initFonts();
@@ -579,6 +615,25 @@ define([
             var $border = $window.find('.resize-border');
             $border.css({'background': 'none', 'border': 'none'});
 
+            this.btnSymbols = new Common.UI.Button({
+                el: $window.find('#symbol-table-symbols'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
+            });
+            this.btnSymbols.on('click', _.bind(this.onModeClick, this, false));
+
+            this.btnSpecial = new Common.UI.Button({
+                el: $window.find('#symbol-table-special'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            this.btnSpecial.on('click', _.bind(this.onModeClick, this, true));
+
+            // symbols
+
             this.cmbFonts = new Common.UI.ComboBox({
                 el          : $window.find('#symbol-table-cmb-fonts'),
                 cls         : 'input-group-nr',
@@ -663,7 +718,51 @@ define([
             this.boxPanel = $window.find('.box');
             this.updateView(undefined, undefined, undefined, true);
 
+            // special
+            var data = [{symbol: '—',  description: this.textEmDash,       shortcutKey: 'Alt+Ctrl+Num -', code: '2014'},
+                        {symbol: '–',   description: this.textEnDash,       shortcutKey: '', code: '2013'},
+                        {symbol: '‑',   description: this.textNBHyphen,     shortcutKey: 'Ctrl+Shift+_', code: '2011'},
+                        {symbol: '',    description: this.textSHyphen,      shortcutKey: 'Alt+-', code: '00AD'},
+                        {symbol: '',    description: this.textEmSpace,      shortcutKey: '', code: '2003'},
+                        {symbol: '',    description: this.textEnSpace,      shortcutKey: '', code: '2002'},
+                        {symbol: '',    description: this.textQEmSpace,     shortcutKey: '', code: '2005'},
+                        {symbol: '°',   description: this.textNBSpace,      shortcutKey: 'Ctrl+Shift+Space', code: '00A0'},
+                        {symbol: '©',   description: this.textCopyright,    shortcutKey: 'Alt+Ctrl+C', code: '00A9'},
+                        {symbol: '®',   description: this.textRegistered,   shortcutKey: 'Alt+Ctrl+R', code: '00AE'},
+                        {symbol: '™',  description: this.textTradeMark,    shortcutKey: 'Alt+Ctrl+T', code: '2122'},
+                        {symbol: '§',   description: this.textSection,      shortcutKey: '', code: '00A7'},
+                        {symbol: '¶',   description: this.textPilcrow,      shortcutKey: '', code: '00B6'},
+                        {symbol: '…',  description: this.textEllipsis,     shortcutKey: 'Alt+Ctrl+.', code: '2026'},
+                        {symbol: '‛',   description: this.textSOQuote,      shortcutKey: '', code: '2018'},
+                        {symbol: '’',   description: this.textSCQuote,      shortcutKey: '', code: '2019'},
+                        {symbol: '‟',   description: this.textDOQuote,      shortcutKey: '', code: '201C'},
+                        {symbol: '”',   description: this.textDCQuote,      shortcutKey: '', code: '201D'}
+            ];
+            this.specialList = new Common.UI.ListView({
+                el: $window.find('#symbol-table-special-list'),
+                store: new Common.UI.DataViewStore(data),
+                simpleAddMode: true,
+                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="list-item" style="pointer-events:none;width: 100%;display:flex;">',
+                        '<div style="width:70px;text-align: center; padding-right: 5px;"><%= symbol %></div>',
+                        '<div style="flex-grow:1;padding-right: 5px;"><%= description %></div>',
+                        '<% if (' + this.showShortcutKey + ') { %>',
+                            '<div style="width:100px;"><%= shortcutKey %></div>',
+                        '<% } %>',
+                    '</div>'
+                ].join(''))
+            });
+            this.specialList.on('item:dblclick', _.bind(this.onDblClickSpecialItem, this))
+                            .on('entervalue', _.bind(this.onDblClickSpecialItem, this));
+            this.specialList.selectByIndex(0);
+
+            this.lblShortCut = $window.find('#symbol-table-lbl-shortcut');
+            this.lblShortCut.toggleClass('hidden', !this.showShortcutKey);
+
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            this.symbolsPanel = $window.find('#symbol-table-pnl-symbols');
+            this.specialPanel = $window.find('#symbol-table-pnl-special');
         },
 
         show: function() {
@@ -676,16 +775,17 @@ define([
             $(document).on('keydown.' + this.cid, '#symbol-table-scrollable-div #id-preview-data, #symbol-table-recent', this.binding.keydownSymbols);
             $(document).on('keypress.' + this.cid, '#symbol-table-scrollable-div #id-preview-data, #symbol-table-recent', this.binding.keypressSymbols);
 
-            var me = this;
-            _.delay(function(){
-                me.previewPanel.focus();
-            },50);
+            var special = this.special && !!Common.Utils.InternalSettings.get(this.appPrefix + "symbol-table-special");
+            special ? this.btnSpecial.toggle(true) : this.btnSymbols.toggle(true);
+            this.ShowHideElem(special);
         },
 
         close: function(suppressevent) {
             $(document).off('keydown.' + this.cid, this.binding.keydownSymbols);
             $(document).off('keypress.' + this.cid, this.binding.keypressSymbols);
 
+            this.special && Common.Utils.InternalSettings.set(this.appPrefix + "symbol-table-special", this.btnSpecial.isActive());
+
             Common.UI.Window.prototype.close.apply(this, arguments);
         },
 
@@ -701,6 +801,11 @@ define([
             return {font: sFont, symbol: this.encodeSurrogateChar(nCurrentSymbol), code: nCurrentSymbol, updateRecents: bUpdateRecents};
         },
 
+        getSpecialSymbol: function() {
+            var rec = this.specialList.getSelectedRec();
+            return {font: undefined, symbol: this.encodeSurrogateChar(rec.get('code')), code: parseInt(rec.get('code'), 16)};
+        },
+
         onBtnClick: function(event) {
             this._handleInput(event.currentTarget.attributes['result'].value);
         },
@@ -711,13 +816,14 @@ define([
         },
 
         _handleInput: function(state) {
-            var settings = this.getPasteSymbol(this.$window.find('.cell-selected').attr('id'));
+            var special = this.btnSpecial.isActive();
+            var settings = special ? this.getSpecialSymbol() : this.getPasteSymbol(this.$window.find('.cell-selected').attr('id'));
             if (this.options.handler) {
                 this.options.handler.call(this, this, state, settings);
             }
             if (state=='ok') {
-                settings.updateRecents && this.checkRecent(nCurrentSymbol, settings.font);
-                settings.updateRecents && this.updateRecents();
+                !special && settings.updateRecents && this.checkRecent(nCurrentSymbol, settings.font);
+                !special && settings.updateRecents && this.updateRecents();
                 if (this.type)
                     return;
             }
@@ -950,6 +1056,15 @@ define([
             }
         },
 
+        onDblClickSpecialItem: function(e) {
+            if (!this.type)
+                this._handleInput('ok');
+            else {
+                var settings = this.getSpecialSymbol();
+                this.fireEvent('symbol:dblclick', this, 'ok', settings);
+            }
+        },
+
         updateRecents: function(){
             var oRecentsDiv = this.recentPanel;
             oRecentsDiv.empty();
@@ -1304,7 +1419,7 @@ define([
                 this.curSize = {resize: false, width: size[0], height: size[1]};
             } else if (this.curSize.resize) {
                 this._preventUpdateScroll = false;
-                this.curSize.height = size[1] - 264;
+                this.curSize.height = size[1] - 302 + 38*(this.special ? 0 : 1);
                 var rows = Math.max(1, ((this.curSize.height/CELL_HEIGHT) >> 0)),
                     height = rows*CELL_HEIGHT;
 
@@ -1315,6 +1430,9 @@ define([
 
                 this.updateView(undefined, undefined, undefined, true);
 
+                this.specialList.cmpEl.height(size[1] - 156 + 38*(this.special ? 0 : 1));
+
+                !this.special && (size[1] += 38);
                 var valJson = JSON.stringify(size);
                 Common.localStorage.setItem(this.appPrefix + 'settings-size-symbol-table', valJson);
                 Common.Utils.InternalSettings.set(this.appPrefix + 'settings-size-symbol-table', valJson);
@@ -1330,7 +1448,7 @@ define([
                     this.curSize.resize = true;
 
                 this.curSize.width = size[0];
-                this.curSize.height = size[1] - 264;
+                this.curSize.height = size[1] - 302 + 38*(this.special ? 0 : 1);
 
                 var rows = Math.max(1, ((this.curSize.height/CELL_HEIGHT) >> 0)),
                     height = rows*CELL_HEIGHT;
@@ -1339,14 +1457,53 @@ define([
                 this.previewPanel.css({'height': height  + 'px'});
                 this.previewScrolled.css({'height': height + 'px'});
 
+                this.specialList.cmpEl.height(size[1] - 156 + 38*(this.special ? 0 : 1));
+
                 this.updateView(undefined, undefined, undefined, true);
             }
         },
 
+        onModeClick: function(special, btn, event) {
+            this.ShowHideElem(special);
+        },
+
+        ShowHideElem: function(special) {
+            this.symbolsPanel.toggleClass('hidden', special);
+            this.specialPanel.toggleClass('hidden', !special);
+            var me = this;
+            _.delay(function(){
+                special ? me.specialList.cmpEl.find('.listview').focus() : me.previewPanel.focus();
+            },50);
+
+        },
+
         textTitle: 'Symbol',
         textFont: 'Font',
         textRange: 'Range',
         textRecent: 'Recently used symbols',
-        textCode: 'Unicode HEX value'
+        textCode: 'Unicode HEX value',
+        textSymbols: 'Symbols',
+        textSpecial: 'Special characters',
+        textCharacter: 'Character',
+        textShortcut: 'Shortcut key',
+        textEmDash: 'Em Dash',
+        textEnDash: 'En Dash',
+        textNBHyphen: 'Non-breaking Hyphen',
+        textSHyphen: 'Soft Hyphen',
+        textEmSpace: 'Em Space',
+        textEnSpace: 'En Space',
+        textQEmSpace: '1/4 Em Space',
+        textNBSpace: 'No-break Space',
+        textCopyright: 'Copyright Sign',
+        textRegistered: 'Registered Sign',
+        textTradeMark: 'Trade Mark Sign',
+        textSection: 'Section Sign',
+        textPilcrow: 'Pilcrow Sign',
+        textEllipsis: 'Horizontal Ellipsis',
+        textSOQuote: 'Single Opening Quote',
+        textSCQuote: 'Single Closing Quote',
+        textDOQuote: 'Double Opening Quote',
+        textDCQuote: 'Double Closing Quote'
+
     }, Common.Views.SymbolTableDialog || {}))
 });