From b43dd4302ae2d112b3272fc22c4d55be55ca9126 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Tue, 14 Sep 2021 12:30:25 +0300
Subject: [PATCH] Web: Files: fix checkbox on tile

---
 .../Body/TilesView/sub-components/Tile.js     | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
index a403a389c4..2a3efaec58 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -104,10 +104,33 @@ const StyledTile = styled.div`
     margin-right: 4px;
   }
 
+  .file-checkbox {
+    display: ${(props) => (props.checked ? "flex" : "none")};
+    flex: 0 0 16px;
+    margin-right: 4px;
+  }
+
+  .file-icon {
+    display: ${(props) => (props.checked ? "none" : "flex")};
+    flex: 0 0 auto;
+    margin-right: 4px;
+    user-select: none;
+    margin-top: 3px;
+
+    height: 32px;
+    width: 32px;
+  }
+
   :hover {
     .checkbox {
       opacity: 1;
     }
+    .file-checkbox {
+      display: flex;
+    }
+    .file-icon {
+      display: none;
+    }
   }
 `;
 
@@ -325,19 +348,17 @@ class Tile extends React.PureComponent {
           </>
         ) : (
           <>
-            <StyledFileTileTop>
-              {renderCheckbox && (
+            <StyledFileTileTop>{icon}</StyledFileTileTop>
+            <StyledFileTileBottom>
+              <div className="file-icon_container">
+                <div className="file-icon">{element}</div>
                 <Checkbox
-                  className="checkbox"
+                  className="file-checkbox"
                   isChecked={checked}
                   isIndeterminate={indeterminate}
                   onChange={this.changeCheckbox}
                 />
-              )}
-              {icon}
-            </StyledFileTileTop>
-            <StyledFileTileBottom>
-              <StyledElement>{element}</StyledElement>
+              </div>
               <StyledContent
                 className="styled-content"
                 isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}