Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
Fix/fix scale
This commit is contained in:
Julia Radzhabova 2021-03-30 14:41:31 +03:00 committed by GitHub
parent ca731a0133 ac619c8369
commit 767ddc4d54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 145 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
apps/common/main/lib/component/ComboBoxFonts.js
View file

@ -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<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, iconWidth * 2, iconHeight * 2);
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));
}
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].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.width = isRetina ? iconWidth * 2 : iconWidth;
fontImage.height = thumbs[thumbIdx].height;
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, iconWidth * 2, iconHeight * 2);
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);
}
context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
me.tiles[j] = fontImage;
$(listItems[j]).get(0).appendChild(fontImage);

4
apps/common/main/lib/component/ComboDataView.js
View file

@ -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() {

10
apps/common/main/lib/controller/Plugins.js
View file

@ -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')) {

3
apps/common/main/lib/util/utils.js
View file

@ -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;},

85
apps/common/main/lib/view/Plugins.js
View file

@ -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'))

3
apps/common/main/resources/less/buttons.less
View file

@ -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 {

4
apps/common/main/resources/less/plugins.less
View file

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

4
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -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) {

2
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -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>') }
]
})
});

4
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -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,

12
apps/presentationeditor/main/resources/less/toolbar.less
View file

@ -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;
}