rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: flatten quick settings menu and add separate prefs button (#1631)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-24 14:26:55 +05:30
committed by GitHub
parent 285df04a59
commit 97835e64ac
8 changed files with 87 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/web/src/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
View File

@@ -1,70 +0,0 @@
import { Dispatch, RefObject, SetStateAction } from 'react'
export const quickSettingsKeyDownHandler = (
closeQuickSettingsMenu: () => void,
event: React.KeyboardEvent,
quickSettingsMenuRef: RefObject<HTMLDivElement>,
themesMenuOpen: boolean,
) => {
if (quickSettingsMenuRef?.current) {
const items: NodeListOf<HTMLButtonElement> = quickSettingsMenuRef.current.querySelectorAll(':scope > button')
const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)
if (!themesMenuOpen) {
switch (event.key) {
case 'Escape':
closeQuickSettingsMenu()
break
case 'ArrowDown':
if (items[currentFocusedIndex + 1]) {
items[currentFocusedIndex + 1].focus()
} else {
items[0].focus()
}
break
case 'ArrowUp':
if (items[currentFocusedIndex - 1]) {
items[currentFocusedIndex - 1].focus()
} else {
items[items.length - 1].focus()
}
break
}
}
}
}
export const themesMenuKeyDownHandler = (
event: React.KeyboardEvent<HTMLDivElement>,
themesMenuRef: RefObject<HTMLDivElement>,
setThemesMenuOpen: Dispatch<SetStateAction<boolean>>,
themesButtonRef: RefObject<HTMLButtonElement>,
) => {
if (themesMenuRef?.current) {
const themes = themesMenuRef.current.querySelectorAll('button')
const currentFocusedIndex = Array.from(themes).findIndex((themeBtn) => themeBtn === document.activeElement)
switch (event.key) {
case 'Escape':
case 'ArrowLeft':
event.stopPropagation()
setThemesMenuOpen(false)
themesButtonRef.current?.focus()
break
case 'ArrowDown':
if (themes[currentFocusedIndex + 1]) {
themes[currentFocusedIndex + 1].focus()
} else {
themes[0].focus()
}
break
case 'ArrowUp':
if (themes[currentFocusedIndex - 1]) {
themes[currentFocusedIndex - 1].focus()
} else {
themes[themes.length - 1].focus()
}
break
}
}
}

106
packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
View File

@@ -1,24 +1,20 @@
import { WebApplication } from '@/Application/Application'
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 { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { quickSettingsKeyDownHandler } from './EventHandlers'
import FocusModeSwitch from './FocusModeSwitch'
import ThemesMenuButton from './ThemesMenuButton'
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 = {
preferencesController: PreferencesController
quickSettingsMenuController: QuickSettingsController
application: WebApplication
}
@@ -37,20 +33,13 @@ const toggleFocusMode = (enabled: boolean) => {
}
}
const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
application,
preferencesController,
quickSettingsMenuController,
}) => {
const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
const [themes, setThemes] = useState<ThemeItem[]>([])
const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
const [themesMenuOpen, setThemesMenuOpen] = useState(false)
const [defaultThemeOn, setDefaultThemeOn] = useState(false)
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)
@@ -126,25 +115,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
}
}, [application, reloadToggleableComponents])
useEffect(() => {
if (themesMenuOpen) {
defaultThemeButtonRef.current?.focus()
}
}, [themesMenuOpen])
useEffect(() => {
prefsButtonRef.current?.focus()
}, [])
const toggleThemesMenu = useCallback(() => {
setThemesMenuOpen((isOpen) => !isOpen)
}, [])
const openPreferences = useCallback(() => {
closeQuickSettingsMenu()
preferencesController.openPreferences()
}, [closeQuickSettingsMenu, preferencesController])
const toggleComponent = useCallback(
(component: SNComponent) => {
if (component.isTheme()) {
@@ -156,29 +130,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
[application],
)
const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = useCallback(
(event) => {
switch (event.key) {
case 'Escape':
setThemesMenuOpen(false)
themesButtonRef.current?.focus()
break
case 'ArrowRight':
if (!themesMenuOpen) {
toggleThemesMenu()
}
}
},
[themesMenuOpen, toggleThemesMenu],
)
const handleQuickSettingsKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
(event) => {
quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
},
[closeQuickSettingsMenu, themesMenuOpen],
)
const toggleDefaultTheme = useCallback(() => {
const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
if (activeTheme) {
@@ -187,41 +138,21 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
}, [application, themes])
return (
<div ref={mainRef} onKeyDown={handleQuickSettingsKeyDown}>
<div className="mt-1 mb-2 px-3 text-sm font-semibold uppercase text-text">Quick Settings</div>
<div ref={mainRef}>
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</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"
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}
ref={defaultThemeButtonRef}
>
<div className="flex items-center">
<Icon type="themes" className="mr-2 text-neutral" />
Themes
</div>
<Icon type="chevron-right" className="text-neutral" />
<RadioIndicator checked={defaultThemeOn} className="mr-2" />
Default
</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={toggleDefaultTheme}
ref={defaultThemeButtonRef}
>
<RadioIndicator checked={defaultThemeOn} className="mr-2" />
Default
</button>
{themes.map((theme) => (
<ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
))}
</Popover>
{themes.map((theme) => (
<ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
))}
<HorizontalSeparator classes="my-2" />
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
{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"
@@ -243,15 +174,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
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>
)
}