Merge branch 'feature/workspaces' of https://github.com/ONLYOFFICE/AppServer into feature/workspaces

2021-03-04 15:42:52 +03:00 · 2021-03-04 15:42:52 +03:00 · 3b93ba28de
commit 3b93ba28de
parent b93928948d b64736c363
9 changed files with 84 additions and 177 deletions
--- a/packages/asc-web-common/utils/index.js
+++ b/packages/asc-web-common/utils/index.js
@ -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";
--- a/packages/asc-web-components/top-loading-indicator/index.js
+++ b/packages/asc-web-components/top-loading-indicator/index.js
@ -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;
+  }
+}
--- a/products/ASC.Files/Client/public/index.html
+++ b/products/ASC.Files/Client/public/index.html
@ -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">
--- a/products/ASC.Files/Client/src/custom.scss
+++ b/products/ASC.Files/Client/src/custom.scss
@ -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;
 }
--- a/products/ASC.People/Client/public/index.html
+++ b/products/ASC.People/Client/public/index.html
@ -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">
--- a/products/ASC.People/Client/src/custom.scss
+++ b/products/ASC.People/Client/src/custom.scss
@ -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;
+}
--- a/web/ASC.Web.Client/public/index.html
+++ b/web/ASC.Web.Client/public/index.html
@ -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">
--- a/web/ASC.Web.Client/src/components/PeopleSelector/index.js
+++ b/web/ASC.Web.Client/src/components/PeopleSelector/index.js
@ -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),
--- a/web/ASC.Web.Client/src/custom.scss
+++ b/web/ASC.Web.Client/src/custom.scss
@ -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;
+}