Allow a view mode for the skeletone view

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 {

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 {

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 {

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 {

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 {

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 {