Merge pull request #491 from ONLYOFFICE/feature/redesign-tiles

Feature/redesign tiles
ONLYOFFICE · Jan 27, 2022 · e010268 · e010268
2 parents 7f31d3f + 23fc1a7
commit e010268
Show file tree

Hide file tree

Showing 19 changed files with 477 additions and 582 deletions.
diff --git a/packages/asc-web-common/components/Loaders/TileLoader/StyledTileLoader.js b/packages/asc-web-common/components/Loaders/TileLoader/StyledTileLoader.js
@@ -1,85 +1,79 @@
 import styled, { css } from "styled-components";
-import { mobile, tablet } from "@appserver/components/utils/device";
+import { smallTablet, tablet, size } from "@appserver/components/utils/device";
 
 const StyledTile = styled.div`
   position: relative;
   display: grid;
-  //min-width: 250px;
   width: 100%;
-  height: ${(props) => (props.isFolder ? "57px" : "240px")};
-  border: 1px solid #d0d5da;
-  border-radius: 3px;
+  height: ${(props) => (props.isFolder ? "32px" : "220px")};
 
-  ${(props) =>
-    props.isFolder
-      ? css`
-          &:before {
-            content: "";
-            position: absolute;
-            top: -5px;
-            left: -1px;
-            border-top: 1px solid #d0d5da;
-            border-top-left-radius: 3px;
-            border-left: 1px solid #d0d5da;
-            width: 38px;
-            height: 8px;
-            background-color: #fff;
-            border-bottom: transparent;
-          }
+  @media ${smallTablet} {
+    &:nth-of-type(n + 3) {
+      display: none;
+    }
 
-          &:after {
-            content: "";
-            position: absolute;
-            top: -4px;
-            left: 34px;
-            border-top: 1px solid #d0d5da;
-            background-color: #fff;
-            width: 7px;
-            height: 10px;
-            transform: rotateZ(35deg);
+    ${(props) =>
+      props.isFolder &&
+      css`
+        &:nth-of-type(n + 2) {
+          display: none;
+        }
+      `}
+  }
 
-            @media ${tablet} {
-              left: 34px;
-            }
-          }
-        `
-      : null}
+  @media (min-width: ${size.smallTablet}px) and ${tablet} {
+    &:nth-of-type(n + 7) {
+      display: none;
+    }
+  }
 `;
 
 const StyledMainContent = styled.div`
-  padding: 12px 12px 4px 12px;
-  height: 175px;
-
-  clipPath > rect {
-    width: calc(100% + 20px);
-  }
+  height: 172px;
 `;
 
 const StyledBottom = styled.div`
-  display: grid;
-  grid-template-columns: 24px auto;
-  grid-gap: 8px;
-  padding: ${(props) => (props.isFolder ? "20px 12px" : "8px 12px 12px 12px")};
+  display: flex;
+  align-items: ${(props) => (props.isFolder ? "center" : "stretch")};
+  margin-top: ${(props) => (props.isFolder ? 0 : "10px")};
+  height: 38px;
 
   .first-content {
-    display: inline-block;
-    ${(props) =>
-      !props.isFolder
-        ? css`
-            width: 24px;
-            height: 30px;
-          `
-        : css`
-            width: 16px;
-            height: 16px;
-          `}
+    height: 32px;
+    width: 32px;
+    min-width: 32px;
   }
+
   .second-content {
-    clipPath > rect {
-      width: calc(100% + 20px);
-    }
     width: 100%;
-    height: ${(props) => (props.isFolder ? "16px" : "30px")};
+    height: ${(props) => (props.isFolder ? "32px" : "16px")};
+    margin-left: 8px;
+  }
+
+  .files-second-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-left: 8px;
+
+    .second-content {
+      &:last-of-type {
+        height: 12px;
+        margin-right: auto;
+        margin-left: 0;
+        width: 50%;
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .option-button {
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    margin-left: 8px;
+    border-radius: 6px;
   }
 `;
 

