From ca1f100a02d2e1aaa2c13d8b4cdccd5c4bc3dc39 Mon Sep 17 00:00:00 2001
From: Ivan Habarov <Ivan.Habarov@onlyoffice.com>
Date: Thu, 7 Nov 2019 10:48:58 +0300
Subject: [PATCH 1/4] web: Components: Init new version of EmptyScreenContainer

---
 .../empty-screen-container/index.js           | 128 ++++++++++++------
 1 file changed, 84 insertions(+), 44 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/empty-screen-container/index.js b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
index 450c786627..44ed792c22 100644
--- a/web/ASC.Web.Components/src/components/empty-screen-container/index.js
+++ b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
@@ -2,15 +2,51 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Text } from '../text';
+import { mobile } from '../../utils/device'
 
 const EmptyContentContainer = styled.div`
-  padding-top: 50px;
-  margin: 0 auto;
-  width: 687px;
-  text-align: center;
-  color: #373737;
-  padding: 100px 0;
-  min-width: 200px;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const EmptyContentBody = styled.div`
+	display: grid;
+	grid-template-areas: 
+    "img header"
+    "img main"
+    "img button";
+	grid-template-rows: auto auto auto;
+  grid-template-columns: 150px 1fr;
+  min-width: 320px;
+  max-width: 742px;
+
+  .ec-body {
+    grid-area: header;
+  }
+
+  @media ${mobile} {
+    grid-template-areas: 
+    "header"
+    "main"
+    "button";
+    grid-template-columns: 1fr;
+    padding: 20px;
+
+    .ec-body {
+      font-size: 18px;
+    }
+  } 
+
+  @media (max-height: 400px) and (orientation: landscape){
+    padding: 20px;
+
+    .ec-body {
+      font-size: 18px;
+    }
+  }
 `;
 
 const EmptyContentImage = styled.img.attrs(props => ({
@@ -18,55 +54,59 @@ const EmptyContentImage = styled.img.attrs(props => ({
   alt: props.imageAlt
 }))`
   background: no-repeat 0 0 transparent;
-  display: block;
-  height: 150px;
-  width: 150px;
-`;
+  grid-area: img; 
+  margin: auto 0;
 
-const EmptyContentBodyContainer = styled.div`
-  text-align: left;
-  padding: 10px;
+  @media ${mobile} {      
+    display: none;
+  }
+
+  @media (max-height: 400px) and (orientation: landscape){
+    height: 40vh;
+  }
 `;
 
 const EmptyContentDescriptionContainer = styled.div`
-  margin: 14px auto 0;
-  max-width: 600px;
+  grid-area: main; 
+  padding-top: 5px;
+
+  @media (max-height: 400px) and (orientation: landscape){
+    span {
+      font-size: 2.25vw; 
+    }
+  }
 `;
 
 const EmptyContentButtonsContainer = styled.div`
