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

86
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";
const StyledTile = styled.div`
position: relative;
display: inline-block;
min-width: 220px;
display: grid;
//min-width: 250px;
width: 100%;
height: ${(props) => (props.isFolder ? "57px" : "240px")};
border: 1px solid #d0d5da;
@ -12,42 +12,47 @@ const StyledTile = styled.div`
${(props) =>
props.isFolder
? `
&: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;
}
&:after {
content: "";
position: absolute;
top: -4px;
left: 34px;
border-top: 1px solid #D0D5DA;
background-color: #FFF;
width: 7px;
height: 10px;
transform: rotateZ(35deg);
@media ${tablet} {
left: 34px;
? 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;
}
}`
&:after {
content: "";
position: absolute;
top: -4px;
left: 34px;
border-top: 1px solid #d0d5da;
background-color: #fff;
width: 7px;
height: 10px;
transform: rotateZ(35deg);
@media ${tablet} {
left: 34px;
}
}
`
: null}
`;
const StyledMainContent = styled.div`
padding: 12px 12px 4px 12px;
height: 175px;
clipPath > rect {
width: calc(100% + 20px);
}
`;
const StyledBottom = styled.div`
@ -60,14 +65,19 @@ const StyledBottom = styled.div`
display: inline-block;
${(props) =>
!props.isFolder
? `
width: 24px;
height: 30px;`
: `
width: 16px;
height: 16px;`}
? css`
width: 24px;
height: 30px;
`
: css`
width: 16px;
height: 16px;
`}
}
.second-content {
clipPath > rect {
width: calc(100% + 20px);
}
width: 100%;
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}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
animate={false}
/>
<RectangleLoader
className="second-content"
@ -43,7 +43,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
animate={false}
/>
</StyledBottom>
</StyledTile>
@ -53,7 +53,7 @@ const TileLoader = ({
<RectangleLoader
className="main-content"
height="100%"
width="100%"
//width="100%"
title={title}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
@ -61,7 +61,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
animate={false}
/>
</StyledMainContent>
@ -75,7 +75,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
animate={false}
/>
<RectangleLoader
className="second-content"
@ -87,7 +87,7 @@ const TileLoader = ({
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
animate={false}
/>
</StyledBottom>
</StyledTile>

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

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