Merge with develop

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/CheckBox.js

@@ -94,7 +94,8 @@ define([
         checked     : false,
         value       : 'unchecked',
 
-        template    : _.template('<label class="checkbox-indeterminate"><input type="button" class="button__checkbox"><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(),

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

@@ -145,7 +145,12 @@ define([
             if (!this.options.allowDecimal)
                 el.on('keypress',   '.form-control', _.bind(this.onKeyPress, this));
             el.on('focus', 'input.form-control', function() {
-                me.$input && me.$input.select();
+                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 = {
@@ -359,6 +364,9 @@ 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);
         },

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="button__radiobox"><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/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/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/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/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;
+        }
     }
 }
 

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

@@ -4,21 +4,23 @@
     .font-size-normal();
     font-weight: normal;
     position: relative;
+    min-height: 1em;
 
-    input[type=button] {
-        background-position: @checkbox-offset-x @checkbox-offset-y;
-        margin-left: -22px;
-        margin-right: 6px;
-        width: 14px;
-        height: 14px;
-        cursor: default;
-        vertical-align: top;
-        margin-top: -1px;
-        background: #fff;
-        border: 1px solid @gray;
+    input[type=checkbox] {
+        display: none;
 
-        &.checked {
-            + span {
+        + label {
+            width: 14px;
+            height: 14px;
+            background: #fff;
+            border: 1px solid @gray;
+            position: absolute;
+            left: 0;
+            margin-top: auto;
+        }
+
+        &:checked:not(:indeterminate) {
+            + label {
                 &::before {
                     content: '';
                     position: absolute;
@@ -27,14 +29,14 @@
                     transform: rotate(45deg);
                     width: 6px;
                     height: 10px;
-                    left: 4px;
+                    left: 3px;
                     top: -1px;
                 }
             }
         }
 
-        &.indeterminate {
-            + span {
+        &:indeterminate {
+            + label {
                 &::before {
                     content: '';
                     position: absolute;
@@ -42,16 +44,17 @@
                     background: @gray-soft;
                     width: 8px;
                     height: 8px;
-                    left: 3px;
+                    left: 2px;
                     top: 2px;
                 }
             }
         }
 
-        &.disabled {
+        &.disabled,
+        &:disabled {
             opacity: .4;
 
-            + span {
+            + label {
                 &::before {
                     opacity: .4;
                 }

apps/common/main/resources/less/colorpalette.less

@@ -12,6 +12,16 @@
     }
 }
 
+.color-transparent {
+    &:before {
+        content: '';
+        position: absolute;
+        border-right: 2px solid red;
+        height: 14px;
+        transform: translate(5px,-1px) rotate(45deg);
+    }
+}
+
 .palette-color-ext {
     padding: 10px;
     .palette-color-item {
@@ -46,8 +56,6 @@
     }
 
     .color-transparent {
-        background-position: @nocolor-offset-x @nocolor-offset-y;
-
         em span {
             border:solid 1px #C0C0C0;
         }

apps/common/main/resources/less/combobox.less

@@ -21,11 +21,6 @@
 
     &.input-group-nr > .form-control {
         padding-right: 7px + 2 * @padding-base-horizontal;
-
-        &:focus,
-        &:focus ~ button.dropdown-toggle {
-            border-color: @gray-darker;
-        }
     }
 
     &.input-group-nr > .btn {
@@ -71,13 +66,20 @@
         border-color: @input-border;
     }
 
-    &.input-group-nr.open {
+    &.input-group-nr.open:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
             border-color: @gray-darker;
         }
     }
 
+    &.input-group-nr:not(.no-highlighted) > .form-control {
+        &:focus,
+        &:focus ~ button.dropdown-toggle {
+            border-color: @gray-darker;
+        }
+    }
+
     li {
         a {
             white-space: pre;
@@ -129,3 +131,12 @@
         position: fixed;
     }
 }
+
+.open > .combobox.combo-dataview-menu {
+    &.input-group-nr:not(.no-highlighted) {
+        & > .form-control,
+        & > .btn {
+            border-color: @gray-darker;
+        }
+    }
+}

apps/common/main/resources/less/dimension-picker.less

@@ -21,12 +21,14 @@
 
 .dimension-picker-unhighlighted {
     //background: transparent repeat scroll 0 0;
-    .background-ximage('@{common-image-path}/dimension-picker/dimension-unhighlighted.png', '@{common-image-path}/dimension-picker/dimension-unhighlighted@2x.png', 18px, auto, repeat);
+    .background-ximage-v2('dimension-picker/dimension-unhighlighted.png', 18px);
+    background-repeat: repeat;
 }
 
 .dimension-picker div.dimension-picker-highlighted {
     //background: transparent repeat scroll 0 0;
-    .background-ximage('@{common-image-path}/dimension-picker/dimension-highlighted.png', '@{common-image-path}/dimension-picker/dimension-highlighted@2x.png', 18px, auto, repeat);
+    .background-ximage-v2('dimension-picker/dimension-highlighted.png', 18px);
+    background-repeat: repeat;
 }
 
 .dimension-picker-status {

apps/common/main/resources/less/extended-color-picker.less

@@ -53,7 +53,10 @@
         }
 
         .color-transparent {
-            background-position: -76px -196px;
+            &:before {
+                height: 64px;
+                transform: translate(29px, -22px) rotate(73deg);
+            }
         }
     }
 

apps/common/main/resources/less/radiobox.less

@@ -4,22 +4,27 @@
     .font-size-normal();
     font-weight: normal;
     position: relative;
+    min-height: 1em;
 
-    input[type=button] {
-        margin-left: -22px;
-        margin-right: 6px;
-        padding-bottom: 4px;
-        width: 14px;
-        height: 14px;
-        cursor: default;
-        vertical-align: top;
+    input[type=radio] {
 
-        background: #fff;
-        border: 1px solid @gray;
-        border-radius: 50%;
+        display: none;
 
-        &.checked {
-            + span {
+        + label {
+            position: absolute;
+            left: 0;
+            margin-top: auto;
+            padding-bottom: 4px;
+            width: 14px;
+            height: 14px;
+
+            background: #fff;
+            border: 1px solid @gray;
+            border-radius: 50%;
+        }
+
+        &:checked {
+            + label {
                 &::before {
                     content: '';
                     position: absolute;
@@ -27,16 +32,16 @@
                     border-radius: 50%;
                     width: 8px;
                     height: 8px;
-                    left: 3px;
-                    top: 3px;
+                    left: 2px;
+                    top: 2px;
                 }
             }
         }
 
-        &.disabled {
+        &.disabled, &:disabled {
             opacity: .4;
 
-            + span {
+            + label {
                 &::before {
                     opacity: .4;
                 }

apps/common/main/resources/less/theme-colorpalette.less

@@ -41,8 +41,6 @@
     }
 
     .color-transparent {
-        background-position: @nocolor-offset-x @nocolor-offset-y;
-
         em span {
             border:solid 1px #C0C0C0;
         }

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

@@ -135,7 +135,8 @@ define([
                     "Hyperlink": this.txtHyperlink,
                     "Error! Main Document Only.": this.txtMainDocOnly,
                     "Error! Not a valid bookmark self-reference.": this.txtNotValidBookmark,
-                    "Error! No text of specified style in document.": this.txtNoText
+                    "Error! No text of specified style in document.": this.txtNoText,
+                    "Choose an item.": this.txtChoose
                 };
                 styleNames.forEach(function(item){
                     translate[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item;
@@ -2509,7 +2510,8 @@ define([
             uploadDocSizeMessage: 'Maximum document size limit exceeded.',
             uploadDocExtMessage: 'Unknown document format.',
             uploadDocFileCountMessage: 'No documents uploaded.',
-            errorUpdateVersionOnDisconnect: 'Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.'
+            errorUpdateVersionOnDisconnect: 'Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.',
+            txtChoose: 'Choose an item.'
         }
     })(), DE.Controllers.Main || {}))
 });

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

@@ -411,7 +411,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
 
             // for list controls
             if (this.type == Asc.c_oAscContentControlSpecificType.ComboBox || this.type == Asc.c_oAscContentControlSpecificType.DropDownList) {
-                var specProps = new AscCommon.CSdtComboBoxPr();
+                var specProps = (this.type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr();
+                specProps.clear();
                 this.list.store.each(function (item, index) {
                     specProps.add_Item(item.get('name'), item.get('value'));
                 });
@@ -420,7 +421,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
 
             //for date picker
             if (this.type == Asc.c_oAscContentControlSpecificType.DateTime) {
-                var specProps = new AscCommon.CSdtDatePickerPr();
+                var specProps = this.props.get_DateTimePr();
                 specProps.put_DateFormat(this.txtDate.getValue());
                 specProps.put_LangId(this.cmbLang.getValue());
                 props.put_DateTimePr(specProps);
@@ -429,7 +430,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             // for check box
             if (this.type == Asc.c_oAscContentControlSpecificType.CheckBox) {
                 if (this.checkedBox && this.checkedBox.changed || this.uncheckedBox && this.uncheckedBox.changed) {
-                    var specProps = new AscCommon.CSdtCheckBoxPr();
+                    var specProps = this.props.get_CheckBoxPr();
                     if (this.checkedBox) {
                         specProps.put_CheckedSymbol(this.checkedBox.code);
                         specProps.put_CheckedFont(this.checkedBox.font);

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

@@ -633,7 +633,7 @@ define([
 
                     me.btnSpecialPaste = new Common.UI.Button({
                         cls         : 'btn-toolbar',
-                        iconCls     : 'btn-paste',
+                        iconCls     : 'toolbar__icon btn-paste',
                         menu        : new Common.UI.Menu({items: []})
                     });
                     me.btnSpecialPaste.render($('#id-document-holder-btn-special-paste')) ;
@@ -2804,7 +2804,7 @@ define([
 
             var langTemplate = _.template([
                 '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
-                '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                 '<%= caption %>',
                 '</a>'
             ].join(''));
@@ -4003,11 +4003,9 @@ define([
                     firstday: 1
                 });
                 this.cmpCalendar.on('date:click', function (cmp, date) {
-                    var props = me._dateObj,
-                        specProps = props.get_DateTimePr(),
-                        id = props.get_InternalId();
+                    var specProps = me._dateObj.get_DateTimePr();
                     specProps.put_FullDate(new  Date(date));
-                    me.api.asc_SetContentControlProperties(props, id);
+                    me.api.asc_SetContentControlDatePickerDate(specProps);
                     controlsContainer.hide();
                     me.api.asc_UncheckContentControlButtons();
                     me.fireEvent('editcomplete', me);
@@ -4063,7 +4061,7 @@ define([
                 });
                 menu.on('item:click', function(menu, item) {
                     setTimeout(function(){
-                        me.api.asc_SelectContentControlListItem(item.value, me._listObj.get_InternalId());
+                        (item.value!==-1) && me.api.asc_SelectContentControlListItem(item.value, me._listObj.get_InternalId());
                     }, 1);
                 });
 
@@ -4089,6 +4087,12 @@ define([
                         value       : specProps.get_ItemValue(i)
                     }));
                 }
+                if (count<1) {
+                    menu.addItem(new Common.UI.MenuItem({
+                        caption     : this.txtEmpty,
+                        value       : -1
+                    }));
+                }
             }
 
             menuContainer.css({left: x, top : y});
@@ -4341,7 +4345,8 @@ define([
         txtPrintSelection: 'Print Selection',
         textCells: 'Cells',
         textSeveral: 'Several Rows/Columns',
-        txtInsertCaption: 'Insert Caption'
+        txtInsertCaption: 'Insert Caption',
+        txtEmpty: '(Empty)'
 
     }, DE.Views.DocumentHolder || {}));
 });

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

@@ -81,6 +81,7 @@ define([
                 allowBlank  : false,
                 blankError  : me.textNameError,
                 style       : 'width: 100%;',
+                maxLength   : 256,
                 validateOnBlur: false,
                 validation  : function(value) {
                     return value ? true : '';
@@ -99,6 +100,7 @@ define([
             me.inputValue = new Common.UI.InputField({
                 el          : $('#id-dlg-label-value'),
                 style       : 'width: 100%;',
+                maxLength   : 256,
                 validateOnBlur: false,
                 validation  : function(value) {
                     if (value!=='' && me.options.store) {

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

@@ -952,7 +952,7 @@ define([
             if (this.coreProps) {
                 var value = this.coreProps.asc_getCreated();
                 if (value)
-                    this.lblDate.text(value.toLocaleString());
+                    this.lblDate.text(value.toLocaleString(this.mode.lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleString(this.mode.lang, {timeStyle: 'short'}));
                 this._ShowHideInfoItem(this.lblDate, !!value);
             }
         },
@@ -978,7 +978,7 @@ define([
                 var visible = false;
                 value = props.asc_getModified();
                 if (value)
-                    this.lblModifyDate.text(value.toLocaleString());
+                    this.lblModifyDate.text(value.toLocaleString(this.mode.lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleString(this.mode.lang, {timeStyle: 'short'}));
                 visible = this._ShowHideInfoItem(this.lblModifyDate, !!value) || visible;
                 value = props.asc_getLastModifiedBy();
                 if (value)

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

@@ -234,7 +234,7 @@ define([
                     restoreHeight: 285,
                     itemTemplate: _.template([
                         '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
-                            '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                            '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                             '<%= caption %>',
                         '</a>'
                     ].join('')),

apps/documenteditor/main/locale/en.json

@@ -716,6 +716,7 @@
   "DE.Controllers.Main.warnNoLicense": "This version of %1 editors has certain limitations for concurrent connections to the document server.<br>If you need more please consider purchasing a commercial license.",
   "DE.Controllers.Main.warnNoLicenseUsers": "This version of %1 editors has certain limitations for concurrent users.<br>If you need more please consider purchasing a commercial license.",
   "DE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.",
+  "DE.Controllers.Main.txtChoose": "Choose an item.",
   "DE.Controllers.Navigation.txtBeginning": "Beginning of document",
   "DE.Controllers.Navigation.txtGotoBeginning": "Go to the beginning of the document",
   "DE.Controllers.Statusbar.textHasChanges": "New changes have been tracked",
@@ -1377,6 +1378,7 @@
   "DE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "DE.Views.DocumentHolder.updateStyleText": "Update %1 style",
   "DE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "DE.Views.DocumentHolder.txtEmpty": "(Empty)",
   "DE.Views.DropcapSettingsAdvanced.strBorders": "Borders & Fill",
   "DE.Views.DropcapSettingsAdvanced.strDropcap": "Drop Cap",
   "DE.Views.DropcapSettingsAdvanced.strMargins": "Margins",