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

Web:Files:Added LoadingButtonTheme.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-08-12 14:33:59 +03:00
parent 72207f7496
commit 2823752690
2 changed files with 113 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
products/ASC.Files/Client/src/components/panels/UploadPanel/SubComponents/LoadingButton.js
View File

@ -1,97 +1,23 @@
import React, { useState, useEffect } from "react";
import styled, { css, keyframes } from "styled-components";
import globalColors from "@appserver/components/utils/globalColors";
import { Base } from "@appserver/components/themes";
import {
StyledCircle,
StyledCircleWrap,
StyledLoadingButton,
} from "./StyledLoadingButton";
const backgroundColor = "none";
import { ColorTheme, ThemeType } from "@appserver/common/components/ColorTheme";
const StyledCircleWrap = styled.div`
width: 16px;
height: 16px;
background: ${backgroundColor};
border-radius: 50%;
cursor: pointer;
`;
const rotate360 = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const StyledCircle = styled.div`
.circle__mask,
.circle__fill {
width: 16px;
height: 16px;
position: absolute;
border-radius: 50%;
}
${(props) =>
props.percent === 0 || (props.isAnimation && props.inConversion)
? css`
.circle__fill {
animation: ${rotate360} 2s linear infinite;
transform: translate(0);
}
`
: css`
.circle__mask {
clip: rect(0px, 16px, 16px, 8px);
}
.circle__fill {
animation: fill-rotate ease-in-out none;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
`}
.circle__mask .circle__fill {
clip: rect(0px, 8px, 16px, 0px);
background-color: ${(props) =>
props.theme.filesPanels.upload.loadingButton.color};
}
.circle__mask.circle__full {
animation: fill-rotate ease-in-out none;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
@keyframes fill-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(${(props) => props.percent * 1.8}deg);
}
}
`;
StyledCircleWrap.defaultProps = { theme: Base };
const StyledLoadingButton = styled.div`
width: 12px;
height: 12px;
border-radius: 50%;
text-align: center;
line-height: 12px;
background: ${(props) =>
props.theme.filesPanels.upload.loadingButton.background};
position: absolute;
margin: 2px;
color: ${(props) => props.theme.filesPanels.upload.loadingButton.color};
font-size: 16px;
font-weight: bold;
`;
StyledLoadingButton.defaultProps = { theme: Base };
const LoadingButton = ({ id, className, style, ...rest }) => {
const { percent, onClick, isConversion, inConversion } = rest;
const LoadingButton = (props) => {
const {
id,
className,
style,
percent,
onClick,
isConversion,
inConversion,
...rest
} = props;
const [isAnimation, setIsAnimation] = useState(true);
const stopAnimation = () => {
@ -107,11 +33,13 @@ const LoadingButton = ({ id, className, style, ...rest }) => {
}, [isAnimation]);
return (
<StyledCircleWrap
<ColorTheme
{...props}
id={id}
className={className}
style={style}
onClick={onClick}
type={ThemeType.LoadingButton}
>
<StyledCircle
percent={percent}
@ -129,7 +57,7 @@ const LoadingButton = ({ id, className, style, ...rest }) => {
{!inConversion && <>&times;</>}
</StyledLoadingButton>
</StyledCircle>
</StyledCircleWrap>
</ColorTheme>
);
};

92
products/ASC.Files/Client/src/components/panels/UploadPanel/SubComponents/StyledLoadingButton.js Normal file
View File

@ -0,0 +1,92 @@
import styled, { css, keyframes } from "styled-components";
import globalColors from "@appserver/components/utils/globalColors";
import { Base } from "@appserver/components/themes";
const backgroundColor = "none";
const StyledCircleWrap = styled.div`
width: 16px;
height: 16px;
background: ${backgroundColor};
border-radius: 50%;
cursor: pointer;
`;
const rotate360 = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const StyledCircle = styled.div`
.circle__mask,
.circle__fill {
width: 16px;
height: 16px;
position: absolute;
border-radius: 50%;
}
${(props) =>
props.percent === 0 || (props.isAnimation && props.inConversion)
? css`
.circle__fill {
animation: ${rotate360} 2s linear infinite;
transform: translate(0);
}
`
: css`
.circle__mask {
clip: rect(0px, 16px, 16px, 8px);
}
.circle__fill {
animation: fill-rotate ease-in-out none;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
`}
.circle__mask .circle__fill {
clip: rect(0px, 8px, 16px, 0px);
background-color: ${(props) =>
props.theme.filesPanels.upload.loadingButton.color};
}
.circle__mask.circle__full {
animation: fill-rotate ease-in-out none;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
@keyframes fill-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(${(props) => props.percent * 1.8}deg);
}
}
`;
StyledCircleWrap.defaultProps = { theme: Base };
const StyledLoadingButton = styled.div`
width: 12px;
height: 12px;
border-radius: 50%;
text-align: center;
line-height: 12px;
background: ${(props) =>
props.theme.filesPanels.upload.loadingButton.background};
position: absolute;
margin: 2px;
color: ${(props) => props.theme.filesPanels.upload.loadingButton.color};
font-size: 16px;
font-weight: bold;
`;
StyledLoadingButton.defaultProps = { theme: Base };
export { StyledCircle, StyledCircleWrap, StyledLoadingButton };