Merge branch 'develop' into feature/de-list-settings

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "filewatcher.commands": [
+        {
+            "match": "app-(ios|material)\\.less",
+            "isAsync": true,
+            "cmd": "lessc --js --no-color '${file}' '${fileDirname}/../css/${fileBasenameNoExt}.css'",
+            "event": "onFileChange"
+        }
+    ]
+}

apps/api/documents/api.js

@@ -131,7 +131,8 @@
                     toolbarHideFileName: false,
                     reviewDisplay: 'original',
                     spellcheck: true,
-                    compatibleFeatures: false
+                    compatibleFeatures: false,
+                    unit: 'cm' // cm, pt, inch
                 },
                 plugins: {
                     autostart: ['asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}'],

apps/common/locale.js

@@ -38,7 +38,8 @@ Common.Locale = new(function() {
     "use strict";
     var l10n = null;
     var loadcallback,
-        apply = false;
+        apply = false,
+        currentLang = 'en';
 
     var _applyLocalization = function(callback) {
         try {
@@ -78,6 +79,10 @@ Common.Locale = new(function() {
         return res || (scope ? eval(scope.name).prototype[prop] : '');
     };
 
+    var _getCurrentLanguage = function() {
+        return (currentLang || 'en');
+    };
+
     var _getUrlParameterByName = function(name) {
         name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
         var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
@@ -87,9 +92,11 @@ Common.Locale = new(function() {
 
     var _requireLang = function () {
         var lang = (_getUrlParameterByName('lang') || 'en').split(/[\-_]/)[0];
+        currentLang = lang;
         fetch('locale/' + lang + '.json')
             .then(function(response) {
                 if (!response.ok) {
+                    currentLang = 'en';
                     if (lang != 'en')
                         /* load default lang if fetch failed */
                         return fetch('locale/en.json');
@@ -130,7 +137,8 @@ Common.Locale = new(function() {
 
     return {
         apply: _applyLocalization,
-        get: _get
+        get: _get,
+        getCurrentLanguage: _getCurrentLanguage
     };
     
 })();

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

@@ -575,6 +575,13 @@ define([
                 this.trigger('toggle', this, state);
         },
 
+        click: function(opts) {
+            if ( !this.disabled ) {
+                this.doToggle();
+                this.trigger('click', this, opts);
+            }
+        },
+
         isActive: function() {
             if (this.enableToggle)
                 return this.pressed;
@@ -643,6 +650,24 @@ define([
             btnIconEl.addClass(cls || '');
         },
 
+        changeIcon: function(opts) {
+            var me = this;
+            if ( opts && (opts.curr || opts.next)) {
+                !!opts.curr && (me.$icon.removeClass(opts.curr));
+                !!opts.next && !me.$icon.hasClass(opts.next) && (me.$icon.addClass(opts.next));
+
+                if ( !!me.options.signals ) {
+                    if ( !(me.options.signals.indexOf('icon:changed') < 0) ) {
+                        me.trigger('icon:changed', me, opts);
+                    }
+                }
+            }
+        },
+
+        hasIcon: function(iconcls) {
+            return this.$icon.hasClass(iconcls);
+        },
+
         setVisible: function(visible) {
             if (this.cmpEl) this.cmpEl.toggleClass('hidden', !visible);
             this.visible = visible;

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

@@ -94,7 +94,8 @@ define([
         checked     : false,
         value       : 'unchecked',
 
-        template    : _.template('<label class="checkbox-indeterminate"><input type="button" class="img-commonctrl"><span><%= labelText %></span></label>'),
+        template    : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
+                                    '<label for="<%= id %>" class="checkbox__shape" /><span><%= labelText %></span></label>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
@@ -106,19 +107,19 @@ define([
         render: function (parentEl) {
             var me = this;
             if (!me.rendered) {
+                var elem = this.template({
+                    labelText: this.options.labelText,
+                    id: Common.UI.getId('chb-')
+                });
                 if (parentEl) {
                     this.setElement(parentEl, false);
-                    parentEl.html(this.template({
-                        labelText: this.options.labelText
-                    }));
+                    parentEl.html(elem);
                 } else {
-                    me.$el.html(this.template({
-                        labelText: this.options.labelText
-                    }));
+                    me.$el.html(elem);
                 }
 
-                this.$chk = me.$el.find('input[type=button]');
-                this.$label = me.$el.find('label');
+                this.$chk = me.$el.find('input[type=checkbox]');
+                this.$label = me.$el.find('label.checkbox-indeterminate');
                 this.$chk.on('click', this.onItemCheck.bind(this));
 
                 this.rendered = true;
@@ -166,18 +167,18 @@ define([
             this.checked = (value === true || value === 'true' || value === '1' || value === 1 || value === 'checked');
             this.indeterminate = (value === 'indeterminate');
 
-            this.$chk.toggleClass('checked', this.checked);
-            this.$chk.toggleClass('indeterminate', this.indeterminate);
-
             this.value = this.indeterminate ? 'indeterminate' : (this.checked ? 'checked' : 'unchecked');
+            this.$chk.prop({indeterminate: this.indeterminate, checked: this.checked});
         },
 
         setValue: function(value, suspendchange) {
             if (this.rendered) {
-                this.lastValue = this.value;
-                this.setRawValue(value);
-                if (suspendchange !== true && this.lastValue !== value)
-                    this.trigger('change', this, this.value, this.lastValue);
+                if ( value != this.value ) {
+                    this.lastValue = this.value;
+                    this.setRawValue(value);
+                    if (suspendchange !== true)
+                        this.trigger('change', this, this.value, this.lastValue);
+                }
             } else {
                 this.options.value = value;
             }

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

@@ -355,6 +355,7 @@ define([
                     return false;
                 }
                 else if (e.keyCode == Common.UI.Keys.ESC && this.isMenuOpen()) {
+                    this._input.val(this.lastValue);
                     this.closeMenu();
                     this.onAfterHideMenu(e);
                     return false;
@@ -420,6 +421,7 @@ define([
                 var me = this;
 
                 if (e.keyCode == Common.UI.Keys.ESC){
+                    this._input.val(this.lastValue);
                     this.closeMenu();
                     this.onAfterHideMenu(e);
                 } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {

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

@@ -523,7 +523,7 @@ define([
                     menuParent  = this.menuAlignEl || menuRoot.parent(),
                     m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
                     offset      = menuParent.offset(),
-                    docW        = Common.Utils.innerWidth(),
+                    docW        = Common.Utils.innerWidth() - 10,
                     docH        = Common.Utils.innerHeight() - 10, // Yep, it's magic number
                     menuW       = menuRoot.outerWidth(),
                     menuH       = menuRoot.outerHeight(),
@@ -551,6 +551,8 @@ define([
                     } else {
                         left = docW - menuW;
                     }
+                if (left < 0)
+                    left = 0;
 
                 if (this.options.restoreHeight) {
                     if (typeof (this.options.restoreHeight) == "number") {

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

@@ -144,6 +144,14 @@ define([
             el.on('input', '.form-control', _.bind(this.onInput, this));
             if (!this.options.allowDecimal)
                 el.on('keypress',   '.form-control', _.bind(this.onKeyPress, this));
+            el.on('focus', 'input.form-control', function() {
+                setTimeout(function(){me.$input && me.$input.select();}, 1);
+            });
+            Common.Utils.isGecko && el.on('blur', 'input.form-control', function() {
+                setTimeout(function(){
+                    me.$input && (me.$input[0].selectionStart = me.$input[0].selectionEnd = 0);
+                }, 1);
+            });
 
             this.switches = {
                 count: 1,
@@ -347,6 +355,7 @@ define([
                     var value = this.getRawValue();
                     if (this.value != value) {
                         this.onEnterValue();
+                        this.trigger('inputleave', this);
                         return (this.value == value);
                     }
                 } else {
@@ -355,6 +364,11 @@ define([
             } else {
                 this._fromKeyDown = true;
             }
+
+            if (e.keyCode == Common.UI.Keys.ESC)
+                this.setRawValue(this.value);
+            if (e.keyCode==Common.UI.Keys.RETURN || e.keyCode==Common.UI.Keys.ESC)
+                this.trigger('inputleave', this);
         },
 
         onKeyUp: function (e) {
@@ -477,6 +491,8 @@ define([
 
         _step: function (type, suspend) {
             (type) ? this._increase(suspend) : this._decrease(suspend);
+            if (this.options.hold && this.switches.fromKeyDown)
+                this.$input && this.$input.select();
         },
 
         _add: function (a, b, precision) {

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

@@ -74,7 +74,7 @@ define([
             if ( this.isFolded ) {
                 if ( $(e.target).parents('.toolbar, #file-menu-panel').length ){
                 } else {
-                    this.collapse();
+                    optsFold.$bar && optsFold.$bar.hasClass('expanded') && this.collapse();
                 }
             }
         }

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

@@ -71,7 +71,8 @@ define([
         disabled    : false,
         rendered    : false,
 
-        template    : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="img-commonctrl"><span><%= labelText %></span></label>'),
+        template    : _.template('<label class="radiobox"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
+                                    '<label for="<%= id %>" class="radiobox__shape" /><span><%= labelText %></span></label>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
@@ -96,11 +97,12 @@ define([
             var el = this.$el || $(this.el);
             el.html(this.template({
                 labelText: this.options.labelText,
-                name: this.name
+                name: this.name,
+                id: Common.UI.getId('rdb-')
             }));
 
-            this.$radio = el.find('input[type=button]');
-            this.$label = el.find('label');
+            this.$radio = el.find('input[type=radio]');
+            this.$label = el.find('label.radiobox');
             this.rendered = true;
 
             return this;
@@ -129,8 +131,9 @@ define([
 
         setRawValue: function(value) {
             var value = (value === true || value === 'true' || value === '1' || value === 1 );
-            $('input[type=button][name=' + this.name + ']').removeClass('checked');
+            $('input[type=radio][name=' + this.name + ']').removeClass('checked');
             this.$radio.toggleClass('checked', value);
+            this.$radio.prop('checked', value);
         },
 
         setValue: function(value, suspendchange) {
@@ -138,14 +141,14 @@ define([
                 var lastValue = this.$radio.hasClass('checked');
                 this.setRawValue(value);
                 if (suspendchange !== true && lastValue !== value)
-                    this.trigger('change', this, this.$radio.hasClass('checked'));
+                    this.trigger('change', this, this.$radio.is(':checked'));
             } else {
                 this.options.checked = value;
             }
         },
 
         getValue: function() {
-            return this.$radio.hasClass('checked');
+            return this.$radio.is(':checked');
         },
 
         setCaption: function(text) {

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

@@ -354,6 +354,7 @@ define([
                         return;
                     }
                     me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
+                    me.trigger('change', me, value, lastValue);
                     me.trigger('changecomplete', me, value, lastValue);
                 } else {
                     me.setThumbPosition(index, pos);

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

@@ -123,183 +123,6 @@ define([
                     }
                 },
 
-                setAbsTabs: function () {
-                    var me = this, tab = null, length = this.bounds.length;
-
-                    for (var i = 0; i < length; ++i) {
-                        tab = me.bar.tabs[i].$el;
-                        tab.css('position', 'absolute');
-                        tab.css('left', (me.bounds[i].left - me.tabBarLeft - this.scrollLeft) + 'px');
-
-                        if (tab.hasClass('active')) {
-                            tab.css('top', '1px');
-                        } else {
-                            tab.css('top', '0px');
-                        }
-                    }
-                },
-
-                updatePositions: function () {
-                    this.drag.place = undefined;
-
-                    var i, tabBound, center, place = -1, next = -this.scrollLeft,
-                        tabsCount = this.bounds.length,
-                        dragBound = this.drag.tab.$el.get(0).getBoundingClientRect();
-
-                    if (this.drag.moveX - this.drag.mouseX > 0) {
-                        for (i = tabsCount - 1; i >= 0; --i) {
-                            tabBound = this.bounds[i];
-                            center = (tabBound.right + tabBound.left) * 0.5;
-                            if (dragBound.left < center && center < dragBound.right) {
-                                place = i;
-                                break;
-                            }
-                        }
-
-                        if (-1 === place) {
-                            for (i = tabsCount - 1; i >= 0; --i) {
-                                tabBound = dragBound;
-                                center = (tabBound.right + tabBound.left) * 0.5;
-                                if (this.bounds[i].left < center && center < this.bounds[i].right) {
-                                    place = i;
-                                    break;
-                                }
-                            }
-                        }
-
-                    } else {
-                        for (i = 0; i < tabsCount; ++i) {
-                            tabBound = this.bounds[i];
-                            center = (tabBound.right + tabBound.left) * 0.5;
-                            if (dragBound.left < center && center < dragBound.right) {
-                                place = i;
-                                break;
-                            }
-                        }
-
-                        if (-1 === place) {
-                            for (i = 0; i < tabsCount; ++i) {
-                                tabBound = dragBound;
-                                center = (tabBound.right + tabBound.left) * 0.5;
-                                if (this.bounds[i].left < center && center < this.bounds[i].right) {
-                                    place = i;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-
-                    if (-1 !== place) {
-
-                        this.drag.place = place;
-
-                        for (i = 0; i < tabsCount; ++i) {
-                            if (i === place) {
-                                if (place < this.drag.index) {
-                                    next += this.drag.tabWidth;
-                                }
-                            }
-
-                            if (place > this.drag.index) {
-                                if (i === place + 1) {
-                                    next += this.drag.tabWidth;
-                                }
-                            }
-
-                            if (i !== this.drag.index) {
-                                this.bar.tabs[i].$el.css('left', next + 'px');
-                            } else {
-                                if (this.drag.index === place) {
-                                    next += this.drag.tabWidth;
-                                }
-
-                                continue;
-                            }
-
-                            next += this.bounds[i].width;
-                        }
-                    }
-                },
-
-                setHook: function(e, bar, tab) {
-                    var me = this;
-
-                    function dragComplete() {
-                        if (!_.isUndefined(me.drag)) {
-                            me.drag.tab.removeClass('dragged');
-                            me.drag.tab.$el.css('z-index', '');
-                            me.bar.dragging = false;
-                            var tab = null;
-                            for (var i = me.bar.tabs.length - 1; i >= 0; --i) {
-                                tab = me.bar.tabs[i].$el;
-                                if (tab) {
-                                    tab.css('top', '');
-                                    tab.css('position', '');
-                                    tab.css('left', '');
-                                }
-                            }
-
-                            if (!_.isUndefined(me.drag.place)) {
-                                me.bar.trigger('tab:move', me.drag.index, me.drag.place);
-                                me.bar.$bar.scrollLeft(me.scrollLeft);
-                                me.bar.scrollX = undefined;
-                            } else {
-                                me.bar.trigger('tab:move', me.drag.index);
-                                me.bar.$bar.scrollLeft(me.scrollLeft);
-                                me.bar.scrollX = undefined;
-                            }
-
-                            me.drag  = undefined;
-                        }
-                    }
-
-                    function dragMove (e) {
-                        if (!_.isUndefined(me.drag)) {
-                            me.drag.moveX = e.clientX*Common.Utils.zoom();
-                            var leftPos = Math.max(me.drag.moveX - me.drag.anchorX - me.tabBarLeft - me.scrollLeft, 0);
-                            leftPos = Math.min(leftPos, me.tabBarRight - me.tabBarLeft - me.drag.tabWidth - me.scrollLeft);
-
-                            me.drag.tab.$el.css('left', leftPos + 'px');
-                            me.drag.tab.$el.css('z-index','100');
-
-                            me.updatePositions();
-                        }
-                    }
-
-                    function dragDropText (e) { // disable firefox drag&drop
-                        e.preventDefault();
-                    }
-
-                    if (!_.isUndefined(bar) && !_.isUndefined(tab) && bar.tabs.length > 1) {
-                        tab.addClass('dragged');
-
-                        var index   = bar.tabs.indexOf(tab),
-                            _clientX = e.clientX*Common.Utils.zoom();
-                        me.bar      = bar;
-                        me.drag     = {tab: tab, index: index};
-                        bar.dragging = true;
-
-                        this.calculateBounds();
-                        this.setAbsTabs();
-
-                        me.drag.moveX       = _clientX;
-                        me.drag.mouseX      = _clientX;
-                        me.drag.anchorX     = _clientX - this.bounds[index].left;
-                        me.drag.tabWidth    = this.bounds[index].width;
-
-                        document.addEventListener('dragstart',dragDropText);
-
-                        $(document).on('mousemove.tabbar', dragMove);
-                        $(document).on('mouseup.tabbar', function (e) {
-                            dragComplete(e);
-                            $(document).off('mouseup.tabbar');
-                            $(document).off('mousemove.tabbar');
-
-                            document.removeEventListener('dragstart',dragDropText);
-                        });
-                    }
-                },
-
                 setHookTabs: function (e, bar, tabs) {
                     var me = this;
                     function dragComplete() {
@@ -410,11 +233,9 @@ define([
             mousedown: $.proxy(function (e) {
                 if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
                     if (!tab.isLockTheDrag) {
-                        if (this.bar.selectTabs.length > 1) {
-                            dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
-                        } else {
-                            dragHelper.setHook(e, this.bar, tab);
-                        }
+                        if (!e.ctrlKey && !e.metaKey && !e.shiftKey)
+                            tab.changeState();
+                        dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
                     }
                 }
             }, this)

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

@@ -601,6 +601,9 @@ define([
 
                 this.$window = $('#' + this.initConfig.id);
 
+                if (Common.Locale.getCurrentLanguage() !== 'en')
+                    this.$window.attr('applang', Common.Locale.getCurrentLanguage());
+
                 this.binding.keydown = _.bind(_keydown,this);
                // $(document).on('keydown', this.binding.keydown);
 

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

@@ -42,8 +42,15 @@ define([
     'use strict';
 
     var Desktop = function () {
-        var config = {};
-        var app = window.AscDesktopEditor;
+        var config = {version:'{{PRODUCT_VERSION}}'};
+        var app = window.AscDesktopEditor,
+            webapp = window.DE || window.PE || window.SSE;
+        var titlebuttons;
+        var btnsave_icons = {
+            'btn-save': 'save',
+            'btn-save-coauth': 'coauth',
+            'btn-synch': 'synch' };
+
 
         if ( !!app ) {
             window.on_native_message = function (cmd, param) {
@@ -83,15 +90,80 @@ define([
                     }
                 } else
                 if (/editor:config/.test(cmd)) {
-                    if ( param == 'request' )
-                        app.execCommand('editor:config', JSON.stringify({user: config.user, 'extraleft': $('#box-document-title #slot-btn-dt-save').parent().width()}));
+                    if ( param == 'request' ) {
+                        if ( !!titlebuttons ) {
+                            var opts = {
+                                user: config.user,
+                                title: { buttons: [] }
+                            };
+
+                            var header = webapp.getController('Viewport').getView('Common.Views.Header');
+                            if ( header ) {
+                                for (var i in titlebuttons) {
+                                    opts.title.buttons.push(_serializeHeaderButton(i, titlebuttons[i]));
+                                }
+                            }
+
+                            app.execCommand('editor:config', JSON.stringify(opts));
+                        } else
+                        if ( !config.callback_editorconfig ) {
+                            config.callback_editorconfig = function() {
+                                setTimeout(function(){window.on_native_message(cmd, param);},0);
+                            }
+                        }
+                    }
+                } else
+                if (/button:click/.test(cmd)) {
+                    var obj = JSON.parse(param);
+                    if ( !!obj.action ) {
+                        titlebuttons[obj.action].btn.click();
+                    }
                 }
             };
 
-            app.execCommand('webapps:events', 'loading');
-            app.execCommand('window:features', '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});
         }
 
+        var _serializeHeaderButton = function(action, config) {
+            return {
+                action: action,
+                icon: config.icon || undefined,
+                hint: config.btn.options.hint,
+                disabled: config.disabled
+            };
+        };
+
+        var _onTitleButtonDisabled = function (action, e, status) {
+            titlebuttons[action].disabled = status;
+            var _buttons = {};
+            _buttons[action] = status;
+            app.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]}}));
+        };
+
+        var _onModalDialog = function (status) {
+            if ( status == 'open' ) {
+                app.execCommand('title:button', JSON.stringify({disabled: {'all':true}}));
+            } else {
+                var _buttons = {};
+                for (var i in titlebuttons) {
+                    _buttons[i] = titlebuttons[i].disabled;
+                }
+
+                app.execCommand('title:button', JSON.stringify({'disabled': _buttons}));
+            }
+        };
+
         return {
             init: function (opts) {
                 _.extend(config, opts);
@@ -112,6 +184,35 @@ define([
                         if ( config.canUndock ) {
                             Common.NotificationCenter.trigger('app:config', {canUndock: true});
                         }
+
+                        var header = webapp.getController('Viewport').getView('Common.Views.Header');
+                        titlebuttons = {
+                            'save': {btn: header.btnSave, disabled:false},
+                            'print': {btn: header.btnPrint, disabled:false},
+                            'undo': {btn: header.btnUndo, disabled:false},
+                            'redo': {btn: header.btnRedo,  disabled:false}
+                        };
+
+                        for (var i in titlebuttons) {
+                            titlebuttons[i].btn.options.signals = ['disabled'];
+                            titlebuttons[i].btn.on('disabled', _onTitleButtonDisabled.bind(this, i));
+                        }
+
+                        header.btnSave.options.signals.push('icon:changed');
+                        header.btnSave.on('icon:changed', _onSaveIconChanged.bind(this));
+
+                        var iconname = /\s?([^\s]+)$/.exec(titlebuttons.save.btn.$icon.attr('class'));
+                        !!iconname && iconname.length && (titlebuttons.save.icon = btnsave_icons[iconname]);
+
+                        if ( !!config.callback_editorconfig ) {
+                            config.callback_editorconfig();
+                            delete config.callback_editorconfig;
+                        }
+                    });
+
+                    Common.NotificationCenter.on({
+                        'modal:show': _onModalDialog.bind(this, 'open'),
+                        'modal:close': _onModalDialog.bind(this, 'close')
                     });
                 }
             },

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

@@ -123,20 +123,19 @@ Common.Utils = _.extend(new(function() {
                 // считаем: 0 < window.devicePixelRatio < 2 => _devicePixelRatio = 1; zoom = window.devicePixelRatio / _devicePixelRatio;
                 // считаем: window.devicePixelRatio >= 2 => _devicePixelRatio = 2; zoom = window.devicePixelRatio / _devicePixelRatio;
                 if (window.devicePixelRatio > 0.1) {
-                    var _fraction = window.devicePixelRatio % 1;
-                    var _devicePixelRatio = Math.floor(window.devicePixelRatio);
-
-                    if ( !(_fraction < .5) ) {
-                        _devicePixelRatio += .5;
+                    if (window.devicePixelRatio < 1.99)
+                    {
+                        var _devicePixelRatio = 1;
+                        me.zoom = window.devicePixelRatio / _devicePixelRatio;
                     }
-
-                    me.zoom = window.devicePixelRatio / _devicePixelRatio;
-                    document.firstElementChild.style.zoom = 1.0 / me.zoom;
-
-                    if ( _devicePixelRatio % 1 > 0 )
-                        $('#editor_sdk').css('zoom', 1.0 / _devicePixelRatio);
-                    else $('#editor_sdk').css('zoom', '');
-                }
+                    else
+                    {
+                        var _devicePixelRatio = 2;
+                        me.zoom = window.devicePixelRatio / _devicePixelRatio;
+                    }
+                    // chrome 54.x: zoom = "reset" - clear retina zoom (windows)
+                    //document.firstElementChild.style.zoom = "reset";
+                    document.firstElementChild.style.zoom = 1.0 / me.zoom;                }
                 else
                     document.firstElementChild.style.zoom = "normal";
             }

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

@@ -527,7 +527,7 @@ define([
                     me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true);
 
                     if ( me.btnSave.$icon.is('svg') ) {
-                        me.btnSave.$icon.addClass('icon-save');
+                        me.btnSave.$icon.addClass('icon-save btn-save');
                         var _create_use = function (extid, intid) {
                             var _use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
                             _use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', extid);

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

@@ -86,13 +86,13 @@ define([
             template: _.template([
                 '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control">',
-                    '<span class="icon input-icon spellcheck-lang img-toolbarmenu"></span>',
+                    '<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>',
                     '<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-left: 28px !important;" langval="<%= item.value %>">',
-                                '<i class="icon <% if (item.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                                '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                                 '<%= scope.getDisplayValue(item) %>',
                             '</a>',
                         '</li>',

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

@@ -248,7 +248,9 @@ define([
         _setDefaults: function (props) {
             if (props) {
                 this.spnSize.setValue(props.asc_getBulletSize() || '', true);
-                this.spnStart.setValue(props.get_NumStartAt() || '', true);
+                var value = props.get_NumStartAt();
+                this.spnStart.setValue(value || '', true);
+                this.spnStart.setDisabled(value===null);
                 var color = props.asc_getBulletColor();
                 if (color) {
                     if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {

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

@@ -87,10 +87,10 @@
                 '<div class="box">',
                     '<div class="input-row">',
                         '<span class="btn-placeholder" id="search-placeholder-btn-options"></span>',
-                        '<input type="text" id="sd-text-search" class="form-control" maxlength="255" placeholder="'+this.textSearchStart+'">',
+                        '<input type="text" id="sd-text-search" class="input-field form-control" maxlength="255" placeholder="'+this.textSearchStart+'">',
                     '</div>',
                     '<div class="input-row">',
-                        '<input type="text" id="sd-text-replace" class="form-control" maxlength="255" placeholder="'+this.textReplaceDef+'">',
+                        '<input type="text" id="sd-text-replace" class="input-field form-control" maxlength="255" placeholder="'+this.textReplaceDef+'">',
                     '</div>',
                     '<div class="input-row">',
                         '<label class="link" id="search-label-replace" result="replaceshow">'+this.txtBtnReplace+'</label>',

apps/common/main/resources/img/header/buttons.svg

@@ -21,8 +21,8 @@
         <polygon points="14.243,7.585 11,10.829 11,4 9,4 9,10.827 5.758,7.585 4.344,9 10.001,14.656 15.657,9 "/>
     </symbol>
     <symbol id="svg-btn-print" viewBox="0 0 20 20">
-        <rect x="4" y="8" width="1" height="1" fill="#ffffff"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V6H14V4ZM5 4V6H3C2.44772 6 2 6.44772 2 7V12V13H3H5V15C5 15.5523 5.44772 16 6 16H14C14.5523 16 15 15.5523 15 15V13H17H18V12V7C18 6.44772 17.5523 6 17 6H15V4C15 3.44772 14.5523 3 14 3H6C5.44772 3 5 3.44772 5 4ZM15 12H17V7H14H6H3V12H5V11C5 10.4477 5.44772 10 6 10H14C14.5523 10 15 10.4477 15 11V12ZM6 11H14V15H6V11Z" fill="#ffffff"/>
+        <rect x="4" y="8" width="1" height="1"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V6H14V4ZM5 4V6H3C2.44772 6 2 6.44772 2 7V12V13H3H5V15C5 15.5523 5.44772 16 6 16H14C14.5523 16 15 15.5523 15 15V13H17H18V12V7C18 6.44772 17.5523 6 17 6H15V4C15 3.44772 14.5523 3 14 3H6C5.44772 3 5 3.44772 5 4ZM15 12H17V7H14H6H3V12H5V11C5 10.4477 5.44772 10 6 10H14C14.5523 10 15 10.4477 15 11V12ZM6 11H14V15H6V11Z"/>
     </symbol>
     <symbol id="svg-btn-edit" viewBox="0 0 20 20">
         <polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>	
@@ -30,9 +30,9 @@
 		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
     </symbol>
     <symbol id="svg-btn-save" viewBox="0 0 20 20">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 15H4V4H6V7H12V4H12.5858L15 6.41421V15ZM11 4H10V6H11V4ZM4 3H13L16 6V15C16 15.5523 15.5523 16 15 16H4C3.44772 16 3 15.5523 3 15V4C3 3.44772 3.44772 3 4 3Z" fill="#ffffff"/>
-        <rect x="6" y="10" width="7" height="1" fill="#ffffff"/>
-        <rect x="6" y="12" width="7" height="1" fill="#ffffff"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 15H4V4H6V7H12V4H12.5858L15 6.41421V15ZM11 4H10V6H11V4ZM4 3H13L16 6V15C16 15.5523 15.5523 16 15 16H4C3.44772 16 3 15.5523 3 15V4C3 3.44772 3.44772 3 4 3Z"/>
+        <rect x="6" y="10" width="7" height="1"/>
+        <rect x="6" y="12" width="7" height="1"/>
     </symbol>
     <symbol id="svg-btn-save-coauth" viewBox="0 0 20 20">
         <rect x="6" y="10" width="3" height="1" fill="#ffffff"/>

apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars

@@ -1,7 +1,8 @@
 {{#spritesheet}}
 @media only screen {
-    @media (-webkit-min-device-pixel-ratio: 1.5),
-            (min-resolution: 1.5dppx), (min-resolution: 144dpi)
+    @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+            (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
     {
         .x-huge .toolbar__icon {
             background-image: url(resources/{{{escaped_image}}});

apps/common/main/resources/less/asc-mixins.less

@@ -200,7 +200,7 @@
 
 @common-controls-width: 100px;
 .img-commonctrl, 
-        .theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before,
+        .dropdown-menu li .checked:before, .input-error:before,
         .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})");
@@ -228,34 +228,8 @@
     }
 }
 
-@toolbarmenu-sprite-width: 60px;
-.img-toolbarmenu
-{
-    background-image: if(@icon-src-base64, data-uri(%("%s",'@{app-image-path}/toolbar-menu.png')), ~"url(@{app-image-const-path}/toolbar-menu.png)");
-    background-repeat: no-repeat;
-
-    @media only screen {
-        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
-                    (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
-                    (min-resolution: 144dpi) and (max-resolution: 191dpi)
-        {
-            background-image: ~"url(@{app-image-const-path}/toolbar-menu@1.5x.png)";
-            background-size:  @toolbarmenu-sprite-width auto;
-        }
-
-        @media (-webkit-min-device-pixel-ratio: 2),
-                (min-resolution: 2dppx),
-                (min-resolution: 192dpi)
-        {
-            background-image: ~"url(@{app-image-const-path}/toolbar-menu@2x.png)";
-            background-size:  @toolbarmenu-sprite-width auto;
-        }
-    }
-}
-
 @img-colorpicker-width: 205px;
-.img-colorpicker,
-    .color-transparent, .hsb-colorpicker .empty-color:before
+.img-colorpicker, .hsb-colorpicker .empty-color:before
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')), ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker.png)");
     background-repeat: no-repeat;

apps/common/main/resources/less/buttons.less

@@ -565,7 +565,11 @@
     }
 
     .color-transparent {
-        background-position: -37px -196px;
+        &:before {
+            height: 40px;
+            transform: translate(20px, -12px) rotate(69deg);
+            left: 0;
+        }
     }
 }
 
@@ -746,6 +750,14 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
+    &.template-table {
+        width: 92px;
+    }
+    &.sheet-template-table {
+        width: 83px;
+        height: 54px;
+    }
+
     .icon {
         display: inline-block;
         .btn.btnsize(52px);

apps/common/main/resources/less/chat.less

@@ -145,6 +145,10 @@
             margin-bottom: 5px;
             border: 1px solid @gray-dark;
             font-size: 12px;
+
+            &:focus {
+                border-color: @gray-darker;
+            }
         }
     }
 }

apps/common/main/resources/less/checkbox.less

@@ -3,37 +3,61 @@
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
+    position: relative;
+    min-height: 1em;
 
-    input[type=button] {
-        background-color: transparent;
-        background-position: @checkbox-offset-x @checkbox-offset-y;
-        border: none;
-        margin-left: -22px;
-        margin-right: 6px;
-        padding-bottom: 4px;
-        width: 16px;
-        height: 16px;
-        cursor: default;
-        vertical-align: top;
-        margin-top: -1px;
+    input[type=checkbox] {
+        display: none;
 
-        &.checked {
-            background-position: @checkbox-offset-x @checkbox-offset-y - 16px;
+        + label {
+            width: 14px;
+            height: 14px;
+            background: #fff;
+            border: 1px solid @gray;
+            border-radius: 2px;
+            position: absolute;
+            left: 0;
+            margin-top: auto;
         }
 
-        &.indeterminate {
-            background-position: @checkbox-offset-x @checkbox-offset-y - 48px;
-        }
-
-        &.disabled {
-            background-position: @checkbox-offset-x - 48px @checkbox-offset-y;
-
-            &.checked {
-                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 16px;
+        &:checked:not(:indeterminate) {
+            + label {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    border: solid @gray-deep;
+                    border-width: 0 2px 2px 0;
+                    transform: rotate(45deg);
+                    width: 5px;
+                    height: 9px;
+                    left: 4px;
+                }
             }
+        }
 
-            &.indeterminate {
-                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 48px;
+        &:indeterminate {
+            + label {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    border: 1px solid @gray-deep;
+                    background: @gray-soft;
+                    width: 8px;
+                    height: 8px;
+                    left: 2px;
+                    top: 2px;
+                }
+            }
+        }
+
+        &.disabled,
+        &:disabled {
+            opacity: .4;
+
+            + label {
+                &::before {
+                    opacity: .4;
+                }
             }
         }
     }