djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Do not show sidebar if it is not needed (#3198)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-02-22 14:00:03 +01:00 committed by GitHub
parent 6434f277e8
commit 0f81e158ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 266 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
View file

@ -36,7 +36,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
return (
<CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailedContent useSingleColumn>
<TopNav
href={backUrl}
title={intl.formatMessage({

2
src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
View file

@ -91,7 +91,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
disabled={disabled}
>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailedContent useSingleColumn>
<TopNav href={backHref} title={category?.name} />
<Content>
<CategoryDetailsForm

3
src/components/AppLayout/AppLayout.tsx
View file

@ -60,8 +60,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
borderColor="neutralPlain"
__maxWidth={contentMaxWidth}
margin="auto"
// @ts-ignore
__zIndex="3"
zIndex="3"
/>
</Box>
</Box>

17
src/components/AppLayout/Content.tsx
View file

@ -1,17 +1,27 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { borderHeight, savebarHeight, topBarHeight } from "./consts";
import { useContentHeight } from "./useContentHeight";
interface ContentProps {
[key: `data-${string}`]: string;
children: React.ReactNode;
noSavebar?: boolean;
noTopNav?: boolean;
}
export const Content: React.FC<ContentProps> = ({ children, ...rest }) => (
export const Content: React.FC<ContentProps> = ({
children,
noSavebar = false,
noTopNav = false,
...rest
}) => {
const { withoutSaveBar, withSaveBar } = useContentHeight();
return (
<Box
__gridArea="content"
__height={`calc(100vh - ${topBarHeight} - ${savebarHeight} - ${borderHeight})`}
__height={noSavebar ? withoutSaveBar() : withSaveBar({ noTopNav })}
overflowY="auto"
className="hide-scrollbar"
{...rest}
@ -19,3 +29,4 @@ export const Content: React.FC<ContentProps> = ({ children, ...rest }) => (
{children}
</Box>
);
};

6
src/components/AppLayout/RightSidebar.tsx
View file

@ -7,17 +7,21 @@ import { borderHeight, savebarHeight } from "./consts";
interface RightSidebarProps {
children: React.ReactNode;
className?: string;
noSavebar?: boolean;
}
export const RightSidebar: React.FC<RightSidebarProps> = ({
children,
noSavebar = false,
className,
}) => (
<Box
borderStyle="solid"
borderColor="neutralPlain"
borderLeftWidth={1}
__height={`calc(100vh - ${savebarHeight} - ${borderHeight})`}
__height={
noSavebar ? "100%" : `calc(100vh - ${savebarHeight} - ${borderHeight})`
}
position="sticky"
top={0}
overflowY="auto"

24
src/components/AppLayout/useContentHeight.test.ts Normal file
View file

@ -0,0 +1,24 @@
import { useContentHeight } from "./useContentHeight";
describe("useContentHeight", () => {
it("should return the correct height without savebar", () => {
const { withoutSaveBar } = useContentHeight();
const height = withoutSaveBar();
expect(height).toEqual("calc(100vh - 77px - 1px)");
});
it("should return the correct height with savebar", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: false });
expect(height).toEqual("calc(100vh - 77px - 64px - 1px)");
});
it("should return the correct height with savebar and no top nav", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: true });
expect(height).toEqual("calc(100vh - 0px - 64px - 1px)");
});
});

14
src/components/AppLayout/useContentHeight.ts Normal file
View file

@ -0,0 +1,14 @@
import { borderHeight, savebarHeight, topBarHeight } from "./consts";
export const useContentHeight = () => {
const withoutSaveBar = () =>
`calc(100vh - ${topBarHeight} - ${borderHeight})`;
const withSaveBar = ({ noTopNav }) => {
const topHeight = noTopNav ? "0px" : topBarHeight;
return `calc(100vh - ${topHeight} - ${savebarHeight} - ${borderHeight})`;
};
return { withoutSaveBar, withSaveBar };
};

2
src/configuration/ConfigurationPage.tsx
View file

@ -99,7 +99,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
<TopNav title={intl.formatMessage(sectionNames.configuration)}>
{isSmUp && renderVersionInfo}
</TopNav>
<Content>
<Content noSavebar>
<Box paddingX={9} __maxWidth={"1024px"} margin="auto">
{menus
.filter(menu =>

12
src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
View file

@ -1,4 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
@ -46,8 +49,10 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/>
</Button>
</TopNav>
<Content>
<Box padding={9}>
<Box
padding={9}
__height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
>
<Box marginBottom={4}>
<Text as="p">
<FormattedMessage
@ -111,7 +116,6 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
</TableBody>
</ResponsiveTable>
</Box>
</Content>
</>
);
};

8
src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
View file

@ -1,9 +1,9 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Savebar from "@dashboard/components/Savebar";
import { customerListUrl } from "@dashboard/customers/urls";
import {
@ -152,7 +152,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<>
<DetailedContent useSingleColumn>
<TopNav
href={customerListUrl()}
title={intl.formatMessage({
@ -162,7 +162,6 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
})}
/>
<Content>
<Grid>
<div>
<CustomerCreateDetails
data={data}
@ -188,7 +187,6 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
onChange={change}
/>
</div>
</Grid>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBar}
@ -196,7 +194,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
onCancel={() => navigate(customerListUrl())}
/>
</Content>
</>
</DetailedContent>
);
}}
</Form>

