From 5bc8e39eb7708f3f2a6f06d1df5598303708adb2 Mon Sep 17 00:00:00 2001 From: Dawid Date: Tue, 10 Jan 2023 15:24:24 +0100 Subject: [PATCH] Hide toolbar in app page (#2938) * Hide toolbar in app page * Remove back button from app frame page --- locale/defaultMessages.json | 4 - .../components/AppPage/AppPage.stories.tsx | 1 - src/apps/components/AppPage/AppPage.tsx | 58 +-------- src/apps/components/AppPage/styles.ts | 57 +-------- .../AppPage/useSettingsBreadcrumbs.ts | 38 ------ src/apps/views/App/App.tsx | 7 +- src/apps/views/AppSettings/AppSettings.tsx | 3 +- src/components/AppLayout/AppLayout.tsx | 106 +++-------------- src/components/AppLayout/styles.ts | 110 ++++++++++++++++++ 9 files changed, 132 insertions(+), 252 deletions(-) delete mode 100644 src/apps/components/AppPage/useSettingsBreadcrumbs.ts create mode 100644 src/components/AppLayout/styles.ts diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 905cd105e..7e71b98ca 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -4167,10 +4167,6 @@ "context": "searchbar placeholder", "string": "Country" }, - "UCHtG6": { - "context": "button", - "string": "About" - }, "UD7/q8": { "string": "No Products added to Order" }, diff --git a/src/apps/components/AppPage/AppPage.stories.tsx b/src/apps/components/AppPage/AppPage.stories.tsx index ae4718e16..d55d43177 100644 --- a/src/apps/components/AppPage/AppPage.stories.tsx +++ b/src/apps/components/AppPage/AppPage.stories.tsx @@ -8,7 +8,6 @@ import AppPage, { AppPageProps } from "./AppPage"; const props: AppPageProps = { data: appDetails, url: appDetails.appUrl!, - aboutHref: "", onError: () => undefined, }; diff --git a/src/apps/components/AppPage/AppPage.tsx b/src/apps/components/AppPage/AppPage.tsx index 16164fd54..998d3eafb 100644 --- a/src/apps/components/AppPage/AppPage.tsx +++ b/src/apps/components/AppPage/AppPage.tsx @@ -1,81 +1,27 @@ -import { Typography } from "@material-ui/core"; -import { appsListPath } from "@saleor/apps/urls"; -import { Backlink } from "@saleor/components/Backlink"; -import { Button } from "@saleor/components/Button"; -import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; -import Grid from "@saleor/components/Grid"; -import Hr from "@saleor/components/Hr"; import { AppQuery } from "@saleor/graphql"; -import { sectionNames } from "@saleor/intl"; -import clsx from "clsx"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; import { AppFrame } from "../AppFrame"; import { useStyles } from "./styles"; -import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs"; export interface AppPageProps { data: AppQuery["app"]; url: string; onError: () => void; - aboutHref: string; refetch?: () => void; } export const AppPage: React.FC = ({ data, url, - aboutHref, onError, refetch, }) => { - const intl = useIntl(); - const classes = useStyles({}); - const [breadcrumbs, onBreadcrumbClick] = useSettingsBreadcrumbs(); + const classes = useStyles(); return ( - - - {intl.formatMessage(sectionNames.apps)} - - -
-
- - {data?.name} - - {breadcrumbs.map(b => ( - onBreadcrumbClick(b.value)} - key={b.label} - > - {b.label} - - ))} -
-
-
- -
- - - -
- - +
{url && ( ({ - appSettingsHeader: { - "& > button, & > a": { - "&:last-child": { - marginRight: 0, - }, - marginRight: theme.spacing(2), - }, - display: "flex", - justifyContent: "flex-end", - }, - breadcrumb: { - "&:not(:last-child)": { - "&:after": { - content: "'/'", - display: "block", - position: "absolute", - right: theme.spacing(-2), - top: 0, - }, - "&:not(:first-child):hover": { - cursor: "pointer", - textDecoration: "underline", - }, - }, - marginRight: theme.spacing(3), - position: "relative", - }, - breadcrumbContainer: { - alignItems: "center", - display: "flex", - }, - breadcrumbDisabled: { - "&:hover": { - textDecoration: "none", - }, - color: theme.palette.text.disabled, - }, - breadcrumbs: { - display: "flex", - }, - hr: { - border: "none", - borderTop: `1px solid ${theme.palette.divider}`, - height: 0, - marginBottom: 0, - marginTop: 0, - width: "100%", + () => ({ + container: { + height: "100%", }, iframeContainer: { lineHeight: 0, // It removes extra space between iframe and container + height: "100%", "& > iframe": { border: "none", minHeight: "60vh", - height: `calc(100vh - 27.8rem)`, + height: "100%", width: "100%", - [theme.breakpoints.up("md")]: { - height: `calc(100vh - 23.4rem)`, - }, }, }, }), diff --git a/src/apps/components/AppPage/useSettingsBreadcrumbs.ts b/src/apps/components/AppPage/useSettingsBreadcrumbs.ts deleted file mode 100644 index 057104ed2..000000000 --- a/src/apps/components/AppPage/useSettingsBreadcrumbs.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { - Breadcrumb, - BreadcrumbChangeMessage, - BreadcrumbClickMessage, - ExtensionMessageEvent, - ExtensionMessageType, - sendMessageToExtension, - useExtensionMessage, -} from "@saleor/macaw-ui"; -import { useState } from "react"; - -type UseSettingsBreadcrumbs = [Breadcrumb[], (value: string) => void]; -function useSettingsBreadcrumbs(): UseSettingsBreadcrumbs { - const [breadcrumbs, setBreadcrumbs] = useState([]); - - const handleBreadcrumbSet = ( - event: ExtensionMessageEvent, - ) => { - if (event.data.type === ExtensionMessageType.BREADCRUMB_SET) { - setBreadcrumbs(event.data.breadcrumbs); - } - }; - - useExtensionMessage(handleBreadcrumbSet); - - const handleBreadcrumbClick = (value: string) => - sendMessageToExtension( - { - breadcrumb: value, - type: ExtensionMessageType.BREADCRUMB_CLICK, - }, - "*", - ); - - return [breadcrumbs, handleBreadcrumbClick]; -} - -export default useSettingsBreadcrumbs; diff --git a/src/apps/views/App/App.tsx b/src/apps/views/App/App.tsx index 4f649d25f..fe16318a0 100644 --- a/src/apps/views/App/App.tsx +++ b/src/apps/views/App/App.tsx @@ -8,11 +8,7 @@ import { useIntl } from "react-intl"; import { useLocation } from "react-router"; import AppPage from "../../components/AppPage"; -import { - appDetailsUrl, - appsListPath, - getAppCompleteUrlFromDashboardUrl, -} from "../../urls"; +import { appsListPath, getAppCompleteUrlFromDashboardUrl } from "../../urls"; interface AppProps { id: string; @@ -45,7 +41,6 @@ export const App: React.FC = ({ id }) => { notify({ diff --git a/src/apps/views/AppSettings/AppSettings.tsx b/src/apps/views/AppSettings/AppSettings.tsx index ded97746c..f3eacabe2 100644 --- a/src/apps/views/AppSettings/AppSettings.tsx +++ b/src/apps/views/AppSettings/AppSettings.tsx @@ -6,7 +6,7 @@ import React from "react"; import { useIntl } from "react-intl"; import AppPage from "../../components/AppPage"; -import { appDetailsUrl, appsListPath } from "../../urls"; +import { appsListPath } from "../../urls"; interface AppSettingsProps { id: string; @@ -31,7 +31,6 @@ export const AppSettings: React.FC = ({ id }) => { notify({ diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 74328c14d..d6d958a9a 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -2,7 +2,6 @@ import { LinearProgress, useMediaQuery } from "@material-ui/core"; import { useUser } from "@saleor/auth"; import useAppState from "@saleor/hooks/useAppState"; import { - makeStyles, SaleorTheme, Sidebar, SidebarDrawer, @@ -22,100 +21,11 @@ import NavigatorButton from "../NavigatorButton/NavigatorButton"; import UserChip from "../UserChip"; import useAppChannel from "./AppChannelContext"; import AppChannelSelect from "./AppChannelSelect"; -import { appLoaderHeight } from "./consts"; import useMenuStructure from "./menuStructure"; import { SidebarLink } from "./SidebarLink"; +import { useFullSizeStyles, useStyles } from "./styles"; import { isMenuActive } from "./utils"; -const useStyles = makeStyles( - theme => ({ - appAction: { - [theme.breakpoints.down("sm")]: { - left: 0, - width: "100%", - }, - bottom: 0, - gridColumn: 2, - position: "sticky", - zIndex: 10, - }, - appLoader: { - height: appLoaderHeight, - marginBottom: theme.spacing(4), - zIndex: 1201, - }, - appLoaderPlaceholder: { - height: appLoaderHeight, - marginBottom: theme.spacing(4), - }, - - content: { - flex: 1, - [theme.breakpoints.up("md")]: { - width: 0, // workaround for flex children width expansion affected by their contents - }, - }, - darkThemeSwitch: { - [theme.breakpoints.down("sm")]: { - marginRight: theme.spacing(1), - }, - marginRight: theme.spacing(2), - }, - header: { - display: "grid", - gridTemplateAreas: `"headerAnchor headerToolbar"`, - [theme.breakpoints.down("sm")]: { - gridTemplateAreas: `"headerToolbar" - "headerAnchor"`, - }, - marginBottom: theme.spacing(6), - }, - headerAnchor: { - gridArea: "headerAnchor", - }, - headerToolbar: { - display: "flex", - gridArea: "headerToolbar", - height: 40, - [theme.breakpoints.down("sm")]: { - height: "auto", - }, - }, - root: { - isolation: "isolate", - [theme.breakpoints.up("md")]: { - display: "flex", - }, - width: `100%`, - }, - spacer: { - flex: 1, - }, - userBar: { - alignItems: "center", - display: "flex", - }, - - view: { - marginLeft: 0, - }, - viewMargins: { - paddingBottom: theme.spacing(), - [theme.breakpoints.up("sm")]: { - paddingBottom: theme.spacing(3), - }, - }, - viewContainer: { - minHeight: `calc(100vh - ${appLoaderHeight + 72}px - ${theme.spacing( - 4, - )})`, - }, - }), - { - name: "AppLayout", - }, -); - interface AppLayoutProps { children: React.ReactNode; fullSize?: boolean; @@ -126,6 +36,7 @@ const AppLayout: React.FC = ({ fullSize = false, }) => { const classes = useStyles(); + const fullSizeClasses = useFullSizeStyles(); const { themeType, setTheme } = useTheme(); const { anchor: appActionAnchor } = useActionBar(); const appHeaderAnchor = useBacklink(); @@ -167,13 +78,21 @@ const AppLayout: React.FC = ({ linkComponent={SidebarLink} /> )} -
+
{appState.loading ? ( ) : (
)} -
+
@@ -214,6 +133,7 @@ const AppLayout: React.FC = ({
{children} diff --git a/src/components/AppLayout/styles.ts b/src/components/AppLayout/styles.ts new file mode 100644 index 000000000..0bb153c24 --- /dev/null +++ b/src/components/AppLayout/styles.ts @@ -0,0 +1,110 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +import { appLoaderHeight } from "./consts"; + +export const useStyles = makeStyles( + theme => ({ + appAction: { + [theme.breakpoints.down("sm")]: { + left: 0, + width: "100%", + }, + bottom: 0, + gridColumn: 2, + position: "sticky", + zIndex: 10, + }, + appLoader: { + height: appLoaderHeight, + marginBottom: theme.spacing(4), + zIndex: 1201, + }, + appLoaderPlaceholder: { + height: appLoaderHeight, + marginBottom: theme.spacing(4), + }, + + content: { + flex: 1, + [theme.breakpoints.up("md")]: { + width: 0, // workaround for flex children width expansion affected by their contents + }, + }, + darkThemeSwitch: { + [theme.breakpoints.down("sm")]: { + marginRight: theme.spacing(1), + }, + marginRight: theme.spacing(2), + }, + header: { + display: "grid", + gridTemplateAreas: `"headerAnchor headerToolbar"`, + [theme.breakpoints.down("sm")]: { + gridTemplateAreas: `"headerToolbar" + "headerAnchor"`, + }, + marginBottom: theme.spacing(6), + }, + headerAnchor: { + gridArea: "headerAnchor", + }, + headerToolbar: { + display: "flex", + gridArea: "headerToolbar", + height: 40, + [theme.breakpoints.down("sm")]: { + height: "auto", + }, + }, + root: { + isolation: "isolate", + [theme.breakpoints.up("md")]: { + display: "flex", + }, + width: `100%`, + }, + spacer: { + flex: 1, + }, + userBar: { + alignItems: "center", + display: "flex", + }, + + view: { + marginLeft: 0, + }, + viewMargins: { + paddingBottom: theme.spacing(), + [theme.breakpoints.up("sm")]: { + paddingBottom: theme.spacing(3), + }, + }, + viewContainer: { + minHeight: `calc(100vh - ${appLoaderHeight + 72}px - ${theme.spacing( + 4, + )})`, + }, + }), + { name: "AppLayout" }, +); + +export const useFullSizeStyles = makeStyles( + () => ({ + content: { + height: "100vh", + display: "flex", + flexDirection: "column", + }, + viewContainer: { + flex: 1, + display: "flex", + flexDirection: "column", + }, + view: { + flex: 1, + }, + viewContainerWrapper: {}, + }), + { name: "AppLayoutFullSize" }, +);