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

Web: Common: fixed floating button styles

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-18 17:09:48 +03:00
parent 87617179d7
commit 891ae80da3
2 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/ASC.Web.Common/src/components/FloatingButton/FloatingButton.js
View File

@ -1,28 +1,27 @@
import React from "react";
import PropTypes from "prop-types";
import { StyledFloatingButton, StyledAlertIcon } from "./StyledFloatingButton";
import {
StyledFloatingButton,
StyledAlertIcon,
StyledCircleWrap,
StyledCircle,
} from "./StyledFloatingButton";
import { Icons } from "asc-web-components";
const FloatingButton = ({ id, className, style, ...rest }) => {
const { icon, alert, percent } = rest;
return (
<StyledFloatingButton
id={id}
className={className}
style={style}
icon={icon}
percent={percent}
>
<div className="circle-wrap">
<div className="circle">
<div className="mask full">
<div className="fill"></div>
<StyledCircleWrap id={id} className={className} style={style} icon={icon}>
<StyledCircle percent={percent}>
<div className="styled-circle__mask styled-circle__full">
<div className="styled_circle__fill"></div>
</div>
<div className="mask half">
<div className="fill"></div>
<div className="styled-circle__mask">
<div className="styled_circle__fill"></div>
</div>
<div className="inside-circle">
<StyledFloatingButton>
{icon == "upload" ? (
<Icons.ButtonUploadIcon />
) : icon == "file" ? (
@ -34,13 +33,13 @@ const FloatingButton = ({ id, className, style, ...rest }) => {
) : (
<Icons.ButtonDuplicateIcon />
)}
<StyledAlertIcon>
{alert ? <Icons.ButtonAlertIcon size="medium" /> : <></>}
</StyledAlertIcon>
</div>
</div>
</div>
</StyledFloatingButton>
</StyledCircle>
</StyledCircleWrap>
);
};

43
web/ASC.Web.Common/src/components/FloatingButton/StyledFloatingButton.js
View File

@ -3,33 +3,42 @@ import styled from "styled-components";
const backgroundColor = "none";
const color = "#2DA7DB";
const StyledFloatingButton = styled.div`
.circle-wrap {
const StyledCircleWrap = styled.div`
width: 54px;
height: 54px;
background: ${backgroundColor};
border-radius: 50%;
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
`;
const StyledCircle = styled.div`
.styled-circle__mask,
.styled_circle__fill {
width: 54px;
height: 54px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
.styled-circle__mask {
clip: rect(0px, 54px, 54px, 27px);
}
.circle-wrap .circle .mask .fill {
.styled_circle__fill {
animation: fill-rotate ease-in-out 3s;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
.styled-circle__mask .styled_circle__fill {
clip: rect(0px, 27px, 54px, 0px);
background-color: ${color};
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
.styled-circle__mask.styled-circle__full {
animation: fill-rotate ease-in-out 3s;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
@keyframes fill {
@keyframes fill-rotate {
0% {
transform: rotate(0deg);
}
@ -37,7 +46,9 @@ const StyledFloatingButton = styled.div`
transform: rotate(${(props) => props.percent * 1.8}deg);
}
}
.circle-wrap .inside-circle {
`;
const StyledFloatingButton = styled.div`
width: 48px;
height: 48px;
border-radius: 50%;
@ -47,7 +58,6 @@ const StyledFloatingButton = styled.div`
text-align: center;
margin: 3px;
position: absolute;
}
`;
const StyledAlertIcon = styled.div`
@ -58,4 +68,9 @@ const StyledAlertIcon = styled.div`
top: -10px;
`;
export { StyledFloatingButton, StyledAlertIcon };
export {
StyledCircleWrap,
StyledCircle,
StyledFloatingButton,
StyledAlertIcon,
};