Show left navbar items below top navbar dropdown (#270)

* Show left navbar items below top navbar dropdown * Add global tooltips provider & context * Update tooltips hook to throw if used outside provider * Update shared/common/hooks/useTooltips.tsx Co-authored-by: James Clarke <[email protected]> --------- Co-authored-by: James Clarke <[email protected]>
edgedb · Oct 24, 2023 · 4892a53 · 4892a53
1 parent 75d5207
commit 4892a53
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/shared/common/hooks/useTooltips.tsx b/shared/common/hooks/useTooltips.tsx
@@ -0,0 +1,27 @@
+import {createContext, PropsWithChildren, useState, useContext} from "react";
+
+const GlobalTooltipsContext = createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+>(null!);
+
+export function GlobalTooltipsProvider({children}: PropsWithChildren<{}>) {
+  const [showTooltips, setShowTooltips] = useState(true);
+
+  return (
+    <GlobalTooltipsContext.Provider value={[showTooltips, setShowTooltips]}>
+      {children}
+    </GlobalTooltipsContext.Provider>
+  );
+}
+
+export function useTooltips() {
+  const context = useContext(GlobalTooltipsContext);
+
+  if (!context) {
+    throw new Error(
+      "useTooltips must be used within a GlobalTooltipsProvider"
+    );
+  }
+
+  return context;
+}
diff --git a/shared/common/ui/verticalTabBar/index.tsx b/shared/common/ui/verticalTabBar/index.tsx
@@ -8,6 +8,7 @@ import styles from "./verticalTabBar.module.scss";
 import {ChevronIcon} from "../icons";
 
 import {Tab as BaseTab, BaseTabBarProps} from "../navtabs/interfaces";
+import {useTooltips} from "../../hooks/useTooltips";
 
 export interface Tab<Id extends string> extends BaseTab<Id> {
   loading?: boolean;
@@ -29,6 +30,8 @@ export function VerticalTabBar<TabId extends string>({
   onTabChange,
   noExpand,
 }: VerticalTabBarProps<TabId>) {
+  const [globalShowTooltips] = useTooltips();
+
   const [expanded, setExpanded] = useReducer(
     (_: any, val: boolean) => {
       localStorage.setItem("nebula_ui_tabbar_expanded", JSON.stringify(val));
@@ -79,7 +82,8 @@ export function VerticalTabBar<TabId extends string>({
     <div
       className={cn(styles.tabs, className, {
         [styles.expanded]: expanded,
-        [styles.showTooltips]: !expanded && showTabTooltips,
+        [styles.showTooltips]:
+          !expanded && showTabTooltips && globalShowTooltips,
       })}
     >
       {tabs.map((tab) => (

diff --git a/shared/common/ui/verticalTabBar/verticalTabBar.module.scss b/shared/common/ui/verticalTabBar/verticalTabBar.module.scss
@@ -8,7 +8,6 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  z-index: 100;
   transition: opacity 0s, width 0.2s;
 
   &.expanded {
@@ -92,6 +91,7 @@
   border-radius: 4px;
   font-weight: 600;
   line-height: 24px;
+  z-index: 11;
 
   &:before {
     position: absolute;

diff --git a/shared/studio/components/headerNav/elements.tsx b/shared/studio/components/headerNav/elements.tsx
@@ -4,6 +4,7 @@ import cn from "@edgedb/common/utils/classNames";
 import Spinner from "@edgedb/common/ui/spinner";
 import {CheckIcon, DropdownIcon} from "@edgedb/common/ui/icons";
 import styles from "./headerNav.module.scss";
+import {useTooltips} from "@edgedb/common/hooks/useTooltips";
 
 export interface HeaderNavProps {
   icon: JSX.Element;
@@ -22,10 +23,14 @@ export function HeaderNav({
   children,
 }: PropsWithChildren<HeaderNavProps>) {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [_, setShowTooltips] = useTooltips();
 
   useEffect(() => {
     if (dropdownOpen) {
+      setShowTooltips(false);
+
       dropdownRef.current?.focus();
+
       const listener = (e: MouseEvent) => {
         if (!dropdownRef.current?.contains(e.target as Node)) {
           setDropdownOpen(false);
@@ -36,6 +41,8 @@ export function HeaderNav({
       return () => {
         window.removeEventListener("click", listener, {capture: true});
       };
+    } else {
+      setShowTooltips(true);
     }
   }, [dropdownOpen]);
 

diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -11,6 +11,7 @@ import {GlobalDragCursorProvider} from "@edgedb/common/hooks/globalDragCursor";
 import {ThemeProvider} from "@edgedb/common/hooks/useTheme";
 import {ModalProvider} from "@edgedb/common/hooks/useModal";
 import {HeaderNavProvider} from "@edgedb/studio/components/headerNav";
+import {GlobalTooltipsProvider} from "@edgedb/common/hooks/useTooltips";
 
 import Header from "src/components/header";
 import Main from "src/components/main";
@@ -21,9 +22,11 @@ function App() {
     <appContext.Provider value={appState}>
       <ThemeProvider>
         <GlobalDragCursorProvider>
-          <HeaderNavProvider>
-            <AppMain />
-          </HeaderNavProvider>
+          <GlobalTooltipsProvider>
+            <HeaderNavProvider>
+              <AppMain />
+            </HeaderNavProvider>
+          </GlobalTooltipsProvider>
         </GlobalDragCursorProvider>
       </ThemeProvider>
     </appContext.Provider>