diff --git a/packages/asc-web-common/components/Loaders/TileLoader/TileLoader.js b/packages/asc-web-common/components/Loaders/TileLoader/TileLoader.js
@@ -32,7 +32,7 @@ const TileLoader = ({
           backgroundOpacity={backgroundOpacity}
           foregroundOpacity={foregroundOpacity}
           speed={speed}
-          animate={false}
+          animate={true}
         />
         <RectangleLoader
           className="second-content"
@@ -43,7 +43,18 @@ const TileLoader = ({
           backgroundOpacity={backgroundOpacity}
           foregroundOpacity={foregroundOpacity}
           speed={speed}
-          animate={false}
+          animate={true}
+        />
+        <RectangleLoader
+          className="option-button"
+          title={title}
+          borderRadius={borderRadius}
+          backgroundColor={backgroundColor}
+          foregroundColor={foregroundColor}
+          backgroundOpacity={backgroundOpacity}
+          foregroundOpacity={foregroundOpacity}
+          speed={speed}
+          animate={true}
         />
       </StyledBottom>
     </StyledTile>
@@ -53,15 +64,14 @@ const TileLoader = ({
         <RectangleLoader
           className="main-content"
           height="100%"
-          //width="100%"
           title={title}
           borderRadius={borderRadius}
           backgroundColor={backgroundColor}
           foregroundColor={foregroundColor}
           backgroundOpacity={backgroundOpacity}
           foregroundOpacity={foregroundOpacity}
           speed={speed}
-          animate={false}
+          animate={true}
         />
       </StyledMainContent>
 
@@ -75,20 +85,34 @@ const TileLoader = ({
           backgroundOpacity={backgroundOpacity}
           foregroundOpacity={foregroundOpacity}
           speed={speed}
-          animate={false}
-        />
-        <RectangleLoader
-          className="second-content"
-          title={title}
-          width="100%"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={false}
+          animate={true}
         />
+        <div className="files-second-content">
+          <RectangleLoader
+            className="second-content"
+            title={title}
+            width="100%"
+            borderRadius={borderRadius}
+            backgroundColor={backgroundColor}
+            foregroundColor={foregroundColor}
+            backgroundOpacity={backgroundOpacity}
+            foregroundOpacity={foregroundOpacity}
+            speed={speed}
+            animate={true}
+          />
+          <RectangleLoader
+            className="second-content"
+            title={title}
+            width="100%"
+            borderRadius={borderRadius}
+            backgroundColor={backgroundColor}
+            foregroundColor={foregroundColor}
+            backgroundOpacity={backgroundOpacity}
+            foregroundOpacity={foregroundOpacity}
+            speed={speed}
+            animate={true}
+          />
+        </div>
       </StyledBottom>
     </StyledTile>
   );

diff --git a/packages/asc-web-common/components/Loaders/TilesLoader/TilesLoader.js b/packages/asc-web-common/components/Loaders/TilesLoader/TilesLoader.js
@@ -4,10 +4,11 @@ import PropTypes from "prop-types";
 
 import TileLoader from "../TileLoader";
 import RectangleLoader from "../RectangleLoader";
+import { tablet } from "@appserver/components/utils/device";
 
 const StyledTilesLoader = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
   width: 100%;
   grid-gap: 16px;
 `;
@@ -18,18 +19,22 @@ const StyledWrapper = styled.div`
   grid-gap: 16px;
 
   .folders {
-    margin-bottom: -4px;
+    margin-top: -1px;
+    margin-bottom: 12px;
   }
+
   .files {
-    margin-top: 12px;
+    margin-top: 25px;
   }
-  margin-right: 9px;
-  @media (max-width: 1024px) {
-    margin-right: 2px;
+
+  margin-right: 3px;
+
+  @media ${tablet} {
+    margin-right: -1px;
   }
 `;
 
-const TilesLoader = ({ foldersCount, filesCount, ...rest }) => {
+const TilesLoader = ({ foldersCount, filesCount, sectionWidth, ...rest }) => {
   const folders = [];
   const files = [];
 
@@ -40,24 +45,26 @@ const TilesLoader = ({ foldersCount, filesCount, ...rest }) => {
   for (let i = 0; i < filesCount; i++) {
     files.push(<TileLoader key={`files-loader-${i}`} {...rest} />);
   }
+
   return (
     <StyledWrapper>
       {foldersCount > 0 ? (
         <RectangleLoader
-          height="15px"
-          width="120px"
+          height="22px"
+          width="57px"
           className="folders"
-          animate={false}
+          animate
           {...rest}
         />
       ) : null}
       <StyledTilesLoader>{folders}</StyledTilesLoader>
+
       {filesCount > 0 ? (
         <RectangleLoader
-          height="15px"
-          width="120px"
+          height="22px"
+          width="35px"
           className="files"
-          animate={false}
+          animate
           {...rest}
         />
       ) : null}
@@ -72,8 +79,8 @@ TilesLoader.propTypes = {
 };
 
 TilesLoader.defaultProps = {
-  foldersCount: 3,
-  filesCount: 3,
+  foldersCount: 2,
+  filesCount: 8,
 };
 
 export default TilesLoader;
diff --git a/packages/asc-web-components/badge/index.js b/packages/asc-web-components/badge/index.js
@@ -23,10 +23,12 @@ const Badge = (props) => {
     padding,
     maxWidth,
     lineHeight,
+    isHovered,
+    label,
   } = props;
 
   return (
-    <StyledBadge {...props} onClick={onClick}>
+    <StyledBadge isHovered={isHovered} onClick={onClick} {...props}>
       <StyledInner
         backgroundColor={backgroundColor}
         borderRadius={borderRadius}
@@ -40,7 +42,7 @@ const Badge = (props) => {
           color={color}
           fontSize={fontSize}
         >
-          {props.label}
+          {label}
         </Text>
       </StyledInner>
     </StyledBadge>
@@ -74,6 +76,10 @@ Badge.propTypes = {
   id: PropTypes.string,
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Set hovered state and effects of link */
+  isHovered: PropTypes.bool,
+  /** Disabled hover styles */
+  noHover: PropTypes.bool,
 };
 
 Badge.defaultProps = {
@@ -86,6 +92,8 @@ Badge.defaultProps = {
   padding: "0 5px",
   maxWidth: "50px",
   lineHeight: "1.78",
+  isHovered: false,
+  noHover: false,
 };
 
 export default Badge;
diff --git a/packages/asc-web-components/badge/styled-badge.js b/packages/asc-web-components/badge/styled-badge.js
@@ -1,6 +1,10 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Base from "../themes/base";
 
+const hoveredCss = css`
+  border-color: ${(props) => props.backgroundColor};
+`;
+
 const StyledBadge = styled.div`
   display: ${(props) =>
     props.label.length > 0 || props.label != "0" ? "inline-block" : "none"};
@@ -12,9 +16,11 @@ const StyledBadge = styled.div`
   cursor: pointer;
   overflow: ${(props) => props.theme.badge.overflow};
 
-  :hover {
-    border-color: ${(props) => props.backgroundColor};
+  &:hover {
+    ${(props) => !props.noHover && hoveredCss};
   }
+
+  ${(props) => !props.noHover && props.isHovered && hoveredCss}
 `;
 StyledBadge.defaultProps = { theme: Base };