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

Merge pull request #1071 from ONLYOFFICE/feature/new-dark-loader

Browse Source 
Feature/new dark loader
This commit is contained in:
Alexey Safronov 2022-11-22 16:05:47 +03:00 committed by GitHub
commit 2fff8e973e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/components/loader/types/rombs.js
View File

@ -2,38 +2,37 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components"; import styled, { keyframes } from "styled-components";
export const keyFrameBlue = keyframes` export const keyFrameBlue = (props) => keyframes`
0% { top:120px; background: #de7a59; } 0% { background: #de7a59; top: 120px; }
10% { top:120px; background: #F2CBBF; } 10% { background: ${props.colorStep_1}; top: 120px; }
14% { background: #fff; top: 120px; } 14% { background: ${props.colorStep_2}; top: 120px; }
15% { background: #fff; top: 0; } 15% { background: ${props.colorStep_2}; top: 0; }
20% { background: #E6E4E4; } 20% { background: ${props.colorStep_3}; }
30% { background: #D2D2D2; } 30% { background: ${props.colorStep_4}; }
40% { top: 120px; } 40% { top: 120px; }
100% { top: 120px; background: #de7a59; } 100% { background: #de7a59; top: 120px; }
`; `;
export const keyFrameRed = keyframes` export const keyFrameRed = (props) => keyframes`
0% { top:100px; background: #55bce6; opacity: 1; } 0% { background: #55bce6; top: 100px; opacity: 1; }
10% { top:100px; background: #BFE8F8; opacity: 1; } 10% { background: ${props.colorStep_1}; top: 100px; opacity: 1; }
14% { background: #fff; top: 100px; opacity: 1; } 14% { background: ${props.colorStep_2}; top: 100px; opacity: 1; }
15% { background: #fff; top: 0; opacity: 1; } 15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
20% { background: #ffffff; top: 0; opacity: 0; } 20% { background: ${props.colorStep_2}; top: 0; opacity: 0; }
25% { background: #ffffff; top: 0; opacity: 0; } 45% { background: ${props.colorStep_3}; top: 0; }
45% { background: #EFEFEF; top: 0; opacity: 0,2; } 100% { background: #55bce6; top: 100px; }
100% { top: 100px; background: #55bce6; }
`; `;
export const keyFrameGreen = keyframes` export const keyFrameGreen = (props) => keyframes`
0% { top:110px; background: #a1cb5c; opacity: 1; } 0% { background: #a1cb5c; top: 110px; opacity: 1; }
10% { top:110px; background: #CBE0AC; opacity: 1; } 10% { background: ${props.colorStep_1}; top: 110px; opacity: 1; }
14% { background: #fff; top: 110px; opacity: 1; } 14% { background: ${props.colorStep_2}; top: 110px; opacity: 1; }
15% { background: #fff; top: 0; opacity: 1; } 15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
20% { background: #ffffff; top: 0; opacity: 0; } 20% { background: ${props.colorStep_2}; top: 0; opacity: 0; }
25% { background: #EFEFEF; top: 0; opacity: 1; } 25% { background: ${props.colorStep_3}; top: 0; opacity: 1; }
30% { background: #E6E4E4; } 30% { background: ${props.colorStep_4}; }
70% { top: 110px; } 70% { top: 110px; }
100% { top: 110px; background: #a1cb5c; } 100% { background: #a1cb5c; top: 110px; }
`; `;
const Romb = styled.div` const Romb = styled.div`
@ -63,9 +62,9 @@ const Romb = styled.div`
(props.color === "green" && "2")}; (props.color === "green" && "2")};
animation: ${(props) => animation: ${(props) =>
(props.color === "blue" && keyFrameBlue) || (props.color === "blue" && keyFrameBlue(props.theme.rombsLoader.blue)) ||
(props.color === "red" && keyFrameRed) || (props.color === "red" && keyFrameRed(props.theme.rombsLoader.red)) ||
(props.color === "green" && keyFrameGreen)} (props.color === "green" && keyFrameGreen(props.theme.rombsLoader.green))}
2s ease-in-out 0s infinite; 2s ease-in-out 0s infinite;
`; `;

20
packages/components/themes/base.js
View File

@ -1498,6 +1498,26 @@ const Base = {
borderRadius: "50%", borderRadius: "50%",
}, },
rombsLoader: {
blue: {
colorStep_1: "#F2CBBF",
colorStep_2: "#fff",
colorStep_3: "#E6E4E4",
colorStep_4: "#D2D2D2",
},
red: {
colorStep_1: "#BFE8F8",
colorStep_2: "#fff",
colorStep_3: "#EFEFEF",
},
green: {
colorStep_1: "#CBE0AC",
colorStep_2: "#fff",
colorStep_3: "#EFEFEF",
colorStep_4: "#E6E4E4",
},
},
dialogLoader: { dialogLoader: {
borderBottom: "1px solid rgb(222, 226, 230)", borderBottom: "1px solid rgb(222, 226, 230)",
}, },

21
packages/components/themes/dark.js
View File

@ -1488,7 +1488,26 @@ const Dark = {
marginRight: "2px", marginRight: "2px",
borderRadius: "50%", borderRadius: "50%",
}, },
rombsLoader: {
blue: {
colorStep_1: "#333",
colorStep_2: "#333",
colorStep_3: "#323032",
colorStep_4: "#323032",
},
red: {
colorStep_1: "#333",
colorStep_2: "#333",
colorStep_3: "#323032",
colorStep_4: "#323032",
},
green: {
colorStep_1: "#333",
colorStep_2: "#333",
colorStep_3: "#323032",
colorStep_4: "#323032",
},
},
dialogLoader: { dialogLoader: {
borderBottom: "1px solid #292929", borderBottom: "1px solid #292929",
}, },