Web:Client: move MainBar from section to global Layout and fix styles after this
This commit is contained in:
TimofeyBoyko
parent
cefb3fa6f0
commit
853fa338ce
@ -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 && !isEditor && <MainBar />}
|
||||
<IndicatorLoader />
|
||||
<ScrollToTop />
|
||||
<DialogsWrapper t={t} />
|
||||
<Main isDesktop={isDesktop}>
|
||||
<Switch>
|
||||
<PrivateRoute
|
||||
exact
|
||||
path={[
|
||||
"/",
|
||||
{!isMobileOnly && !isEditor && <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>
|
||||
|
||||
@ -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;
|
||||
|
||||
77
packages/client/src/components/MainBar/Bar.js
Normal file
77
packages/client/src/components/MainBar/Bar.js
Normal file
@ -0,0 +1,77 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
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;
|
||||
|
||||
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 ? (
|
||||
<SnackBar
|
||||
onLoad={onLoad}
|
||||
clickAction={onClose}
|
||||
isCampaigns={true}
|
||||
htmlContent={htmlLink}
|
||||
/>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default bannerHOC;
|
||||
58
packages/client/src/components/MainBar/index.js
Normal file
58
packages/client/src/components/MainBar/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
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;
|
||||
`}
|
||||
`;
|
||||
|
||||
const MainBar = ({
|
||||
firstLoad,
|
||||
checkedMaintenance,
|
||||
snackbarExist,
|
||||
setMaintenanceExist,
|
||||
}) => {
|
||||
return (
|
||||
<StyledContainer id={"main-bar"} className={"main-bar"}>
|
||||
{/* {checkedMaintenance && !snackbarExist && (
|
||||
<Bar firstLoad={firstLoad} setMaintenanceExist={setMaintenanceExist} />
|
||||
)} */}
|
||||
<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));
|
||||
@ -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;
|
||||
`}
|
||||
|
||||
|
||||
@ -71,7 +71,6 @@ const StyledSectionContainer = styled.section`
|
||||
css`
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
margin-top: 48px !important;
|
||||
`}
|
||||
|
||||
.layout-progress-bar {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user