diff --git a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
index 5511e2cae77..3682f129971 100644
--- a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
@@ -3,7 +3,7 @@ import { WebApplication } from '@/ui_models/application';
import { AppState } from '@/ui_models/app_state';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
-import { StateUpdater, useRef, useState } from 'preact/hooks';
+import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
import { AccountMenuPane } from '.';
import { Button } from '../Button';
import { Checkbox } from '../Checkbox';
@@ -31,6 +31,10 @@ export const ConfirmPassword: FunctionComponent
= observer(
const passwordInputRef = useRef();
+ useEffect(() => {
+ passwordInputRef?.current?.focus();
+ }, []);
+
const handlePasswordChange = (e: Event) => {
if (e.target instanceof HTMLInputElement) {
setConfirmPassword(e.target.value);
diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
index 1716c6319fb..5650d199ff8 100644
--- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
@@ -5,9 +5,10 @@ import { Icon } from '../Icon';
import { formatLastSyncDate } from '@/preferences/panes/account/Sync';
import { SyncQueueStrategy } from '@standardnotes/snjs';
import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
import { AccountMenuPane } from '.';
import { FunctionComponent } from 'preact';
+import { JSXInternal } from 'preact/src/jsx';
import { AppVersion } from '@/version';
type Props = {
@@ -25,6 +26,9 @@ export const GeneralAccountMenu: FunctionComponent = observer(
const [lastSyncDate, setLastSyncDate] = useState(
formatLastSyncDate(application.getLastSyncDate() as Date)
);
+ const [currentFocusedIndex, setCurrentFocusedIndex] = useState(0);
+
+ const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
const doSynchronization = async () => {
setIsSyncingInProgress(true);
@@ -53,9 +57,49 @@ export const GeneralAccountMenu: FunctionComponent = observer(
const user = application.getUser();
+ const accountMenuRef = useRef();
+
+ const handleKeyDown: JSXInternal.KeyboardEventHandler = (
+ event
+ ) => {
+ switch (event.key) {
+ case 'ArrowDown':
+ setCurrentFocusedIndex((index) => {
+ console.log(index, buttonRefs.current.length);
+ if (index + 1 < buttonRefs.current.length) {
+ return index + 1;
+ } else {
+ return 0;
+ }
+ });
+ break;
+ case 'ArrowUp':
+ setCurrentFocusedIndex((index) => {
+ if (index - 1 > -1) {
+ return index - 1;
+ } else {
+ return buttonRefs.current.length - 1;
+ }
+ });
+ break;
+ }
+ };
+
+ useEffect(() => {
+ if (buttonRefs.current[currentFocusedIndex]) {
+ buttonRefs.current[currentFocusedIndex]?.focus();
+ }
+ }, [currentFocusedIndex]);
+
+ const pushRefToArray = (ref: HTMLButtonElement | null) => {
+ if (ref && !buttonRefs.current.includes(ref)) {
+ buttonRefs.current.push(ref);
+ }
+ };
+
return (
- <>
-
+
+
Account
@@ -105,7 +149,8 @@ export const GeneralAccountMenu: FunctionComponent
= observer(
{user ? (
);
}
);
diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx
index 77da5608cb7..54de2a9ab06 100644
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/components/AccountMenu/index.tsx
@@ -9,6 +9,7 @@ import { SignInPane } from './SignIn';
import { CreateAccount } from './CreateAccount';
import { ConfirmSignoutContainer } from '../ConfirmSignoutModal';
import { ConfirmPassword } from './ConfirmPassword';
+import { JSXInternal } from 'preact/src/jsx';
export enum AccountMenuPane {
GeneralMenu,
@@ -87,14 +88,31 @@ const AccountMenu: FunctionComponent
= observer(
closeAccountMenu,
} = appState.accountMenu;
+ const handleKeyDown: JSXInternal.KeyboardEventHandler = (
+ event
+ ) => {
+ switch (event.key) {
+ case 'Escape':
+ if (currentPane === AccountMenuPane.GeneralMenu) {
+ closeAccountMenu();
+ } else if (currentPane === AccountMenuPane.ConfirmPassword) {
+ setCurrentPane(AccountMenuPane.Register);
+ } else {
+ setCurrentPane(AccountMenuPane.GeneralMenu);
+ }
+ break;
+ }
+ };
+
return (
void;
+};
+
+type MenuProps = {
+ appState: AppState;
+ application: WebApplication;
+};
+
+const ThemeButton: FunctionComponent = ({
+ application,
+ theme,
+ onBlur,
+}) => {
+ const toggleTheme = () => {
+ if (theme.isLayerable() || !theme.active) {
+ application.toggleComponent(theme);
+ }
+ };
+
+ return (
+
+ );
+};
+
+const QuickSettingsMenu: FunctionComponent = observer(
+ ({ application, appState }) => {
+ const { closeQuickSettingsMenu, shouldAnimateCloseMenu } =
+ appState.quickSettingsMenu;
+ const [themes, setThemes] = useState([]);
+ const [themesMenuOpen, setThemesMenuOpen] = useState(false);
+ const [themesMenuPosition, setThemesMenuPosition] = useState({});
+ const [defaultThemeOn, setDefaultThemeOn] = useState(false);
+
+ const themesMenuRef = useRef();
+ const themesButtonRef = useRef();
+ const prefsButtonRef = useRef();
+ const quickSettingsMenuRef = useRef();
+ const defaultThemeButtonRef = useRef();
+
+ const reloadThemes = useCallback(() => {
+ application.streamItems(ContentType.Theme, () => {
+ const themes = application.getDisplayableItems(
+ ContentType.Theme
+ ) as SNTheme[];
+ setThemes(
+ themes.sort((a, b) => {
+ const aIsLayerable = a.isLayerable();
+ const bIsLayerable = b.isLayerable();
+
+ if (aIsLayerable && !bIsLayerable) {
+ return 1;
+ } else if (!aIsLayerable && bIsLayerable) {
+ return -1;
+ } else {
+ return a.package_info.name.toLowerCase() <
+ b.package_info.name.toLowerCase()
+ ? -1
+ : 1;
+ }
+ })
+ );
+ setDefaultThemeOn(
+ !themes.find((theme) => theme.active && !theme.isLayerable())
+ );
+ });
+ }, [application]);
+
+ useEffect(() => {
+ reloadThemes();
+ }, [reloadThemes]);
+
+ useEffect(() => {
+ if (themesMenuOpen) {
+ defaultThemeButtonRef.current.focus();
+ }
+ }, [themesMenuOpen]);
+
+ useEffect(() => {
+ prefsButtonRef.current.focus();
+ }, []);
+
+ const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
+
+ const toggleThemesMenu = () => {
+ if (!themesMenuOpen) {
+ const themesButtonRect =
+ themesButtonRef.current.getBoundingClientRect();
+ setThemesMenuPosition({
+ left: themesButtonRect.right,
+ bottom:
+ document.documentElement.clientHeight - themesButtonRect.bottom,
+ });
+ setThemesMenuOpen(true);
+ } else {
+ setThemesMenuOpen(false);
+ }
+ };
+
+ const openPreferences = () => {
+ closeQuickSettingsMenu();
+ appState.preferences.openPreferences();
+ };
+
+ const handleBtnKeyDown: React.KeyboardEventHandler = (
+ event
+ ) => {
+ switch (event.key) {
+ case 'Escape':
+ setThemesMenuOpen(false);
+ themesButtonRef.current.focus();
+ break;
+ case 'ArrowRight':
+ if (!themesMenuOpen) {
+ toggleThemesMenu();
+ }
+ }
+ };
+
+ const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler =
+ (event) => {
+ const items: NodeListOf =
+ 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;
+ }
+ }
+ };
+
+ const handlePanelKeyDown: React.KeyboardEventHandler = (
+ event
+ ) => {
+ 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;
+ }
+ };
+
+ const toggleDefaultTheme = () => {
+ const activeTheme = themes.find(
+ (theme) => theme.active && !theme.isLayerable()
+ );
+ if (activeTheme) application.toggleComponent(activeTheme);
+ };
+
+ return (
+
+
+
+ Quick Settings
+
+
+
+
+
+ Themes
+
+
+
+
+
+ Themes
+
+
+ {themes.map((theme) => (
+
+ ))}
+
+
+
+
+
+