Merge branch 'feature/workspaces' of https://github.com/ONLYOFFICE/AppServer into feature/workspaces
This commit is contained in:
commit
3b93ba28de
@ -2,7 +2,7 @@ import { LANGUAGE } from "../constants";
|
||||
import sjcl from "sjcl";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import history from "../history";
|
||||
|
||||
import TopLoaderService from "@appserver/components/top-loading-indicator";
|
||||
export const toUrlParams = (obj, skipNull) => {
|
||||
let str = "";
|
||||
for (var key in obj) {
|
||||
@ -95,38 +95,12 @@ export function updateTempContent(isAuth = false) {
|
||||
|
||||
export function hideLoader() {
|
||||
if (isMobile) return;
|
||||
|
||||
// if (window.loadingTimeout) {
|
||||
// clearTimeout(window.loadingTimeout);
|
||||
// window.loadingTimeout = null;
|
||||
// }
|
||||
|
||||
// document.body.classList.remove("loading");
|
||||
|
||||
const ele = document.getElementById("ipl-progress-indicator");
|
||||
if (ele) {
|
||||
// fade out
|
||||
ele.classList.add("available");
|
||||
ele.style.display = "";
|
||||
// setTimeout(() => {
|
||||
// // remove from DOM
|
||||
// ele.outerHTML = "";
|
||||
// }, 2000);
|
||||
}
|
||||
TopLoaderService.end();
|
||||
}
|
||||
|
||||
export function showLoader() {
|
||||
if (isMobile) return;
|
||||
|
||||
// window.loadingTimeout = setTimeout(() => {
|
||||
// document.body.classList.add("loading");
|
||||
// }, 1000);
|
||||
|
||||
const ele = document.getElementById("ipl-progress-indicator");
|
||||
if (ele) {
|
||||
ele.classList.remove("available");
|
||||
ele.style.display = "block";
|
||||
}
|
||||
TopLoaderService.start();
|
||||
}
|
||||
|
||||
export { withLayoutSize } from "./withLayoutSize";
|
||||
|
40
packages/asc-web-components/top-loading-indicator/index.js
Normal file
40
packages/asc-web-components/top-loading-indicator/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
const intervalTimeout = 10;
|
||||
|
||||
const MAX = 100;
|
||||
let timerId;
|
||||
let width = 0;
|
||||
let percentage = 0;
|
||||
let increasePercentage = 0.75;
|
||||
let moreIncreasePercentage = 3;
|
||||
|
||||
const elem = document.getElementById("ipl-progress-indicator");
|
||||
|
||||
const startInterval = () => {
|
||||
if (!timerId) {
|
||||
timerId = setInterval(animatingWidth, intervalTimeout);
|
||||
}
|
||||
};
|
||||
|
||||
const animatingWidth = () => {
|
||||
if (width >= MAX) {
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
elem.style.width = 0;
|
||||
width = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
width += percentage !== MAX ? increasePercentage : moreIncreasePercentage;
|
||||
elem.style.width = width + "%";
|
||||
};
|
||||
|
||||
export default class TopLoaderService {
|
||||
static start() {
|
||||
percentage = 0;
|
||||
startInterval();
|
||||
}
|
||||
|
||||
static end() {
|
||||
percentage = MAX;
|
||||
}
|
||||
}
|
@ -94,12 +94,7 @@
|
||||
<body>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
|
||||
<div class="ipl-progress-indicator" id="ipl-progress-indicator">
|
||||
<div class="ipl-progress-indicator-head">
|
||||
<div class="first-indicator"></div>
|
||||
<div class="second-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ipl-progress-indicator" id="ipl-progress-indicator"></div>
|
||||
|
||||
<div id="temp-content" style="display: none">
|
||||
<header class="temp-header-container">
|
||||
|
@ -32,143 +32,15 @@ body.drag-cursor * {
|
||||
auto !important;
|
||||
}
|
||||
|
||||
.ipl-progress-indicator.available {
|
||||
opacity: 0;
|
||||
}
|
||||
.ipl-progress-indicator {
|
||||
background-color: #f5f5f5;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
-webkit-transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 436ms;
|
||||
-moz-transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 436ms;
|
||||
transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 436ms;
|
||||
z-index: 9999;
|
||||
#ipl-progress-indicator {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
top: 56px;
|
||||
}
|
||||
.insp-logo-frame {
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-moz-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-animation: fadein 436ms;
|
||||
-moz-animation: fadein 436ms;
|
||||
animation: fadein 436ms;
|
||||
height: 98%;
|
||||
}
|
||||
.insp-logo-frame-img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
-webkit-align-self: center;
|
||||
-moz-align-self: center;
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ipl-progress-indicator-head {
|
||||
background-color: #c6dafc;
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.ipl-progress-indicator .first-indicator,
|
||||
.ipl-progress-indicator .second-indicator {
|
||||
background-color: red;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
-webkit-transform-origin: left center;
|
||||
-moz-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
.ipl-progress-indicator .first-indicator {
|
||||
-webkit-animation: first-indicator 2s linear infinite;
|
||||
-moz-animation: first-indicator 2s linear infinite;
|
||||
animation: first-indicator 2s linear infinite;
|
||||
}
|
||||
.ipl-progress-indicator .second-indicator {
|
||||
-webkit-animation: second-indicator 2s linear infinite;
|
||||
-moz-animation: second-indicator 2s linear infinite;
|
||||
animation: second-indicator 2s linear infinite;
|
||||
}
|
||||
.ipl-progress-indicator .insp-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
border-radius: 50%;
|
||||
-webkit-align-self: center;
|
||||
-moz-align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes first-indicator {
|
||||
0% {
|
||||
transform: translate(0) scaleX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translate(0) scaleX(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: translate(25%) scaleX(0.75);
|
||||
}
|
||||
75% {
|
||||
transform: translate(100%) scaleX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(100%) scaleX(0);
|
||||
}
|
||||
}
|
||||
@keyframes second-indicator {
|
||||
0% {
|
||||
transform: translate(0) scaleX(0);
|
||||
}
|
||||
60% {
|
||||
transform: translate(0) scaleX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translate(0) scaleX(0.6);
|
||||
}
|
||||
100% {
|
||||
transform: translate(100%) scaleX(0.1);
|
||||
}
|
||||
left: -6px;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
background-color: #eb835f;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
@ -93,7 +93,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
|
||||
<div class="ipl-progress-indicator" id="ipl-progress-indicator"></div>
|
||||
<div id="temp-content">
|
||||
<header class="temp-header-container">
|
||||
<div id="burger-loader-svg" class="burger-loader-svg">
|
||||
|
@ -25,3 +25,16 @@ body {
|
||||
body.loading * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
#ipl-progress-indicator {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
top: 56px;
|
||||
left: -6px;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
background-color: #eb835f;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
@ -95,7 +95,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
|
||||
<div class="ipl-progress-indicator" id="ipl-progress-indicator"></div>
|
||||
<div id="temp-content" style="display: none">
|
||||
<header class="temp-header-container">
|
||||
<div id="burger-loader-svg" class="burger-loader-svg">
|
||||
|
@ -31,7 +31,7 @@ class PeopleSelector extends React.Component {
|
||||
groups: [
|
||||
{
|
||||
key: "all",
|
||||
label: t("CustomAllGroups", { groupsCaption }),
|
||||
label: i18n.t("CustomAllGroups", { groupsCaption }),
|
||||
total: 0,
|
||||
},
|
||||
].concat(this.convertGroups(groups)),
|
||||
@ -43,7 +43,7 @@ class PeopleSelector extends React.Component {
|
||||
groups: [
|
||||
{
|
||||
key: "all",
|
||||
label: t("CustomAllGroups", { groupsCaption }),
|
||||
label: i18n.t("CustomAllGroups", { groupsCaption }),
|
||||
total: 0,
|
||||
},
|
||||
].concat(groupList),
|
||||
|
@ -23,3 +23,16 @@ body {
|
||||
body.loading * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
#ipl-progress-indicator {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
top: 56px;
|
||||
left: -6px;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
background-color: #eb835f;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user