-  margin-top: 18px;
+  grid-area: button; 
+  padding-top: 10px;
 `;
 
 const EmptyScreenContainer = props => {
   const { imageSrc, imageAlt, headerText, descriptionText, buttons } = props;
   return (
-    <EmptyContentContainer {...props}>
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
-            </td>
-            <td>
-              <EmptyContentBodyContainer>
-                {headerText && (
-                  <Text.Body as="div" color="#333333" fontSize={24}>{headerText}</Text.Body>
-                )}
-                {descriptionText && (
-                  <EmptyContentDescriptionContainer>
-                    <Text.Body as="span" color="#737373" fontSize={14}>{descriptionText}</Text.Body>
-                  </EmptyContentDescriptionContainer>
-                )}
-                {buttons && (
-                  <EmptyContentButtonsContainer>
-                    {buttons}
-                  </EmptyContentButtonsContainer>
-                )}
-              </EmptyContentBodyContainer>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <EmptyContentContainer>
+      <EmptyContentBody {...props}>
+
+        <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
+
+        {headerText && (
+          <Text.Body as="span" color="#333333" fontSize={24} className="ec-body">{headerText}</Text.Body>
+        )}
+        
+        {descriptionText && (
+          <EmptyContentDescriptionContainer>
+            <Text.Body as="span" color="#737373" fontSize={14}>{descriptionText}</Text.Body>
+          </EmptyContentDescriptionContainer>
+        )}
+
+        {buttons && (
+          <EmptyContentButtonsContainer>
+            {buttons}
+          </EmptyContentButtonsContainer>
+        )}
+
+      </EmptyContentBody>
     </EmptyContentContainer>
   );
 };

From 6a0634c97b1dc5d7e5753009b9ea38c184b24308 Mon Sep 17 00:00:00 2001
From: Ivan Habarov <Ivan.Habarov@onlyoffice.com>
Date: Thu, 7 Nov 2019 11:21:57 +0300
Subject: [PATCH 2/4] Changed EmptyContentDescriptionContainer to using only
 Text.Body component

---
 .../empty-screen-container/index.js           | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/empty-screen-container/index.js b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
index 44ed792c22..7bb0ee66af 100644
--- a/web/ASC.Web.Components/src/components/empty-screen-container/index.js
+++ b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
@@ -16,37 +16,46 @@ const EmptyContentBody = styled.div`
 	display: grid;
 	grid-template-areas: 
     "img header"
-    "img main"
+    "img desc"
     "img button";
 	grid-template-rows: auto auto auto;
   grid-template-columns: 150px 1fr;
   min-width: 320px;
   max-width: 742px;
 
