From 30f8d1256316687a37cfc2bf3517fae9babb537c Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Wed, 7 Sep 2022 06:13:31 +0200 Subject: [PATCH] added /more page for mobile (#4219) * added /more page for mobile * i18n * Navigation improvements * Reverting unused exports * Improved performance for getting mobile/desktop items * I take your forEach and up it with reduce Co-authored-by: zomars Co-authored-by: Alan Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- apps/web/pages/more.tsx | 15 +++ apps/web/public/static/locales/en/common.json | 2 + packages/ui/v2/core/Shell.tsx | 108 +++++++++++++----- 3 files changed, 96 insertions(+), 29 deletions(-) create mode 100644 apps/web/pages/more.tsx diff --git a/apps/web/pages/more.tsx b/apps/web/pages/more.tsx new file mode 100644 index 0000000000..852def9884 --- /dev/null +++ b/apps/web/pages/more.tsx @@ -0,0 +1,15 @@ +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { MobileNavigationMoreItems } from "@calcom/ui/Shell"; +import { Shell } from "@calcom/ui/v2"; + +export default function MorePage() { + const { t } = useLocale(); + return ( + +
+ +

{t("more_page_footer")}

+
+ + ); +} diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 52bc0f30ca..76fd55499e 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1168,6 +1168,8 @@ "for_a_maximum_of": "For a maximum of", "event_one": "event", "event_other": "events", + "more": "More", + "more_page_footer": "We view the mobile application as an extension of the web application. If you are performing any complication actions, please refer back to the web application.", "workflow_example_1": "Send email reminder 24 hours before event starts to host", "workflow_example_2": "Send SMS reminder 1 hour before event starts to host", "workflow_example_3": "Send custom email when event is cancelled to host", diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index f45489da8e..ef1a669013 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -385,6 +385,7 @@ type NavigationItemType = { }; const requiredCredentialNavigationItems = ["Routing Forms"]; +const MORE_SEPARATOR_NAME = "more"; const navigation: NavigationItemType[] = [ { name: "event_types_page_title", @@ -401,20 +402,6 @@ const navigation: NavigationItemType[] = [ href: "/availability", icon: Icon.FiClock, }, - { - name: "Routing Forms", - href: "/apps/routing_forms/forms", - icon: Icon.FiFileText, - isCurrent: ({ router }) => { - return router.asPath.startsWith("/apps/routing_forms/"); - }, - }, - { - name: "workflows", - href: "/workflows", - icon: Icon.FiZap, - pro: true, - }, { name: "apps", href: "/apps", @@ -434,6 +421,24 @@ const navigation: NavigationItemType[] = [ }, ], }, + { + name: MORE_SEPARATOR_NAME, + href: "/more", + icon: Icon.FiMoreHorizontal, + }, + { + name: "Routing Forms", + href: "/apps/routing_forms/forms", + icon: Icon.FiFileText, + isCurrent: ({ router }) => { + return router.asPath.startsWith("/apps/routing_forms/"); + }, + }, + { + name: "workflows", + href: "/workflows", + icon: Icon.FiZap, + }, { name: "settings", href: "/settings", @@ -441,10 +446,27 @@ const navigation: NavigationItemType[] = [ }, ]; +const moreSeparatorIndex = navigation.findIndex((item) => item.name === MORE_SEPARATOR_NAME); +// We create all needed navigation items for the different use cases +const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems } = navigation.reduce< + Record +>( + (items, item, index) => { + // We filter out the "more" separator in desktop navigation + if (item.name !== MORE_SEPARATOR_NAME) items.desktopNavigationItems.push(item); + // Items for mobile bottom navigation + if (index < moreSeparatorIndex + 1) items.mobileNavigationBottomItems.push(item); + // Items for the "more" menu in mobile navigation + else items.mobileNavigationMoreItems.push(item); + return items; + }, + { desktopNavigationItems: [], mobileNavigationBottomItems: [], mobileNavigationMoreItems: [] } +); + const Navigation = () => { return ( ); } + +export const MobileNavigationMoreItems = () => ( +
    + {mobileNavigationMoreItems.map((item) => ( + + ))} +
+);