Merge pull request #769 from ONLYOFFICE/fix/fix-scale

Fix/fix scale

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

@@ -51,21 +51,37 @@ define([
     Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function() {
         var iconWidth       = 302,
             iconHeight      = Asc.FONT_THUMBNAIL_HEIGHT || 26,
-            isRetina        = window.devicePixelRatio > 1,
             thumbCanvas     = document.createElement('canvas'),
             thumbContext    = thumbCanvas.getContext('2d'),
-            thumbPath       = '../../../../sdkjs/common/Images/fonts_thumbnail.png',
+            thumbs       = [
-            thumbPath2x     = '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png',
+                {ratio: 1,      path: '../../../../sdkjs/common/Images/fonts_thumbnail.png', width: iconWidth, height: iconHeight},
+                {ratio: 1.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: iconWidth * 1.5, height: iconHeight * 1.5},
+                {ratio: 2,      path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2}
+            ],
+            thumbIdx = 0,
             listItemHeight  = 26,
-            spriteCols     = 1;
+            spriteCols     = 1,
+            applicationPixelRatio = Common.Utils.applicationPixelRatio();
 
         if (typeof window['AscDesktopEditor'] === 'object') {
-            thumbPath       = window['AscDesktopEditor'].getFontsSprite();
+            thumbs[0].path     = window['AscDesktopEditor'].getFontsSprite('');
-            thumbPath2x     = window['AscDesktopEditor'].getFontsSprite(true);
+            thumbs[1].path     = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            thumbs[2].path     = window['AscDesktopEditor'].getFontsSprite('@2x');
         }
 
-        thumbCanvas.height  = isRetina ? iconHeight * 2 : iconHeight;
+        var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);
-        thumbCanvas.width   = isRetina ? iconWidth  * 2 : iconWidth;
+        var currentDistance = 0;
+        for (var i=1; i<thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio-thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                thumbIdx = i;
+            }
+        }
+
+        thumbCanvas.height  = thumbs[thumbIdx].height;
+        thumbCanvas.width   = thumbs[thumbIdx].width;
 
         return {
             template: _.template([
@@ -279,13 +295,8 @@ define([
                     return img != null ? img[0].src : undefined;
                 }
 
-                if (isRetina) {
+                thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
-                    thumbContext.clearRect(0, 0, iconWidth * 2, iconHeight * 2);
+                thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(opts.imgidx/spriteCols));
-                    thumbContext.drawImage(this.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * 2 * Math.floor(opts.imgidx/spriteCols));
-                } else {
-                    thumbContext.clearRect(0, 0, iconWidth, iconHeight);
-                    thumbContext.drawImage(this.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * Math.floor(opts.imgidx/spriteCols));
-                }
 
                 return thumbCanvas.toDataURL();
             },
@@ -306,7 +317,7 @@ define([
                 if (callback) {
                     this.spriteThumbs = new Image();
                     this.spriteThumbs.onload = callback;
-                    this.spriteThumbs.src = isRetina ? thumbPath2x : thumbPath;
+                    this.spriteThumbs.src = thumbs[thumbIdx].path;
                 }
             },
 
@@ -314,7 +325,7 @@ define([
                 var me = this;
 
                 this.loadSprite(function() {
-                    spriteCols = Math.floor(me.spriteThumbs.width / (isRetina ? iconWidth  * 2 : iconWidth)) || 1;
+                    spriteCols = Math.floor(me.spriteThumbs.width / (thumbs[thumbIdx].width)) || 1;
                     me.store.set(store.toJSON());
 
                     me.rendered = false;
@@ -534,21 +545,16 @@ define([
                             var fontImage = document.createElement('canvas');
                             var context = fontImage.getContext('2d');
 
-                            fontImage.height = isRetina ? iconHeight * 2 : iconHeight;
+                            fontImage.height = thumbs[thumbIdx].height;
-                            fontImage.width = isRetina ? iconWidth  * 2 : iconWidth;
+                            fontImage.width = thumbs[thumbIdx].width;
 
                             fontImage.style.width = iconWidth + 'px';
                             fontImage.style.height = iconHeight + 'px';
 
                             index = Math.floor(me.store.at(j).get('imgidx')/spriteCols);
 
-                            if (isRetina) {
+                            context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
-                                context.clearRect(0, 0, iconWidth * 2, iconHeight * 2);
+                            context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
-                                context.drawImage(me.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * 2 * index);
-                            } else {
-                                context.clearRect(0, 0, iconWidth, iconHeight);
-                                context.drawImage(me.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * index);
-                            }
 
                             me.tiles[j] = fontImage;
                             $(listItems[j]).get(0).appendChild(fontImage);

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

@@ -468,12 +468,12 @@ define([
 
         setItemWidth: function(width) {
             if (this.itemWidth != width)
-                this.itemWidth = window.devicePixelRatio > 1 ? width / 2 : width;
+                this.itemWidth = Common.Utils.applicationPixelRatio() > 1 ? width / 2 : width;
         },
 
         setItemHeight: function(height) {
             if (this.itemHeight != height)
-                this.itemHeight = window.devicePixelRatio > 1 ? height / 2 : height;
+                this.itemHeight = Common.Utils.applicationPixelRatio() > 1 ? height / 2 : height;
         },
 
         removeTips: function() {

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

@@ -102,6 +102,8 @@ define([
 
             Common.Gateway.on('init', this.loadConfig.bind(this));
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
+            Common.NotificationCenter.on('uitheme:changed', this.updatePluginsButtons.bind(this));
+            Common.NotificationCenter.on('window:resize', this.updatePluginsButtons.bind(this));
         },
 
         loadConfig: function(data) {
@@ -283,6 +285,14 @@ define([
             }
         },
 
+        updatePluginsButtons: function() {
+            var storePlugins = this.getApplication().getCollection('Common.Collections.Plugins'),
+                me = this;
+            storePlugins.each(function(item){
+                me.panelPlugins.updatePluginIcons(item);
+            });
+        },
+
         onSelectPlugin: function(picker, item, record, e){
             var btn = $(e.target);
             if (btn && btn.hasClass('plugin-caret')) {

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

@@ -151,8 +151,10 @@ Common.Utils = _.extend(new(function() {
             me.zoom = scale.correct ? scale.zoom : 1;
             me.innerWidth = window.innerWidth * me.zoom;
             me.innerHeight = window.innerHeight * me.zoom;
+            me.applicationPixelRatio = scale.applicationPixelRatio || scale.devicePixelRatio;
         };
         me.zoom = 1;
+        me.applicationPixelRatio = 1;
         me.innerWidth = window.innerWidth;
         me.innerHeight = window.innerHeight;
         if ( isIE )
@@ -227,6 +229,7 @@ Common.Utils = _.extend(new(function() {
         documentSettingsType: documentSettingsType,
         importTextType: importTextType,
         zoom: function() {return me.zoom;},
+        applicationPixelRatio: function() {return me.applicationPixelRatio;},
         topOffset: 0,
         innerWidth: function() {return me.innerWidth;},
         innerHeight: function() {return me.innerHeight;},

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

@@ -151,7 +151,7 @@ define([
                         var modes = model.get('variations'),
                             guid = model.get('guid'),
                             icons = modes[model.get('currentVariation')].get('icons'),
-                            _icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)],
+                            _icon_url = model.get('baseUrl') + me.parseIcons(icons),
                             btn = new Common.UI.Button({
                                 cls: 'btn-toolbar x-huge icon-top',
                                 iconImg: _icon_url,
@@ -250,6 +250,7 @@ define([
                 var _btn = model.get('button');
                 if (_btn) {
                     _btn.toggle(true);
+                    this.updatePluginButton(model);
                     if (_btn.menu && _btn.menu.items.length>0) {
                         _btn.menu.items[0].setCaption(this.textStop);
                     }
@@ -265,6 +266,7 @@ define([
                 var _btn = model.get('button');
                 if (_btn) {
                     _btn.toggle(false);
+                    this.updatePluginButton(model);
                     if (_btn.menu && _btn.menu.items.length>0) {
                         _btn.menu.items[0].setCaption(this.textStart);
                     }
@@ -280,6 +282,82 @@ define([
         _onAppReady: function (mode) {
         },
 
+        parseIcons: function(icons) {
+            if (icons.length && typeof icons[0] !== 'string') {
+                var theme = Common.UI.Themes.current().toLowerCase(),
+                    style = Common.UI.Themes.isDarkTheme() ? 'dark' : 'light',
+                    idx = -1;
+                for (var i=0; i<icons.length; i++) {
+                    if (icons[i].theme && icons[i].theme.toLowerCase() == theme) {
+                        idx = i;
+                        break;
+                    }
+                }
+                if (idx<0)
+                    for (var i=0; i<icons.length; i++) {
+                        if (icons[i].style && icons[i].style.toLowerCase() == style) {
+                            idx = i;
+                            break;
+                        }
+                    }
+                (idx<0) && (idx = 0);
+
+                var ratio = Common.Utils.applicationPixelRatio()*100,
+                    current = icons[idx],
+                    bestDistance = 10000,
+                    currentDistance = 0,
+                    defUrl,
+                    bestUrl;
+                for (var key in current) {
+                    if (current.hasOwnProperty(key)) {
+                        if (key=='default') {
+                            defUrl = current[key];
+                        } else if (!isNaN(parseInt(key))) {
+                            currentDistance = Math.abs(ratio-parseInt(key));
+                            if (currentDistance < (bestDistance - 0.01))
+                            {
+                                bestDistance = currentDistance;
+                                bestUrl = current[key];
+                            }
+                        }
+                    }
+                }
+                (bestDistance>0.01 && defUrl) && (bestUrl = defUrl);
+                return {
+                    'normal': bestUrl['normal'],
+                    'hover': bestUrl['hover'] || bestUrl['normal'],
+                    'active': bestUrl['active'] || bestUrl['normal']
+                };
+            } else { // old version
+                var url = icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
+                return {
+                    'normal': url,
+                    'hover': url,
+                    'active': url
+                };
+            }
+        },
+
+        updatePluginIcons: function(model) {
+            if (!model.get('visible'))
+                return null;
+
+            var modes = model.get('variations'),
+                icons = modes[model.get('currentVariation')].get('icons');
+            model.set('parsedIcons', this.parseIcons(icons));
+            this.updatePluginButton(model);
+        },
+
+        updatePluginButton: function(model) {
+            if (!model.get('visible'))
+                return null;
+
+            var btn = model.get('button');
+            if (btn && btn.cmpEl) {
+                btn.cmpEl.find(".inner-box-icon img").attr("src", model.get('baseUrl') + model.get('parsedIcons')[btn.isActive() ? 'active' : 'normal']);
+            }
+        },
+
         createPluginButton: function (model) {
             if (!model.get('visible'))
                 return null;
@@ -289,8 +367,9 @@ define([
             var modes = model.get('variations'),
                 guid = model.get('guid'),
                 icons = modes[model.get('currentVariation')].get('icons'),
-                icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
+                parsedIcons = this.parseIcons(icons),
-
+                icon_url = model.get('baseUrl') + parsedIcons['normal'];
+            model.set('parsedIcons', parsedIcons);
             var _menu_items = [];
             _.each(model.get('variations'), function(variation, index) {
                 if (variation.get('visible'))

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

@@ -221,7 +221,8 @@
         height: @x-huge-btn-height;
 
         img {
-            height: 27px;
+            width: @x-huge-btn-icon-size;
+            height: @x-huge-btn-icon-size;
         }
 
         .inner-box-caption {

apps/common/main/resources/less/plugins.less

@@ -128,10 +128,6 @@
 
 #plugins-panel {
     .x-huge.icon-top {
-        img {
-            height: 26px;
-        }
-
         .caption {
             text-overflow: ellipsis;
             max-width: 60px;

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -2280,13 +2280,13 @@ define([
                         uid     : Common.UI.getId(),
                         themeId : theme.get_Index(),
                         tip     : tip,
-                        offsety     : index * 38
+                        offsety     : index * 40
                     }));
                     arr2.push({
                         uid     : Common.UI.getId(),
                         themeId : theme.get_Index(),
                         tip     : tip,
-                        offsety     : index * 38
+                        offsety     : index * 40
                     });
                 });
                 _.each(docThemes, function(theme) {

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

@@ -1931,7 +1931,7 @@ define([
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
                     items: [
-                        { template: _.template('<div id="id-docholder-menu-changetheme" style="width: 280px; margin: 0 4px;"></div>') }
+                        { template: _.template('<div id="id-docholder-menu-changetheme" style="width: 289px; margin: 0 4px;"></div>') }
                     ]
                 })
             });

apps/presentationeditor/main/app/view/Toolbar.js

@@ -893,9 +893,9 @@ define([
 
                     me.listTheme = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
-                        itemWidth: 85,
+                        itemWidth: 88,
                         enableKeyEvents: true,
-                        itemHeight: 38,
+                        itemHeight: 40,
                         lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
                         beforeOpenHandler: function (e) {
                             var cmp = this,

apps/presentationeditor/main/resources/less/toolbar.less

@@ -104,12 +104,18 @@
 }
 
 .item-theme {
-    width: 85px;
+    width: 88px;
-    height: 38px;
+    height: 40px;
-    .background-ximage('../../../../../../sdkjs/common/Images/themes_thumbnail.png', '../../../../../../sdkjs/common/Images/themes_thumbnail@2x.png', 85px);
+    .background-ximage-v2('../../../../../../sdkjs/common/Images/themes_thumbnail.png', 88px);
     background-size: cover
 }
 
+.combo-styles {
+    .item {
+        padding: 2px;
+    }
+}
+
 #slot-btn-incfont, #slot-btn-decfont, #slot-btn-changecase {
     margin-left: 2px;
 }