IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: Loaders: fixed TilesLoader for Chrome

Browse Source
This commit is contained in:
Artem Tarasov 2021-06-24 19:34:47 +03:00
parent e996f17552
commit b65c717fd5
3 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/asc-web-common/components/Loaders/TileLoader/StyledTileLoader.js
View File

@ -1,10 +1,10 @@
import styled from "styled-components"; import styled, { css } from "styled-components";
import { mobile, tablet } from "@appserver/components/utils/device"; import { mobile, tablet } from "@appserver/components/utils/device";
const StyledTile = styled.div` const StyledTile = styled.div`
position: relative; position: relative;
display: inline-block; display: grid;
min-width: 220px; //min-width: 250px;
width: 100%; width: 100%;
height: ${(props) => (props.isFolder ? "57px" : "240px")}; height: ${(props) => (props.isFolder ? "57px" : "240px")};
border: 1px solid #d0d5da; border: 1px solid #d0d5da;
@ -12,18 +12,18 @@ const StyledTile = styled.div`
${(props) => ${(props) =>
props.isFolder props.isFolder
? ` ? css`
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
top: -5px; top: -5px;
left: -1px; left: -1px;
border-top: 1px solid #D0D5DA; border-top: 1px solid #d0d5da;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-left: 1px solid #D0D5DA; border-left: 1px solid #d0d5da;
width: 38px; width: 38px;
height: 8px; height: 8px;
background-color: #FFF; background-color: #fff;
border-bottom: transparent; border-bottom: transparent;
} }
@ -32,8 +32,8 @@ const StyledTile = styled.div`
position: absolute; position: absolute;
top: -4px; top: -4px;
left: 34px; left: 34px;
border-top: 1px solid #D0D5DA; border-top: 1px solid #d0d5da;
background-color: #FFF; background-color: #fff;
width: 7px; width: 7px;
height: 10px; height: 10px;
transform: rotateZ(35deg); transform: rotateZ(35deg);
@ -41,13 +41,18 @@ const StyledTile = styled.div`
@media ${tablet} { @media ${tablet} {
left: 34px; left: 34px;
} }
}` }
`
: null} : null}
`; `;
const StyledMainContent = styled.div` const StyledMainContent = styled.div`
padding: 12px 12px 4px 12px; padding: 12px 12px 4px 12px;
height: 175px; height: 175px;
clipPath > rect {
width: calc(100% + 20px);
}
`; `;
const StyledBottom = styled.div` const StyledBottom = styled.div`
@ -60,14 +65,19 @@ const StyledBottom = styled.div`
display: inline-block; display: inline-block;
${(props) => ${(props) =>
!props.isFolder !props.isFolder
? ` ? css`
width: 24px; width: 24px;
height: 30px;` height: 30px;
: ` `
: css`
width: 16px; width: 16px;
height: 16px;`} height: 16px;
`}
} }
.second-content { .second-content {
clipPath > rect {
width: calc(100% + 20px);
}
width: 100%; width: 100%;
height: ${(props) => (props.isFolder ? "16px" : "30px")}; height: ${(props) => (props.isFolder ? "16px" : "30px")};
} }

12
packages/asc-web-common/components/Loaders/TileLoader/TileLoader.js
View File

@ -32,7 +32,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity} backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity} foregroundOpacity={foregroundOpacity}
speed={speed} speed={speed}
animate={animate} animate={false}
/> />
<RectangleLoader <RectangleLoader
className="second-content" className="second-content"
@ -43,7 +43,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity} backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity} foregroundOpacity={foregroundOpacity}
speed={speed} speed={speed}
animate={animate} animate={false}
/> />
</StyledBottom> </StyledBottom>
</StyledTile> </StyledTile>
@ -53,7 +53,7 @@ const TileLoader = ({
<RectangleLoader <RectangleLoader
className="main-content" className="main-content"
height="100%" height="100%"
width="100%" //width="100%"
title={title} title={title}
borderRadius={borderRadius} borderRadius={borderRadius}
backgroundColor={backgroundColor} backgroundColor={backgroundColor}
@ -61,7 +61,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity} backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity} foregroundOpacity={foregroundOpacity}
speed={speed} speed={speed}
animate={animate} animate={false}
/> />
</StyledMainContent> </StyledMainContent>
@ -75,7 +75,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity} backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity} foregroundOpacity={foregroundOpacity}
speed={speed} speed={speed}
animate={animate} animate={false}
/> />
<RectangleLoader <RectangleLoader
className="second-content" className="second-content"
@ -87,7 +87,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity} backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity} foregroundOpacity={foregroundOpacity}
speed={speed} speed={speed}
animate={animate} animate={false}
/> />
</StyledBottom> </StyledBottom>
</StyledTile> </StyledTile>

2
packages/asc-web-common/components/Loaders/TilesLoader/TilesLoader.js
View File

@ -47,6 +47,7 @@ const TilesLoader = ({ foldersCount, filesCount, ...rest }) => {
height="15px" height="15px"
width="120px" width="120px"
className="folders" className="folders"
animate={false}
{...rest} {...rest}
/> />
) : null} ) : null}
@ -56,6 +57,7 @@ const TilesLoader = ({ foldersCount, filesCount, ...rest }) => {
height="15px" height="15px"
width="120px" width="120px"
className="files" className="files"
animate={false}
{...rest} {...rest}
/> />
) : null} ) : null}