From 8274e4d3f1e5685cdb9ae3f75d930a2926762453 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 29 Mar 2021 22:33:40 +0300 Subject: [PATCH 1/8] Use applicationPixelRatio instead of devicePixelRatio --- .../main/lib/component/ComboBoxFonts.js | 57 ++++++++++--------- .../main/lib/component/ComboDataView.js | 4 +- apps/common/main/lib/util/utils.js | 3 + apps/common/main/lib/view/Plugins.js | 4 +- 4 files changed, 38 insertions(+), 30 deletions(-) diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index 5d3e28991e..73dd410ad9 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/apps/common/main/lib/component/ComboBoxFonts.js @@ -51,21 +51,36 @@ 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', - thumbPath2x = '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', + thumbs = [ + {ratio: 1, path: '../../../../sdkjs/common/Images/fonts_thumbnail.png', width: iconWidth, height: iconHeight}, + {ratio: 1.5, path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2}, + {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(); - thumbPath2x = window['AscDesktopEditor'].getFontsSprite(true); + thumbs[0].path = window['AscDesktopEditor'].getFontsSprite(); + thumbs[1].path = thumbs[2].path = window['AscDesktopEditor'].getFontsSprite(true); } - thumbCanvas.height = isRetina ? iconHeight * 2 : iconHeight; - thumbCanvas.width = isRetina ? iconWidth * 2 : iconWidth; + var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio); + var currentDistance = 0; + for (var i=1; i 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() { diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js index 80df146413..393b197577 100644 --- a/apps/common/main/lib/util/utils.js +++ b/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;}, diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index 9a1296b173..9f79a2af5d 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/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') + icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)], btn = new Common.UI.Button({ cls: 'btn-toolbar x-huge icon-top', iconImg: _icon_url, @@ -289,7 +289,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') + icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)]; var _menu_items = []; _.each(model.get('variations'), function(variation, index) { From fea0125822945383633ee9a6c251396e3aa80390 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 01:44:42 +0300 Subject: [PATCH 2/8] [Plugins] Add support for new icons config --- apps/common/main/lib/controller/Plugins.js | 10 ++++ apps/common/main/lib/view/Plugins.js | 64 +++++++++++++++++++++- 2 files changed, 71 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index c5c7d32b23..fe13068e2a 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/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.updatePluginButton(item); + }); + }, + onSelectPlugin: function(picker, item, record, e){ var btn = $(e.target); if (btn && btn.hasClass('plugin-caret')) { diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index 9f79a2af5d..159ddc0c68 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/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[((Common.Utils.applicationPixelRatio() > 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, @@ -280,6 +280,65 @@ 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; i0.01 && defUrl) && (bestUrl = defUrl); + return bestUrl; + } else { // old version + return icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)] + } + }, + + updatePluginButton: function(model) { + if (!model.get('visible')) + return null; + + var modes = model.get('variations'), + icons = modes[model.get('currentVariation')].get('icons'), + btn = model.get('button'); + if (btn && btn.cmpEl) { + btn.cmpEl.find(".inner-box-icon img").attr("src", model.get('baseUrl') + this.parseIcons(icons)); + } + }, + createPluginButton: function (model) { if (!model.get('visible')) return null; @@ -289,8 +348,7 @@ define([ var modes = model.get('variations'), guid = model.get('guid'), icons = modes[model.get('currentVariation')].get('icons'), - icon_url = model.get('baseUrl') + icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)]; - + icon_url = model.get('baseUrl') + this.parseIcons(icons); var _menu_items = []; _.each(model.get('variations'), function(variation, index) { if (variation.get('visible')) From 273b4ff6c7f7500a1a3ba4ff018930f10558c082 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 10:20:00 +0300 Subject: [PATCH 3/8] [Plugins] Add support for active button --- apps/common/main/lib/controller/Plugins.js | 2 +- apps/common/main/lib/view/Plugins.js | 41 ++++++++++++++++------ 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index fe13068e2a..f12351fa4c 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/apps/common/main/lib/controller/Plugins.js @@ -289,7 +289,7 @@ define([ var storePlugins = this.getApplication().getCollection('Common.Collections.Plugins'), me = this; storePlugins.each(function(item){ - me.panelPlugins.updatePluginButton(item); + me.panelPlugins.updatePluginIcons(item); }); }, diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index 159ddc0c68..d607a1fdf9 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/apps/common/main/lib/view/Plugins.js @@ -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); } @@ -304,8 +306,8 @@ define([ current = icons[idx], bestDistance = 10000, currentDistance = 0, - defUrl = '', - bestUrl = ''; + defUrl, + bestUrl; for (var key in current) { if (current.hasOwnProperty(key)) { if (key=='default') { @@ -315,27 +317,44 @@ define([ if (currentDistance < (bestDistance - 0.01)) { bestDistance = currentDistance; - bestUrl = current[key]['normal']; + bestUrl = current[key]; } } } } (bestDistance>0.01 && defUrl) && (bestUrl = defUrl); - return bestUrl; + return { + 'normal': bestUrl['normal'], + 'hover': bestUrl['hover'] || bestUrl['normal'], + 'active': bestUrl['active'] || bestUrl['normal'] + }; } else { // old version - return icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)] + 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 modes = model.get('variations'), - icons = modes[model.get('currentVariation')].get('icons'), - btn = model.get('button'); + var btn = model.get('button'); if (btn && btn.cmpEl) { - btn.cmpEl.find(".inner-box-icon img").attr("src", model.get('baseUrl') + this.parseIcons(icons)); + btn.cmpEl.find(".inner-box-icon img").attr("src", model.get('baseUrl') + model.get('parsedIcons')[btn.isActive() ? 'active' : 'normal']); } }, @@ -348,7 +367,9 @@ define([ var modes = model.get('variations'), guid = model.get('guid'), icons = modes[model.get('currentVariation')].get('icons'), - icon_url = model.get('baseUrl') + this.parseIcons(icons); + 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')) From 583fcc8cadca0a3049e4cf896a8bea0dd5a1e33a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 11:49:11 +0300 Subject: [PATCH 4/8] Fix plugins icons --- apps/common/main/resources/less/buttons.less | 3 ++- apps/common/main/resources/less/plugins.less | 4 ---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index b2d4954617..af3143e83f 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/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 { diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less index 070b9856f9..1e5ac5ded8 100644 --- a/apps/common/main/resources/less/plugins.less +++ b/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; From de521b5a5179ad535e50a6893f676ba5c36ce478 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 13:23:04 +0300 Subject: [PATCH 5/8] Fix fonts list --- apps/common/main/lib/component/ComboBoxFonts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index 73dd410ad9..75369008ea 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/apps/common/main/lib/component/ComboBoxFonts.js @@ -55,7 +55,7 @@ define([ thumbContext = thumbCanvas.getContext('2d'), thumbs = [ {ratio: 1, path: '../../../../sdkjs/common/Images/fonts_thumbnail.png', width: iconWidth, height: iconHeight}, - {ratio: 1.5, path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2}, + {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, From 8d54a7d1fb005b18117959b5760bb15047670d92 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 13:23:23 +0300 Subject: [PATCH 6/8] [PE] Fix themes list --- .../main/app/controller/Toolbar.js | 4 ++-- apps/presentationeditor/main/app/view/Toolbar.js | 4 ++-- .../main/resources/less/toolbar.less | 12 +++++++++--- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 675e42688e..518a6fc289 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/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) { diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index a4aec78b0b..0e8572234e 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/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, diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less index 5f5516b95a..1915ce12bd 100644 --- a/apps/presentationeditor/main/resources/less/toolbar.less +++ b/apps/presentationeditor/main/resources/less/toolbar.less @@ -104,12 +104,18 @@ } .item-theme { - width: 85px; - height: 38px; - .background-ximage('../../../../../../sdkjs/common/Images/themes_thumbnail.png', '../../../../../../sdkjs/common/Images/themes_thumbnail@2x.png', 85px); + width: 88px; + height: 40px; + .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; } \ No newline at end of file From 5374c50ab699170cfcf06f1ec3fa6feb9e785909 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 13:26:05 +0300 Subject: [PATCH 7/8] [PE] Fix themes --- apps/presentationeditor/main/app/view/DocumentHolder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js index a56de3cf03..b1376eb818 100644 --- a/apps/presentationeditor/main/app/view/DocumentHolder.js +++ b/apps/presentationeditor/main/app/view/DocumentHolder.js @@ -1931,7 +1931,7 @@ define([ menu : new Common.UI.Menu({ menuAlign: 'tl-tr', items: [ - { template: _.template('
') } + { template: _.template('
') } ] }) }); From ac619c8369f24b443fd00d9bebaaf946513068cf Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Mar 2021 14:37:17 +0300 Subject: [PATCH 8/8] Fix fonts for desktop --- apps/common/main/lib/component/ComboBoxFonts.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index 75369008ea..2f47283a65 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/apps/common/main/lib/component/ComboBoxFonts.js @@ -64,8 +64,9 @@ define([ applicationPixelRatio = Common.Utils.applicationPixelRatio(); if (typeof window['AscDesktopEditor'] === 'object') { - thumbs[0].path = window['AscDesktopEditor'].getFontsSprite(); - thumbs[1].path = thumbs[2].path = window['AscDesktopEditor'].getFontsSprite(true); + thumbs[0].path = window['AscDesktopEditor'].getFontsSprite(''); + thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.5x'); + thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@2x'); } var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);