From 7152a85f870a447ac06d09f04a01d1eda35a51bc Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Fri, 4 Oct 2019 11:01:51 +0300
Subject: [PATCH] [SSE] Append toolbar skeleton

---
 apps/documenteditor/main/index.html           | 13 +++-
 apps/spreadsheeteditor/main/index.html        | 59 ++++++++++++++++++-
 apps/spreadsheeteditor/main/index.html.deploy | 59 ++++++++++++++++++-
 3 files changed, 128 insertions(+), 3 deletions(-)
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index bf62d1c20..9c2093f88 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -220,7 +220,18 @@
     <!-- debug end -->
 </head>
 <body>
-    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></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: 255px;"></li><li class="space"></li><li style="width: 180px;"></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="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div>
+        <div class="sktoolbar">
+            <ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></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: 255px;"></li><li class="space"></li><li style="width: 180px;"></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>
 
     <script>
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index f71beb136..cd7214bfd 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -76,6 +76,49 @@
             animation: flickerAnimation 2s infinite ease-in-out;
         }
 
+        .loadmask > .sktoolbar {
+            background: #fafafa;
+            height: 46px;
+            padding: 10px 12px;
+            box-sizing: content-box;
+        }
+
+        .loadmask > .sktoolbar ul {
+            margin: 0;
+            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 {
+            background: #e2e2e2;
+            border-radius: 3px;
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            margin-right: 6px;
+        }
+
+        .loadmask > .sktoolbar li.space {
+            background: none;
+            width: 12px;
+        }
+
+        .loadmask > .sktoolbar li.fat {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            left: 905px;
+            width: inherit;
+            height: 44px;
+        }
+
         .loadmask > .placeholder {
             background: #fbfbfb;
             width: 100%;
@@ -185,7 +228,21 @@
     <!-- debug end -->
 </head>
 <body>
-    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="columns"></div><div class="columns"></div></div></div>
+    <div id="loading-mask" class="loadmask">
+        <div class="brendpanel"><div>
+            <div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div>
+            <div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
+        </div>
+        <div class="sktoolbar">
+            <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
+            <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/></ul>
+        </div>
+        <div class="placeholder">
+            <div class="columns"></div>
+            <div class="columns"></div>
+        </div>
+    </div>
+
     <div id="viewport"></div>
 
     <script>
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index bd7a1a69f..e826c5a01 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -78,6 +78,49 @@
             animation: flickerAnimation 2s infinite ease-in-out;
         }
 
+        .loadmask > .sktoolbar {
+            background: #fafafa;
+            height: 46px;
+            padding: 10px 12px;
+            box-sizing: content-box;
+        }
+
+        .loadmask > .sktoolbar ul {
+            margin: 0;
+            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 {
+            background: #e2e2e2;
+            border-radius: 3px;
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            margin-right: 6px;
+        }
+
+        .loadmask > .sktoolbar li.space {
+            background: none;
+            width: 12px;
+        }
+
+        .loadmask > .sktoolbar li.fat {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            left: 905px;
+            width: inherit;
+            height: 44px;
+        }
+
         .loadmask > .placeholder {
             background: #fbfbfb;
             width: 100%;
@@ -190,7 +233,21 @@
     <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
 </head>
 <body>
-    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="columns"></div><div class="columns"></div></div></div>
+    <div id="loading-mask" class="loadmask">
+        <div class="brendpanel"><div>
+            <div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div>
+            <div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></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><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
+        </div>
+        <div class="sktoolbar">
+            <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
+            <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/></ul>
+        </div>
+        <div class="placeholder">
+            <div class="columns"></div>
+            <div class="columns"></div>
+        </div>
+    </div>
+
     <div id="viewport"></div>
 
     <script>
