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

[DE] load icon's svg dynamically

Browse source
This commit is contained in:
Maxim Kadushkin 2022-10-15 11:04:22 +03:00
parent c739605f27
commit 545e585ccc
5 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
apps/common/main/lib/util/htmlutils.js
View file

@ -16,13 +16,34 @@ function checkScaling() {
}
}
if ( !window.matchMedia("screen and (-webkit-device-pixel-ratio: 1.5)," +
"screen and (-webkit-device-pixel-ratio: 1)," +
"screen and (-webkit-device-pixel-ratio: 2)").matches )
{
// don't add zoom for mobile devices
// if (!(/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera)))
// document.getElementsByTagName('html')[0].setAttribute('style', 'zoom: ' + (1 / window.devicePixelRatio) + ';');
matches = {
'pixel-ratio__2_5': `screen and (-webkit-min-device-pixel-ratio: 2.5), screen and (min-resolution: 2.5dppx)`,
};
for (let c in matches) {
if ( window.matchMedia(matches[c]).matches ) {
document.body.classList.add(c);
Common.Utils.injectSvgIcons();
break;
}
}
}
window.Common = {
Utils: {
injectSvgIcons: function () {
const el = document.querySelector('div.inlined-svg');
if (!el || !el.innerHTML.firstChild) {
fetch('./resources/img/iconssmall@2.5x.svg')
.then(r => {
if (r.ok) return r.text();
else {/* error */
}
}).then(text => {
const el = document.querySelector('div.inlined-svg')
el.innerHTML = text;
}).catch(console.error.bind(console));
}
}
}
}

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

@ -144,6 +144,8 @@ var utils = new(function() {
"screen and (min-resolution: 1.75dppx) and (max-resolution: 1.99dppx)";
var str_mq_200 = "screen and (-webkit-min-device-pixel-ratio: 2), " +
"screen and (min-resolution: 2dppx), screen and (min-resolution: 192dpi)";
const str_mq_250 = "screen and (-webkit-min-device-pixel-ratio: 2.5), " +
"screen and (min-resolution: 2.5dppx), screen and (min-resolution: 240dpi)";
if ( window.matchMedia(str_mq_125).matches ) {
scale.devicePixelRatio = 1.5;
@ -157,6 +159,10 @@ var utils = new(function() {
if ( window.matchMedia(str_mq_200).matches )
scale.devicePixelRatio = 2;
else scale.devicePixelRatio = 1;
if ( window.matchMedia(str_mq_250).matches ) {
scale.devicePixelRatio = 2.5;
}
}
var $root = $(document.body);

2
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -3193,6 +3193,8 @@ define([
this.toolbar.createDelayedElements();
this.attachUIEvents(this.toolbar);
this.onChangeProtectDocument();
Common.Utils.injectSvgIcons();
},
onAppShowed: function (config) {

1
apps/documenteditor/main/index.html
View file

@ -331,6 +331,7 @@
<img class="inline-svg" src="../../common/main/resources/img/header/icons.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<div class="inlined-svg"></div>
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

14
apps/documenteditor/main/resources/img/iconssmall@2.5x.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<symbol id="btn-bold" viewBox="0 0 20 20">
<path d="M6 5h3.11c1.418 0 2.445.203 3.083.608.643.401.964 1.042.964 1.921 0 .597-.141 1.087-.424 1.47a1.663 1.663 0 0 1-1.114.69v.069c.634.141 1.09.405 1.367.793.283.387.424.902.424 1.545 0 .911-.33 1.622-.991 2.133-.656.51-1.55.771-2.68.771H6V5Zm2 3.958h1.35c.574 0 .989-.089 1.244-.267.26-.177.39-.471.39-.881 0-.383-.142-.657-.424-.82-.278-.17-.72-.254-1.327-.254H8v2.222Zm0 1.682v2.604h1.5c.583 0 1.014-.111 1.292-.335.278-.223.417-.565.417-1.025 0-.83-.592-1.244-1.777-1.244H8Z"/>
</symbol>
<symbol id="btn-italic" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 5h5v1h-2l-1.977 8H11v1H6v-1h2.045l1.978-8H8V5Z" clip-rule="evenodd"/>
</symbol>
<symbol id="btn-underline" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14 10.395V5h-1v5.5c0 .825-.407 1.395-.868 1.839-.461.44-1.118.659-1.971.659-.895 0-1.832-.253-2.293-.693-.461-.44-.868-1.09-.868-1.91V5H6v5.335c0 1.13.332 2.017.996 2.663.669.646 1.87 1.002 3.088 1.002s2.175-.32 2.871-.962c.697-.64 1.045-1.522 1.045-2.643ZM15 15H5v1h10v-1Z" clip-rule="evenodd"/>
</symbol>
<symbol id="btn-strikeout" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.087 14.281c.609-.479.913-1.146.913-2.002 0-.495-.105-.921-.314-1.278H16v-1h-4.452a8.719 8.719 0 0 0-1.176-.517c-.596-.217-1.04-.414-1.33-.592-.288-.182-.492-.379-.614-.592-.121-.217-.182-.495-.182-.832 0-.456.165-.814.495-1.07.33-.258.79-.387 1.376-.387.744 0 1.51.169 2.296.506l.346-.985C11.963 5.177 11.09 5 10.143 5c-.908 0-1.639.222-2.19.665-.553.444-.83 1.04-.83 1.79 0 .714.19 1.293.568 1.737.256.296.624.566 1.105.809H4v1h7.076c.279.17.479.357.6.56.135.212.202.487.202.824 0 .51-.187.91-.56 1.198-.374.284-.931.426-1.67.426-.452 0-.909-.05-1.37-.147A6.773 6.773 0 0 1 7 13.463v1.091c.609.297 1.478.446 2.609.446 1.043 0 1.87-.24 2.478-.719Z" clip-rule="evenodd"/>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB