Merge branch 'develop' into feature/sse-slicer

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',
+                        title: 'template name', // name - is deprecated
-                        icon: 'template icon url',
+                        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);
+            if (/svgicon/.test(this.iconCls)) {
-            btnIconEl.addClass(cls || '');
+                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,
+            var span = $(this.cmpEl).find('button span:nth-child(1)');
-                span = $(this.cmpEl).find('button span');
             this.color = color;
 
-            if ( color== 'transparent' ) {
+            span.toggleClass('color-transparent', color=='transparent');
-                border_color = '#BEBEBE';
+            span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
-                clr = color;
+        },
-                span.addClass('color-transparent');
+
-            } else {
+        getPicker: function(color) {
-                border_color = 'transparent';
+            if (!this.colorPicker) {
-                clr = (typeof(color) == 'object') ? '#'+color.color : '#'+color;
+                this.colorPicker = new Common.UI.ThemeColorPalette({
-                span.removeClass('color-transparent');
+                    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/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/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 ( _rightedge > _maxright) {
-                            if ( !$active.hasClass('compactwidth') ) {
+                            if (_flex.length>0) {
-                                $active.addClass('compactwidth');
+                                for (var i=0; i<_flex.length; i++) {
-                                data.rightedge = _rightedge;
+                                    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')) {
+                            for (var i=0; i<_btns.length; i++) {
-                                $active.removeClass('compactwidth');
+                                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 %>">',
+        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>',
+                                            '<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 width  = document.documentElement.offsetWidth,
-                var main_height = document.documentElement.offsetHeight;
+                height = document.documentElement.offsetHeight;
             } else {
-                main_width  = Common.Utils.innerWidth();
+                width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
+                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_geometry = _readDocumetGeometry(),
-                var main_width  = document.documentElement.offsetWidth;
+                main_width = main_geometry.width,
-                var main_height = document.documentElement.offsetHeight;
+                main_height = main_geometry.height;
-            } else {
-                main_width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
-            }
 
             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_geometry = _readDocumetGeometry(),
-                var main_width  = document.documentElement.offsetWidth;
+                main_width = main_geometry.width,
-                var main_height = document.documentElement.offsetHeight;
+                main_height = main_geometry.height;
-            } else {
-                main_width  = Common.Utils.innerWidth();
-                main_height = Common.Utils.innerHeight();
-            }
 
             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(),
+            var main_geometry = _readDocumetGeometry(),
-                main_height = (window.innerHeight == undefined) ? document.documentElement.offsetHeight : Common.Utils.innerHeight(),
+                main_width = main_geometry.width,
-                maxwidth = (this.initConfig.maxwidth) ? this.initConfig.maxwidth : main_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;

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,
+        var webapp = window.DE || window.PE || window.SSE;
-            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'});
+            native.execCommand('webapps:features', JSON.stringify({version: config.version, eventloading:true, titlebuttons:true}));
-            app.execCommand('webapps:features', {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 ) {
+                        if ( !mode.isEdit ) {
-                            titlebuttons['save'] = {btn: header.btnSave, disabled:false};
+                            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'));
+                                var iconname = /\s?([^\s]+)$/.exec(titlebuttons.save.btn.$icon.attr('class'));
-                            !!iconname && iconname.length && (titlebuttons.save.icon = btnsave_icons[iconname]);
+                                !!iconname && iconname.length && (titlebuttons.save.icon = btnsave_icons[iconname]);
-                        }
+                            }
 
-                        if ( !!header.btnPrint )
+                            if (!!header.btnPrint)
-                            titlebuttons['print'] = {btn: header.btnPrint, disabled:false};
+                                titlebuttons['print'] = {btn: header.btnPrint};
 
-                        if ( !!header.btnUndo )
+                            if (!!header.btnUndo)
-                            titlebuttons['undo'] = {btn: header.btnUndo, disabled:false};
+                                titlebuttons['undo'] = {btn: header.btnUndo};
 
-                        if ( !!header.btnRedo )
+                            if (!!header.btnRedo)
-                            titlebuttons['redo'] = {btn: header.btnRedo,  disabled:false};
+                                titlebuttons['redo'] = {btn: header.btnRedo};
 
-                        for (var i in titlebuttons) {
+                            for (var i in titlebuttons) {
-                            titlebuttons[i].btn.options.signals = ['disabled'];
+                                titlebuttons[i].btn.options.signals = ['disabled'];
-                            titlebuttons[i].btn.on('disabled', _onTitleButtonDisabled.bind(this, i));
+                                titlebuttons[i].btn.on('disabled', _onTitleButtonDisabled.bind(this, i));
-                        }
+                            }
 
-                        if (!!titlebuttons.save) {
+                            if (!!titlebuttons.save) {
-                            titlebuttons.save.btn.options.signals.push('icon:changed');
+                                titlebuttons.save.btn.options.signals.push('icon:changed');
-                            titlebuttons.save.btn.on('icon:changed', _onSaveIconChanged.bind(this));
+                                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 ) {
+                if ( config.isDesktopApp && !!native ) {
-                    app.execCommand('editor:event', JSON.stringify({action:'close', url: config.customization.goback.url}));
+                    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/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);
             }
         },
 
@@ -160,4 +161,4 @@ define([
         textClose: 'Close',
         textTitle: 'Chart Editor'
     }, Common.Views.ExternalDiagramEditor || {}));
-});
+});

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>' +
+                                '<div class="lr-separator">' +
-                                '<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;" disabled="disabled">' +
+                                    '<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

@@ -119,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
-                    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>') }
-                    ]
-                })
             });
-            this.btnColor.on('render:after', function(btn) {
+            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
-                me.colors = new Common.UI.ThemeColorPalette({
+            this.colors = this.btnColor.getPicker();
-                    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.spnStart = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-start'),
@@ -172,12 +160,7 @@ define([
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
-        addNewColor: function(picker, btn) {
+        onColorsSelect: function(btn, color) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsSelect: function(picker, color) {
-            this.btnColor.setColor(color);
             if (this._changedProps) {
                 this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color));
             }
@@ -271,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/PasswordDialog.js

@@ -55,7 +55,7 @@ define([
 
             _.extend(_options,  {
                 width           : 350,
-                height          : 220,
+                height          : 238,
                 header          : true,
                 cls             : 'modal-dlg',
                 contentTemplate : '',
@@ -65,7 +65,7 @@ define([
             }, options);
 
             this.template = options.template || [
-                '<div class="box" style="height:' + (_options.height - 85) + 'px;">',
+                '<div class="box">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<label>' + t.txtDescription + '</label>',
                     '</div>',
@@ -76,9 +76,8 @@ define([
                     '<div class="input-row">',
                         '<label>' + t.txtRepeat + '</label>',
                     '</div>',
-                    '<div id="id-repeat-txt" class="input-row"></div>',
+                    '<div id="id-repeat-txt" class="input-row" style="margin-bottom: 10px;"></div>',
-                '</div>',
+                '</div>'
-                '<div class="separator horizontal"/>'
             ].join('');
 
             this.handler        =   options.handler;

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);