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

Merge branch 'develop' into feature/company-info-settings

Browse Source
This commit is contained in:
Vlada Gazizova 2022-09-14 10:18:22 +03:00
commit 7decafcdc0
20 changed files with 521 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/public/locales/en/Settings.json
View File

@ -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",

7
packages/client/src/components/Article/Body/AccountsItem.js
View File

@ -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));

1
packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
View File

@ -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 {

208
packages/client/src/pages/AccountsHome/Section/Header/index.js
View File

@ -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,100 +252,72 @@ const SectionHeaderContent = (props) => {
};
return (
<Consumer>
{(context) => (
<StyledContainer
isHeaderVisible={isHeaderVisible}
isLoaded={isLoaded}
width={context.sectionWidth}
isTabletView={isTabletView}
showText={showText}
>
{isHeaderVisible ? (
<div className="group-button-menu-container">
<TableGroupMenu
checkboxOptions={getMenuItems()}
onChange={onChange}
isChecked={isHeaderChecked}
isIndeterminate={isHeaderIndeterminate}
headerMenu={headerMenu}
withoutInfoPanelToggler={true}
/>
</div>
) : (
<div className="header-container">
<>
<Headline
className="headline-header"
type="content"
truncate={true}
>
{t("Accounts")}
</Headline>
<ContextMenuButton
className="action-button"
directionX="left"
title={t("Common:Actions")}
iconName="images/plus.svg"
size={17}
getData={getContextOptions}
isDisabled={false}
/>
{!isInfoPanelVisible && (
<StyledInfoPanelToggleWrapper>
{!(
isTablet() ||
isMobile ||
isMobileUtils() ||
!isDesktop()
) && (
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={setInfoPanelVisible}
/>
</div>
)}
</StyledInfoPanelToggleWrapper>
<StyledContainer>
{isHeaderVisible ? (
<div className="group-button-menu-container">
<TableGroupMenu
checkboxOptions={getMenuItems()}
onChange={onChange}
isChecked={isHeaderChecked}
isIndeterminate={isHeaderIndeterminate}
headerMenu={headerMenu}
withoutInfoPanelToggler={true}
/>
</div>
) : (
<div className="header-container">
<>
<Headline
className="headline-header"
type="content"
truncate={true}
>
{t("Accounts")}
</Headline>
<ContextMenuButton
className="action-button"
directionX="left"
title={t("Common:Actions")}
iconName="images/plus.svg"
size={15}
getData={getContextOptions}
isDisabled={false}
/>
{!isInfoPanelVisible && (
<StyledInfoPanelToggleWrapper>
{!(
isTablet() ||
isMobile ||
isMobileUtils() ||
!isDesktop()
) && (
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={setInfoPanelVisible}
/>
</div>
)}
</>
</div>
)}
</StyledContainer>
</StyledInfoPanelToggleWrapper>
)}
</>
</div>
)}
</Consumer>
</StyledContainer>
);
};
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,

46
packages/client/src/pages/Home/Section/Header/index.js
View File

@ -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,

11
packages/client/src/pages/PortalSettings/categories/common/settingsAppearance/preview.js
View File

@ -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);

253
packages/client/src/pages/PortalSettings/categories/common/settingsBranding/additionalResources.js
View File

@ -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.
</div>
<div className="branding-checkboxs">
<Checkbox
isDisabled={!isPortalPaid}
label={t("ShowFeedbackAndSupport")}
isChecked={showFeedback}
onChange={() => setShowFeedback(!showFeedback)}
<>
<StyledComponent isPortalPaid={isPortalPaid}>
<div className="header">
<div className="additional-header">
{t("Settings:AdditionalResources")}
</div>
</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={feedbackAndSupportEnabled}
onChange={() => setShowFeedback(!feedbackAndSupportEnabled)}
/>
<Checkbox
className="checkbox"
isDisabled={!isPortalPaid}
label={t("ShowVideoGuides")}
isChecked={videoGuidesEnabled}
onChange={() => setShowVideoGuides(!videoGuidesEnabled)}
/>
<Checkbox
className="checkbox"
isDisabled={!isPortalPaid}
label={t("ShowHelpCenter")}
isChecked={helpCenterEnabled}
onChange={() => setShowHelpCenter(!helpCenterEnabled)}
/>
</div>
<SaveCancelButtons
onSaveClick={onSave}
onCancelClick={onRestore}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Settings:RestoreDefaultButton")}
displaySettings={true}
showReminder={isPortalPaid && hasChange}
disableRestoreToDefault={!hasChangesDefaultSettings}
/>
<Checkbox
isDisabled={!isPortalPaid}
label={t("ShowSampleDocuments")}
isChecked={showSample}
onChange={() => setShowSample(!showSample)}
/>
<Checkbox
isDisabled={!isPortalPaid}
label={t("ShowVideoGuides")}
isChecked={showVideoGuides}
onChange={() => setShowVideoGuides(!showVideoGuides)}
/>
<Checkbox
isDisabled={!isPortalPaid}
label={t("ShowHelpCenter")}
isChecked={showHelpCenter}
onChange={() => setShowHelpCenter(!showHelpCenter)}
/>
</div>
<SaveCancelButtons
onSaveClick={() => console.log("click")}
onCancelClick={() => console.log("click")}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Settings:RestoreDefaultButton")}
displaySettings={true}
/>
</StyledComponent>
</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))
)

82
packages/client/src/pages/PortalSettings/categories/common/sub-components/loaderAdditionalResources.js Normal file
View File

@ -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;

7
packages/client/src/store/CommonStore.js
View File

@ -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;

35
packages/client/src/store/ProfileActionsStore.js
View File

@ -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;
};
}

34
packages/common/api/settings/index.js
View File

@ -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",

5
packages/common/components/Article/styled-article.js
View File

@ -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;

2
packages/common/components/Loaders/ArticleButtonLoader/StyledMainButton.js
View File

@ -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;

2
packages/common/components/Navigation/sub-components/text.js
View File

@ -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)`

33
packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
View File

@ -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")};

17
packages/common/components/Section/index.js
View File

@ -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,

1
packages/common/components/Section/sub-components/section-container.js
View File

@ -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};

33
packages/common/components/Section/sub-components/section-header.js
View File

@ -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;

12
packages/common/store/AuthStore.js
View File

@ -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()
);
}

41
packages/common/store/SettingsStore.js
View File

@ -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);