From 3161d96361d317a2ce6baf6d002e940a3ebaddbb Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Fri, 11 Oct 2019 14:55:39 +0300
Subject: [PATCH] Allow a view mode for the skeletone view

---
 apps/documenteditor/main/index.html           | 15 ++++++-----
 apps/documenteditor/main/index.html.deploy    |  6 +++++
 apps/presentationeditor/main/index.html       | 15 ++++++-----
 .../presentationeditor/main/index.html.deploy | 15 ++++++-----
 apps/spreadsheeteditor/main/index.html        | 25 ++++++-------------
 apps/spreadsheeteditor/main/index.html.deploy | 23 ++++++-----------
 6 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 0c6a017dfb..41d1ff210e 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -24,7 +24,7 @@
 
         .loadmask > .brendpanel {
             width: 100%;
-            height: 56px;
+            min-height: 32px;
             background: #446995;
         }
 
@@ -81,11 +81,6 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar li {
@@ -235,6 +230,14 @@
     <div id="viewport"></div>
 
     <script>
+        var params = getUrlParams(),
+            view = params["mode"] == 'view';
+
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
+
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 79397e2fee..b83e79fed1 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -221,6 +221,12 @@
     <div id="viewport"></div>
 
     <script>
+        var params = getUrlParams(),
+            view = params["mode"] == 'view';
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index 0364fbaeed..301b18e400 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -23,7 +23,7 @@
 
         .loadmask > .brendpanel {
             width: 100%;
-            height: 56px;
+            min-height: 32px;
             background: #aa5252;
         }
 
@@ -80,11 +80,6 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar li {
@@ -264,6 +259,14 @@
     <div id="viewport"></div>
 
     <script>
+        var params = getUrlParams(),
+            view = params["mode"] == 'view';
+
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
+
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index e05eae0faf..158e07bbf4 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -25,7 +25,7 @@
 
         .loadmask > .brendpanel {
             width: 100%;
-            height: 56px;
+            min-height: 32px;
             background: #aa5252;
         }
 
@@ -82,11 +82,6 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar li {
@@ -270,6 +265,14 @@
     <div id="viewport"></div>
 
     <script>
+        var params = getUrlParams(),
+            view = params["mode"] == 'view';
+
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
+
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 64a9de9e0c..04d9b48a44 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -22,7 +22,7 @@
 
         .loadmask > .brendpanel {
             width: 100%;
-            height: 56px;
+            min-height: 32px;
             background: #40865c;
         }
 
@@ -55,11 +55,6 @@
             border-radius: 12px;
             margin: 4px 10px;
             background: rgba(255, 255, 255, 0.2);
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .brendpanel .rect {
@@ -69,11 +64,6 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(255, 255, 255, 0.2);
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar {
@@ -88,11 +78,6 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar li {
@@ -246,13 +231,19 @@
 
     <script>
         var params = getUrlParams(),
-            internal = params["internal"] == 'true';
+            internal = params["internal"] == 'true',
+            view = params["mode"] == 'view';
 
         if (internal) {
             document.querySelector('.brendpanel').remove();
             document.querySelector('.sktoolbar').remove();
         }
 
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
+
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index e312dd0b0c..9970de11e2 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -57,11 +57,6 @@
             border-radius: 12px;
             margin: 4px 10px;
             background: rgba(255, 255, 255, 0.2);
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .brendpanel .rect {
@@ -71,11 +66,6 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(255, 255, 255, 0.2);
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar {
@@ -90,11 +80,6 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
         .loadmask > .sktoolbar li {
@@ -251,13 +236,19 @@
 
     <script>
         var params = getUrlParams(),
-            internal = params["internal"] == 'true';
+            internal = params["internal"] == 'true',
+            view = params["mode"] == 'view';
 
         if (internal) {
             document.querySelector('.brendpanel').remove();
             document.querySelector('.sktoolbar').remove();
         }
 
+        if (view) {
+            document.querySelector('.brendpanel > :nth-child(2)').remove();
+            document.querySelector('.sktoolbar').remove();
+        }
+
         if (stopLoading) {
             document.body.removeChild(document.getElementById('loading-mask'));
         } else {