feat: responsive popovers & menus (#1323)

2022-07-21 02:20:14 +05:30
parent baf7fb0019
commit 2573407851
44 changed files with 1308 additions and 1415 deletions
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -1,27 +1,26 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { quickSettingsKeyDownHandler, themesMenuKeyDownHandler } from './EventHandlers'
+import { quickSettingsKeyDownHandler } from './EventHandlers'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { ThemeItem } from './ThemeItem'
 import { sortThemes } from '@/Utils/SortThemes'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import Popover from '../Popover/Popover'
+import { PreferencesController } from '@/Controllers/PreferencesController'
+import { QuickSettingsController } from '@/Controllers/QuickSettingsController'

 const focusModeAnimationDuration = 1255

 type MenuProps = {
-  viewControllerManager: ViewControllerManager
+  preferencesController: PreferencesController
+  quickSettingsMenuController: QuickSettingsController
  application: WebApplication
-  onClickOutside: () => void
 }

 const toggleFocusMode = (enabled: boolean) => {
@@ -38,25 +37,23 @@ const toggleFocusMode = (enabled: boolean) => {
  }
 }

-const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, viewControllerManager, onClickOutside }) => {
-  const { closeQuickSettingsMenu, shouldAnimateCloseMenu, focusModeEnabled, setFocusModeEnabled } =
-    viewControllerManager.quickSettingsMenuController
+const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
+  application,
+  preferencesController,
+  quickSettingsMenuController,
+}) => {
+  const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
  const [themes, setThemes] = useState<ThemeItem[]>([])
  const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
  const [themesMenuOpen, setThemesMenuOpen] = useState(false)
-  const [themesMenuPosition, setThemesMenuPosition] = useState({})
  const [defaultThemeOn, setDefaultThemeOn] = useState(false)

-  const themesMenuRef = useRef<HTMLDivElement>(null)
  const themesButtonRef = useRef<HTMLButtonElement>(null)
  const prefsButtonRef = useRef<HTMLButtonElement>(null)
  const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
  const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)

  const mainRef = useRef<HTMLDivElement>(null)
-  useCloseOnClickOutside(mainRef, () => {
-    onClickOutside()
-  })

  useEffect(() => {
    toggleFocusMode(focusModeEnabled)
@@ -139,25 +136,14 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, viewCont
    prefsButtonRef.current?.focus()
  }, [])

