From 135d35322066220ee65b19cedb6668e89e842cea Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 23 Jul 2019 12:58:51 +0300
Subject: [PATCH] [PE] Fix rendering themes (on retina)

---
 apps/presentationeditor/main/app/controller/Toolbar.js   | 9 +--------
 apps/presentationeditor/main/app/view/DocumentHolder.js  | 4 ++--
 apps/presentationeditor/main/app/view/Toolbar.js         | 4 ++--
 apps/presentationeditor/main/resources/less/toolbar.less | 9 ++++++++-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 19814335d..e236209f8 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -1960,23 +1960,18 @@ define([
             me.toolbar.listTheme.menuPicker.store.reset([]); // remove all
 
             var themeStore = this.getCollection('SlideThemes'),
-                mainController = this.getApplication().getController('Main'),
-                imageUrl = (window.devicePixelRatio > 1) ? '../../../../sdkjs/common/Images/themes_thumbnail@2x.png' : '../../../../sdkjs/common/Images/themes_thumbnail.png';
+                mainController = this.getApplication().getController('Main');
             if (themeStore) {
                 var arr1 = [], arr2 = [];
                 _.each(defaultThemes, function(theme, index) {
                     var tip = mainController.translationTable[theme.get_Name()] || theme.get_Name();
                     arr1.push(new Common.UI.DataViewModel({
-                        imageUrl: imageUrl,
                         uid     : Common.UI.getId(),
                         themeId : theme.get_Index(),
                         tip     : tip,
-                        itemWidth   : 85,
-                        itemHeight  : 38,
                         offsety     : index * 38
                     }));
                     arr2.push({
-                        imageUrl: imageUrl,
                         uid     : Common.UI.getId(),
                         themeId : theme.get_Index(),
                         tip     : tip,
@@ -1991,8 +1986,6 @@ define([
                         uid     : Common.UI.getId(),
                         themeId : theme.get_Index(),
                         tip     : tip,
-                        itemWidth   : 85,
-                        itemHeight  : 38,
                         offsety     : 0
                     }));
                     arr2.push({
diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js
index 076d779fc..ce8338258 100644
--- a/apps/presentationeditor/main/app/view/DocumentHolder.js
+++ b/apps/presentationeditor/main/app/view/DocumentHolder.js
@@ -2031,8 +2031,8 @@ define([
                     style: 'max-height: 300px;',
                     store       : PE.getCollection('SlideThemes'),
                     itemTemplate: _.template([
-                        '<div class="style" id="<%= id %>" style="width: <%= itemWidth %>px;">',
-                        '<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;background-position: 0 -<%= offsety %>px;background-size: cover;"/>',
+                        '<div class="style" id="<%= id %>"">',
+                        '<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"/>',
                         '</div>'
                     ].join(''))
                 }).on('item:click', function(picker, item, record, e) {
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index f3fd39f7c..c71d95291 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -804,12 +804,12 @@ define([
 
                     me.listTheme.fieldPicker.itemTemplate = _.template([
                         '<div class="style" id="<%= id %>">',
-                        '<div style="background-image: url(<%= imageUrl %>); width: ' + me.listTheme.itemWidth + 'px; height: ' + me.listTheme.itemHeight + 'px; background-position: 0 -<%= offsety %>px;"/>',
+                        '<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"/>',
                         '</div>'
                     ].join(''));
                     me.listTheme.menuPicker.itemTemplate = _.template([
                         '<div class="style" id="<%= id %>">',
-                        '<div style="background-image: url(<%= imageUrl %>); width: ' + me.listTheme.itemWidth + 'px; height: ' + me.listTheme.itemHeight + 'px; background-position: 0 -<%= offsety %>px;"/>',
+                        '<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"/>',
                         '</div>'
                     ].join(''));
 
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 2ac1e08e4..cf734ba8a 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -332,4 +332,11 @@
     z-index: @zindex-dropdown - 20;
     background-color: @gray-light;
     border: 1px solid @gray;
-}
\ No newline at end of file
+}
+
+.item-theme {
+    width: 85px;
+    height: 38px;
+    .background-ximage('../../../../../../sdkjs/common/Images/themes_thumbnail.png', '../../../../../../sdkjs/common/Images/themes_thumbnail@2x.png', 85px);
+    background-size: cover
+}