Web:Client:Added skeleton and translations.
This commit is contained in:
parent
1f16dd3145
commit
425b808f55
@ -8,6 +8,7 @@ import Checkbox from "@docspace/components/checkbox";
|
|||||||
import toastr from "@docspace/components/toast/toastr";
|
import toastr from "@docspace/components/toast/toastr";
|
||||||
import ModalDialog from "@docspace/components/modal-dialog";
|
import ModalDialog from "@docspace/components/modal-dialog";
|
||||||
import Link from "@docspace/components/link";
|
import Link from "@docspace/components/link";
|
||||||
|
import LoaderAdditionalResources from "../sub-components/loaderAdditionalResources";
|
||||||
|
|
||||||
const StyledComponent = styled.div`
|
const StyledComponent = styled.div`
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
@ -15,9 +16,36 @@ const StyledComponent = styled.div`
|
|||||||
.branding-checkbox {
|
.branding-checkbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 18px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.additional-header {
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-description {
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px dashed #333333;
|
||||||
|
border-color: ${(props) => !props.isPortalPaid && "#A3A9AE"};
|
||||||
|
}
|
||||||
|
|
||||||
|
.description,
|
||||||
|
.link {
|
||||||
|
color: ${(props) => !props.isPortalPaid && "#A3A9AE"};
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-cancel-buttons {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledModalDialog = styled(ModalDialog)`
|
const StyledModalDialog = styled(ModalDialog)`
|
||||||
@ -38,23 +66,30 @@ const StyledModalDialog = styled(ModalDialog)`
|
|||||||
const AdditionalResources = (props) => {
|
const AdditionalResources = (props) => {
|
||||||
const {
|
const {
|
||||||
t,
|
t,
|
||||||
|
tReady,
|
||||||
isPortalPaid,
|
isPortalPaid,
|
||||||
getAdditionalResources,
|
getAdditionalResources,
|
||||||
setAdditionalResources,
|
setAdditionalResources,
|
||||||
restoreAdditionalResources,
|
restoreAdditionalResources,
|
||||||
additionalResourcesData,
|
additionalResourcesData,
|
||||||
|
setIsLoadedAdditionalResources,
|
||||||
|
isLoadedAdditionalResources,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [showFeedback, setShowFeedback] = useState(
|
const [showFeedback, setShowFeedback] = useState(
|
||||||
additionalResourcesData.feedbackAndSupportEnabled
|
additionalResourcesData.feedbackAndSupportEnabled
|
||||||
);
|
);
|
||||||
|
|
||||||
const [showVideoGuides, setShowVideoGuides] = useState(
|
const [showVideoGuides, setShowVideoGuides] = useState(
|
||||||
additionalResourcesData.videoGuidesEnabled
|
additionalResourcesData.videoGuidesEnabled
|
||||||
);
|
);
|
||||||
|
|
||||||
const [showHelpCenter, setShowHelpCenter] = useState(
|
const [showHelpCenter, setShowHelpCenter] = useState(
|
||||||
additionalResourcesData.helpCenterEnabled
|
additionalResourcesData.helpCenterEnabled
|
||||||
);
|
);
|
||||||
|
|
||||||
const [hasChange, setHasChange] = useState(false);
|
const [hasChange, setHasChange] = useState(false);
|
||||||
|
|
||||||
const [isFirstAdditionalResources, setIsFirstAdditionalResources] = useState(
|
const [isFirstAdditionalResources, setIsFirstAdditionalResources] = useState(
|
||||||
localStorage.getItem("isFirstAdditionalResources")
|
localStorage.getItem("isFirstAdditionalResources")
|
||||||
);
|
);
|
||||||
@ -73,6 +108,12 @@ const AdditionalResources = (props) => {
|
|||||||
}
|
}
|
||||||
}, [showFeedback, showVideoGuides, showHelpCenter, additionalResourcesData]);
|
}, [showFeedback, showVideoGuides, showHelpCenter, additionalResourcesData]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!(additionalResourcesData && tReady)) return;
|
||||||
|
|
||||||
|
setIsLoadedAdditionalResources(true);
|
||||||
|
}, [additionalResourcesData, tReady]);
|
||||||
|
|
||||||
const onSave = () => {
|
const onSave = () => {
|
||||||
//TODO: Add data
|
//TODO: Add data
|
||||||
setAdditionalResources()
|
setAdditionalResources()
|
||||||
@ -82,7 +123,7 @@ const AdditionalResources = (props) => {
|
|||||||
|
|
||||||
if (!localStorage.getItem("isFirstAdditionalResources")) {
|
if (!localStorage.getItem("isFirstAdditionalResources")) {
|
||||||
localStorage.setItem("isFirstAdditionalResources", true);
|
localStorage.setItem("isFirstAdditionalResources", true);
|
||||||
setIsFirstCompanyInfoSettings("true");
|
setIsFirstAdditionalResources("true");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@ -110,6 +151,8 @@ const AdditionalResources = (props) => {
|
|||||||
setShowModal(false);
|
setShowModal(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!isLoadedAdditionalResources) return <LoaderAdditionalResources />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showModal && (
|
{showModal && (
|
||||||
@ -121,13 +164,20 @@ const AdditionalResources = (props) => {
|
|||||||
</StyledModalDialog>
|
</StyledModalDialog>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<StyledComponent>
|
<StyledComponent isPortalPaid={isPortalPaid}>
|
||||||
<div className="header">Additional resources</div>
|
<div className="header">
|
||||||
<div className="description">
|
<div className="additional-header">
|
||||||
Choose whether you want to display links to additional resources in
|
{t("Settings:AdditionalResources")}
|
||||||
<Link className="link" onClick={onShowExample} noHover={true}>
|
</div>
|
||||||
DocSpace menu.
|
</div>
|
||||||
</Link>
|
<div className="description additional-description">
|
||||||
|
<div className="additional-description">
|
||||||
|
{t("Settings:AdditionalResourcesDescription")}
|
||||||
|
<Link className="link" onClick={onShowExample} noHover={true}>
|
||||||
|
{t("Settings:DocSpaceMenu")}
|
||||||
|
</Link>
|
||||||
|
.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="branding-checkbox">
|
<div className="branding-checkbox">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
@ -157,7 +207,7 @@ const AdditionalResources = (props) => {
|
|||||||
cancelButtonLabel={t("Settings:RestoreDefaultButton")}
|
cancelButtonLabel={t("Settings:RestoreDefaultButton")}
|
||||||
displaySettings={true}
|
displaySettings={true}
|
||||||
showReminder={isPortalPaid && hasChange}
|
showReminder={isPortalPaid && hasChange}
|
||||||
// isFirstRestoreToDefault={isFirstCompanyInfoSettings}
|
isFirstRestoreToDefault={isFirstAdditionalResources}
|
||||||
/>
|
/>
|
||||||
</StyledComponent>
|
</StyledComponent>
|
||||||
</>
|
</>
|
||||||
@ -166,6 +216,12 @@ const AdditionalResources = (props) => {
|
|||||||
|
|
||||||
export default inject(({ auth, setup, common }) => {
|
export default inject(({ auth, setup, common }) => {
|
||||||
const { settingsStore } = auth;
|
const { settingsStore } = auth;
|
||||||
|
|
||||||
|
const {
|
||||||
|
setIsLoadedAdditionalResources,
|
||||||
|
isLoadedAdditionalResources,
|
||||||
|
} = common;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getAdditionalResources,
|
getAdditionalResources,
|
||||||
setAdditionalResources,
|
setAdditionalResources,
|
||||||
@ -178,6 +234,8 @@ export default inject(({ auth, setup, common }) => {
|
|||||||
setAdditionalResources,
|
setAdditionalResources,
|
||||||
restoreAdditionalResources,
|
restoreAdditionalResources,
|
||||||
additionalResourcesData,
|
additionalResourcesData,
|
||||||
|
setIsLoadedAdditionalResources,
|
||||||
|
isLoadedAdditionalResources,
|
||||||
};
|
};
|
||||||
})(
|
})(
|
||||||
withLoading(
|
withLoading(
|
||||||
|
@ -0,0 +1,81 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Loaders from "@docspace/common/components/Loaders";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
const StyledLoader = styled.div`
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-header {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.save {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LoaderAdditionalResources = () => {
|
||||||
|
return (
|
||||||
|
<StyledLoader>
|
||||||
|
<div className="item">
|
||||||
|
<Loaders.Rectangle
|
||||||
|
width="166px"
|
||||||
|
height="22px"
|
||||||
|
className="loader-header"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="item">
|
||||||
|
<Loaders.Rectangle
|
||||||
|
width="700px"
|
||||||
|
height="20px"
|
||||||
|
className="loader-description"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="item">
|
||||||
|
<div className="flex">
|
||||||
|
<Loaders.Rectangle width="16px" height="16px" className="checkbox" />
|
||||||
|
<Loaders.Rectangle width="166px" height="20px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="item">
|
||||||
|
<div className="flex">
|
||||||
|
<Loaders.Rectangle width="16px" height="16px" className="checkbox" />
|
||||||
|
<Loaders.Rectangle width="150px" height="20px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="item">
|
||||||
|
<div className="flex">
|
||||||
|
<Loaders.Rectangle width="16px" height="16px" className="checkbox" />
|
||||||
|
<Loaders.Rectangle width="157px" height="20px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="button">
|
||||||
|
<Loaders.Rectangle width="86px" height="32px" className="save" />
|
||||||
|
<Loaders.Rectangle width="170px" height="32px" />
|
||||||
|
</div>
|
||||||
|
</StyledLoader>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoaderAdditionalResources;
|
Loading…
Reference in New Issue
Block a user