diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index 5d3e28991e..2f47283a65 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/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', - 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@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(); - thumbPath2x = 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'); } - 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/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index c5c7d32b23..f12351fa4c 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.updatePluginIcons(item); + }); + }, + onSelectPlugin: function(picker, item, record, e){ var btn = $(e.target); if (btn && btn.hasClass('plugin-caret')) { 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..d607a1fdf9 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') + 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; i0.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')) 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; 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/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('
') } ] }) }); 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