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

Web:Studio:Fix loaders styles.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-04-11 12:26:58 +03:00
parent 952996f534
commit 01e745f47b
4 changed files with 107 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/loaderSectionHeader.js
View File

@ -1,9 +1,16 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
import { isDesktop as isDesktopUtils } from "@appserver/components/utils/device";
import { isTablet } from "react-device-detect";
const tabletStyles = css`
padding-top: 12px;
.loader {
width: 184px;
}
`;
const StyledLoader = styled.div`
padding-top: 8px;
@ -12,18 +19,12 @@ const StyledLoader = styled.div`
}
@media (min-width: 600px) {
padding-top: 12px;
.loader {
width: 184px;
}
${tabletStyles}
}
${isTablet &&
css`
padding-top: 12px;
.loader {
width: 184px;
}
${tabletStyles}
`}
@media (min-width: 1025px) {

135
web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomization.js
View File

@ -1,7 +1,57 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
import { isTablet } from "react-device-detect";
const tabletStyles = css`
.header {
display: block;
width: ${(props) =>
props.lngTZSettings
? "283px"
: props.welcomePage
? "201px"
: props.portalRenaming
? "150px"
: 0};
padding-bottom: 16px;
}
.description {
display: none;
}
.title {
display: block;
width: ${(props) =>
props.lngTZSettings
? "65px"
: props.welcomePage
? "31px"
: props.portalRenaming
? "113px"
: 0};
}
.combo-box {
display: block;
width: 350px;
}
.field-container {
display: block;
width: 350px;
}
.save-cancel-buttons {
display: block;
position: static;
width: 350px;
padding: 0 0 24px 0;
}
`;
const StyledLoader = styled.div`
.header {
display: none;
@ -14,26 +64,23 @@ const StyledLoader = styled.div`
.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;
}
@ -48,87 +95,49 @@ const StyledLoader = styled.div`
}
@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;
}
${tabletStyles}
}
${isTablet &&
`
${tabletStyles}
`}
`;
const loaderCustomization = ({
const LoaderCustomization = ({
lngTZSettings,
portalRenaming,
welcomePage,
}) => {
const heightSaveCancelButtons = window.innerWidth < 600 ? "40px" : "32px";
return (
<StyledLoader
lngTZSettings={lngTZSettings}
portalRenaming={portalRenaming}
welcomePage={welcomePage}
>
<Loaders.Rectangle className="header" />
<Loaders.Rectangle height="22px" className="header" />
{portalRenaming && (
<Loaders.Rectangle height="80px" className="description" />
)}
<Loaders.Rectangle className="title" />
<Loaders.Rectangle className="combo-box" />
<Loaders.Rectangle height="20px" className="title" />
<Loaders.Rectangle height="32px" className="combo-box" />
{lngTZSettings && (
<>
<Loaders.Rectangle className="field-container" />
<Loaders.Rectangle className="title-long" />
<Loaders.Rectangle className="combo-box" />
<Loaders.Rectangle height="20px" className="field-container" />
<Loaders.Rectangle height="20px" className="title-long" />
<Loaders.Rectangle height="32px" className="combo-box" />
</>
)}
<Loaders.Rectangle height="40px" className="save-cancel-buttons" />
<Loaders.Rectangle
height={heightSaveCancelButtons}
className="save-cancel-buttons"
/>
</StyledLoader>
);
};
export default loaderCustomization;
export default LoaderCustomization;

15
web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomizationNavbar.js
View File

@ -5,7 +5,6 @@ import Loaders from "@appserver/common/components/Loaders";
const StyledLoader = styled.div`
.title-long {
width: 283px;
height: 22px;
padding-bottom: 8px;
}
@ -16,32 +15,30 @@ const StyledLoader = styled.div`
.link {
width: 57px;
height: 20px;
padding-bottom: 20px;
}
.title {
display: block;
width: 132px;
height: 22px;
padding-bottom: 8px;
}
`;
const loaderCustomizationNavbar = () => {
const LoaderCustomizationNavbar = () => {
return (
<StyledLoader>
<Loaders.Rectangle className="title-long" />
<Loaders.Rectangle height="22px" className="title-long" />
<Loaders.Rectangle height="100px" className="width" />
<Loaders.Rectangle className="link" />
<Loaders.Rectangle height="20px" className="link" />
<Loaders.Rectangle className="title" />
<Loaders.Rectangle height="22px" className="title" />
<Loaders.Rectangle height="80px" className="width" />
<Loaders.Rectangle className="title" />
<Loaders.Rectangle height="22px" className="title" />
<Loaders.Rectangle height="20px" className="width" />
</StyledLoader>
);
};
export default loaderCustomizationNavbar;
export default LoaderCustomizationNavbar;

27
web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderDescriptionCustomization.js
View File

@ -1,14 +1,25 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import Loaders from "@appserver/common/components/Loaders";
import { isTablet } from "react-device-detect";
const tabletStyles = css`
.description {
width: 684px;
padding-bottom: 20px;
}
`;
const StyledLoader = styled.div`
@media (min-width: 600px) {
.description {
width: 684px;
padding-bottom: 20px;
}
${tabletStyles}
}
${isTablet &&
css`
${tabletStyles}
`}
@media (min-width: 1024px) {
.description {
width: 700px;
@ -16,12 +27,12 @@ const StyledLoader = styled.div`
}
`;
const loaderDescriptionCustomization = () => {
const LoaderDescriptionCustomization = () => {
return (
<StyledLoader>
<Loaders.Rectangle className="description" />
<Loaders.Rectangle height="40px" className="description" />
</StyledLoader>
);
};
export default loaderDescriptionCustomization;
export default LoaderDescriptionCustomization;