From 5330e3a3c8bb4b618dd9f4055ec61bd4ba3942db Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 10 Feb 2021 23:42:55 +0300 Subject: [PATCH] [all] skeleton support for 150% --- apps/common/main/lib/util/htmlutils.js | 29 +++++++++++++++++++ apps/documenteditor/main/index.html | 14 ++++----- apps/documenteditor/main/index.html.deploy | 11 +++---- apps/presentationeditor/main/index.html | 9 ++++-- .../presentationeditor/main/index.html.deploy | 9 ++++-- apps/spreadsheeteditor/main/index.html | 14 ++++----- apps/spreadsheeteditor/main/index.html.deploy | 14 ++++----- 7 files changed, 68 insertions(+), 32 deletions(-) create mode 100644 apps/common/main/lib/util/htmlutils.js diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js new file mode 100644 index 000000000..a5d6822a5 --- /dev/null +++ b/apps/common/main/lib/util/htmlutils.js @@ -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); +} diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 87114e258..dfb698f8f 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -62,7 +62,7 @@ .loadmask > .sktoolbar { background: #f1f1f1; - border-bottom: 1px solid #cfcfcf; + border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf; height: 46px; padding: 10px 6px; box-sizing: content-box; @@ -104,7 +104,7 @@ width: 794px; margin: 46px auto; height: 100%; - border: 1px solid #bebebe; + border: var(--scaled-one-px-value, 1px) solid #bebebe; padding-top: 50px; } @@ -141,6 +141,10 @@ 50% { opacity:1; } 100% { opacity:0.5; } } + + .pixel-ratio__1_5 { + --scaled-one-px-value: calc(1px / 1.5); + } @@ -218,6 +217,7 @@ +
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index 48732ca67..c8981088c 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -63,7 +63,7 @@ .loadmask > .sktoolbar { background: #f1f1f1; - border-bottom: 1px solid #cfcfcf; + border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf; height: 46px; padding: 10px 6px; box-sizing: content-box; @@ -105,7 +105,7 @@ width: 794px; margin: 46px auto; height: 100%; - border: 1px solid #bebebe; + border: var(--scaled-one-px-value, 1px) solid #bebebe; padding-top: 50px; } @@ -203,11 +203,6 @@ window.frameEditorId = params["frameEditorId"]; 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 ) { window.desktop = window.AscDesktopEditor; window.on_native_message = function (cmd, param) { @@ -220,6 +215,8 @@ + +
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index 7cb9552ce..961c89637 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -61,7 +61,7 @@ .loadmask > .sktoolbar { background: #f1f1f1; - border-bottom: 1px solid #cbcbcb; + border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb; height: 46px; padding: 10px 6px; box-sizing: content-box; @@ -137,7 +137,7 @@ height: 100%; width: 100%; background: #fbfbfb; - border: 1px solid #dfdfdf; + border: var(--scaled-one-px-value, 1px) solid #dfdfdf; -webkit-animation: flickerAnimation 2s infinite ease-in-out; -moz-animation: flickerAnimation 2s infinite ease-in-out; @@ -181,6 +181,10 @@ 50% { opacity:0.5; } 100% { opacity:1; } } + + .pixel-ratio__1_5 { + --scaled-one-px-value: calc(1px / 1.5); + }
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy index 41a968cd6..215c3ff66 100644 --- a/apps/presentationeditor/main/index.html.deploy +++ b/apps/presentationeditor/main/index.html.deploy @@ -63,7 +63,7 @@ .loadmask > .sktoolbar { background: #f1f1f1; - border-bottom: 1px solid #cbcbcb; + border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb; height: 46px; padding: 10px 6px; box-sizing: content-box; @@ -139,7 +139,7 @@ height: 100%; width: 100%; background: #fbfbfb; - border: 1px solid #dfdfdf; + border: var(--scaled-one-px-value, 1px) solid #dfdfdf; -webkit-animation: flickerAnimation 2s infinite ease-in-out; -moz-animation: flickerAnimation 2s infinite ease-in-out; @@ -183,6 +183,10 @@ 50% { opacity:0.5; } 100% { opacity:1; } } + + .pixel-ratio__1_5 { + --scaled-one-px-value: calc(1px / 1.5); + }
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 6a1038efc..ea807bece 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -106,7 +106,7 @@ font-size: 0; box-sizing: border-box; border-style: solid; - border-width: 1px; + border-width: var(--scaled-one-px-value, 1px); border-color: #e1e1e1 transparent; } @@ -118,7 +118,7 @@ margin-left: 20px; background: #f7f7f7; border-style: solid; - border-width: 1px; + border-width: var(--scaled-one-px-value, 1px); border-color: transparent #e1e1e1; } @@ -177,6 +177,10 @@ 50% { opacity:0.5; } 100% { opacity:1; } } + + .pixel-ratio__1_5 { + --scaled-one-px-value: calc(1px / 1.5); + } @@ -249,6 +248,7 @@ +
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index a28e96130..6e78a7d91 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -108,7 +108,7 @@ font-size: 0; box-sizing: border-box; border-style: solid; - border-width: 1px; + border-width: var(--scaled-one-px-value, 1px); border-color: #e1e1e1 transparent; } @@ -120,7 +120,7 @@ margin-left: 20px; background: #f7f7f7; border-style: solid; - border-width: 1px; + border-width: var(--scaled-one-px-value, 1px); border-color: transparent #e1e1e1; } @@ -179,6 +179,10 @@ 50% { opacity:0.5; } 100% { opacity:1; } } + + .pixel-ratio__1_5 { + --scaled-one-px-value: calc(1px / 1.5); + }