-  const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen)
-
  const toggleThemesMenu = useCallback(() => {
-    if (!themesMenuOpen && themesButtonRef.current) {
-      const themesButtonRect = themesButtonRef.current.getBoundingClientRect()
-      setThemesMenuPosition({
-        left: themesButtonRect.right,
-        bottom: document.documentElement.clientHeight - themesButtonRect.bottom,
-      })
-      setThemesMenuOpen(true)
-    } else {
-      setThemesMenuOpen(false)
-    }
-  }, [themesMenuOpen])
+    setThemesMenuOpen((isOpen) => !isOpen)
+  }, [])

  const openPreferences = useCallback(() => {
    closeQuickSettingsMenu()
-    viewControllerManager.preferencesController.openPreferences()
-  }, [viewControllerManager, closeQuickSettingsMenu])
+    preferencesController.openPreferences()
+  }, [closeQuickSettingsMenu, preferencesController])

  const toggleComponent = useCallback(
    (component: SNComponent) => {
@@ -193,10 +179,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, viewCont
    [closeQuickSettingsMenu, themesMenuOpen],
  )

-  const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback((event) => {
-    themesMenuKeyDownHandler(event, themesMenuRef, setThemesMenuOpen, themesButtonRef)
-  }, [])
-
  const toggleDefaultTheme = useCallback(() => {
    const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
    if (activeTheme) {
@@ -205,90 +187,71 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, viewCont
  }, [application, themes])

  return (
-    <div ref={mainRef} className="sn-component">
-      <div
-        className={`max-h-120 absolute bottom-full left-0 z-footer-bar-item-panel flex min-w-80 max-w-xs cursor-auto flex-col overflow-y-auto rounded bg-default py-2 shadow-main ${
-          shouldAnimateCloseMenu ? 'slide-up-animation' : 'slide-down-animation transition-transform duration-150'
-        }`}
-        ref={quickSettingsMenuRef}
-        onKeyDown={handleQuickSettingsKeyDown}
+    <div ref={mainRef} onKeyDown={handleQuickSettingsKeyDown}>
+      <div className="mt-1 mb-2 px-3 text-sm font-semibold uppercase text-text">Quick Settings</div>
+      <button
+        onClick={toggleThemesMenu}
+        onKeyDown={handleBtnKeyDown}
+        ref={themesButtonRef}
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
      >
-        <div className="mt-1 mb-2 px-3 text-sm font-semibold uppercase text-text">Quick Settings</div>
-        <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
-          <DisclosureButton
-            onKeyDown={handleBtnKeyDown}
-            onBlur={closeOnBlur}
-            ref={themesButtonRef}
-            className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-          >
-            <div className="flex items-center">
-              <Icon type="themes" className="mr-2 text-neutral" />
-              Themes
-            </div>
-            <Icon type="chevron-right" className="text-neutral" />
-          </DisclosureButton>
-          <DisclosurePanel
-            onBlur={closeOnBlur}
-            ref={themesMenuRef}
-            onKeyDown={handlePanelKeyDown}
-            style={{
-              ...themesMenuPosition,
-            }}
-            className={`${
-              themesMenuOpen ? 'flex' : 'hidden'
-            } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main transition-transform duration-150`}
-          >
-            <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
-            <button
-              className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-              onClick={toggleDefaultTheme}
-              onBlur={closeOnBlur}
-              ref={defaultThemeButtonRef}
-            >
-              <RadioIndicator checked={defaultThemeOn} className="mr-2" />
-              Default
-            </button>
-            {themes.map((theme) => (
-              <ThemesMenuButton
-                item={theme}
-                application={application}
-                key={theme.component?.uuid ?? theme.identifier}
-                onBlur={closeOnBlur}
-              />
-            ))}
-          </DisclosurePanel>
-        </Disclosure>
-        {toggleableComponents.map((component) => (
-          <button
-            className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-            onClick={() => {
-              toggleComponent(component)
-            }}
-            key={component.uuid}
-          >
-            <div className="flex items-center">
-              <Icon type="window" className="mr-2 text-neutral" />
-              {component.displayName}
-            </div>
-            <Switch checked={component.active} className="px-0" />
-          </button>
-        ))}
-        <FocusModeSwitch
-          application={application}
-          onToggle={setFocusModeEnabled}
-          onClose={closeQuickSettingsMenu}
-          isEnabled={focusModeEnabled}
-        />
-        <HorizontalSeparator classes="my-2" />
+        <div className="flex items-center">
+          <Icon type="themes" className="mr-2 text-neutral" />
+          Themes
+        </div>
+        <Icon type="chevron-right" className="text-neutral" />
+      </button>
+      <Popover
+        togglePopover={toggleThemesMenu}
+        anchorElement={themesButtonRef.current}
+        open={themesMenuOpen}
+        side="right"
+        align="end"
+        className="py-2"
+      >
+        <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
        <button
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-          onClick={openPreferences}
-          ref={prefsButtonRef}
+          onClick={toggleDefaultTheme}
+          ref={defaultThemeButtonRef}
        >
-          <Icon type="more" className="mr-2 text-neutral" />
-          Open Preferences
+          <RadioIndicator checked={defaultThemeOn} className="mr-2" />
+          Default
        </button>
-      </div>
+        {themes.map((theme) => (
+          <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
+        ))}
+      </Popover>
+      {toggleableComponents.map((component) => (
+        <button
+          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            toggleComponent(component)
+          }}
+          key={component.uuid}
+        >
+          <div className="flex items-center">
+            <Icon type="window" className="mr-2 text-neutral" />
+            {component.displayName}
+          </div>
+          <Switch checked={component.active} className="px-0" />
+        </button>
+      ))}
+      <FocusModeSwitch
+        application={application}
+        onToggle={setFocusModeEnabled}
+        onClose={closeQuickSettingsMenu}
+        isEnabled={focusModeEnabled}
+      />
+      <HorizontalSeparator classes="my-2" />
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={openPreferences}
+        ref={prefsButtonRef}
+      >
+        <Icon type="more" className="mr-2 text-neutral" />
+        Open Preferences
+      </button>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -11,10 +11,9 @@ import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/Premium
 type Props = {
  item: ThemeItem
  application: WebApplication
-  onBlur: (event: { relatedTarget: EventTarget | null }) => void
 }

-const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
+const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
  const premiumModal = usePremiumModal()

  const isThirdPartyTheme = useMemo(
@@ -50,7 +49,6 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur
        'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:shadow-none'
      }
      onClick={toggleTheme}
-      onBlur={onBlur}
    >
      {item.component?.isLayerable() ? (
        <>