From 7ec5f0164784d3f69f1358c368edd7c27c1286ef Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Thu, 14 Jul 2022 13:32:28 +0200 Subject: [PATCH] kbar follow up (#3361) * added more routes to kbar * added right direction for tooltip, moved search icon next to logo, added keyboard shortcuts to command bar * added right direction for tooltip, moved search icon next to logo, added keyboard shortcuts to command bar * fixed search icon for tablet * fixed search icon for mobile * hide keyboard shortcut legend on mobile * extracted strings --- apps/web/components/Kbar.tsx | 74 ++++++++++++------- apps/web/components/Shell.tsx | 28 +++++-- apps/web/components/team/MemberListItem.tsx | 4 +- apps/web/components/team/TeamListItem.tsx | 2 +- apps/web/components/ui/InfoBadge.tsx | 2 +- .../components/webhook/WebhookListItem.tsx | 4 +- .../components/apiKeys/ApiKeyDialogForm.tsx | 2 +- .../ee/components/apiKeys/ApiKeyListItem.tsx | 4 +- apps/web/package.json | 1 + apps/web/pages/event-types/index.tsx | 4 +- apps/web/public/static/locales/en/common.json | 4 +- .../app-store/zapier/pages/setup/index.tsx | 2 +- packages/ui/Tooltip.tsx | 12 ++- 13 files changed, 93 insertions(+), 50 deletions(-) diff --git a/apps/web/components/Kbar.tsx b/apps/web/components/Kbar.tsx index 432fc41a49..8cfce21b2e 100644 --- a/apps/web/components/Kbar.tsx +++ b/apps/web/components/Kbar.tsx @@ -1,3 +1,4 @@ +import { SwitchVerticalIcon } from "@heroicons/react/outline"; import { SearchIcon } from "@heroicons/react/solid"; import { KBarProvider, @@ -10,6 +11,7 @@ import { useKBar, } from "kbar"; import { useRouter } from "next/router"; +import { Command, CornerDownLeft } from "react-feather"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { isMac } from "@calcom/lib/isMac"; @@ -33,13 +35,14 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => { // keywords: "set yourself away bookings", // perform: () => alert("Hello World"), // }, + { - id: "upcoming-bookings", - name: "Upcoming Bookings", - section: "Booking", - shortcut: ["u", "b"], - keywords: "upcoming bookings", - perform: () => router.push("/bookings/upcoming"), + id: "workflows", + name: "Workflows", + section: "Workflows", + shortcut: ["w", "f"], + keywords: "workflows automation", + perform: () => router.push("/workflows"), }, { id: "event-types", @@ -57,10 +60,18 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => { keywords: "app store", perform: () => router.push("/apps"), }, + { + id: "upcoming-bookings", + name: "Upcoming Bookings", + section: "Bookings", + shortcut: ["u", "b"], + keywords: "upcoming bookings", + perform: () => router.push("/bookings/upcoming"), + }, { id: "recurring-bookings", name: "Recurring Bookings", - section: "Booking", + section: "Bookings", shortcut: ["r", "b"], keywords: "recurring bookings", perform: () => router.push("/bookings/recurring"), @@ -68,7 +79,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => { { id: "past-bookings", name: "Past Bookings", - section: "Booking", + section: "Bookings", shortcut: ["p", "b"], keywords: "past bookings", perform: () => router.push("/bookings/past"), @@ -76,7 +87,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => { { id: "cancelled-bookings", name: "Cancelled Bookings", - section: "Booking", + section: "Bookings", shortcut: ["c", "b"], keywords: "cancelled bookings", perform: () => router.push("/bookings/cancelled"), @@ -182,13 +193,27 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => { }; export const KBarContent = () => { + const { t } = useLocale(); + return ( - - + +
+ + +
+
+ {t("navigate")} + + {t("open")} + {isMac ? : "CTRL"} + + K + {t("close")} +
+
); @@ -196,22 +221,17 @@ export const KBarContent = () => { export const KBarTrigger = () => { const { query } = useKBar(); - const { t } = useLocale(); - return ( -
- -
+ <> + + + + ); }; @@ -222,7 +242,7 @@ const DisplayShortcuts = (item: shortcutArrayType) => { {shortcuts?.map((shortcut) => { return ( - + {shortcut} ); diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx index 0a5b935828..b3d94447b7 100644 --- a/apps/web/components/Shell.tsx +++ b/apps/web/components/Shell.tsx @@ -202,11 +202,17 @@ const Layout = ({
- - - - - +
+ + + + + +
+ +
+
+ {/* logo icon for tablet */} @@ -261,7 +267,9 @@ const Layout = ({ })} ))} - + + +
@@ -304,9 +312,13 @@ const Layout = ({ -
+
- +
- +
- +