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

[all] skeleton support for 150%

Browse source
This commit is contained in:
Maxim Kadushkin 2021-02-10 23:42:55 +03:00
parent cf38ed40fe
commit 5330e3a3c8
7 changed files with 68 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
apps/common/main/lib/util/htmlutils.js Normal file
View file

@ -0,0 +1,29 @@
function checkScaling() {
var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
"screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
if ( window.matchMedia(str_mq_150).matches ) {
document.body.classList.add('pixel-ratio__1_5');
}
}
checkScaling();
var params = (function() {
var e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1),
urlParams = {};
while (e = r.exec(q))
urlParams[d(e[1])] = d(e[2]);
return urlParams;
})();
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.body.classList.add(ui_theme_name);
}

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

@ -62,7 +62,7 @@
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f1f1f1; background: #f1f1f1;
border-bottom: 1px solid #cfcfcf; border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -104,7 +104,7 @@
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #bebebe; border: var(--scaled-one-px-value, 1px) solid #bebebe;
padding-top: 50px; padding-top: 50px;
} }
@ -141,6 +141,10 @@
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.5; } 100% { opacity:0.5; }
} }
.pixel-ratio__1_5 {
--scaled-one-px-value: calc(1px / 1.5);
}
</style> </style>
<script> <script>
@ -204,11 +208,6 @@
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.documentElement.classList.add(ui_theme_name);
}
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>'); document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
</script> </script>
@ -218,6 +217,7 @@
<!-- debug end --> <!-- debug end -->
</head> </head>
<body> <body>
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div> <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>

11
apps/documenteditor/main/index.html.deploy
View file

@ -63,7 +63,7 @@
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f1f1f1; background: #f1f1f1;
border-bottom: 1px solid #cfcfcf; border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -105,7 +105,7 @@
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #bebebe; border: var(--scaled-one-px-value, 1px) solid #bebebe;
padding-top: 50px; padding-top: 50px;
} }
@ -203,11 +203,6 @@
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.documentElement.classList.add(ui_theme_name);
}
if ( window.AscDesktopEditor ) { if ( window.AscDesktopEditor ) {
window.desktop = window.AscDesktopEditor; window.desktop = window.AscDesktopEditor;
window.on_native_message = function (cmd, param) { window.on_native_message = function (cmd, param) {
@ -220,6 +215,8 @@
<link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css"> <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
</head> </head>
<body> <body>
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div> <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="viewport"></div> <div id="viewport"></div>

9
apps/presentationeditor/main/index.html
View file

@ -61,7 +61,7 @@
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f1f1f1; background: #f1f1f1;
border-bottom: 1px solid #cbcbcb; border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -137,7 +137,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #fbfbfb; background: #fbfbfb;
border: 1px solid #dfdfdf; border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
-webkit-animation: flickerAnimation 2s infinite ease-in-out; -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out; -moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -181,6 +181,10 @@
50% { opacity:0.5; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
.pixel-ratio__1_5 {
--scaled-one-px-value: calc(1px / 1.5);
}
</style> </style>
<script> <script>
@ -250,6 +254,7 @@
<!-- debug end --> <!-- debug end -->
</head> </head>
<body> <body>
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div> <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>

9
apps/presentationeditor/main/index.html.deploy
View file

@ -63,7 +63,7 @@
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f1f1f1; background: #f1f1f1;
border-bottom: 1px solid #cbcbcb; border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -139,7 +139,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #fbfbfb; background: #fbfbfb;
border: 1px solid #dfdfdf; border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
-webkit-animation: flickerAnimation 2s infinite ease-in-out; -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out; -moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -183,6 +183,10 @@
50% { opacity:0.5; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
.pixel-ratio__1_5 {
--scaled-one-px-value: calc(1px / 1.5);
}
</style> </style>
<script> <script>
@ -261,6 +265,7 @@
<link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css"> <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
</head> </head>
<body> <body>
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div> <div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>

14
apps/spreadsheeteditor/main/index.html
View file

@ -106,7 +106,7 @@
font-size: 0; font-size: 0;
box-sizing: border-box; box-sizing: border-box;
border-style: solid; border-style: solid;
border-width: 1px; border-width: var(--scaled-one-px-value, 1px);
border-color: #e1e1e1 transparent; border-color: #e1e1e1 transparent;
} }
@ -118,7 +118,7 @@
margin-left: 20px; margin-left: 20px;
background: #f7f7f7; background: #f7f7f7;
border-style: solid; border-style: solid;
border-width: 1px; border-width: var(--scaled-one-px-value, 1px);
border-color: transparent #e1e1e1; border-color: transparent #e1e1e1;
} }
@ -177,6 +177,10 @@
50% { opacity:0.5; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
.pixel-ratio__1_5 {
--scaled-one-px-value: calc(1px / 1.5);
}
</style> </style>
<script> <script>
@ -232,11 +236,6 @@
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.documentElement.classList.add(ui_theme_name);
}
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>'); document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
</script> </script>
@ -249,6 +248,7 @@
</head> </head>
<body> <body>
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"><div> <div class="brendpanel"><div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div> <div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div>

14
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -108,7 +108,7 @@
font-size: 0; font-size: 0;
box-sizing: border-box; box-sizing: border-box;
border-style: solid; border-style: solid;
border-width: 1px; border-width: var(--scaled-one-px-value, 1px);
border-color: #e1e1e1 transparent; border-color: #e1e1e1 transparent;
} }
@ -120,7 +120,7 @@
margin-left: 20px; margin-left: 20px;
background: #f7f7f7; background: #f7f7f7;
border-style: solid; border-style: solid;
border-width: 1px; border-width: var(--scaled-one-px-value, 1px);
border-color: transparent #e1e1e1; border-color: transparent #e1e1e1;
} }
@ -179,6 +179,10 @@
50% { opacity:0.5; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
.pixel-ratio__1_5 {
--scaled-one-px-value: calc(1px / 1.5);
}
</style> </style>
<script> <script>
@ -240,11 +244,6 @@
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.documentElement.classList.add(ui_theme_name);
}
if ( window.AscDesktopEditor ) { if ( window.AscDesktopEditor ) {
window.desktop = window.AscDesktopEditor; window.desktop = window.AscDesktopEditor;
window.on_native_message = function (cmd, param) { window.on_native_message = function (cmd, param) {
@ -258,6 +257,7 @@
<link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css"> <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
</head> </head>
<body> <body>
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"><div> <div class="brendpanel"><div>
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div> <div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div>