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

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

@ -1498,6 +1498,26 @@ const Base = {
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: {
borderBottom: "1px solid rgb(222, 226, 230)",
},

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

@ -1488,7 +1488,26 @@ const Dark = {
marginRight: "2px",
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: {
borderBottom: "1px solid #292929",
},