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

Merge branch 'bugfix/rc-2.5.0' into develop

Browse Source
This commit is contained in:
Alexey Safronov 2024-03-04 19:46:02 +04:00
commit 19c782b920
1 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
public/scripts/api.js
View File

@ -143,23 +143,74 @@
container.style.justifyContent = "center";
container.style.alignItems = "center";
const loader = document.createElement("img");
loader.setAttribute("src", `${config.src}/static/images/loader.svg`);
loader.setAttribute("width", `64px`);
loader.setAttribute("height", `64px`);
// const loader = document.createElement("img");
// loader.setAttribute("src", `${config.src}/static/images/loader.svg`);
// loader.setAttribute("width", `64px`);
// loader.setAttribute("height", `64px`);
if (
config.theme === "Dark" ||
(config.theme === "System" &&
window.matchMedia("(prefers-color-scheme: dark)"))
) {
container.style.backgroundColor = "#333333";
loader.style.filter =
"invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)";
}
// if (
// config.theme === "Dark" ||
// (config.theme === "System" &&
// window.matchMedia("(prefers-color-scheme: dark)"))
// ) {
// container.style.backgroundColor = "#333333";
// loader.style.filter =
// "invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)";
// }
const loader = document.createElement("div");
const loaderClass = `${config.frameId}-loader__element`;
loader.setAttribute("class", loaderClass);
container.appendChild(loader);
const style = document.createElement("style");
style.innerHTML = `
@keyframes rotate {
0%{
transform: rotate(-45deg);
}
15%{
transform: rotate(45deg);
}
30%{
transform: rotate(135deg);
}
45%{
transform: rotate(225deg);
}
60%, 100%{
transform: rotate(315deg);
}
}
.${loaderClass} {
width: 74px;
height: 74px;
border: 4px solid rgba(51,51,51, 0.1);
border-top-color: #333333;
border-radius: 50%;
transform: rotate(-45deg);
position: relative;
box-sizing: border-box;
animation: 1s linear infinite rotate;
}
@media (prefers-color-scheme: dark) {
.${loaderClass} {
border-color: rgba(204, 204, 204, 0.1);
border-top-color: #CCCCCC;
}
}
`;
container.appendChild(style);
container.setAttribute("id", config.frameId + "-loader");
return container;