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

Web:Common:Loaders: add support dark-theme for tile loader

Browse Source
This commit is contained in:
Timofey 2022-01-21 22:40:29 +08:00
parent 444ae18ccd
commit d83808142a
3 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,40 @@
import styled, { css } from "styled-components";
import { mobile, tablet } from "@appserver/components/utils/device";
import styled, { css } from 'styled-components';
import { mobile, tablet } from '@appserver/components/utils/device';
import Base from '@appserver/components/themes/base';
const StyledTile = styled.div`
position: relative;
display: grid;
//min-width: 250px;
width: 100%;
height: ${(props) => (props.isFolder ? "57px" : "240px")};
border: 1px solid #d0d5da;
height: ${(props) => (props.isFolder ? '57px' : '240px')};
border: ${(props) => props.theme.tileLoader.border};
border-radius: 3px;
${(props) =>
props.isFolder
? css`
&:before {
content: "";
content: '';
position: absolute;
top: -5px;
left: -1px;
border-top: 1px solid #d0d5da;
border-top: ${(props) => props.theme.tileLoader.border};
border-top-left-radius: 3px;
border-left: 1px solid #d0d5da;
border-left: ${(props) => props.theme.tileLoader.border};
width: 38px;
height: 8px;
background-color: #fff;
background: ${(props) => props.theme.tileLoader.background};
border-bottom: transparent;
}
&:after {
content: "";
content: '';
position: absolute;
top: -4px;
left: 34px;
border-top: 1px solid #d0d5da;
background-color: #fff;
border-top: ${(props) => props.theme.tileLoader.border};
background: ${(props) => props.theme.tileLoader.background};
width: 7px;
height: 10px;
transform: rotateZ(35deg);
@ -46,6 +47,8 @@ const StyledTile = styled.div`
: null}
`;
StyledTile.defaultProps = { theme: Base };
const StyledMainContent = styled.div`
padding: 12px 12px 4px 12px;
height: 175px;
@ -59,7 +62,7 @@ const StyledBottom = styled.div`
display: grid;
grid-template-columns: 24px auto;
grid-gap: 8px;
padding: ${(props) => (props.isFolder ? "20px 12px" : "8px 12px 12px 12px")};
padding: ${(props) => (props.isFolder ? '20px 12px' : '8px 12px 12px 12px')};
.first-content {
display: inline-block;
@ -79,7 +82,7 @@ const StyledBottom = styled.div`
width: calc(100% + 20px);
}
width: 100%;
height: ${(props) => (props.isFolder ? "16px" : "30px")};
height: ${(props) => (props.isFolder ? '16px' : '30px')};
}
`;

6
packages/asc-web-components/themes/base.js
View File

@ -2402,6 +2402,12 @@ const Base = {
btnColor: white,
btnBackgroundActive: blueMain,
},
tileLoader: {
border: `1px solid ${grayMid}`,
background: white,
},
};
export default Base;

6
packages/asc-web-components/themes/dark.js
View File

@ -2411,6 +2411,12 @@ const Dark = {
btnColor: white,
btnBackgroundActive: blueMain,
},
tileLoader: {
border: `none`,
background: "none",
},
};
export default Dark;