From 751fedc66316658cc6bdf0eaffe20c4cca2c80e0 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 13 Sep 2021 00:51:01 +0300
Subject: [PATCH] [DE] skeleton refactoring

---
 apps/documenteditor/mobile/src/app.js         |   4 +-
 .../mobile/src/controller/Error.jsx           |   2 +-
 .../mobile/src/controller/LongActions.jsx     |   8 +-
 .../mobile/src/controller/Main.jsx            |   7 +-
 apps/documenteditor/mobile/src/index_dev.html | 117 +++++++++++++++++-
 apps/documenteditor/mobile/src/lib/i18n.js    |   3 +
 apps/documenteditor/mobile/src/page/main.jsx  |   4 +
 7 files changed, 136 insertions(+), 9 deletions(-)

diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js
index dc39d91b6..cc9445153 100644
--- a/apps/documenteditor/mobile/src/app.js
+++ b/apps/documenteditor/mobile/src/app.js
@@ -36,9 +36,9 @@ Framework7.use(Framework7React)
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
         <Provider {...stores}>
-            <Suspense fallback="">
+            {/*<Suspense fallback="loading...">*/}
                 <App />
-            </Suspense>
+            {/*</Suspense>*/}
         </Provider>
     </I18nextProvider>,
   document.getElementById('app'),
diff --git a/apps/documenteditor/mobile/src/controller/Error.jsx b/apps/documenteditor/mobile/src/controller/Error.jsx
index 6910f56b6..7a9f49a26 100644
--- a/apps/documenteditor/mobile/src/controller/Error.jsx
+++ b/apps/documenteditor/mobile/src/controller/Error.jsx
@@ -13,7 +13,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
         });
         return () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onError', onError);
+            if ( api ) api.asc_unregisterCallback('asc_onError', onError);
         }
     });
 
diff --git a/apps/documenteditor/mobile/src/controller/LongActions.jsx b/apps/documenteditor/mobile/src/controller/LongActions.jsx
index f6e31b73d..28343acc5 100644
--- a/apps/documenteditor/mobile/src/controller/LongActions.jsx
+++ b/apps/documenteditor/mobile/src/controller/LongActions.jsx
@@ -35,9 +35,11 @@ const LongActionsController = () => {
 
         return ( () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
-            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
-            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+            if ( api ) {
+                api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+                api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+            }
 
             Common.Notifications.off('preloader:endAction', onLongActionEnd);
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);
diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index b39ad5f69..e3cd774e1 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -279,7 +279,7 @@ class MainController extends Component {
                     });
 
                     Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
+                    // Common.EditorApi = {get: () => this.api};
 
                     // Set font rendering mode
                     let value = LocalStorage.getItem("de-settings-fontrender");
@@ -405,7 +405,9 @@ class MainController extends Component {
     }
 
     applyLicense () {
-        const _t = this._t;
+        const { t } = this.props;
+        const _t = t('Main', {returnObjects:true});
+
         const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
         const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
         const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
@@ -851,6 +853,7 @@ class MainController extends Component {
     }
 
     componentDidMount() {
+        Common.EditorApi = {get: () => this.api};
         this.initSdk();
     }
 }
diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html
index a0ead6c1a..9df63310f 100644
--- a/apps/documenteditor/mobile/src/index_dev.html
+++ b/apps/documenteditor/mobile/src/index_dev.html
@@ -22,17 +22,128 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
   <link rel="icon" href="static/icons/favicon.png">
-  
+
+    <style type="text/css">
+        body {
+            /*background-color: red;*/
+            margin: 0;
+        }
+
+        .skl-navbar {
+            --box-logo-height: 26px;
+            --skl-navbar-height: 44px;
+            --skl-pixel-ratio: 1;
+        }
+
+        .skl-navbar--md {
+            --skl-navbar-height: 56px;
+        }
+
+        .skl-pixel-ratio--2 {
+            --skl-pixel-ratio: 2;
+        }
+
+        .skl-navbar {
+            height: calc(var(--skl-navbar-height) + var(--box-logo-height));
+            width: 100%;
+            /*background-color: #446995;*/
+            position: relative;
+        }
+
+        .skl-navbar.skl-navbar--md {
+            height: calc(56px + 26px);
+            background-color: #446995;
+        }
+
+        .skl-navbar::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+        }
+
+        .skl-navbar:not(.skl-navbar--md)::before {
+            background-color: rgba(0,0,0,0.25);
+            display: block;
+            z-index: 15;
+            top: auto;
+            right: auto;
+            bottom: 0;
+            left: 0;
+            height: 1px;
+            transform-origin: 50% 100%;
+            transform: scaleY(calc(1 / var(--skl-pixel-ratio)));
+        }
+
+        .skl-navbar.skl-navbar--md::before {
+            right: 0;
+            width: 100%;
+            top: 100%;
+            bottom: auto;
+            height: 8px;
+            pointer-events: none;
+            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
+        }
+
+        .skl-lines {
+            display: none;
+        }
+
+        .skl-line {
+            height: 15px;
+            margin: 30px;
+            background: #e2e2e2;
+            overflow: hidden;
+            position: relative;
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
+        }
+
+        @keyframes flickerAnimation {
+            0%   { opacity:0.1; }
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
+        }
+        @-o-keyframes flickerAnimation{
+            0%   { opacity:0.1; }
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
+        }
+        @-moz-keyframes flickerAnimation{
+            0%   { opacity:0.1; }
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
+        }
+        @-webkit-keyframes flickerAnimation{
+            0%   { opacity:0.1; }
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
+        }
+    </style>
   
   <!-- built styles file will be auto injected -->
 </head>
 <body>
+    <section class="skl-container">
+        <div class="skl-navbar"></div>
+        <div class="skl-lines">
+            <div class="skl-line"></div>
+            <div class="skl-line"></div>
+            <div class="skl-line"></div>
+        </div>
+    </section>
     <script>
         const isAndroid = /Android/.test(navigator.userAgent);
         if ( isAndroid && navigator.platform == 'Win32' )
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        let navbar = document.querySelector('.skl-navbar');
+        if ( window.devicePixelRatio ) {
+            if ( navbar ) {
+                navbar.classList.add(`skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
+            }
+        }
+
         if ( !isAndroid ) {
             const ua = navigator.userAgent;
             const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@@ -43,6 +154,10 @@
                     get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
                 });
             }
+        } else {
+            if ( navbar ) {
+                navbar.classList.add('skl-navbar--md');
+            }
         }
 
         const getUrlParams = () => {
diff --git a/apps/documenteditor/mobile/src/lib/i18n.js b/apps/documenteditor/mobile/src/lib/i18n.js
index b3d3566ee..fea50f663 100644
--- a/apps/documenteditor/mobile/src/lib/i18n.js
+++ b/apps/documenteditor/mobile/src/lib/i18n.js
@@ -12,6 +12,9 @@ i18n.use(initReactI18next)
             loadPath: './locale/{{lng}}.json'
         },
         interpolation: { escapeValue: false },
+        react: {
+            useSuspense: false,
+        },
     });
 
 export default i18n;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index ba64208dc..598ae9142 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -88,6 +88,10 @@ class MainPage extends Component {
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
+      if ( $$('.skl-container').length ) {
+          $$('.skl-container').remove();
+      }
+
       return (
           <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}