-  .ec-body {
+  .ec-header {
     grid-area: header;
   }
 
+  .ec-desc {
+    grid-area: desc; 
+    padding-top: 5px;
+  }
+
+  @media (max-height: 400px) and (orientation: landscape){
+    padding: 20px;
+
+    .ec-header {
+      font-size: 18px;
+    }
+
+    .ec-desc {
+      font-size: 2.25vw; 
+    }
+  }
+
   @media ${mobile} {
     grid-template-areas: 
     "header"
-    "main"
+    "desc"
     "button";
     grid-template-columns: 1fr;
     padding: 20px;
 
-    .ec-body {
+    .ec-header {
       font-size: 18px;
     }
   } 
-
-  @media (max-height: 400px) and (orientation: landscape){
-    padding: 20px;
-
-    .ec-body {
-      font-size: 18px;
-    }
-  }
 `;
 
 const EmptyContentImage = styled.img.attrs(props => ({
@@ -66,17 +75,6 @@ const EmptyContentImage = styled.img.attrs(props => ({
   }
 `;
 
-const EmptyContentDescriptionContainer = styled.div`
-  grid-area: main; 
-  padding-top: 5px;
-
-  @media (max-height: 400px) and (orientation: landscape){
-    span {
-      font-size: 2.25vw; 
-    }
-  }
-`;
-
 const EmptyContentButtonsContainer = styled.div`
   grid-area: button; 
   padding-top: 10px;
@@ -91,13 +89,11 @@ const EmptyScreenContainer = props => {
         <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
 
         {headerText && (
-          <Text.Body as="span" color="#333333" fontSize={24} className="ec-body">{headerText}</Text.Body>
+          <Text.Body as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text.Body>
         )}
         
-        {descriptionText && (
-          <EmptyContentDescriptionContainer>
-            <Text.Body as="span" color="#737373" fontSize={14}>{descriptionText}</Text.Body>
-          </EmptyContentDescriptionContainer>
+        {descriptionText && (          
+          <Text.Body as="span" color="#737373" fontSize={14} className="ec-desc">{descriptionText}</Text.Body>
         )}
 
         {buttons && (

From 4af15267366b3b681f597882f786adab5fe3c25e Mon Sep 17 00:00:00 2001
From: Ivan Habarov <Ivan.Habarov@onlyoffice.com>
Date: Thu, 7 Nov 2019 11:48:18 +0300
Subject: [PATCH 3/4] New version of component EmptyScreenContainer, transition
 to use css-grid

---
 .../empty-screen-container/index.js           | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/empty-screen-container/index.js b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
index 7bb0ee66af..661c05747b 100644
--- a/web/ASC.Web.Components/src/components/empty-screen-container/index.js
+++ b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
@@ -23,6 +23,11 @@ const EmptyContentBody = styled.div`
   min-width: 320px;
   max-width: 742px;
 
+  .ec-image {
+    grid-area: img;
+    margin: auto 0;
+  }
+
   .ec-header {
     grid-area: header;
   }
@@ -32,9 +37,18 @@ const EmptyContentBody = styled.div`
     padding-top: 5px;
   }
 
+  .ec-buttons {
+    grid-area: button; 
+    padding-top: 10px;
+  }
+
   @media (max-height: 400px) and (orientation: landscape){
     padding: 20px;
 
+    .ec-image {
+      height: 40vh;
+    }
+
     .ec-header {
       font-size: 18px;
     }
@@ -52,6 +66,10 @@ const EmptyContentBody = styled.div`
     grid-template-columns: 1fr;
     padding: 20px;
 
+    .ec-image {
+      display: none;
+    }
+
     .ec-header {
       font-size: 18px;
     }
@@ -63,22 +81,9 @@ const EmptyContentImage = styled.img.attrs(props => ({
   alt: props.imageAlt
 }))`
   background: no-repeat 0 0 transparent;
-  grid-area: img; 
-  margin: auto 0;
-
-  @media ${mobile} {      
-    display: none;
-  }
-
-  @media (max-height: 400px) and (orientation: landscape){
-    height: 40vh;
-  }
 `;
 
-const EmptyContentButtonsContainer = styled.div`
-  grid-area: button; 
-  padding-top: 10px;
-`;
+const EmptyContentButtonsContainer = styled.div``;
 
 const EmptyScreenContainer = props => {
   const { imageSrc, imageAlt, headerText, descriptionText, buttons } = props;
@@ -86,7 +91,7 @@ const EmptyScreenContainer = props => {
     <EmptyContentContainer>
       <EmptyContentBody {...props}>
 
-        <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
+        <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} className="ec-image"/>
 
         {headerText && (
           <Text.Body as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text.Body>
@@ -97,7 +102,7 @@ const EmptyScreenContainer = props => {
         )}
 
         {buttons && (
-          <EmptyContentButtonsContainer>
+          <EmptyContentButtonsContainer className="ec-buttons">
             {buttons}
           </EmptyContentButtonsContainer>
         )}

From 9113cd75a980615ae1a0ff19e5d9658ed76d07b9 Mon Sep 17 00:00:00 2001
From: Ivan Habarov <Ivan.Habarov@onlyoffice.com>
Date: Thu, 7 Nov 2019 12:26:26 +0300
Subject: [PATCH 4/4] Replaced EmptyContentButtonsContainer to div

---
 .../src/components/empty-screen-container/index.js          | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/empty-screen-container/index.js b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
index 661c05747b..693359a5c5 100644
--- a/web/ASC.Web.Components/src/components/empty-screen-container/index.js
+++ b/web/ASC.Web.Components/src/components/empty-screen-container/index.js
@@ -83,8 +83,6 @@ const EmptyContentImage = styled.img.attrs(props => ({
   background: no-repeat 0 0 transparent;
 `;
 
-const EmptyContentButtonsContainer = styled.div``;
-
 const EmptyScreenContainer = props => {
   const { imageSrc, imageAlt, headerText, descriptionText, buttons } = props;
   return (
@@ -102,9 +100,9 @@ const EmptyScreenContainer = props => {
         )}
 
         {buttons && (
-          <EmptyContentButtonsContainer className="ec-buttons">
+          <div className="ec-buttons">
             {buttons}
-          </EmptyContentButtonsContainer>
+          </div>
         )}
 
       </EmptyContentBody>