Merge branch 'develop' into feature/company-info-settings
This commit is contained in:
commit
7decafcdc0
@ -9,9 +9,10 @@
|
||||
"AccessSettings": "Access settings",
|
||||
"AddAdmins": "Add admins",
|
||||
"AddAllowedIP": "Add allowed IP address",
|
||||
"AdditionalResources": "Additional resources",
|
||||
"AdditionalResourcesDescription": "Choose whether you want to display links to additional resources in DocSpace menu.",
|
||||
"AddName": "Add Name",
|
||||
"AddTrustedDomain": "Add trusted domain",
|
||||
"AdditionalResources": "Additional resources",
|
||||
"AdminInModules": "Admin in modules",
|
||||
"AdministratorsAddedSuccessfully": "Administrators added successfully",
|
||||
"AdministratorsRemovedSuccessfully": "Administrators removed successfully",
|
||||
@ -46,9 +47,9 @@
|
||||
"Branding": "Branding",
|
||||
"BrandingSectionDescription": "Specify your company information, add links to external resources, and email addresses displayed within the online office interface.",
|
||||
"BrandingSubtitle": "Use this option to provide on-brand experience to your users. These settings will be effective for all of your portals.",
|
||||
"BrowserNoCanvasSupport": "Your browser does not support the HTML5 canvas tag.",
|
||||
"BreakpointWarningText": "This section is only available in desktop version",
|
||||
"BreakpointWarningTextPrompt": "Please use the desktop site to access",
|
||||
"BrowserNoCanvasSupport": "Your browser does not support the HTML5 canvas tag.",
|
||||
"ByApp": "By authenticator app",
|
||||
"BySms": "By sms",
|
||||
"ChangeLogoButton": "Change Logo",
|
||||
@ -77,6 +78,7 @@
|
||||
"DataBackup": "Data backup",
|
||||
"DeactivateOrDeletePortal": "Deactivate or delete portal.",
|
||||
"Disabled": "Disabled",
|
||||
"DocSpaceMenu": "DocSpace menu",
|
||||
"DocumentsAdministratorsCan": "Documents administrators can link Dropbox, Box, and other accounts to Common Documents and set up access rights in this section",
|
||||
"DownloadCopy": "Download the copy",
|
||||
"DownloadReportBtn": "Download and open report",
|
||||
@ -174,12 +176,12 @@
|
||||
"SettingPasswordStrength": "Setting password strength",
|
||||
"SettingPasswordStrengthDescription": "Password Strength Settings is a way to determine the effectiveness of a password in resisting guessing and brute-force attacks.",
|
||||
"SettingPasswordStrengthHelper": "Use the Minimum Password Length bar to determine how long the password should be. Check the appropriate boxes below to determine the character set that must be used in the password.",
|
||||
"SingleSignOn": "Single Sign-On",
|
||||
"StoragePeriod": "Storage period",
|
||||
"ShowFeedbackAndSupport": "Show Feedback & Support link",
|
||||
"ShowSampleDocuments": "Show sample documents in new rooms",
|
||||
"ShowVideoGuides": "Show link to Video Guides",
|
||||
"ShowHelpCenter": "Show link to Help Center",
|
||||
"SingleSignOn": "Single Sign-On",
|
||||
"StoragePeriod": "Storage period",
|
||||
"StudioTimeLanguageSettings": "Language and Time Zone Settings",
|
||||
"SuccessfullySaveGreetingSettingsMessage": "Welcome Page settings have been successfully saved",
|
||||
"SuccessfullySavePortalNameMessage": "Portal has been renamed successfully",
|
||||
|
@ -15,6 +15,7 @@ const PureAccountsItem = ({
|
||||
setSelectedFolder,
|
||||
selectedTreeNode,
|
||||
setSelectedNode,
|
||||
toggleArticleOpen,
|
||||
history,
|
||||
t,
|
||||
}) => {
|
||||
@ -26,6 +27,7 @@ const PureAccountsItem = ({
|
||||
history.push(
|
||||
combineUrl(AppServerConfig.proxyURL, config.homepage, "/accounts")
|
||||
);
|
||||
toggleArticleOpen();
|
||||
}, [setSelectedFolder, setSelectedNode, history]);
|
||||
|
||||
const isActive = selectedTreeNode[0] === "accounts";
|
||||
@ -50,10 +52,13 @@ const AccountsItem = withTranslation(["FilesSettings", "Common"])(
|
||||
export default inject(({ auth, treeFoldersStore, selectedFolderStore }) => {
|
||||
const { setSelectedFolder } = selectedFolderStore;
|
||||
const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
|
||||
const { toggleArticleOpen, showText } = auth.settingsStore;
|
||||
|
||||
return {
|
||||
showText: auth.settingsStore.showText,
|
||||
showText,
|
||||
setSelectedFolder,
|
||||
selectedTreeNode,
|
||||
setSelectedNode,
|
||||
toggleArticleOpen,
|
||||
};
|
||||
})(observer(AccountsItem));
|
||||
|
@ -52,7 +52,6 @@ const StyledPeopleRow = styled(TableRow)`
|
||||
|
||||
.table-container_row-checkbox-wrapper {
|
||||
padding-right: 0px;
|
||||
padding-left: 4px;
|
||||
min-width: 48px;
|
||||
|
||||
.table-container_row-checkbox {
|
||||
|
@ -1,15 +1,11 @@
|
||||
import React, { useCallback, useMemo } from "react";
|
||||
import React, { useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
|
||||
import Headline from "@docspace/common/components/Headline";
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
import { AppServerConfig } from "@docspace/common/constants";
|
||||
import { combineUrl } from "@docspace/common/utils";
|
||||
|
||||
import DropDownItem from "@docspace/components/drop-down-item";
|
||||
import ContextMenuButton from "@docspace/components/context-menu-button";
|
||||
import {
|
||||
@ -19,38 +15,14 @@ import {
|
||||
isMobile as isMobileUtils,
|
||||
isDesktop,
|
||||
} from "@docspace/components/utils/device";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
|
||||
import withPeopleLoader from "SRC_DIR/HOCs/withPeopleLoader";
|
||||
|
||||
import config from "PACKAGE_FILE";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 69px;
|
||||
|
||||
@media ${tablet} {
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
height: 61px;
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
height: 53px;
|
||||
`}
|
||||
|
||||
.group-button-menu-container {
|
||||
margin: 0 0 0 -20px;
|
||||
@ -110,6 +82,7 @@ const StyledContainer = styled.div`
|
||||
line-height: 24px;
|
||||
|
||||
@media ${tablet} {
|
||||
font-size: 21px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@ -162,8 +135,6 @@ const StyledInfoPanelToggleWrapper = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin-bottom: 2px;
|
||||
|
||||
.info-panel-toggle-bg {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
@ -176,27 +147,19 @@ const StyledInfoPanelToggleWrapper = styled.div`
|
||||
|
||||
const SectionHeaderContent = (props) => {
|
||||
const {
|
||||
t,
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
isHeaderChecked,
|
||||
|
||||
t,
|
||||
|
||||
isLoaded,
|
||||
isTabletView,
|
||||
setSelected,
|
||||
|
||||
getHeaderMenu,
|
||||
|
||||
showText,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
|
||||
setInfoPanelVisible,
|
||||
isInfoPanelVisible,
|
||||
} = props;
|
||||
|
||||
//console.log("SectionHeaderContent render", props.isTabletView);
|
||||
//console.log("SectionHeaderContent render");
|
||||
|
||||
const onChange = (checked) => {
|
||||
setSelected(checked ? "all" : "none");
|
||||
@ -210,13 +173,6 @@ const SectionHeaderContent = (props) => {
|
||||
[setSelected]
|
||||
);
|
||||
|
||||
const onSelectorSelect = useCallback(
|
||||
(item) => {
|
||||
setSelected(item.key);
|
||||
},
|
||||
[onSelect]
|
||||
);
|
||||
|
||||
const getMenuItems = () => {
|
||||
const checkboxOptions = (
|
||||
<>
|
||||
@ -296,15 +252,7 @@ const SectionHeaderContent = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<StyledContainer
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
isLoaded={isLoaded}
|
||||
width={context.sectionWidth}
|
||||
isTabletView={isTabletView}
|
||||
showText={showText}
|
||||
>
|
||||
<StyledContainer>
|
||||
{isHeaderVisible ? (
|
||||
<div className="group-button-menu-container">
|
||||
<TableGroupMenu
|
||||
@ -331,7 +279,7 @@ const SectionHeaderContent = (props) => {
|
||||
directionX="left"
|
||||
title={t("Common:Actions")}
|
||||
iconName="images/plus.svg"
|
||||
size={17}
|
||||
size={15}
|
||||
getData={getContextOptions}
|
||||
isDisabled={false}
|
||||
/>
|
||||
@ -359,37 +307,17 @@ const SectionHeaderContent = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</StyledContainer>
|
||||
)}
|
||||
</Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
export default withRouter(
|
||||
inject(({ auth, peopleStore }) => {
|
||||
const { settingsStore, isLoaded, isAdmin } = auth;
|
||||
const { customNames, isTabletView, showText } = settingsStore;
|
||||
const {
|
||||
setVisible: setInfoPanelVisible,
|
||||
isVisible: isInfoPanelVisible,
|
||||
} = auth.infoPanelStore;
|
||||
|
||||
const {
|
||||
resetFilter,
|
||||
usersStore,
|
||||
selectionStore,
|
||||
headerMenuStore,
|
||||
groupsStore,
|
||||
selectedGroupStore,
|
||||
getHeaderMenu,
|
||||
dialogStore,
|
||||
} = peopleStore;
|
||||
const { getUsersList, removeUser } = usersStore;
|
||||
const {
|
||||
setSelected,
|
||||
selectByStatus,
|
||||
clearSelection,
|
||||
selectAll,
|
||||
} = selectionStore;
|
||||
const { selectionStore, headerMenuStore, getHeaderMenu } = peopleStore;
|
||||
|
||||
const {
|
||||
isHeaderVisible,
|
||||
@ -398,31 +326,15 @@ export default withRouter(
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
} = headerMenuStore;
|
||||
const { deleteGroup } = groupsStore;
|
||||
const { group } = selectedGroupStore;
|
||||
const { setInvitationDialogVisible } = dialogStore;
|
||||
|
||||
const { setSelected } = selectionStore;
|
||||
|
||||
return {
|
||||
resetFilter,
|
||||
customNames,
|
||||
homepage: config.homepage,
|
||||
isLoaded,
|
||||
isAdmin,
|
||||
fetchPeople: getUsersList,
|
||||
setSelected,
|
||||
selectByStatus,
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
isHeaderChecked,
|
||||
clearSelection,
|
||||
selectAll,
|
||||
deleteGroup,
|
||||
removeUser,
|
||||
group,
|
||||
isTabletView,
|
||||
getHeaderMenu,
|
||||
setInvitationDialogVisible,
|
||||
showText,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
setInfoPanelVisible,
|
||||
|
@ -27,25 +27,6 @@ import { getMainButtonItems } from "SRC_DIR/helpers/plugins";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 69px;
|
||||
|
||||
@media ${tablet} {
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
height: 61px;
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
height: 53px;
|
||||
`}
|
||||
|
||||
.table-container_group-menu {
|
||||
margin: 0 0 0 -20px;
|
||||
@ -119,8 +100,7 @@ class SectionHeaderContent extends React.Component {
|
||||
createForm = () => this.onCreate("docxf");
|
||||
|
||||
createFormFromFile = () => {
|
||||
const { setSelectFileDialogVisible } = this.props;
|
||||
setSelectFileDialogVisible(true);
|
||||
this.props.setSelectFileDialogVisible(true);
|
||||
};
|
||||
|
||||
onShowGallery = () => {
|
||||
@ -478,7 +458,6 @@ class SectionHeaderContent extends React.Component {
|
||||
personal,
|
||||
navigationPath,
|
||||
getHeaderMenu,
|
||||
viewAs,
|
||||
isRecycleBinFolder,
|
||||
isEmptyFilesList,
|
||||
isHeaderVisible,
|
||||
@ -494,17 +473,7 @@ class SectionHeaderContent extends React.Component {
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<StyledContainer
|
||||
width={context.sectionWidth}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
isRecycleBinFolder={isRecycleBinFolder}
|
||||
isTitle={title}
|
||||
isDesktop={isDesktop}
|
||||
isTabletView={isTabletView}
|
||||
isLoading={isLoading}
|
||||
viewAs={viewAs}
|
||||
>
|
||||
<StyledContainer>
|
||||
{isHeaderVisible ? (
|
||||
<TableGroupMenu
|
||||
checkboxOptions={menuItems}
|
||||
@ -569,8 +538,6 @@ export default inject(
|
||||
}) => {
|
||||
const {
|
||||
setSelected,
|
||||
setSelection,
|
||||
|
||||
canCreate,
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
@ -581,7 +548,6 @@ export default inject(
|
||||
isEmptyFilesList,
|
||||
getFolderInfo,
|
||||
setBufferSelection,
|
||||
viewAs,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
@ -601,14 +567,12 @@ export default inject(
|
||||
setEmptyTrashDialogVisible,
|
||||
setSelectFileDialogVisible,
|
||||
setIsFolderActions,
|
||||
setCreateRoomDialogVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
const {
|
||||
isRecycleBinFolder,
|
||||
isPrivacyFolder,
|
||||
isRoomsFolder,
|
||||
isArchiveFolder,
|
||||
} = treeFoldersStore;
|
||||
const {
|
||||
deleteAction,
|
||||
@ -623,7 +587,6 @@ export default inject(
|
||||
title,
|
||||
id,
|
||||
roomType,
|
||||
rootFolderType,
|
||||
pathParts,
|
||||
navigationPath,
|
||||
} = selectedFolderStore;
|
||||
@ -638,7 +601,6 @@ export default inject(
|
||||
isRootFolder: pathParts?.length === 1,
|
||||
title,
|
||||
isRoom,
|
||||
rootFolderType,
|
||||
currentFolderId: id,
|
||||
pathParts: pathParts,
|
||||
navigationPath: navigationPath,
|
||||
@ -657,7 +619,6 @@ export default inject(
|
||||
getFolderInfo,
|
||||
|
||||
setSelected,
|
||||
setSelection,
|
||||
|
||||
setSharingPanelVisible,
|
||||
setMoveToPanelVisible,
|
||||
@ -671,13 +632,11 @@ export default inject(
|
||||
backToParentFolder,
|
||||
getCheckboxItemLabel,
|
||||
setSelectFileDialogVisible,
|
||||
setCreateRoomDialogVisible,
|
||||
|
||||
isRecycleBinFolder,
|
||||
setEmptyTrashDialogVisible,
|
||||
isEmptyFilesList,
|
||||
isPrivacyFolder,
|
||||
viewAs,
|
||||
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
@ -687,7 +646,6 @@ export default inject(
|
||||
activeFolders,
|
||||
|
||||
isRoomsFolder,
|
||||
isArchiveFolder,
|
||||
|
||||
setAlreadyFetchingRooms,
|
||||
|
||||
|
@ -9,17 +9,16 @@ import {
|
||||
StyledFloatingButton,
|
||||
IconBox,
|
||||
} from "./StyledPreview";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import ButtonPlusIcon from "../../../../../../../../public/images/actions.button.plus.react.svg";
|
||||
|
||||
const Preview = (props) => {
|
||||
const { selectAccentColor, themePreview, selectThemeId } = props;
|
||||
const { t, selectAccentColor, themePreview, selectThemeId } = props;
|
||||
|
||||
const [colorPreview, setColorPreview] = useState(selectAccentColor);
|
||||
const [isViewTablet, setIsViewTablet] = useState(false);
|
||||
|
||||
const { t } = useTranslation("Common");
|
||||
|
||||
const onCheckView = () => {
|
||||
const tablet =
|
||||
isTablet || (window.innerWidth > 600 && window.innerWidth <= 1024);
|
||||
@ -60,7 +59,7 @@ const Preview = (props) => {
|
||||
<div className="main-button-container">
|
||||
<MainButton
|
||||
className="main-button-preview"
|
||||
text={t("Actions")}
|
||||
text={t("Common:Actions")}
|
||||
isDisabled={true}
|
||||
/>
|
||||
</div>
|
||||
@ -401,4 +400,4 @@ const Preview = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
export default withTranslation("Common")(Preview);
|
||||
|
@ -1,74 +1,231 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import withLoading from "SRC_DIR/HOCs/withLoading";
|
||||
import styled from "styled-components";
|
||||
import Checkbox from "@docspace/components/checkbox";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import LoaderAdditionalResources from "../sub-components/loaderAdditionalResources";
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
margin-top: 40px;
|
||||
|
||||
.branding-checkboxs {
|
||||
.branding-checkbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.additional-header {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.additional-description {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: ${(props) => !props.isPortalPaid && "#A3A9AE"};
|
||||
}
|
||||
|
||||
.save-cancel-buttons {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: max-content;
|
||||
margin-right: 9px;
|
||||
}
|
||||
`;
|
||||
|
||||
const AdditionalResources = (props) => {
|
||||
const { t, isPortalPaid } = props;
|
||||
const [showFeedback, setShowFeedback] = useState(false);
|
||||
const [showSample, setShowSample] = useState(false);
|
||||
const [showVideoGuides, setShowVideoGuides] = useState(false);
|
||||
const [showHelpCenter, setShowHelpCenter] = useState(false);
|
||||
const {
|
||||
t,
|
||||
tReady,
|
||||
isPortalPaid,
|
||||
getAdditionalResources,
|
||||
setAdditionalResources,
|
||||
restoreAdditionalResources,
|
||||
additionalResourcesData,
|
||||
setIsLoadedAdditionalResources,
|
||||
isLoadedAdditionalResources,
|
||||
} = props;
|
||||
|
||||
const [feedbackAndSupportEnabled, setShowFeedback] = useState(
|
||||
additionalResourcesData.feedbackAndSupportEnabled
|
||||
);
|
||||
|
||||
const [videoGuidesEnabled, setShowVideoGuides] = useState(
|
||||
additionalResourcesData.videoGuidesEnabled
|
||||
);
|
||||
|
||||
const [helpCenterEnabled, setShowHelpCenter] = useState(
|
||||
additionalResourcesData.helpCenterEnabled
|
||||
);
|
||||
|
||||
const [hasChange, setHasChange] = useState(false);
|
||||
|
||||
const [hasChangesDefaultSettings, setHasChangesDefaultSettings] = useState(
|
||||
false
|
||||
);
|
||||
|
||||
const defaultAdditionalResources = JSON.parse(
|
||||
localStorage.getItem("defaultAdditionalResources")
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setShowFeedback(additionalResourcesData.feedbackAndSupportEnabled);
|
||||
setShowVideoGuides(additionalResourcesData.videoGuidesEnabled);
|
||||
setShowHelpCenter(additionalResourcesData.helpCenterEnabled);
|
||||
}, [additionalResourcesData]);
|
||||
|
||||
useEffect(() => {
|
||||
const settings = {
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled,
|
||||
};
|
||||
|
||||
const hasСhange = !_.isEqual(settings, additionalResourcesData);
|
||||
|
||||
const hasСhangeDefaul = !_.isEqual(settings, defaultAdditionalResources);
|
||||
|
||||
if (hasСhange) {
|
||||
setHasChange(true);
|
||||
} else {
|
||||
setHasChange(false);
|
||||
}
|
||||
|
||||
if (hasСhangeDefaul) {
|
||||
setHasChangesDefaultSettings(true);
|
||||
} else {
|
||||
setHasChangesDefaultSettings(false);
|
||||
}
|
||||
}, [
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled,
|
||||
additionalResourcesData,
|
||||
defaultAdditionalResources,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!(additionalResourcesData && tReady)) return;
|
||||
|
||||
setIsLoadedAdditionalResources(true);
|
||||
}, [additionalResourcesData, tReady]);
|
||||
|
||||
const onSave = () => {
|
||||
setAdditionalResources(
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled
|
||||
)
|
||||
.then(() => {
|
||||
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
|
||||
getAdditionalResources();
|
||||
|
||||
if (!localStorage.getItem("isFirstAdditionalResources")) {
|
||||
localStorage.setItem("isFirstAdditionalResources", true);
|
||||
setIsFirstAdditionalResources("true");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toastr.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const onRestore = () => {
|
||||
restoreAdditionalResources()
|
||||
.then(() => {
|
||||
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
|
||||
getAdditionalResources();
|
||||
})
|
||||
.catch((error) => {
|
||||
toastr.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
if (!isLoadedAdditionalResources) return <LoaderAdditionalResources />;
|
||||
|
||||
return (
|
||||
<StyledComponent>
|
||||
<div className="header">Additional resources</div>
|
||||
<div className="description">
|
||||
Choose whether you want to display links to additional resources in
|
||||
Portal modules and sample files in Documents module.
|
||||
<>
|
||||
<StyledComponent isPortalPaid={isPortalPaid}>
|
||||
<div className="header">
|
||||
<div className="additional-header">
|
||||
{t("Settings:AdditionalResources")}
|
||||
</div>
|
||||
<div className="branding-checkboxs">
|
||||
</div>
|
||||
<div className="description additional-description">
|
||||
<div className="additional-description">
|
||||
{t("Settings:AdditionalResourcesDescription")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="branding-checkbox">
|
||||
<Checkbox
|
||||
className="checkbox"
|
||||
isDisabled={!isPortalPaid}
|
||||
label={t("ShowFeedbackAndSupport")}
|
||||
isChecked={showFeedback}
|
||||
onChange={() => setShowFeedback(!showFeedback)}
|
||||
/>
|
||||
<Checkbox
|
||||
isDisabled={!isPortalPaid}
|
||||
label={t("ShowSampleDocuments")}
|
||||
isChecked={showSample}
|
||||
onChange={() => setShowSample(!showSample)}
|
||||
isChecked={feedbackAndSupportEnabled}
|
||||
onChange={() => setShowFeedback(!feedbackAndSupportEnabled)}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
className="checkbox"
|
||||
isDisabled={!isPortalPaid}
|
||||
label={t("ShowVideoGuides")}
|
||||
isChecked={showVideoGuides}
|
||||
onChange={() => setShowVideoGuides(!showVideoGuides)}
|
||||
isChecked={videoGuidesEnabled}
|
||||
onChange={() => setShowVideoGuides(!videoGuidesEnabled)}
|
||||
/>
|
||||
<Checkbox
|
||||
className="checkbox"
|
||||
isDisabled={!isPortalPaid}
|
||||
label={t("ShowHelpCenter")}
|
||||
isChecked={showHelpCenter}
|
||||
onChange={() => setShowHelpCenter(!showHelpCenter)}
|
||||
isChecked={helpCenterEnabled}
|
||||
onChange={() => setShowHelpCenter(!helpCenterEnabled)}
|
||||
/>
|
||||
</div>
|
||||
<SaveCancelButtons
|
||||
onSaveClick={() => console.log("click")}
|
||||
onCancelClick={() => console.log("click")}
|
||||
onSaveClick={onSave}
|
||||
onCancelClick={onRestore}
|
||||
saveButtonLabel={t("Common:SaveButton")}
|
||||
cancelButtonLabel={t("Settings:RestoreDefaultButton")}
|
||||
displaySettings={true}
|
||||
showReminder={isPortalPaid && hasChange}
|
||||
disableRestoreToDefault={!hasChangesDefaultSettings}
|
||||
/>
|
||||
</StyledComponent>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, setup, common }) => {})(
|
||||
export default inject(({ auth, common }) => {
|
||||
const { settingsStore } = auth;
|
||||
|
||||
const {
|
||||
setIsLoadedAdditionalResources,
|
||||
isLoadedAdditionalResources,
|
||||
} = common;
|
||||
|
||||
const {
|
||||
getAdditionalResources,
|
||||
setAdditionalResources,
|
||||
restoreAdditionalResources,
|
||||
additionalResourcesData,
|
||||
} = settingsStore;
|
||||
|
||||
return {
|
||||
getAdditionalResources,
|
||||
setAdditionalResources,
|
||||
restoreAdditionalResources,
|
||||
additionalResourcesData,
|
||||
setIsLoadedAdditionalResources,
|
||||
isLoadedAdditionalResources,
|
||||
};
|
||||
})(
|
||||
withLoading(
|
||||
withTranslation(["Settings", "Common"])(observer(AdditionalResources))
|
||||
)
|
||||
|
@ -0,0 +1,82 @@
|
||||
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: 15px;
|
||||
}
|
||||
|
||||
.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;
|
@ -21,6 +21,7 @@ class CommonStore {
|
||||
isLoadedCustomization = false;
|
||||
isLoadedCustomizationNavbar = false;
|
||||
isLoadedWelcomePageSettings = false;
|
||||
isLoadedAdditionalResources = false;
|
||||
|
||||
isLoadedCompanyInfoSettingsData = false;
|
||||
|
||||
@ -132,6 +133,12 @@ class CommonStore {
|
||||
});
|
||||
};
|
||||
|
||||
setIsLoadedAdditionalResources = (isLoadedAdditionalResources) => {
|
||||
runInAction(() => {
|
||||
this.isLoadedAdditionalResources = isLoadedAdditionalResources;
|
||||
});
|
||||
};
|
||||
|
||||
setIsLoadedCompanyInfoSettingsData = (isLoadedCompanyInfoSettingsData) => {
|
||||
runInAction(() => {
|
||||
this.isLoadedCompanyInfoSettingsData = isLoadedCompanyInfoSettingsData;
|
||||
|
@ -217,7 +217,40 @@ class ProfileActionsStore {
|
||||
}
|
||||
}
|
||||
|
||||
return actions;
|
||||
return this.checkEnabledActions(actions);
|
||||
};
|
||||
|
||||
checkEnabledActions = (actions) => {
|
||||
const actionsArray = actions;
|
||||
|
||||
const feedbackAndSupportEnabled = this.authStore.settingsStore
|
||||
.additionalResourcesData.feedbackAndSupportEnabled;
|
||||
const videoGuidesEnabled = this.authStore.settingsStore
|
||||
.additionalResourcesData.videoGuidesEnabled;
|
||||
const helpCenterEnabled = this.authStore.settingsStore
|
||||
.additionalResourcesData.helpCenterEnabled;
|
||||
|
||||
if (!feedbackAndSupportEnabled) {
|
||||
const index = actionsArray.findIndex((item) => item.key === "SupportBtn");
|
||||
|
||||
actionsArray.splice(index, 1);
|
||||
}
|
||||
|
||||
if (!videoGuidesEnabled) {
|
||||
const index = actionsArray.findIndex((item) => item.key === "VideoBtn");
|
||||
|
||||
actionsArray.splice(index, 1);
|
||||
}
|
||||
|
||||
if (!helpCenterEnabled) {
|
||||
const index = actionsArray.findIndex(
|
||||
(item) => item.key === "HelpCenterBtn"
|
||||
);
|
||||
|
||||
actionsArray.splice(index, 1);
|
||||
}
|
||||
|
||||
return actionsArray;
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -256,6 +256,40 @@ export function getCustomSchemaList() {
|
||||
});
|
||||
}
|
||||
|
||||
export function setAdditionalResources(
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled
|
||||
) {
|
||||
const data = {
|
||||
settings: {
|
||||
helpCenterEnabled,
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
},
|
||||
};
|
||||
|
||||
return request({
|
||||
method: "post",
|
||||
url: `/settings/rebranding/additional.json`,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function getAdditionalResources() {
|
||||
return request({
|
||||
method: "get",
|
||||
url: `/settings/rebranding/additional.json`,
|
||||
});
|
||||
}
|
||||
|
||||
export function restoreAdditionalResources() {
|
||||
return request({
|
||||
method: "delete",
|
||||
url: `/settings/rebranding/additional.json`,
|
||||
});
|
||||
}
|
||||
|
||||
export function setCurrentSchema(id) {
|
||||
return request({
|
||||
method: "post",
|
||||
|
@ -116,9 +116,8 @@ StyledArticle.defaultProps = { theme: Base };
|
||||
|
||||
const StyledArticleHeader = styled.div`
|
||||
height: 24px;
|
||||
padding: 22px 20px 23px;
|
||||
|
||||
margin-left: -1px;
|
||||
padding: 24px 21px 21px 20px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
@ -4,7 +4,7 @@ import styled from "styled-components";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 211px;
|
||||
margin: -9px 0 0;
|
||||
margin: 0;
|
||||
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
|
@ -26,8 +26,6 @@ const StyledTextContainer = styled.div`
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
margin-bottom: ${(props) => !props.isOpen && "2px"};
|
||||
`;
|
||||
|
||||
const StyledHeading = styled(Heading)`
|
||||
|
@ -1,43 +1,10 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import ContextMenuButton from "@docspace/components/context-menu-button";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { tablet } from "@docspace/components/utils/device";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 32px;
|
||||
|
||||
.add-button {
|
||||
margin-right: 16px;
|
||||
min-width: 15px;
|
||||
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
display: none;
|
||||
`}
|
||||
}
|
||||
|
||||
.option-button {
|
||||
margin-right: 16px;
|
||||
min-width: 15px;
|
||||
}
|
||||
|
||||
.trash-button {
|
||||
margin-right: 16px;
|
||||
min-width: 15px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInfoPanelToggleWrapper = styled.div`
|
||||
display: ${(props) => (props.isInfoPanelVisible ? "none" : "flex")};
|
||||
|
||||
|
@ -2,8 +2,6 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import {
|
||||
desktop,
|
||||
size,
|
||||
tablet,
|
||||
mobile,
|
||||
isMobile as isMobileUtils,
|
||||
@ -11,7 +9,7 @@ import {
|
||||
} from "@docspace/components/utils/device";
|
||||
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
||||
import { Provider } from "@docspace/components/utils/context";
|
||||
import { isMobile, isFirefox, isMobileOnly } from "react-device-detect";
|
||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||
|
||||
import SectionContainer from "./sub-components/section-container";
|
||||
import SubSectionHeader from "./sub-components/section-header";
|
||||
@ -206,16 +204,12 @@ class Section extends React.Component {
|
||||
showSecondaryButtonAlert,
|
||||
uploadFiles,
|
||||
viewAs,
|
||||
//withBodyAutoFocus,
|
||||
withBodyScroll,
|
||||
children,
|
||||
isHeaderVisible,
|
||||
//headerBorderBottom,
|
||||
onOpenUploadPanel,
|
||||
isTabletView,
|
||||
firstLoad,
|
||||
dragging,
|
||||
isDesktop,
|
||||
isHomepage,
|
||||
maintenanceExist,
|
||||
setMaintenanceExist,
|
||||
@ -528,7 +522,6 @@ class Section extends React.Component {
|
||||
Section.propTypes = {
|
||||
children: PropTypes.any,
|
||||
withBodyScroll: PropTypes.bool,
|
||||
withBodyAutoFocus: PropTypes.bool,
|
||||
showPrimaryProgressBar: PropTypes.bool,
|
||||
primaryProgressBarValue: PropTypes.number,
|
||||
showPrimaryButtonAlert: PropTypes.bool,
|
||||
@ -541,12 +534,10 @@ Section.propTypes = {
|
||||
onDrop: PropTypes.func,
|
||||
setSelections: PropTypes.func,
|
||||
uploadFiles: PropTypes.bool,
|
||||
hideAside: PropTypes.bool,
|
||||
viewAs: PropTypes.string,
|
||||
onOpenUploadPanel: PropTypes.func,
|
||||
isTabletView: PropTypes.bool,
|
||||
isHeaderVisible: PropTypes.bool,
|
||||
firstLoad: PropTypes.bool,
|
||||
isHomepage: PropTypes.bool,
|
||||
isInfoPanelAvailable: PropTypes.bool,
|
||||
settingsStudio: PropTypes.bool,
|
||||
@ -555,7 +546,6 @@ Section.propTypes = {
|
||||
|
||||
Section.defaultProps = {
|
||||
withBodyScroll: true,
|
||||
withBodyAutoFocus: false,
|
||||
isInfoPanelAvailable: true,
|
||||
settingsStudio: false,
|
||||
withPaging: true,
|
||||
@ -569,11 +559,10 @@ Section.SectionBody = SectionBody;
|
||||
Section.SectionPaging = SectionPaging;
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { infoPanelStore, isLoaded, settingsStore } = auth;
|
||||
const { infoPanelStore, settingsStore } = auth;
|
||||
const {
|
||||
isHeaderVisible,
|
||||
isTabletView,
|
||||
isDesktopClient,
|
||||
maintenanceExist,
|
||||
snackbarExist,
|
||||
setMaintenanceExist,
|
||||
@ -583,14 +572,12 @@ export default inject(({ auth }) => {
|
||||
const { isVisible: infoPanelIsVisible } = infoPanelStore;
|
||||
|
||||
return {
|
||||
isLoaded,
|
||||
isTabletView,
|
||||
isHeaderVisible,
|
||||
|
||||
maintenanceExist,
|
||||
snackbarExist,
|
||||
setMaintenanceExist,
|
||||
isDesktop: isDesktopClient,
|
||||
|
||||
showText,
|
||||
|
||||
|
@ -13,7 +13,6 @@ import { Base } from "@docspace/components/themes";
|
||||
|
||||
const tabletProps = css`
|
||||
.section-body_header {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: ${(props) => props.theme.section.header.background};
|
||||
|
@ -1,8 +1,6 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
//import classnames from "classnames";
|
||||
import PropTypes from "prop-types";
|
||||
//import { LayoutContextConsumer } from "client/Layout/context";
|
||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||
import { tablet, mobile } from "@docspace/components/utils/device";
|
||||
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
||||
@ -11,6 +9,37 @@ import Base from "@docspace/components/themes/base";
|
||||
|
||||
const StyledSectionHeader = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
height: 69px;
|
||||
min-height: 69px;
|
||||
|
||||
@media ${tablet} {
|
||||
height: 61px;
|
||||
min-height: 61px;
|
||||
|
||||
.header-container {
|
||||
margin-bottom: 1px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
height: 61px;
|
||||
min-height: 61px;
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
min-height: 53px;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
height: 53px;
|
||||
min-height: 53px;
|
||||
`}
|
||||
|
||||
padding-right: 20px;
|
||||
|
||||
|
@ -6,16 +6,9 @@ import SettingsStore from "./SettingsStore";
|
||||
import UserStore from "./UserStore";
|
||||
import TfaStore from "./TfaStore";
|
||||
import InfoPanelStore from "./InfoPanelStore";
|
||||
import { logout as logoutDesktop, desktopConstants } from "../desktop";
|
||||
import { combineUrl, isAdmin, setCookie, getCookie } from "../utils";
|
||||
import {
|
||||
logout as logoutDesktop,
|
||||
desktopConstants,
|
||||
} from "../desktop";
|
||||
import {
|
||||
combineUrl,
|
||||
isAdmin,
|
||||
setCookie,
|
||||
getCookie,
|
||||
} from "../utils";import {
|
||||
AppServerConfig,
|
||||
LANGUAGE,
|
||||
COOKIE_EXPIRATION_YEAR,
|
||||
@ -62,6 +55,7 @@ class AuthStore {
|
||||
!this.settingsStore.passwordSettings &&
|
||||
requests.push(
|
||||
this.settingsStore.getPortalPasswordSettings(),
|
||||
this.settingsStore.getAdditionalResources(),
|
||||
this.settingsStore.getCompanyInfoSettings()
|
||||
);
|
||||
}
|
||||
|
@ -142,6 +142,8 @@ class SettingsStore {
|
||||
enablePlugins = false;
|
||||
pluginOptions = [];
|
||||
|
||||
additionalResourcesData = null;
|
||||
|
||||
companyInfoSettingsData = null;
|
||||
|
||||
constructor() {
|
||||
@ -313,6 +315,45 @@ class SettingsStore {
|
||||
this.cultures = cultures;
|
||||
};
|
||||
|
||||
setAdditionalResourcesData = (data) => {
|
||||
this.additionalResourcesData = data;
|
||||
};
|
||||
|
||||
setAdditionalResources = async (
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled
|
||||
) => {
|
||||
const res = await api.settings.setAdditionalResources(
|
||||
feedbackAndSupportEnabled,
|
||||
videoGuidesEnabled,
|
||||
helpCenterEnabled
|
||||
);
|
||||
};
|
||||
|
||||
getAdditionalResources = async () => {
|
||||
const res = await api.settings.getAdditionalResources();
|
||||
|
||||
delete res.buyUrl;
|
||||
delete res.feedbackAndSupportUrl;
|
||||
delete res.licenseAgreementsEnabled;
|
||||
delete res.licenseAgreementsUrl;
|
||||
delete res.salesEmail;
|
||||
delete res.startDocsEnabled;
|
||||
delete res.userForumEnabled;
|
||||
delete res.videoGuidesUrl;
|
||||
|
||||
this.setAdditionalResourcesData(res);
|
||||
|
||||
if (!localStorage.getItem("defaultAdditionalResources")) {
|
||||
localStorage.setItem("defaultAdditionalResources", JSON.stringify(res));
|
||||
}
|
||||
};
|
||||
|
||||
restoreAdditionalResources = async () => {
|
||||
const res = await api.settings.restoreAdditionalResources();
|
||||
};
|
||||
|
||||
getPortalCultures = async () => {
|
||||
const cultures = await api.settings.getPortalCultures();
|
||||
this.setCultures(cultures);
|
||||
|
Loading…
Reference in New Issue
Block a user