From 1c80bea9fd86536564543376f87555daf6f0db5d Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 18 Jun 2020 14:43:26 +0300
Subject: [PATCH] Change new file panel

---
 .../main/resources/img/doc-formats/blank.svg  | 21 +++++-------
 .../main/app/view/FileMenuPanels.js           |  6 ++--
 apps/documenteditor/main/index.html           |  3 +-
 apps/documenteditor/main/index.html.deploy    |  4 +--
 apps/documenteditor/main/index_loader.html    |  3 +-
 .../main/index_loader.html.deploy             |  3 +-
 .../main/resources/img/blank.svg              |  5 +++
 .../main/resources/img/file-template.svg      | 15 +++++++++
 .../main/resources/less/filemenu.less         | 19 ++++++++---
 .../main/app/view/FileMenuPanels.js           |  6 ++--
 apps/presentationeditor/main/index.html       |  1 +
 .../presentationeditor/main/index.html.deploy |  1 +
 .../presentationeditor/main/index_loader.html |  1 +
 .../main/index_loader.html.deploy             |  1 +
 .../main/resources/img/file-template.svg      | 21 ++++++++++++
 .../main/resources/less/leftmenu.less         | 21 +++++++++---
 .../main/app/view/FileMenuPanels.js           |  6 ++--
 apps/spreadsheeteditor/main/index.html        |  1 +
 apps/spreadsheeteditor/main/index.html.deploy |  1 +
 apps/spreadsheeteditor/main/index_loader.html |  1 +
 .../main/index_loader.html.deploy             |  1 +
 .../main/resources/img/file-template.svg      | 33 +++++++++++++++++++
 .../main/resources/less/leftmenu.less         | 21 +++++++++---
 23 files changed, 154 insertions(+), 41 deletions(-)
 create mode 100644 apps/documenteditor/main/resources/img/blank.svg
 create mode 100644 apps/documenteditor/main/resources/img/file-template.svg
 create mode 100644 apps/presentationeditor/main/resources/img/file-template.svg
 create mode 100644 apps/spreadsheeteditor/main/resources/img/file-template.svg

diff --git a/apps/common/main/resources/img/doc-formats/blank.svg b/apps/common/main/resources/img/doc-formats/blank.svg
index 4a0312675..de6c3a673 100644
--- a/apps/common/main/resources/img/doc-formats/blank.svg
+++ b/apps/common/main/resources/img/doc-formats/blank.svg
@@ -1,15 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127">
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
   <symbol id="svg-format-blank">
