Web: Files: TilesView: style fix

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -27,6 +27,18 @@ const FolderStyles = css`
   box-sizing: border-box;
 `;
 
+const draggingStyle = css`
+  background-color: #f8f7bf;
+`;
+
+const draggingHoverStyle = css`
+  background-color: #efefb2;
+`;
+
+const checkedStyle = css`
+  background: #f3f4f4 !important;
+`;
+
 const StyledTile = styled.div`
   cursor: ${(props) => (!props.isRecycleBin ? "pointer" : "default")};
   min-height: 57px;
@@ -38,6 +50,7 @@ const StyledTile = styled.div`
 
   ${(props) => props.isFolder && FlexBoxStyles}
   ${(props) => props.isFolder && FolderStyles}
+  ${(props) => props.checked && checkedStyle}
     ${(props) =>
     props.isFolder &&
     css`
@@ -70,28 +83,21 @@ const StyledTile = styled.div`
         }
       }
     `}
-    ${(props) =>
-    props.isFolder &&
-    props.dragging &&
-    css`
-      &:before {
-        background-color: #f8f7bf;
-      }
-      &:after {
-        background-color: #f8f7bf;
-      }
-    `}
-    ${(props) =>
-    props.isFolder &&
-    props.dragging &&
-    css`
-      &:hover:before {
-        background-color: #efefb2;
-      }
-      &:hover:after {
-        background-color: #efefb2;
-      }
-    `};
+
+  &:before, 
+  &:after {
+    ${(props) => props.isFolder && props.dragging && draggingStyle};
+  }
+
+  &:before,
+  &:after {
+    ${(props) => props.checked && checkedStyle};
+  }
+
+  &:hover:before,
+  &:hover:after {
+    ${(props) => props.isFolder && props.dragging && draggingHoverStyle};
+  }
 
   .checkbox {
     opacity: ${(props) => (props.checked ? 1 : 0)};
@@ -136,15 +142,19 @@ const StyledTile = styled.div`
   }
 
   :hover {
-    .checkbox {
-      opacity: 1;
-    }
-    .file-checkbox {
-      display: flex;
-    }
-    .file-icon {
-      display: none;
-    }
+    ${(props) =>
+      !props.dragging &&
+      css`
+        .checkbox {
+          opacity: 1;
+        }
+        .file-checkbox {
+          display: flex;
+        }
+        .file-icon {
+          display: none;
+        }
+      `}
   }
 `;
 
@@ -315,8 +325,6 @@ class Tile extends React.PureComponent {
 
     const icon = this.getIconFile();
 
-    console.log(this.props);
-
     return (
       <StyledTile
         ref={this.tile}

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js

@@ -17,6 +17,18 @@ const StyledGridWrapper = styled.div`
   padding-right: 2px;
   box-sizing: border-box;
   padding-left: 1px;
+
+  @media (min-width: 1314px) {
+    margin-left: -6px !important;
+  }
+
+  @media (min-width: 1024px) {
+    margin-left: -2px;
+  }
+
+  @media (max-width: 1024px) {
+    margin-left: -2px;
+  }
 `;
 
 const StyledTileContainer = styled.div`
@@ -28,10 +40,6 @@ const StyledTileContainer = styled.div`
 
     &.file {
       padding: 0;
-
-      .drag-and-drop {
-        margin: -1px;
-      }
     }
     &.folder {
       padding: 0;
@@ -51,6 +59,14 @@ const StyledTileContainer = styled.div`
       padding-top: 8px;
     }
   }
+
+  @media (min-width: 1024px) {
+    .tile-item-wrapper {
+      &.file {
+        margin-left: 2px;
+      }
+    }
+  }
 `;
 
 class TileContainer extends React.PureComponent {

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js

@@ -62,6 +62,9 @@ const MainContainer = styled.div`
 const MainIcons = styled.div`
   align-self: center;
   white-space: nowrap;
+  .badges {
+    margin-right: 4px;
+  }
 
   .additional-badges {
     position: absolute;
@@ -72,7 +75,7 @@ const MainIcons = styled.div`
 
     .icons-group {
       margin-top: 10px;
-      margin-right: 8px;
+      margin-right: 3px;
     }
   }
 `;