Merge branch 'feature/virtual-rooms-1.2' of github.com:ONLYOFFICE/AppServer into feature/virtual-rooms-1.2

This commit is contained in:
Timofey Boyko 2022-04-08 13:32:06 +03:00
commit e0338c0005
10 changed files with 221 additions and 18 deletions

View File

@ -10,6 +10,7 @@ import { AppServerConfig } from "@appserver/common/constants";
import withCultureNames from "@appserver/common/hoc/withCultureNames";
import history from "@appserver/common/history";
import { Base } from "@appserver/components/themes";
import LoaderCustomizationNavbar from "./sub-components/loaderCustomizationNavbar";
import { StyledArrowRightIcon } from "../common/settingsCustomization/StyledSettings";
@ -51,6 +52,9 @@ const CustomizationNavbar = ({ t, theme, helpUrlCommonSettings }) => {
e.preventDefault();
history.push(e.target.pathname);
};
//return <LoaderCustomizationNavbar />;
return (
<StyledComponent>
<div className="category-item-wrapper">

View File

@ -9,6 +9,7 @@ import { isSmallTablet } from "@appserver/components/utils/device";
import CustomizationNavbar from "./customization-navbar";
import { Base } from "@appserver/components/themes";
import { setDocumentTitle } from "../../../../../helpers/utils";
import LoaderDescriptionCustomization from "./sub-components/loaderDescriptionCustomization";
const StyledComponent = styled.div`
.combo-button-label {
@ -91,6 +92,7 @@ const Customization = ({ t }) => {
<div className="category-description">{`${t(
"Settings:CustomizationDescription"
)}`}</div>
{/* <LoaderDescriptionCustomization /> */}
<LanguageAndTimeZone
isLoadingCustomization={isLoadingCustomization}
isMobileView={isMobile}

View File

@ -46,7 +46,7 @@ const SubmenuCommon = (props) => {
)
);
};
//TODO: Loader
return !isLoading ? (
<AppLoader />
) : (

View File

@ -22,7 +22,7 @@ import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@appserver/components/utils/device";
import checkScrollSettingsBlock from "../utils";
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
import LoaderLngTZSettings from "../sub-components/loaderLngTZSettings";
import LoaderCustomization from "../sub-components/loaderCustomization";
const mapTimezonesToArray = (timezones) => {
return timezones.map((timezone) => {
return { key: timezone.id, label: timezone.displayName };
@ -399,6 +399,7 @@ class LanguageAndTimeZone extends React.Component {
</div>
);
//return <LoaderCustomization lngTZSettings={true} />;
return !isLoadedData ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (

View File

@ -18,6 +18,7 @@ import { PortalRenamingTooltip } from "../sub-components/common-tooltips";
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import { setDocumentTitle } from "../../../../../../helpers/utils";
import LoaderCustomization from "../sub-components/loaderCustomization";
const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
// TODO: Change false
@ -186,6 +187,7 @@ const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
</div>
);
//return <LoaderCustomization portalRenaming={true} />;
return !isLoadedData ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (

View File

@ -19,7 +19,7 @@ import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@appserver/components/utils/device";
import checkScrollSettingsBlock from "../utils";
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
import LoaderLngTZSettings from "../sub-components/loaderLngTZSettings";
import LoaderCustomization from "../sub-components/loaderCustomization";
let greetingTitleFromSessionStorage = "";
let greetingTitleDefaultFromSessionStorage = "";
@ -250,6 +250,7 @@ class WelcomePageSettings extends React.Component {
</div>
);
// return <LoaderCustomization welcomePage={true} />;
return !isLoadedData ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (

View File

@ -0,0 +1,134 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
const StyledLoader = styled.div`
.header {
display: none;
}
.description {
width: 100%;
padding-bottom: 12px;
}
.title {
width: ${(props) => (props.portalRenaming ? "49px" : "63.7px")};
height: 20px;
padding-bottom: 4px;
}
.title-long {
display: block;
width: 68px;
height: 20px;
padding-bottom: 4px;
}
.combo-box {
display: block;
height: 32px;
width: 100%;
padding-bottom: 24px;
}
.field-container {
height: 20px;
width: 100%;
padding-bottom: 12px;
}
.save-cancel-buttons {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 32px);
padding: 0 0 16px 16px;
}
@media (min-width: 600px) {
.header {
display: block;
width: ${(props) =>
props.lngTZSettings
? "283px"
: props.welcomePage
? "201px"
: props.portalRenaming
? "150px"
: 0};
height: 22px;
padding-bottom: 16px;
}
.description {
display: none;
}
.title {
display: block;
width: ${(props) =>
props.lngTZSettings
? "65px"
: props.welcomePage
? "31px"
: props.portalRenaming
? "113px"
: 0};
height: 20px;
}
.combo-box {
display: block;
width: 350px;
}
.field-container {
display: block;
height: 20px;
width: 350px;
}
.save-cancel-buttons {
display: block;
position: static;
width: 350px;
height: 32px;
padding: 0 0 24px 0;
}
}
`;
const loaderCustomization = ({
lngTZSettings,
portalRenaming,
welcomePage,
}) => {
return (
<StyledLoader
lngTZSettings={lngTZSettings}
portalRenaming={portalRenaming}
welcomePage={welcomePage}
>
<Loaders.Rectangle className="header" />
{portalRenaming && (
<Loaders.Rectangle height="80px" className="description" />
)}
<Loaders.Rectangle className="title" />
<Loaders.Rectangle className="combo-box" />
{lngTZSettings && (
<>
<Loaders.Rectangle className="field-container" />
<Loaders.Rectangle className="title-long" />
<Loaders.Rectangle className="combo-box" />
</>
)}
<Loaders.Rectangle height="40px" className="save-cancel-buttons" />
</StyledLoader>
);
};
export default loaderCustomization;

View File

@ -0,0 +1,47 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
const StyledLoader = styled.div`
.title-long {
width: 283px;
height: 22px;
padding-bottom: 8px;
}
.width {
width: 100%;
padding-bottom: 8px;
}
.link {
width: 57px;
height: 20px;
padding-bottom: 20px;
}
.title {
display: block;
width: 132px;
height: 22px;
padding-bottom: 8px;
}
`;
const loaderCustomizationNavbar = () => {
return (
<StyledLoader>
<Loaders.Rectangle className="title-long" />
<Loaders.Rectangle height="100px" className="width" />
<Loaders.Rectangle className="link" />
<Loaders.Rectangle className="title" />
<Loaders.Rectangle height="80px" className="width" />
<Loaders.Rectangle className="title" />
<Loaders.Rectangle height="20px" className="width" />
</StyledLoader>
);
};
export default loaderCustomizationNavbar;

View File

@ -0,0 +1,27 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
const StyledLoader = styled.div`
@media (min-width: 600px) {
.description {
width: 684px;
padding-bottom: 20px;
}
}
@media (min-width: 1024px) {
.description {
width: 700px;
}
}
`;
const loaderDescriptionCustomization = () => {
return (
<StyledLoader>
<Loaders.Rectangle className="description" />
</StyledLoader>
);
};
export default loaderDescriptionCustomization;

View File

@ -1,15 +0,0 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
const StyledLoader = styled.div``;
const LoaderLngTZSettings = () => {
return (
<StyledLoader>
<Loaders.Rectangle />
</StyledLoader>
);
};
export default LoaderLngTZSettings;