-    <path d="M95 23V119C95 119.796 94.6839 120.559 94.1213 121.121C93.5587 121.684 92.7956 122 92 122H8C7.20435 122 6.44129 121.684 5.87868 121.121C5.31607 120.559 5 119.796 5 119V8C5 7.20435 5.31607 6.44129 5.87868 5.87868C6.44129 5.31607 7.20435 5 8 5H77L95 23Z" fill="white"/>
-<path opacity="0.2" d="M77 5H8C7.20435 5 6.44129 5.31607 5.87868 5.87868C5.31607 6.44129 5 7.20435 5 8V119C5 119.796 5.31607 120.559 5.87868 121.121C6.44129 121.684 7.20435 122 8 122H92C92.7956 122 93.5587 121.684 94.1213 121.121C94.6839 120.559 95 119.796 95 119V23L77 5ZM94 119C94 119.53 93.7893 120.039 93.4142 120.414C93.0391 120.789 92.5304 121 92 121H8C7.46957 121 6.96086 120.789 6.58579 120.414C6.21071 120.039 6 119.53 6 119V8C6 7.46957 6.21071 6.96086 6.58579 6.58579C6.96086 6.21071 7.46957 6 8 6H76.59L77 6.41V20C77 20.7956 77.3161 21.5587 77.8787 22.1213C78.4413 22.6839 79.2044 23 80 23H93.59L94 23.41V119Z" fill="black"/>
-<g opacity="0.2">
-<path opacity="0.2" d="M75 86H50V88H75V86Z" fill="black"/>
-<path opacity="0.2" d="M75 80H25V82H75V80Z" fill="black"/>
-<path opacity="0.2" d="M75 74H25V76H75V74Z" fill="black"/>
-<path opacity="0.2" d="M75 68H25V70H75V68Z" fill="black"/>
-<path opacity="0.2" d="M75 62H25V64H75V62Z" fill="black"/>
-<path opacity="0.2" d="M49 43H25V45H49V43Z" fill="black"/>
-<path opacity="0.2" d="M44 37H25V39H44V37Z" fill="black"/>
-</g>
+  <clipPath id="a">
+    <path d="m0 0h96v96h-96z"/>
+  </clipPath>
+  <g clip-path="url(#a)">
+    <path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
+  </g>
   </symbol>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 56a8f3bd8..ced874565 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -718,8 +718,8 @@ define([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
                 '<div class="blank-document-btn">',
-                    '<svg class="btn-doc-format">',
-                        '<use xlink:href="#svg-format-docx"></use>',
+                    '<svg class="btn-blank-format">',
+                        '<use xlink:href="#svg-format-blank"></use>',
                     '</svg>',
                 '</div>',
                 '<div class="blank-document-info">',
@@ -735,7 +735,7 @@ define([
                         '<% if (!_.isEmpty(item.image)) { %> ',
                             ' style="background-image: url(<%= item.image %>);">',
                         '<% } else { ' +
-                            'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                            'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
                         ' } %>',
                         '</div>',
                         '<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 527d03ec4..9ab7d1507 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -269,8 +269,9 @@
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/ott.svg">
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
-    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
+    <img class="inline-svg" src="resources/img/blank.svg">
     <img class="inline-svg" src="resources/img/recent-file.svg">
+    <img class="inline-svg" src="resources/img/file-template.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 6ac8c4f84..efb5164e4 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -291,11 +291,11 @@
     <inline src="resources/img/doc-formats/ott.svg" />
     <inline src="resources/img/doc-formats/rtf.svg" />
     <inline src="resources/img/doc-formats/html.svg" />
-    <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
-
+    <inline src="resources/img/file-template.svg" />
+    <inline src="resources/img/blank.svg" />
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 
 </body>
diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html
index 8f6506ec0..1f8891dff 100644
--- a/apps/documenteditor/main/index_loader.html
+++ b/apps/documenteditor/main/index_loader.html
@@ -270,8 +270,9 @@
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/ott.svg">
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
-<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
+<img class="inline-svg" src="resources/img/blank.svg">
 <img class="inline-svg" src="resources/img/recent-file.svg">
+<img class="inline-svg" src="resources/img/file-template.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index_loader.html.deploy b/apps/documenteditor/main/index_loader.html.deploy
index 3b8fe9b5a..948e748d3 100644
--- a/apps/documenteditor/main/index_loader.html.deploy
+++ b/apps/documenteditor/main/index_loader.html.deploy
@@ -313,10 +313,11 @@
     <inline src="resources/img/doc-formats/ott.svg" />
     <inline src="resources/img/doc-formats/rtf.svg" />
     <inline src="resources/img/doc-formats/html.svg" />
-    <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
+    <inline src="resources/img/file-template.svg" />
+    <inline src="resources/img/blank.svg" />
 
     <div id="viewport"></div>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/documenteditor/main/resources/img/blank.svg b/apps/documenteditor/main/resources/img/blank.svg
new file mode 100644
index 000000000..af4a89b89
--- /dev/null
+++ b/apps/documenteditor/main/resources/img/blank.svg
@@ -0,0 +1,5 @@
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
+<symbol id="svg-format-blank">
+<path d="m85 95.5h-74c-.8284 0-1.5-.6716-1.5-1.5v-92c0-.82843.6716-1.5 1.5-1.5h74c.8284 0 1.5.67157 1.5 1.5v92c0 .8284-.6716 1.5-1.5 1.5z" fill="#fff" stroke="#bfbfbf"/>
+</symbol>
+</svg>
diff --git a/apps/documenteditor/main/resources/img/file-template.svg b/apps/documenteditor/main/resources/img/file-template.svg
new file mode 100644
index 000000000..e54f5de97
--- /dev/null
+++ b/apps/documenteditor/main/resources/img/file-template.svg
@@ -0,0 +1,15 @@
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
+<symbol id="svg-file-template">
+    <path d="m85 95.5h-74c-.8284 0-1.5-.6716-1.5-1.5v-92c0-.82843.6716-1.5 1.5-1.5h74c.8284 0 1.5.67157 1.5 1.5v92c0 .8284-.6716 1.5-1.5 1.5z" fill="#fff" stroke="#bfbfbf"/>
+    <g fill="#444">
+    <rect height="4" opacity=".2" rx="1" width="46" x="25" y="32"/>
+    <rect height="6" opacity=".4" rx="1" width="46" x="25" y="20"/>
+    <rect height="20" opacity=".2" rx="1" width="16" x="55" y="40"/>
+    <rect height="4" opacity=".2" rx="1" width="26" x="25" y="40"/>
+    <rect height="4" opacity=".2" rx="1" width="26" x="25" y="48"/>
+    <rect height="4" opacity=".2" rx="1" width="26" x="25" y="56"/>
+    <rect height="4" opacity=".2" rx="1" width="46" x="25" y="64"/>
+    <rect height="4" opacity=".2" rx="1" width="46" x="25" y="72"/>
+    </g>
+</symbol>
+</svg>
\ No newline at end of file
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 1601c15e3..373f34f47 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -109,6 +109,17 @@
   }
 }
 
+.btn-blank-format {
+  display: block;
+  width: 96px;
+  height: 96px;
+  cursor: pointer;
+
+  svg&:hover {
+    opacity:0.85;
+  }
+}
+
 #panel-settings {
   #file-menu-panel & {
     padding: 0 30px;
@@ -174,8 +185,8 @@
     display: inline-block;
     margin: 25px 20px 65px;
 
-    width: 102px;
-    height: 128px;
+    width: 96px;
+    height: 96px;
     cursor: pointer;
   }
 
@@ -194,8 +205,8 @@
       cursor: pointer;
 
       .thumb {
-        width: 102px;
-        height: 128px;
+        width: 96px;
+        height: 96px;
         background-repeat: no-repeat;
         background-position: center;
       }
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index fb70e61b0..73dc6cf58 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -625,8 +625,8 @@ define([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
                 '<div class="blank-document-btn">',
-                    '<svg class="btn-doc-format">',
-                        '<use xlink:href="#svg-format-pptx"></use>',
+                    '<svg class="btn-blank-format">',
+                        '<use xlink:href="#svg-format-blank"></use>',
                     '</svg>',
                 '</div>',
                 '<div class="blank-document-info">',
@@ -642,7 +642,7 @@ define([
                             '<% if (!_.isEmpty(item.image)) { %> ',
                             ' style="background-image: url(<%= item.image %>);">',
                             '<% } else { ' +
-                                'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                                'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
                             ' } %>',
                         '</div>',
                         '<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index ba53817f6..5f5666c39 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -296,6 +296,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <img class="inline-svg" src="resources/img/recent-file.svg">
+    <img class="inline-svg" src="resources/img/file-template.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index a7c7e8e26..eeffda167 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -340,6 +340,7 @@
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
+    <inline src="resources/img/file-template.svg" />
 
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 
diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html
index ea20a977b..39b348ca6 100644
--- a/apps/presentationeditor/main/index_loader.html
+++ b/apps/presentationeditor/main/index_loader.html
@@ -260,6 +260,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="resources/img/recent-file.svg">
+<img class="inline-svg" src="resources/img/file-template.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index_loader.html.deploy b/apps/presentationeditor/main/index_loader.html.deploy
index c06af9dca..2ded00a17 100644
--- a/apps/presentationeditor/main/index_loader.html.deploy
+++ b/apps/presentationeditor/main/index_loader.html.deploy
@@ -314,6 +314,7 @@
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
+    <inline src="resources/img/file-template.svg" />
 
     <div id="viewport"></div>
 
diff --git a/apps/presentationeditor/main/resources/img/file-template.svg b/apps/presentationeditor/main/resources/img/file-template.svg
new file mode 100644
index 000000000..a501311c9
--- /dev/null
+++ b/apps/presentationeditor/main/resources/img/file-template.svg
@@ -0,0 +1,21 @@
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
+    <symbol id="svg-file-template">
+    <clipPath id="a">
+        <path d="m0 0h96v96h-96z"/>
+    </clipPath>
+    <g clip-path="url(#a)">
+        <path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
+        <g fill="#444">
+            <rect height="8" opacity=".4" rx="1" width="64" x="16" y="34"/>
+            <rect height="4" opacity=".4" rx="1" width="4" x="54" y="54"/>
+            <rect height="4" opacity=".4" rx="1" width="4" x="54" y="62"/>
+            <rect height="4" opacity=".4" rx="1" width="4" x="54" y="70"/>
+            <rect height="4" opacity=".2" rx="1" width="20" x="60" y="54"/>
+            <rect height="4" opacity=".2" rx="1" width="20" x="60" y="62"/>
+            <rect height="4" opacity=".2" rx="1" width="20" x="60" y="70"/>
+            <path d="m44 65c0 2.7689-.8211 5.4757-2.3594 7.778-1.5384 2.3023-3.7249 4.0967-6.283 5.1563-2.5582 1.0596-5.3731 1.3369-8.0889.7967-2.7157-.5402-5.2103-1.8736-7.1682-3.8315s-3.2913-4.4525-3.8315-7.1682c-.5402-2.7158-.2629-5.5307.7967-8.0889 1.0596-2.5581 2.854-4.7446 5.1563-6.283 2.3023-1.5383 5.0091-2.3594 7.778-2.3594v14z" opacity=".2"/>
+            <path d="m32 49c1.8385 0 3.659.3621 5.3576 1.0657 1.6985.7036 3.2419 1.7348 4.5419 3.0348s2.3312 2.8434 3.0348 4.5419c.7036 1.6986 1.0657 3.5191 1.0657 5.3576h-14z" opacity=".4"/>
+        </g>
+    </g>
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 2a6669ac2..55091747e 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -72,6 +72,17 @@
     }
 }
 
+.btn-blank-format {
+    display: block;
+    width: 96px;
+    height: 96px;
+    cursor: pointer;
+
+    svg&:hover {
+        opacity:0.85;
+    }
+}
+
 #file-menu-panel {
     > div {
         height: 100%;
@@ -231,7 +242,7 @@
 
                 h3 {
                     padding-left: 0;
-                    padding-top: 40px;
+                    padding-top: 45px;
                     white-space: nowrap;
                 }
             }
@@ -240,8 +251,8 @@
                 display: inline-block;
                 margin: 25px 20px 65px;
 
-                width: 102px;
-                height: 128px;
+                width: 96px;
+                height: 96px;
                 cursor: pointer;
             }
 
@@ -260,8 +271,8 @@
                     cursor: pointer;
 
                     .thumb {
-                        width: 102px;
-                        height: 128px;
+                        width: 96px;
+                        height: 96px;
                         background-repeat: no-repeat;
                         background-position: center;
                    }
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index b80f29e8f..6a92c8ff6 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1442,8 +1442,8 @@ define([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
                 '<div class="blank-document-btn">',
-                    '<svg class="btn-doc-format">',
-                        '<use xlink:href="#svg-format-xlsx"></use>',
+                    '<svg class="btn-blank-format">',
+                        '<use xlink:href="#svg-format-blank"></use>',
                     '</svg>',
                 '</div>',
                 '<div class="blank-document-info">',
@@ -1459,7 +1459,7 @@ define([
                             '<% if (!_.isEmpty(item.image)) { %> ',
                             ' style="background-image: url(<%= item.image %>);">',
                             '<% } else { ' +
-                                'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                                'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
                             ' } %>',
                         '</div>',
                         '<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index b63b001a9..b80725c68 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -310,6 +310,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <img class="inline-svg" src="resources/img/recent-file.svg">
+    <img class="inline-svg" src="resources/img/file-template.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 5b8efe847..247a4b78b 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -353,6 +353,7 @@
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
+    <inline src="resources/img/file-template.svg" />
 
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 </body>
diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html
index 7c90b3f1b..8eb226bba 100644
--- a/apps/spreadsheeteditor/main/index_loader.html
+++ b/apps/spreadsheeteditor/main/index_loader.html
@@ -263,6 +263,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="resources/img/recent-file.svg">
+<img class="inline-svg" src="resources/img/file-template.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);
diff --git a/apps/spreadsheeteditor/main/index_loader.html.deploy b/apps/spreadsheeteditor/main/index_loader.html.deploy
index 0f844cf6f..57a7198a7 100644
--- a/apps/spreadsheeteditor/main/index_loader.html.deploy
+++ b/apps/spreadsheeteditor/main/index_loader.html.deploy
@@ -314,6 +314,7 @@
     <inline src="resources/img/toolbar/shapetypes.svg" />
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
+    <inline src="resources/img/file-template.svg" />
 
     <div id="viewport"></div>
 
diff --git a/apps/spreadsheeteditor/main/resources/img/file-template.svg b/apps/spreadsheeteditor/main/resources/img/file-template.svg
new file mode 100644
index 000000000..88a890b07
--- /dev/null
+++ b/apps/spreadsheeteditor/main/resources/img/file-template.svg
@@ -0,0 +1,33 @@
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
+    <symbol id="svg-file-template">
+    <clipPath id="a">
+        <path d="m0 0h96v96h-96z"/>
+    </clipPath>
+        <g clip-path="url(#a)">
+            <path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
+            <g fill="#444">
+                <rect height="4" opacity=".4" rx="1" width="12" x="15" y="38"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="15" y="48"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="15" y="56"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="15" y="64"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="15" y="72"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="33" y="38"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="33" y="48"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="33" y="56"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="33" y="64"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="33" y="72"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="51" y="38"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="51" y="48"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="51" y="56"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="51" y="64"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="51" y="72"/>
+                <rect height="4" opacity=".4" rx="1" width="12" x="69" y="38"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="69" y="48"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="69" y="56"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="69" y="64"/>
+                <rect height="4" opacity=".2" rx="1" width="12" x="69" y="72"/>
+                <path clip-rule="evenodd" d="m67 36h16v8h-16zm-2 0h-16v8h16zm-18 0h-16v8h16zm-18 0h-16v8h16zm-16 10v32h16v-32zm18 32h52v-32h-16-2-16-2-16zm-20-42c0-1.1046.8954-2 2-2h70c1.1046 0 2 .8954 2 2v42c0 1.1046-.8954 2-2 2h-70c-1.1046 0-2-.8954-2-2z" fill-rule="evenodd" opacity=".2"/>
+            </g>
+        </g>
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 52a838ce3..19e252db7 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -72,6 +72,17 @@
     }
 }
 
+.btn-blank-format {
+    display: block;
+    width: 96px;
+    height: 96px;
+    cursor: pointer;
+
+    svg&:hover {
+        opacity:0.85;
+    }
+}
+
 #file-menu-panel {
     > div {
         height: 100%;
@@ -285,7 +296,7 @@
 
                 h3 {
                     padding-left: 0;
-                    padding-top: 40px;
+                    padding-top: 45px;
                     white-space: nowrap;
                 }
             }
@@ -293,8 +304,8 @@
             .blank-document-btn {
                 display: inline-block;
                 margin: 25px 20px 65px;
-                width: 102px;
-                height: 128px;
+                width: 96px;
+                height: 96px;
                 cursor: pointer;
             }
 
@@ -313,8 +324,8 @@
                     cursor: pointer;
 
                     .thumb {
-                        width: 102px;
-                        height: 128px;
+                        width: 96px;
+                        height: 96px;
                         background-repeat: no-repeat;
                         background-position: center;
                     }