Merge branch 'develop' into feature/doc-space-info-panel
This commit is contained in:
commit
c835f2960c
@ -106,7 +106,7 @@ public class EmailValidationKeyModelHelper
|
||||
|
||||
public ValidationResult Validate(EmailValidationKeyModel inDto)
|
||||
{
|
||||
var (key, emplType, email, uiD, type, fileShare, roomId) = inDto;
|
||||
var (key, emplType, email, uiD, type, roomAccess, roomId) = inDto;
|
||||
|
||||
ValidationResult checkKeyResult;
|
||||
|
||||
@ -117,9 +117,9 @@ public class EmailValidationKeyModelHelper
|
||||
break;
|
||||
|
||||
case ConfirmType.LinkInvite:
|
||||
if (fileShare != default && !string.IsNullOrEmpty(roomId))
|
||||
if (roomAccess != default && !string.IsNullOrEmpty(roomId))
|
||||
{
|
||||
checkKeyResult = _provider.ValidateEmailKey(email + type + ((int)emplType + (int)fileShare + roomId), key, _provider.ValidEmailKeyInterval);
|
||||
checkKeyResult = _provider.ValidateEmailKey(email + type + ((int)emplType + (int)roomAccess + roomId), key, _provider.ValidEmailKeyInterval);
|
||||
if (checkKeyResult == ValidationResult.Ok &&
|
||||
!_roomLinksService.VisitProcess(roomId, email, key, _provider.ValidVisitLinkInterval))
|
||||
{
|
||||
|
@ -69,7 +69,7 @@ public class RoomInvitationLinksService
|
||||
var postifx = (int)employeeType + fileShare + id.ToString();
|
||||
|
||||
var link = _commonLinkUtility.GetConfirmationUrl(email, ConfirmType.LinkInvite, postifx, guid)
|
||||
+ $"&emplType={employeeType:d}&roomId={id}&access={fileShare}";
|
||||
+ $"&emplType={employeeType:d}&roomId={id}&roomAccess={fileShare}";
|
||||
|
||||
return link;
|
||||
}
|
||||
|
@ -20,6 +20,7 @@
|
||||
"EditRoom": "Edit room",
|
||||
"EmptyFile": "Empty file",
|
||||
"EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files. ",
|
||||
"EmptyFilterDescriptionTextRooms": "No rooms match this filter. Try a different one or clear filter to view all rooms.",
|
||||
"EmptyFilterSubheadingText": "No files to be displayed for this filter here",
|
||||
"EmptyFolderDecription": "Drop files here or create new ones.",
|
||||
"EmptyFolderHeader": "No files in this folder",
|
||||
|
@ -29,6 +29,7 @@ import { useThemeDetector } from "SRC_DIR/helpers/utils";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import IndicatorLoader from "./components/IndicatorLoader";
|
||||
import DialogsWrapper from "./components/dialogs/DialogsWrapper";
|
||||
import MainBar from "./components/MainBar";
|
||||
|
||||
// const { proxyURL } = AppServerConfig;
|
||||
// const homepage = config.homepage;
|
||||
@ -404,73 +405,77 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
<Toast />
|
||||
<ReactSmartBanner t={t} ready={ready} />
|
||||
{isEditor || !isMobileOnly ? <></> : <NavMenu />}
|
||||
{isMobileOnly && <MainBar />}
|
||||
<IndicatorLoader />
|
||||
<ScrollToTop />
|
||||
<DialogsWrapper t={t} />
|
||||
<Main isDesktop={isDesktop}>
|
||||
<Switch>
|
||||
<PrivateRoute
|
||||
exact
|
||||
path={[
|
||||
"/",
|
||||
{!isMobileOnly && <MainBar />}
|
||||
<div className="main-container">
|
||||
<Switch>
|
||||
<PrivateRoute
|
||||
exact
|
||||
path={[
|
||||
"/",
|
||||
|
||||
"/rooms/personal",
|
||||
"/rooms/personal/filter",
|
||||
"/rooms/personal",
|
||||
"/rooms/personal/filter",
|
||||
|
||||
"/rooms/shared",
|
||||
"/rooms/shared/filter",
|
||||
"/rooms/shared/:room",
|
||||
"/rooms/shared/:room/filter",
|
||||
"/rooms/shared",
|
||||
"/rooms/shared/filter",
|
||||
"/rooms/shared/:room",
|
||||
"/rooms/shared/:room/filter",
|
||||
|
||||
"/rooms/archived",
|
||||
"/rooms/archived/filter",
|
||||
"/rooms/archived/:room",
|
||||
"/rooms/archived/:room/filter",
|
||||
"/rooms/archived",
|
||||
"/rooms/archived/filter",
|
||||
"/rooms/archived/:room",
|
||||
"/rooms/archived/:room/filter",
|
||||
|
||||
"/files/favorite",
|
||||
"/files/favorite/filter",
|
||||
"/files/favorite",
|
||||
"/files/favorite/filter",
|
||||
|
||||
"/files/recent",
|
||||
"/files/recent/filter",
|
||||
"/files/recent",
|
||||
"/files/recent/filter",
|
||||
|
||||
"/files/trash",
|
||||
"/files/trash/filter",
|
||||
"/files/trash",
|
||||
"/files/trash/filter",
|
||||
|
||||
"/accounts",
|
||||
"/accounts/filter",
|
||||
"/accounts",
|
||||
"/accounts/filter",
|
||||
|
||||
"/accounts/create/:type",
|
||||
"/accounts/edit/:userId",
|
||||
"/accounts/view/:userId",
|
||||
"/accounts/view/@self",
|
||||
"/accounts/create/:type",
|
||||
"/accounts/edit/:userId",
|
||||
"/accounts/view/:userId",
|
||||
"/accounts/view/@self",
|
||||
|
||||
"/settings",
|
||||
"/settings/common",
|
||||
"/settings/admin",
|
||||
//"/settings/connected-clouds",
|
||||
]}
|
||||
component={FilesRoute}
|
||||
/>
|
||||
<PrivateRoute
|
||||
path={"/form-gallery/:folderId"}
|
||||
component={FormGalleryRoute}
|
||||
/>
|
||||
<PublicRoute exact path={"/wizard"} component={WizardRoute} />
|
||||
<PrivateRoute path={"/about"} component={AboutRoute} />
|
||||
<Route path={"/confirm"} component={ConfirmRoute} />
|
||||
<PrivateRoute path={"/payments"} component={PaymentsRoute} />
|
||||
<PrivateRoute
|
||||
restricted
|
||||
path={"/portal-settings"}
|
||||
component={PortalSettingsRoute}
|
||||
/>
|
||||
<PrivateRoute
|
||||
path={"/preparation-portal"}
|
||||
component={PreparationPortalRoute}
|
||||
/>
|
||||
<PrivateRoute path={"/error401"} component={Error401Route} />
|
||||
<PrivateRoute component={Error404Route} />
|
||||
</Switch>
|
||||
"/settings",
|
||||
"/settings/common",
|
||||
"/settings/admin",
|
||||
//"/settings/connected-clouds",
|
||||
]}
|
||||
component={FilesRoute}
|
||||
/>
|
||||
<PrivateRoute
|
||||
path={"/form-gallery/:folderId"}
|
||||
component={FormGalleryRoute}
|
||||
/>
|
||||
<PublicRoute exact path={"/wizard"} component={WizardRoute} />
|
||||
<PrivateRoute path={"/about"} component={AboutRoute} />
|
||||
<Route path={"/confirm"} component={ConfirmRoute} />
|
||||
<PrivateRoute path={"/payments"} component={PaymentsRoute} />
|
||||
<PrivateRoute
|
||||
restricted
|
||||
path={"/portal-settings"}
|
||||
component={PortalSettingsRoute}
|
||||
/>
|
||||
<PrivateRoute
|
||||
path={"/preparation-portal"}
|
||||
component={PreparationPortalRoute}
|
||||
/>
|
||||
<PrivateRoute path={"/error401"} component={Error401Route} />
|
||||
<PrivateRoute component={Error404Route} />
|
||||
</Switch>
|
||||
</div>
|
||||
</Main>
|
||||
</Router>
|
||||
</Layout>
|
||||
|
@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
|
||||
import { withRouter } from "react-router";
|
||||
import { setDocumentTitle } from "@docspace/client/src/helpers/filesUtils";
|
||||
import config from "PACKAGE_FILE";
|
||||
import { AppServerConfig } from "@docspace/common/constants";
|
||||
import { AppServerConfig, RoomSearchArea } from "@docspace/common/constants";
|
||||
import Items from "./Items";
|
||||
import { isMobile, tablet } from "@docspace/components/utils/device";
|
||||
import FilesFilter from "@docspace/common/api/files/filter";
|
||||
@ -80,27 +80,30 @@ const ArticleBodyContent = (props) => {
|
||||
|
||||
if (folderId === roomsFolderId || folderId === archiveFolderId) {
|
||||
setAlreadyFetchingRooms(true);
|
||||
fetchRooms(folderId, null)
|
||||
|
||||
const filter = RoomsFilter.getDefault();
|
||||
filter.searchArea =
|
||||
folderId === archiveFolderId
|
||||
? RoomSearchArea.Archive
|
||||
: RoomSearchArea.Active;
|
||||
|
||||
fetchRooms(folderId, filter)
|
||||
.then(() => {
|
||||
if (filesSection) {
|
||||
const filter = RoomsFilter.getDefault();
|
||||
const url = getCategoryUrl(
|
||||
folderId === archiveFolderId
|
||||
? CategoryType.Archive
|
||||
: CategoryType.Shared
|
||||
);
|
||||
|
||||
const url = getCategoryUrl(
|
||||
folderId === archiveFolderId
|
||||
? CategoryType.Archive
|
||||
: CategoryType.Shared
|
||||
);
|
||||
const filterParamsStr = filter.toUrlParams();
|
||||
|
||||
const filterParamsStr = filter.toUrlParams();
|
||||
|
||||
history.push(
|
||||
combineUrl(
|
||||
AppServerConfig.proxyURL,
|
||||
homepage,
|
||||
`${url}?${filterParamsStr}`
|
||||
)
|
||||
);
|
||||
}
|
||||
history.push(
|
||||
combineUrl(
|
||||
AppServerConfig.proxyURL,
|
||||
homepage,
|
||||
`${url}?${filterParamsStr}`
|
||||
)
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
if (isMobileOnly || isMobile()) {
|
||||
|
@ -3,6 +3,7 @@ import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
import FilesFilter from "@docspace/common/api/files/filter";
|
||||
import RoomsFilter from "@docspace/common/api/rooms/filter";
|
||||
import Link from "@docspace/components/link";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
@ -12,17 +13,28 @@ const EmptyFilterContainer = ({
|
||||
selectedFolderId,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
linkStyles,
|
||||
isRooms,
|
||||
}) => {
|
||||
const subheadingText = t("EmptyFilterSubheadingText");
|
||||
const descriptionText = t("EmptyFilterDescriptionText");
|
||||
const descriptionText = isRooms
|
||||
? t("EmptyFilterDescriptionTextRooms")
|
||||
: t("EmptyFilterDescriptionText");
|
||||
|
||||
const onResetFilter = () => {
|
||||
setIsLoading(true);
|
||||
const newFilter = FilesFilter.getDefault();
|
||||
fetchFiles(selectedFolderId, newFilter)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
if (isRooms) {
|
||||
const newFilter = RoomsFilter.getDefault();
|
||||
fetchRooms(selectedFolderId, newFilter)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
} else {
|
||||
const newFilter = FilesFilter.getDefault();
|
||||
fetchFiles(selectedFolderId, newFilter)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
}
|
||||
};
|
||||
|
||||
const buttons = (
|
||||
@ -50,8 +62,18 @@ const EmptyFilterContainer = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ filesStore, selectedFolderStore }) => ({
|
||||
fetchFiles: filesStore.fetchFiles,
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
setIsLoading: filesStore.setIsLoading,
|
||||
}))(withTranslation(["Files", "Common"])(observer(EmptyFilterContainer)));
|
||||
export default inject(
|
||||
({ filesStore, selectedFolderStore, treeFoldersStore }) => {
|
||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
|
||||
return {
|
||||
fetchFiles: filesStore.fetchFiles,
|
||||
fetchRooms: filesStore.fetchRooms,
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
setIsLoading: filesStore.setIsLoading,
|
||||
isRooms,
|
||||
};
|
||||
}
|
||||
)(withTranslation(["Files", "Common"])(observer(EmptyFilterContainer)));
|
||||
|
@ -63,19 +63,49 @@ export default inject(
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
}) => {
|
||||
const { filter, roomsFilter } = filesStore;
|
||||
|
||||
const {
|
||||
authorType,
|
||||
search,
|
||||
withSubfolders,
|
||||
filterType,
|
||||
} = filesStore.filter;
|
||||
const { isPrivacyFolder } = treeFoldersStore;
|
||||
searchInContent,
|
||||
} = filter;
|
||||
const {
|
||||
subjectId,
|
||||
filterValue,
|
||||
type,
|
||||
withSubfolders: withRoomsSubfolders,
|
||||
searchInContent: searchInContentRooms,
|
||||
tags,
|
||||
withoutTags,
|
||||
} = roomsFilter;
|
||||
|
||||
const {
|
||||
isPrivacyFolder,
|
||||
isRoomsFolder,
|
||||
isArchiveFolder,
|
||||
} = treeFoldersStore;
|
||||
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
|
||||
const { setCreateRoomDialogVisible } = dialogsStore;
|
||||
|
||||
const isFiltered =
|
||||
(authorType || search || !withSubfolders || filterType) &&
|
||||
!(isPrivacyFolder && isMobile);
|
||||
const isFiltered = isRooms
|
||||
? filterValue ||
|
||||
type ||
|
||||
withRoomsSubfolders ||
|
||||
searchInContentRooms ||
|
||||
subjectId ||
|
||||
tags ||
|
||||
withoutTags
|
||||
: (authorType ||
|
||||
search ||
|
||||
!withSubfolders ||
|
||||
filterType ||
|
||||
searchInContent) &&
|
||||
!(isPrivacyFolder && isMobile);
|
||||
|
||||
return {
|
||||
theme: auth.settingsStore.theme,
|
||||
|
@ -7,9 +7,18 @@ const StyledMain = styled.main`
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
height: auto;
|
||||
|
@ -1,10 +1,12 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { ADS_TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
|
||||
import SnackBar from "@docspace/components/snackbar";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
import difference from "lodash/difference";
|
||||
|
||||
import { ADS_TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
|
||||
|
||||
import { getBannerAttribute } from "@docspace/components/utils/banner";
|
||||
|
||||
import SnackBar from "@docspace/components/snackbar";
|
||||
|
||||
const bannerHOC = (props) => {
|
||||
const { firstLoad, setMaintenanceExist } = props;
|
||||
|
||||
@ -63,17 +65,12 @@ const bannerHOC = (props) => {
|
||||
};
|
||||
|
||||
return htmlLink && !firstLoad ? (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<SnackBar
|
||||
sectionWidth={context.sectionWidth}
|
||||
onLoad={onLoad}
|
||||
clickAction={onClose}
|
||||
isCampaigns={true}
|
||||
htmlContent={htmlLink}
|
||||
/>
|
||||
)}
|
||||
</Consumer>
|
||||
<SnackBar
|
||||
onLoad={onLoad}
|
||||
clickAction={onClose}
|
||||
isCampaigns={true}
|
||||
htmlContent={htmlLink}
|
||||
/>
|
||||
) : null;
|
||||
};
|
||||
|
78
packages/client/src/components/MainBar/index.js
Normal file
78
packages/client/src/components/MainBar/index.js
Normal file
@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
import Bar from "./Bar";
|
||||
|
||||
import SnackBar from "@docspace/components/snackbar";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: calc(100% + 16px);
|
||||
max-width: calc(100% + 16px);
|
||||
|
||||
margin-right: -16px;
|
||||
margin-top: 48px;
|
||||
`}
|
||||
|
||||
#bar-banner {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
#bar-frame {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
//TODO: remove commented code after update bar logic
|
||||
|
||||
const MainBar = ({
|
||||
firstLoad,
|
||||
checkedMaintenance,
|
||||
snackbarExist,
|
||||
setMaintenanceExist,
|
||||
}) => {
|
||||
// const [isVisible, setIsVisible] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
// setTimeout(() => setIsVisible(true), 9000);
|
||||
return () => setMaintenanceExist && setMaintenanceExist(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledContainer id={"main-bar"} className={"main-bar"}>
|
||||
{checkedMaintenance && !snackbarExist && (
|
||||
<Bar firstLoad={firstLoad} setMaintenanceExist={setMaintenanceExist} />
|
||||
)}
|
||||
{/* {isVisible && (
|
||||
<SnackBar
|
||||
headerText={"Rooms is about to be exceeded: 10 / 12"}
|
||||
text={
|
||||
"You can archived the unnecessary rooms or click here to find a better pricing plan for your portal."
|
||||
}
|
||||
isCampaigns={false}
|
||||
opacity={1}
|
||||
onLoad={() => console.log("load snackbar")}
|
||||
/>
|
||||
)} */}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore }) => {
|
||||
const {
|
||||
checkedMaintenance,
|
||||
setMaintenanceExist,
|
||||
snackbarExist,
|
||||
} = auth.settingsStore;
|
||||
|
||||
const { firstLoad } = filesStore;
|
||||
|
||||
return { firstLoad, checkedMaintenance, snackbarExist, setMaintenanceExist };
|
||||
})(observer(MainBar));
|
@ -1,83 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import difference from "lodash/difference";
|
||||
|
||||
import SnackBar from "@docspace/components/snackbar";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
import { getBannerAttribute } from "@docspace/components/utils/banner";
|
||||
|
||||
import { ADS_TIMEOUT } from "SRC_DIR/helpers/constants";
|
||||
|
||||
const bannerHOC = (props) => {
|
||||
const { firstLoad, setMaintenanceExist } = props;
|
||||
|
||||
const [htmlLink, setHtmlLink] = useState();
|
||||
const [campaigns, setCampaigns] = useState();
|
||||
|
||||
const { loadLanguagePath } = getBannerAttribute();
|
||||
|
||||
const bar = (localStorage.getItem("bar") || "")
|
||||
.split(",")
|
||||
.filter((bar) => bar.length > 0);
|
||||
|
||||
const updateBanner = async () => {
|
||||
const closed = JSON.parse(localStorage.getItem("barClose"));
|
||||
const banner = difference(bar, closed);
|
||||
let index = Number(localStorage.getItem("barIndex") || 0);
|
||||
|
||||
if (banner.length < 1 || index + 1 >= banner.length) {
|
||||
index = 0;
|
||||
} else {
|
||||
index++;
|
||||
}
|
||||
|
||||
try {
|
||||
const [htmlUrl, campaigns] = await loadLanguagePath();
|
||||
setHtmlLink(htmlUrl);
|
||||
setCampaigns(campaigns);
|
||||
} catch (e) {
|
||||
updateBanner();
|
||||
}
|
||||
|
||||
localStorage.setItem("barIndex", index);
|
||||
return;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const updateTimeout = setTimeout(() => updateBanner(), 1000);
|
||||
const updateInterval = setInterval(updateBanner, ADS_TIMEOUT);
|
||||
|
||||
return () => {
|
||||
clearTimeout(updateTimeout);
|
||||
clearInterval(updateInterval);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onClose = () => {
|
||||
setMaintenanceExist(false);
|
||||
const closeItems = JSON.parse(localStorage.getItem("barClose")) || [];
|
||||
const closed =
|
||||
closeItems.length > 0 ? [...closeItems, campaigns] : [campaigns];
|
||||
localStorage.setItem("barClose", JSON.stringify(closed));
|
||||
setHtmlLink(null);
|
||||
};
|
||||
|
||||
const onLoad = () => {
|
||||
setMaintenanceExist(true);
|
||||
};
|
||||
|
||||
return htmlLink && !firstLoad ? (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<SnackBar
|
||||
sectionWidth={context.sectionWidth}
|
||||
onLoad={onLoad}
|
||||
clickAction={onClose}
|
||||
isCampaigns={true}
|
||||
htmlContent={htmlLink}
|
||||
/>
|
||||
)}
|
||||
</Consumer>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default bannerHOC;
|
@ -82,7 +82,13 @@ const StyledSimpleUserRow = styled(Row)`
|
||||
|
||||
.styled-element {
|
||||
height: 32px;
|
||||
margin-right: 7px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.checkbox {
|
||||
padding-right: 5px !important;
|
||||
:hover {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -2,4 +2,3 @@ export { default as SectionHeaderContent } from "./Header";
|
||||
export { default as SectionBodyContent } from "./Body";
|
||||
export { default as SectionFilterContent } from "./Filter";
|
||||
export { default as SectionPagingContent } from "./Paging";
|
||||
export { default as Bar } from "./Bar";
|
||||
|
@ -18,7 +18,6 @@ import {
|
||||
SectionBodyContent,
|
||||
SectionFilterContent,
|
||||
SectionPagingContent,
|
||||
Bar,
|
||||
} from "./Section";
|
||||
|
||||
import Dialogs from "./Section/Body/Dialogs"; //TODO: Move dialogs to another folder
|
||||
@ -87,11 +86,7 @@ const PureHome = ({
|
||||
<Section.SectionHeader>
|
||||
<SectionHeaderContent />
|
||||
</Section.SectionHeader>
|
||||
<Section.SectionBar>
|
||||
{checkedMaintenance && !snackbarExist && (
|
||||
<Bar setMaintenanceExist={setMaintenanceExist} />
|
||||
)}
|
||||
</Section.SectionBar>
|
||||
|
||||
<Section.SectionFilter>
|
||||
<SectionFilterContent />
|
||||
</Section.SectionFilter>
|
||||
|
@ -147,9 +147,7 @@ const SectionFilterContent = ({
|
||||
const owner = getOwner(data) || null;
|
||||
|
||||
const subjectId =
|
||||
owner === FilterKeys.other
|
||||
? null
|
||||
: owner === FilterKeys.me
|
||||
owner === FilterKeys.other || owner === FilterKeys.me
|
||||
? userId
|
||||
: owner;
|
||||
|
||||
@ -182,7 +180,7 @@ const SectionFilterContent = ({
|
||||
newFilter.withoutTags = false;
|
||||
}
|
||||
|
||||
newFilter.withoutMe = withoutMe;
|
||||
newFilter.excludeSubject = withoutMe;
|
||||
// newFilter.withSubfolders = withSubfolders;
|
||||
// newFilter.searchInContent = withContent;
|
||||
|
||||
@ -192,11 +190,8 @@ const SectionFilterContent = ({
|
||||
} else {
|
||||
const filterType = getFilterType(data) || null;
|
||||
|
||||
const authorType = !!getAuthorType(data)
|
||||
? getAuthorType(data).includes("user_")
|
||||
? getAuthorType(data)
|
||||
: `user_${getAuthorType(data)}`
|
||||
: null;
|
||||
const authorType = getAuthorType(data);
|
||||
|
||||
const withSubfolders = getSearchParams(data);
|
||||
const withContent = getFilterContent(data);
|
||||
|
||||
@ -205,7 +200,14 @@ const SectionFilterContent = ({
|
||||
|
||||
newFilter.filterType = filterType;
|
||||
|
||||
newFilter.authorType = authorType;
|
||||
if (authorType === FilterKeys.me || authorType === FilterKeys.other) {
|
||||
newFilter.authorType = `user_${userId}`;
|
||||
newFilter.excludeSubject = authorType === FilterKeys.other;
|
||||
} else {
|
||||
newFilter.authorType = authorType ? `user_${authorType}` : null;
|
||||
newFilter.excludeSubject = null;
|
||||
}
|
||||
|
||||
newFilter.withSubfolders =
|
||||
withSubfolders === FilterKeys.excludeSubfolders ? "false" : "true";
|
||||
newFilter.searchInContent = withContent === "true" ? "true" : null;
|
||||
@ -218,6 +220,7 @@ const SectionFilterContent = ({
|
||||
}
|
||||
},
|
||||
[
|
||||
isRooms,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
setIsLoading,
|
||||
@ -251,6 +254,7 @@ const SectionFilterContent = ({
|
||||
}
|
||||
},
|
||||
[
|
||||
isRooms,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
@ -283,6 +287,7 @@ const SectionFilterContent = ({
|
||||
}
|
||||
},
|
||||
[
|
||||
isRooms,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
@ -369,7 +374,11 @@ const SectionFilterContent = ({
|
||||
|
||||
if (roomsFilter.subjectId) {
|
||||
const isMe = userId === roomsFilter.subjectId;
|
||||
let label = isMe ? t("Common:MeLabel") : null;
|
||||
let label = isMe
|
||||
? roomsFilter.excludeSubject
|
||||
? t("Common:OtherLabel")
|
||||
: t("Common:MeLabel")
|
||||
: null;
|
||||
|
||||
if (!isMe) {
|
||||
const user = await getUser(roomsFilter.subjectId);
|
||||
@ -384,14 +393,6 @@ const SectionFilterContent = ({
|
||||
});
|
||||
}
|
||||
|
||||
if (roomsFilter.withoutMe) {
|
||||
filterValues.push({
|
||||
key: FilterKeys.other,
|
||||
group: FilterGroups.roomFilterOwner,
|
||||
label: t("Common:OtherLabel"),
|
||||
});
|
||||
}
|
||||
|
||||
// if (roomsFilter.withoutTags) {
|
||||
// filterValues.push({
|
||||
// key: [t("NoTag")],
|
||||
@ -468,11 +469,28 @@ const SectionFilterContent = ({
|
||||
}
|
||||
|
||||
if (filter.authorType) {
|
||||
const user = await getUser(filter.authorType.replace("user_", ""));
|
||||
const isMe = userId === filter.authorType.replace("user_", "");
|
||||
|
||||
let label = isMe
|
||||
? filter.excludeSubject
|
||||
? t("Common:OtherLabel")
|
||||
: t("Common:MeLabel")
|
||||
: null;
|
||||
|
||||
if (!isMe) {
|
||||
const user = await getUser(filter.authorType.replace("user_", ""));
|
||||
|
||||
label = user.displayName;
|
||||
}
|
||||
|
||||
filterValues.push({
|
||||
key: `${filter.authorType}`,
|
||||
key: isMe
|
||||
? filter.excludeSubject
|
||||
? FilterKeys.other
|
||||
: FilterKeys.me
|
||||
: filter.authorType.replace("user_", ""),
|
||||
group: FilterGroups.filterAuthor,
|
||||
label: user.displayName,
|
||||
label: label,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -483,11 +501,12 @@ const SectionFilterContent = ({
|
||||
filter.authorType,
|
||||
filter.filterType,
|
||||
filter.searchInContent,
|
||||
filter.excludeSubject,
|
||||
roomsFilter.type,
|
||||
roomsFilter.subjectId,
|
||||
roomsFilter.tags,
|
||||
roomsFilter.tags?.length,
|
||||
roomsFilter.withoutMe,
|
||||
roomsFilter.excludeSubject,
|
||||
roomsFilter.withoutTags,
|
||||
// roomsFilter.withSubfolders,
|
||||
// roomsFilter.searchInContent,
|
||||
@ -753,20 +772,33 @@ const SectionFilterContent = ({
|
||||
}
|
||||
|
||||
if (!isPersonalRoom) {
|
||||
filterOptions.push(
|
||||
const authorOption = [
|
||||
{
|
||||
key: FilterGroups.filterAuthor,
|
||||
group: FilterGroups.filterAuthor,
|
||||
label: t("ByAuthor"),
|
||||
isHeader: true,
|
||||
withMultiItems: true,
|
||||
},
|
||||
{
|
||||
key: "user",
|
||||
key: FilterKeys.me,
|
||||
group: FilterGroups.filterAuthor,
|
||||
label: t("Common:MeLabel"),
|
||||
},
|
||||
{
|
||||
key: FilterKeys.other,
|
||||
group: FilterGroups.filterAuthor,
|
||||
label: t("Common:OtherLabel"),
|
||||
},
|
||||
{
|
||||
key: FilterKeys.user,
|
||||
group: FilterGroups.filterAuthor,
|
||||
label: t("Translations:AddAuthor"),
|
||||
isSelector: true,
|
||||
}
|
||||
);
|
||||
},
|
||||
];
|
||||
|
||||
filterOptions.push(...authorOption);
|
||||
}
|
||||
|
||||
filterOptions.push(...typeOptions);
|
||||
@ -934,7 +966,7 @@ const SectionFilterContent = ({
|
||||
|
||||
if (group === FilterGroups.roomFilterOwner) {
|
||||
newFilter.subjectId = null;
|
||||
newFilter.withoutMe = false;
|
||||
newFilter.excludeSubject = false;
|
||||
}
|
||||
|
||||
if (group === FilterGroups.roomFilterTags) {
|
||||
@ -971,11 +1003,13 @@ const SectionFilterContent = ({
|
||||
);
|
||||
} else {
|
||||
const newFilter = filter.clone();
|
||||
|
||||
if (group === FilterGroups.filterType) {
|
||||
newFilter.filterType = null;
|
||||
}
|
||||
if (group === FilterGroups.filterAuthor) {
|
||||
newFilter.authorType = null;
|
||||
newFilter.excludeSubject = null;
|
||||
}
|
||||
if (group === FilterGroups.filterFolders) {
|
||||
newFilter.withSubfolders = "true";
|
||||
@ -994,6 +1028,7 @@ const SectionFilterContent = ({
|
||||
}
|
||||
},
|
||||
[
|
||||
isRooms,
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
setIsLoading,
|
||||
|
@ -4,12 +4,7 @@ import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
import {
|
||||
AppServerConfig,
|
||||
FileAction,
|
||||
FolderType,
|
||||
RoomSearchArea,
|
||||
} from "@docspace/common/constants";
|
||||
import { AppServerConfig } from "@docspace/common/constants";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { isMobile, isTablet, isMobileOnly } from "react-device-detect";
|
||||
import DropDownItem from "@docspace/components/drop-down-item";
|
||||
@ -475,6 +470,8 @@ class SectionHeaderContent extends React.Component {
|
||||
isHeaderChecked,
|
||||
isHeaderIndeterminate,
|
||||
showText,
|
||||
toggleInfoPanel,
|
||||
isRoomsFolder,
|
||||
} = this.props;
|
||||
const menuItems = this.getMenuItems();
|
||||
const isLoading = !title || !tReady;
|
||||
@ -524,6 +521,8 @@ class SectionHeaderContent extends React.Component {
|
||||
titles={{
|
||||
trash: t("EmptyRecycleBin"),
|
||||
}}
|
||||
withMenu={!isRoomsFolder}
|
||||
onPlusClick={this.onCreateRoom}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
@ -2,4 +2,3 @@ export { default as SectionHeaderContent } from "./Header";
|
||||
export { default as SectionBodyContent } from "./Body";
|
||||
export { default as SectionFilterContent } from "./Filter";
|
||||
export { default as SectionPagingContent } from "./Paging";
|
||||
export { default as Bar } from "./Bar";
|
||||
|
@ -21,7 +21,6 @@ import {
|
||||
SectionFilterContent,
|
||||
SectionHeaderContent,
|
||||
SectionPagingContent,
|
||||
Bar,
|
||||
} from "./Section";
|
||||
import MediaViewer from "./MediaViewer";
|
||||
import DragTooltip from "../../components/DragTooltip";
|
||||
@ -536,16 +535,6 @@ class PureHome extends React.Component {
|
||||
)}
|
||||
</Section.SectionHeader>
|
||||
|
||||
<Section.SectionBar>
|
||||
{checkedMaintenance && !snackbarExist && (
|
||||
<Bar
|
||||
firstLoad={firstLoad}
|
||||
personal={personal}
|
||||
setMaintenanceExist={setMaintenanceExist}
|
||||
/>
|
||||
)}
|
||||
</Section.SectionBar>
|
||||
|
||||
<Section.SectionFilter>
|
||||
{isFrame ? (
|
||||
showFilter && <SectionFilterContent />
|
||||
|
@ -847,16 +847,6 @@ class FilesStore {
|
||||
|
||||
if (folderId) setSelectedNode([folderId + ""]);
|
||||
|
||||
const searchArea = folderId
|
||||
? folderId === roomsFolderId
|
||||
? RoomSearchArea.Active
|
||||
: RoomSearchArea.Archive
|
||||
: RoomSearchArea.Active;
|
||||
|
||||
if (filterData.searchArea !== searchArea) {
|
||||
filterData.searchArea = searchArea;
|
||||
}
|
||||
|
||||
const request = () =>
|
||||
api.rooms
|
||||
.getRooms(filterData)
|
||||
|
@ -14,6 +14,7 @@ const DEFAULT_AUTHOR_TYPE = null;
|
||||
const DEFAULT_SELECTED_ITEM = {};
|
||||
const DEFAULT_FOLDER = "@my";
|
||||
const DEFAULT_SEARCH_IN_CONTENT = null;
|
||||
const DEFAULT_EXCLUDE_SUBJECT = null;
|
||||
|
||||
const SEARCH_TYPE = "withSubfolders";
|
||||
const AUTHOR_TYPE = "authorType";
|
||||
@ -27,6 +28,7 @@ const PAGE_COUNT = "count";
|
||||
const FOLDER = "folder";
|
||||
const PREVIEW = "preview";
|
||||
const SEARCH_IN_CONTENT = "searchInContent";
|
||||
const EXCLUDE_SUBJECT = "excludeSubject";
|
||||
|
||||
// TODO: add next params
|
||||
// subjectGroup bool
|
||||
@ -69,6 +71,8 @@ class FilesFilter {
|
||||
const folder = urlFilter[FOLDER] || defaultFilter.folder;
|
||||
const searchInContent =
|
||||
urlFilter[SEARCH_IN_CONTENT] || defaultFilter.searchInContent;
|
||||
const excludeSubject =
|
||||
urlFilter[EXCLUDE_SUBJECT] || defaultFilter.excludeSubject;
|
||||
|
||||
const newFilter = new FilesFilter(
|
||||
page,
|
||||
@ -83,7 +87,8 @@ class FilesFilter {
|
||||
authorType,
|
||||
defaultFilter.selectedItem,
|
||||
folder,
|
||||
searchInContent
|
||||
searchInContent,
|
||||
excludeSubject
|
||||
);
|
||||
|
||||
return newFilter;
|
||||
@ -102,7 +107,8 @@ class FilesFilter {
|
||||
authorType = DEFAULT_AUTHOR_TYPE,
|
||||
selectedItem = DEFAULT_SELECTED_ITEM,
|
||||
folder = DEFAULT_FOLDER,
|
||||
searchInContent = DEFAULT_SEARCH_IN_CONTENT
|
||||
searchInContent = DEFAULT_SEARCH_IN_CONTENT,
|
||||
excludeSubject = DEFAULT_EXCLUDE_SUBJECT
|
||||
) {
|
||||
this.page = page;
|
||||
this.pageCount = pageCount;
|
||||
@ -117,6 +123,7 @@ class FilesFilter {
|
||||
this.selectedItem = selectedItem;
|
||||
this.folder = folder;
|
||||
this.searchInContent = searchInContent;
|
||||
this.excludeSubject = excludeSubject;
|
||||
}
|
||||
|
||||
getStartIndex = () => {
|
||||
@ -143,6 +150,7 @@ class FilesFilter {
|
||||
withSubfolders,
|
||||
startIndex,
|
||||
searchInContent,
|
||||
excludeSubject,
|
||||
} = this;
|
||||
|
||||
const isFilterSet =
|
||||
@ -165,6 +173,7 @@ class FilesFilter {
|
||||
withSubfolders: isFilterSet,
|
||||
userIdOrGroupId,
|
||||
searchInContent,
|
||||
excludeSubject,
|
||||
};
|
||||
|
||||
const str = toUrlParams(dtoFilter, true);
|
||||
@ -183,6 +192,7 @@ class FilesFilter {
|
||||
sortOrder,
|
||||
withSubfolders,
|
||||
searchInContent,
|
||||
excludeSubject,
|
||||
} = this;
|
||||
|
||||
const dtoFilter = {};
|
||||
@ -219,6 +229,10 @@ class FilesFilter {
|
||||
dtoFilter[SEARCH_IN_CONTENT] = searchInContent;
|
||||
}
|
||||
|
||||
if (excludeSubject) {
|
||||
dtoFilter[EXCLUDE_SUBJECT] = excludeSubject;
|
||||
}
|
||||
|
||||
dtoFilter[PAGE] = page + 1;
|
||||
dtoFilter[SORT_BY] = sortBy;
|
||||
dtoFilter[SORT_ORDER] = sortOrder;
|
||||
@ -245,7 +259,8 @@ class FilesFilter {
|
||||
this.authorType,
|
||||
this.selectedItem,
|
||||
this.folder,
|
||||
this.searchInContent
|
||||
this.searchInContent,
|
||||
this.excludeSubject
|
||||
);
|
||||
}
|
||||
|
||||
@ -262,7 +277,8 @@ class FilesFilter {
|
||||
this.selectedItem.key === filter.selectedItem.key &&
|
||||
this.folder === filter.folder &&
|
||||
this.pageCount === filter.pageCount &&
|
||||
this.searchInContent === filter.searchInContent;
|
||||
this.searchInContent === filter.searchInContent &&
|
||||
this.excludeSubject === filter.excludeSubject;
|
||||
|
||||
return equals;
|
||||
}
|
||||
|
@ -34,8 +34,8 @@ const DEFAULT_SORT_BY = "DateAndTime";
|
||||
const SORT_ORDER = "sortorder";
|
||||
const DEFAULT_SORT_ORDER = "descending";
|
||||
|
||||
const WITHOUT_ME = "withoutMe";
|
||||
const DEFAULT_WITHOUT_ME = false;
|
||||
const EXCLUDE_SUBJECT = "excludeSubject";
|
||||
const DEFAULT_EXCLUDE_SUBJECT = false;
|
||||
|
||||
const WITHOUT_TAGS = "withoutTags";
|
||||
const DEFAULT_WITHOUT_TAGS = false;
|
||||
@ -62,7 +62,7 @@ class RoomsFilter {
|
||||
defaultFilter.pageCount;
|
||||
|
||||
const filterValue =
|
||||
(urlFilter[FILTER_VALUE] && +urlFilter[FILTER_VALUE]) ||
|
||||
(urlFilter[FILTER_VALUE] && urlFilter[FILTER_VALUE]) ||
|
||||
defaultFilter.filterValue;
|
||||
|
||||
const type = (urlFilter[TYPE] && urlFilter[TYPE]) || defaultFilter.type;
|
||||
@ -94,7 +94,8 @@ class RoomsFilter {
|
||||
|
||||
const sortOrder = urlFilter[SORT_ORDER] || defaultFilter.sortOrder;
|
||||
|
||||
const withoutMe = urlFilter[WITHOUT_ME] || defaultFilter.withoutMe;
|
||||
const excludeSubject =
|
||||
urlFilter[EXCLUDE_SUBJECT] || defaultFilter.excludeSubject;
|
||||
|
||||
const withoutTags = urlFilter[WITHOUT_TAGS] || defaultFilter.withoutTags;
|
||||
|
||||
@ -111,7 +112,7 @@ class RoomsFilter {
|
||||
tags,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
withoutMe,
|
||||
excludeSubject,
|
||||
withoutTags
|
||||
);
|
||||
|
||||
@ -131,7 +132,7 @@ class RoomsFilter {
|
||||
tags = DEFAULT_TAGS,
|
||||
sortBy = DEFAULT_SORT_BY,
|
||||
sortOrder = DEFAULT_SORT_ORDER,
|
||||
withoutMe = DEFAULT_WITHOUT_ME,
|
||||
excludeSubject = DEFAULT_EXCLUDE_SUBJECT,
|
||||
withoutTags = DEFAULT_WITHOUT_TAGS
|
||||
) {
|
||||
this.page = page;
|
||||
@ -146,7 +147,7 @@ class RoomsFilter {
|
||||
this.tags = tags;
|
||||
this.sortBy = sortBy;
|
||||
this.sortOrder = sortOrder;
|
||||
this.withoutMe = withoutMe;
|
||||
this.excludeSubject = excludeSubject;
|
||||
this.withoutTags = withoutTags;
|
||||
}
|
||||
|
||||
@ -175,7 +176,7 @@ class RoomsFilter {
|
||||
tags,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
withoutMe,
|
||||
excludeSubject,
|
||||
withoutTags,
|
||||
} = this;
|
||||
|
||||
@ -192,7 +193,7 @@ class RoomsFilter {
|
||||
tags: tags,
|
||||
sortBy: sortBy,
|
||||
sortOrder: sortOrder,
|
||||
withoutMe: withoutMe,
|
||||
excludeSubject: excludeSubject,
|
||||
withoutTags: withoutTags,
|
||||
};
|
||||
|
||||
@ -213,7 +214,7 @@ class RoomsFilter {
|
||||
tags,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
withoutMe,
|
||||
excludeSubject,
|
||||
withoutTags,
|
||||
} = this;
|
||||
|
||||
@ -247,8 +248,8 @@ class RoomsFilter {
|
||||
dtoFilter[PAGE_COUNT] = pageCount;
|
||||
}
|
||||
|
||||
if (withoutMe) {
|
||||
dtoFilter[WITHOUT_ME] = withoutMe;
|
||||
if (excludeSubject) {
|
||||
dtoFilter[EXCLUDE_SUBJECT] = excludeSubject;
|
||||
}
|
||||
|
||||
if (withoutTags) {
|
||||
@ -282,7 +283,7 @@ class RoomsFilter {
|
||||
this.tags,
|
||||
this.sortBy,
|
||||
this.sortOrder,
|
||||
this.withoutMe,
|
||||
this.excludeSubject,
|
||||
this.withoutTags
|
||||
);
|
||||
}
|
||||
@ -308,7 +309,7 @@ class RoomsFilter {
|
||||
tagsEqual &&
|
||||
this.sortBy === filter.sortBy &&
|
||||
this.sortOrder === filter.sortOrder &&
|
||||
this.withoutMe === filter.withoutMe &&
|
||||
this.excludeSubject === filter.excludeSubject &&
|
||||
this.withoutTags === filter.withoutTags;
|
||||
|
||||
return equals;
|
||||
|
@ -68,8 +68,7 @@ const StyledArticle = styled.article`
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: ${(props) =>
|
||||
props.isBannerVisible ? "-16px" : "64px"} !important;
|
||||
top: ${(props) => (props.isBannerVisible ? "-16px" : "64px")} !important;
|
||||
height: calc(100% - 64px) !important;
|
||||
`}
|
||||
|
||||
|
@ -278,12 +278,7 @@ const FilterBlock = ({
|
||||
show: false,
|
||||
}));
|
||||
|
||||
changeFilterValue(
|
||||
showSelector.group,
|
||||
items[0].key,
|
||||
false,
|
||||
items[0].label
|
||||
);
|
||||
changeFilterValue(showSelector.group, items[0].id, false, items[0].label);
|
||||
},
|
||||
[showSelector.group, changeFilterValue]
|
||||
);
|
||||
|
@ -41,6 +41,8 @@ const Navigation = ({
|
||||
toggleInfoPanel,
|
||||
isInfoPanelVisible,
|
||||
titles,
|
||||
withMenu,
|
||||
onPlusClick,
|
||||
...rest
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
@ -184,6 +186,8 @@ const Navigation = ({
|
||||
isInfoPanelVisible={isInfoPanelVisible}
|
||||
isDesktop={isDesktop}
|
||||
titles={titles}
|
||||
withMenu={withMenu}
|
||||
onPlusClick={onPlusClick}
|
||||
/>
|
||||
</StyledContainer>
|
||||
{isDesktop && (
|
||||
|
@ -102,6 +102,8 @@ const ControlButtons = ({
|
||||
toggleDropBox,
|
||||
isDesktop,
|
||||
titles,
|
||||
withMenu,
|
||||
onPlusClick,
|
||||
}) => {
|
||||
const toggleInfoPanelAction = () => {
|
||||
toggleInfoPanel && toggleInfoPanel();
|
||||
@ -116,6 +118,8 @@ const ControlButtons = ({
|
||||
<PlusButton
|
||||
className="add-button"
|
||||
getData={getContextOptionsPlus}
|
||||
withMenu={withMenu}
|
||||
onPlusClick={onPlusClick}
|
||||
/>
|
||||
)}
|
||||
{!personal && (
|
||||
@ -144,6 +148,8 @@ const ControlButtons = ({
|
||||
<PlusButton
|
||||
className="add-button"
|
||||
getData={getContextOptionsPlus}
|
||||
withMenu={withMenu}
|
||||
onPlusClick={onPlusClick}
|
||||
/>
|
||||
)}
|
||||
{!isDesktop && (
|
||||
|
@ -8,7 +8,7 @@ const PlusButton = (props) => {
|
||||
const ref = useRef(null);
|
||||
const menuRef = useRef(null);
|
||||
|
||||
const { className, getData } = props;
|
||||
const { className, getData, withMenu, onPlusClick } = props;
|
||||
|
||||
const toggle = (e, isOpen) => {
|
||||
isOpen ? menuRef.current.show(e) : menuRef.current.hide(e);
|
||||
@ -16,7 +16,8 @@ const PlusButton = (props) => {
|
||||
};
|
||||
|
||||
const onClick = (e) => {
|
||||
toggle(e, !isOpen);
|
||||
if (withMenu) toggle(e, !isOpen);
|
||||
else onPlusClick && onPlusClick();
|
||||
};
|
||||
|
||||
const onHide = () => {
|
||||
@ -48,6 +49,11 @@ const PlusButton = (props) => {
|
||||
PlusButton.propTypes = {
|
||||
className: PropTypes.string,
|
||||
getData: PropTypes.func.isRequired,
|
||||
onPlusClick: PropTypes.func,
|
||||
};
|
||||
|
||||
PlusButton.defaultProps = {
|
||||
withMenu: true,
|
||||
};
|
||||
|
||||
export default PlusButton;
|
||||
|
@ -16,7 +16,7 @@ import SubSectionHeader from "./sub-components/section-header";
|
||||
import SubSectionFilter from "./sub-components/section-filter";
|
||||
import SubSectionBody from "./sub-components/section-body";
|
||||
import SubSectionBodyContent from "./sub-components/section-body-content";
|
||||
import SubSectionBar from "./sub-components/section-bar";
|
||||
|
||||
import SubSectionPaging from "./sub-components/section-paging";
|
||||
//import SectionToggler from "./sub-components/section-toggler";
|
||||
import InfoPanel from "./sub-components/info-panel";
|
||||
@ -35,78 +35,11 @@ const StyledSelectoWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledMainBar = styled.div`
|
||||
box-sizing: border-box;
|
||||
|
||||
${NoUserSelect}
|
||||
|
||||
margin-left: -20px;
|
||||
|
||||
width: calc(100% + 20px);
|
||||
|
||||
#bar-banner {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
#bar-frame {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
width: calc(100% + 16px);
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
width: calc(100% + 32px) !important;
|
||||
margin-left: -16px;
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
|
||||
#bar-frame {
|
||||
min-width: 100vw;
|
||||
}
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
!props.isSectionHeaderAvailable &&
|
||||
css`
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
margin-left: 0 !important;
|
||||
box-sizing: border-box;
|
||||
`}
|
||||
`}
|
||||
`;
|
||||
|
||||
function SectionHeader() {
|
||||
return null;
|
||||
}
|
||||
SectionHeader.displayName = "SectionHeader";
|
||||
|
||||
function SectionBar() {
|
||||
return null;
|
||||
}
|
||||
|
||||
SectionBar.displayName = "SectionBar";
|
||||
|
||||
function SectionFilter() {
|
||||
return null;
|
||||
}
|
||||
@ -136,7 +69,7 @@ class Section extends React.Component {
|
||||
static SectionHeader = SectionHeader;
|
||||
static SectionFilter = SectionFilter;
|
||||
static SectionBody = SectionBody;
|
||||
static SectionBar = SectionBar;
|
||||
|
||||
static SectionPaging = SectionPaging;
|
||||
static InfoPanelBody = InfoPanelBody;
|
||||
static InfoPanelHeader = InfoPanelHeader;
|
||||
@ -223,7 +156,7 @@ class Section extends React.Component {
|
||||
} = this.props;
|
||||
|
||||
let sectionHeaderContent = null;
|
||||
let sectionBarContent = null;
|
||||
|
||||
let sectionFilterContent = null;
|
||||
let sectionPagingContent = null;
|
||||
let sectionBodyContent = null;
|
||||
@ -241,9 +174,7 @@ class Section extends React.Component {
|
||||
case SectionFilter.displayName:
|
||||
sectionFilterContent = child;
|
||||
break;
|
||||
case SectionBar.displayName:
|
||||
sectionBarContent = child;
|
||||
break;
|
||||
|
||||
case SectionPaging.displayName:
|
||||
sectionPagingContent = child;
|
||||
break;
|
||||
@ -268,7 +199,6 @@ class Section extends React.Component {
|
||||
!!sectionBodyContent ||
|
||||
isSectionFilterAvailable ||
|
||||
isSectionPagingAvailable,
|
||||
isSectionBarAvailable = !!sectionBarContent,
|
||||
isSectionAvailable =
|
||||
isSectionHeaderAvailable ||
|
||||
isSectionFilterAvailable ||
|
||||
@ -296,30 +226,10 @@ class Section extends React.Component {
|
||||
showText={showText}
|
||||
viewAs={viewAs}
|
||||
maintenanceExist={maintenanceExist}
|
||||
isSectionBarAvailable={isSectionBarAvailable}
|
||||
isSectionHeaderAvailable={isSectionHeaderAvailable}
|
||||
infoPanelIsVisible={infoPanelIsVisible}
|
||||
settingsStudio={settingsStudio}
|
||||
>
|
||||
{!isMobile && (
|
||||
<StyledMainBar
|
||||
width={width}
|
||||
id="main-bar"
|
||||
className={"main-bar"}
|
||||
showText={showText}
|
||||
isSectionHeaderAvailable={isSectionHeaderAvailable}
|
||||
infoPanelIsVisible={infoPanelIsVisible}
|
||||
>
|
||||
<SubSectionBar
|
||||
setMaintenanceExist={setMaintenanceExist}
|
||||
>
|
||||
{sectionBarContent
|
||||
? sectionBarContent.props.children
|
||||
: null}
|
||||
</SubSectionBar>
|
||||
</StyledMainBar>
|
||||
)}
|
||||
|
||||
{isSectionHeaderAvailable && !isMobile && (
|
||||
<SubSectionHeader
|
||||
maintenanceExist={maintenanceExist}
|
||||
@ -360,27 +270,6 @@ class Section extends React.Component {
|
||||
settingsStudio={settingsStudio}
|
||||
selectoRef={this.selectoRef}
|
||||
>
|
||||
{isMobile && (
|
||||
<StyledMainBar
|
||||
width={width}
|
||||
id="main-bar"
|
||||
className={"main-bar"}
|
||||
showText={showText}
|
||||
isSectionHeaderAvailable={
|
||||
isSectionHeaderAvailable
|
||||
}
|
||||
infoPanelIsVisible={infoPanelIsVisible}
|
||||
>
|
||||
<SubSectionBar
|
||||
setMaintenanceExist={setMaintenanceExist}
|
||||
>
|
||||
{sectionBarContent
|
||||
? sectionBarContent.props.children
|
||||
: null}
|
||||
</SubSectionBar>
|
||||
</StyledMainBar>
|
||||
)}
|
||||
|
||||
{isSectionHeaderAvailable && isMobile && (
|
||||
<SubSectionHeader
|
||||
className="section-body_header"
|
||||
|
@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import equal from "fast-deep-equal/react";
|
||||
|
||||
class SectionBar extends React.Component {
|
||||
componentWillUnmount() {
|
||||
this.props.setMaintenanceExist && this.props.setMaintenanceExist(false);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
return <>{children}</>;
|
||||
}
|
||||
}
|
||||
|
||||
SectionBar.displayName = "SectionBar";
|
||||
|
||||
export default SectionBar;
|
@ -71,7 +71,6 @@ const StyledSectionContainer = styled.section`
|
||||
css`
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
margin-top: 48px !important;
|
||||
`}
|
||||
|
||||
.layout-progress-bar {
|
||||
|
@ -124,13 +124,14 @@ class SnackBar extends React.Component {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{showIcon && (
|
||||
<Box className="logo">
|
||||
<StyledLogoIcon size="medium" color={textColor} />
|
||||
</Box>
|
||||
)}
|
||||
<Box className="text-container" textalign={textAlign}>
|
||||
<div className="text-container">
|
||||
<div className="header-body" textalign={textAlign}>
|
||||
{showIcon && (
|
||||
<Box className="logo">
|
||||
<StyledLogoIcon size="medium" color={textColor} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Heading
|
||||
size="xsmall"
|
||||
isInline={true}
|
||||
@ -140,40 +141,42 @@ class SnackBar extends React.Component {
|
||||
>
|
||||
{headerText}
|
||||
</Heading>
|
||||
<div className="text-body" textalign={textAlign}>
|
||||
</div>
|
||||
<div className="text-body">
|
||||
<Text
|
||||
as="p"
|
||||
className={"text"}
|
||||
color={textColor}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
noSelect
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
|
||||
{btnText && (
|
||||
<Text
|
||||
as="p"
|
||||
color={textColor}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
className="button"
|
||||
onClick={this.onActionClick}
|
||||
>
|
||||
{text}
|
||||
{btnText}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{btnText && (
|
||||
<Text
|
||||
color={textColor}
|
||||
className="button"
|
||||
onClick={this.onActionClick}
|
||||
>
|
||||
{btnText}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{countDownTime > -1 && (
|
||||
<Countdown
|
||||
date={Date.now() + countDownTime}
|
||||
renderer={this.countDownRenderer}
|
||||
onComplete={this.onActionClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</>
|
||||
{countDownTime > -1 && (
|
||||
<Countdown
|
||||
date={Date.now() + countDownTime}
|
||||
renderer={this.countDownRenderer}
|
||||
onComplete={this.onActionClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!btnText && (
|
||||
<button className="action" onClick={this.onActionClick}>
|
||||
<StyledCrossIcon size="medium" />
|
||||
<StyledCrossIcon size="small" />
|
||||
</button>
|
||||
)}
|
||||
</StyledSnackBar>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import styled from "styled-components";
|
||||
import InfoIcon from "../../../public/images/info.react.svg";
|
||||
import InfoIcon from "../../../public/images/danger.toast.react.svg";
|
||||
import commonIconsStyles from "../utils/common-icons-style";
|
||||
|
||||
const StyledLogoIcon = styled(InfoIcon)`
|
||||
|
@ -31,10 +31,6 @@ const StyledSnackBar = styled(Box)`
|
||||
background-color: ${(props) => props.backgroundColor};
|
||||
background-image: url(${(props) => props.backgroundImg || ""});
|
||||
|
||||
.logo {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -42,8 +38,24 @@ const StyledSnackBar = styled(Box)`
|
||||
gap: 5px;
|
||||
text-align: ${(props) => props.textalign};
|
||||
|
||||
.text-header {
|
||||
margin: 0;
|
||||
.header-body {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: start;
|
||||
|
||||
.text-header {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-body {
|
||||
@ -52,6 +64,12 @@ const StyledSnackBar = styled(Box)`
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
justify-content: ${(props) => props.textalign};
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,12 +79,12 @@ const StyledSnackBar = styled(Box)`
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: "#333";
|
||||
margin: 0 0 0 24px;
|
||||
margin: -2px 4px 4px 24px;
|
||||
padding: 0;
|
||||
min-width: min-content;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
padding-left: 8px;
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
@ -1,3 +0,0 @@
|
||||
export { default as CheckToastIcon } from "./check.toast.react.svg";
|
||||
export { default as DangerToastIcon } from "./danger.toast.react.svg";
|
||||
export { default as InfoToastIcon } from "./info.toast.react.svg";
|
@ -2,7 +2,9 @@ import React from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { CheckToastIcon, DangerToastIcon, InfoToastIcon } from "./svg";
|
||||
import CheckToastIcon from "../../../public/images/check.toast.react.svg";
|
||||
import DangerToastIcon from "../../../public/images/danger.toast.react.svg";
|
||||
import InfoToastIcon from "../../../public/images/info.toast.react.svg";
|
||||
|
||||
import Text from "../text";
|
||||
import {
|
||||
|
Before Width: | Height: | Size: 667 B After Width: | Height: | Size: 667 B |
Before Width: | Height: | Size: 684 B After Width: | Height: | Size: 684 B |
Before Width: | Height: | Size: 558 B After Width: | Height: | Size: 558 B |
Loading…
Reference in New Issue
Block a user