4
src/home/components/HomePage/HomePage.tsx
View file

@ -80,7 +80,7 @@ const HomePage: React.FC<HomePageProps> = props => {
return (
<DetailedContent>
<TopNav title={<HomeHeader userName={userName} />} />
<Content>
<Content noSavebar>
<Box paddingLeft={9} paddingRight={11}>
<CardSpacer />
<RequirePermissions
@ -155,7 +155,7 @@ const HomePage: React.FC<HomePageProps> = props => {
</Box>
</Content>
{activities && (
<RightSidebar>
<RightSidebar noSavebar>
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
>

4
src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
View file

@ -86,8 +86,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
return (
<Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => (
<DetailedContent>
<Content>
<DetailedContent useSingleColumn>
<Content noTopNav>
<Box padding={9} margin="auto" height="100vh">
<Backlink href={menuListUrl()}>
{intl.formatMessage(sectionNames.navigation)}

7
src/navigation/components/MenuListPage/MenuListPage.tsx
View file

@ -1,3 +1,7 @@
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -5,6 +9,7 @@ import { MenuFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
import { ListActions, PageListProps, SortPage } from "@dashboard/types";
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -38,7 +43,9 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
/>
</Button>
</TopNav>
<Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}>
<MenuList {...listProps} />
</Box>
</>
);
};

4
src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx
View file

@ -14,7 +14,7 @@ import TableRowLink from "@dashboard/components/TableRowLink";
import { AttributeFragment, AttributeTypeEnum } from "@dashboard/graphql";
import { renderCollection } from "@dashboard/misc";
import { ListActions, ReorderAction } from "@dashboard/types";
import { Card, TableCell } from "@material-ui/core";
import { Card, CardContent, TableCell } from "@material-ui/core";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -95,6 +95,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
</Button>
}
/>
<CardContent>
<ResponsiveTable>
<colgroup>
<col className={classes.colGrab} />
@ -182,6 +183,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
)}
</SortableTableBody>
</ResponsiveTable>
</CardContent>
</Card>
);
};

2
src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
View file

@ -118,7 +118,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailedContent useSingleColumn>
<TopNav href={pageTypeListUrl()} title={pageTitle} />
<Content>
<Grid

4
src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
View file

@ -49,10 +49,10 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
description: "header",
})}
/>
<Content>
<Content noSavebar>
<ShippingZonesList disabled={disabled} {...listProps} />
</Content>
<RightSidebar>
<RightSidebar noSavebar>
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]}
>

2
src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
View file

@ -139,7 +139,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<DetailedContent>
<DetailedContent useSingleColumn>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(commonMessages.generalInformations)}