Web: Doceditor: refactoring
This commit is contained in:
Artem Tarasov
parent
b7ceb047df
commit
36f10d4959
@ -4,7 +4,6 @@ import FilesFilter from "@appserver/common/api/files/filter";
|
||||
import combineUrl from "@appserver/common/utils/combineUrl";
|
||||
import { AppServerConfig } from "@appserver/common/constants";
|
||||
import throttle from "lodash/throttle";
|
||||
import Loader from "@appserver/components/loader";
|
||||
import Toast from "@appserver/components/toast";
|
||||
import { toast } from "react-toastify";
|
||||
import {
|
||||
@ -21,19 +20,6 @@ import { useTranslation } from "react-i18next";
|
||||
import withDialogs from "../helpers/withDialogs";
|
||||
import { canConvert, convertDocumentUrl } from "../helpers/utils";
|
||||
import { assign } from "@appserver/common/utils";
|
||||
import { homepage } from "../../package.json";
|
||||
|
||||
const LoaderComponent = (
|
||||
<Loader
|
||||
type="rombs"
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "42%",
|
||||
height: "170px",
|
||||
left: "50%",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
toast.configure();
|
||||
|
||||
@ -77,7 +63,6 @@ function Editor({
|
||||
doc,
|
||||
actionLink,
|
||||
error,
|
||||
needLoader,
|
||||
sharingDialog,
|
||||
onSDKRequestSharingSettings,
|
||||
loadUsersRightsList,
|
||||
@ -97,7 +82,6 @@ function Editor({
|
||||
mfReady,
|
||||
...rest
|
||||
}) {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const [fileInfo, setFileInfo] = useState(rest.fileInfo);
|
||||
const [url, setUrl] = useState(rest.url);
|
||||
const [fileId, setFileId] = useState(rest.fileId);
|
||||
@ -572,8 +556,6 @@ function Editor({
|
||||
);
|
||||
|
||||
assign(window, ["ASC", "Files", "Editor", "docEditor"], docEditor); //Do not remove: it's for Back button on Mobile App
|
||||
|
||||
setIsLoaded(true);
|
||||
} catch (error) {
|
||||
window.toastr.error(error.message, null, 0, true);
|
||||
}
|
||||
@ -582,7 +564,6 @@ function Editor({
|
||||
return (
|
||||
<EditorWrapper isVisibleSharingDialog={isVisible}>
|
||||
<div id="editor"></div>
|
||||
{(!isLoaded || needLoader) && LoaderComponent}
|
||||
{sharingDialog}
|
||||
{selectFileDialog}
|
||||
{selectFolderDialog}
|
||||
|
||||
5
web/ASC.Web.Editor/src/client/bootstrap.js
vendored
5
web/ASC.Web.Editor/src/client/bootstrap.js
vendored
@ -69,6 +69,11 @@ const AppWrapper = () => {
|
||||
useSSR(initialI18nStoreASC, initialLanguage);
|
||||
|
||||
React.useEffect(() => {
|
||||
const tempElm = document.getElementById("loader");
|
||||
if (tempElm && !propsObj.error && !propsObj.needLoader) {
|
||||
tempElm.outerHTML = "";
|
||||
}
|
||||
|
||||
if (isRetina() && getCookie("is_retina") == null) {
|
||||
setCookie("is_retina", true, { path: "/" });
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@ export default function template(
|
||||
) {
|
||||
const { title } = pkg;
|
||||
const { docApiUrl, error } = initialEditorState;
|
||||
|
||||
const faviconHref = getFavicon(initialEditorState?.config?.documentType);
|
||||
const docApi = error
|
||||
? ""
|
||||
@ -26,8 +25,13 @@ export default function template(
|
||||
window.initialI18nStoreASC = ${JSON.stringify(initialI18nStoreASC)}
|
||||
window.initialLanguage = '${initialLanguage}'
|
||||
</script>
|
||||
|
||||
<script defer="defer" src='${assets["client.js"]}'></script>
|
||||
<script>
|
||||
const tempElm = document.getElementById("loader");
|
||||
tempElm.style.backgroundColor =
|
||||
localStorage.theme === "Dark" ? "#333333" : "#f4f4f4";
|
||||
console.log("It's Editor INIT");
|
||||
</script>
|
||||
${docApi}
|
||||
|
||||
`;
|
||||
@ -51,14 +55,317 @@ export default function template(
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<link rel="apple-touch-icon" href="/appIcon.png" />
|
||||
${styleTags}
|
||||
|
||||
<style type="text/css">
|
||||
.loadmask {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background-color: #f4f4f4;
|
||||
z-index: 1001;
|
||||
}
|
||||
.loader-page {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
bottom: 42%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.loader-page-romb {
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.romb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: red;
|
||||
border-radius: 6px;
|
||||
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-moz-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-ms-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-o-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-webkit-animation: movedown 3s infinite ease;
|
||||
-moz-animation: movedown 3s infinite ease;
|
||||
-ms-animation: movedown 3s infinite ease;
|
||||
-o-animation: movedown 3s infinite ease;
|
||||
animation: movedown 3s infinite ease;
|
||||
}
|
||||
#blue {
|
||||
z-index: 3;
|
||||
background: #55bce6;
|
||||
-webkit-animation-name: blue;
|
||||
-moz-animation-name: blue;
|
||||
-ms-animation-name: blue;
|
||||
-o-animation-name: blue;
|
||||
animation-name: blue;
|
||||
}
|
||||
#red {
|
||||
z-index: 1;
|
||||
background: #de7a59;
|
||||
-webkit-animation-name: red;
|
||||
-moz-animation-name: red;
|
||||
-ms-animation-name: red;
|
||||
-o-animation-name: red;
|
||||
animation-name: red;
|
||||
}
|
||||
#green {
|
||||
z-index: 2;
|
||||
background: #a1cb5c;
|
||||
-webkit-animation-name: green;
|
||||
-moz-animation-name: green;
|
||||
-ms-animation-name: green;
|
||||
-o-animation-name: green;
|
||||
animation-name: green;
|
||||
}
|
||||
@-webkit-keyframes red {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@keyframesred {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
@keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #fff;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loader" class="loadmask">
|
||||
<div class="loader-page">
|
||||
<div class="loader-page-romb">
|
||||
<div class="romb" id="blue"></div>
|
||||
<div class="romb" id="green"></div>
|
||||
<div class="romb" id="red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root">${appComponent}</div>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
|
||||
${scripts}
|
||||
|
||||
${scripts}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user