From ca676aab0433756346ea07860958c29389f30d6b Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 27 Dec 2023 03:42:29 -0800 Subject: [PATCH 1/4] feat: create autofocus store and component --- .../src/components/Header/SettingsMenu.tsx | 56 ++++++++++++++++++- apps/antalmanac/src/stores/SettingsStore.ts | 27 +++++++-- 2 files changed, 78 insertions(+), 5 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index f4b72b6f9..0b46263bf 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -3,7 +3,7 @@ import { Box, Button, ButtonGroup, Divider, Drawer, IconButton, Typography, useM import { CSSProperties } from '@material-ui/core/styles/withStyles'; import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material'; -import { useThemeStore, useTimeFormatStore } from '$stores/SettingsStore'; +import { useAutofocusStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore'; const lightSelectedStyle: CSSProperties = { backgroundColor: '#F0F7FF', @@ -135,6 +135,59 @@ function TimeMenu() { ); } +function AutofocusMenu() { + const [autoFocus, setAutofocus] = useAutofocusStore((store) => [store.autofocus, store.setAutofocus]); + const theme = useThemeStore((store) => store.appTheme); + + const handleAutofocusChange = (event: React.MouseEvent) => { + setAutofocus(event.currentTarget.value == 'true'); + }; + + return ( + + + Autofocus + + + + + + + + ); +} + function SettingsMenu() { const [drawerOpen, setDrawerOpen] = useState(false); const isMobileScreen = useMediaQuery('(max-width:750px)'); @@ -178,6 +231,7 @@ function SettingsMenu() { + diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts index 5ca0d6dd4..8f0ade53b 100644 --- a/apps/antalmanac/src/stores/SettingsStore.ts +++ b/apps/antalmanac/src/stores/SettingsStore.ts @@ -20,8 +20,8 @@ export const useThemeStore = create((set) => { themeSetting !== 'system' ? themeSetting : window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; + ? 'dark' + : 'light'; return { themeSetting: themeSetting as 'light' | 'dark' | 'system', @@ -35,8 +35,8 @@ export const useThemeStore = create((set) => { themeSetting !== 'system' ? themeSetting : window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; + ? 'dark' + : 'light'; set({ appTheme: appTheme, themeSetting: themeSetting }); @@ -67,3 +67,22 @@ export const useTimeFormatStore = create((set) => { }, }; }); + +export interface AutofocusStore { + autofocus: boolean; + setAutofocus: (autofocus: boolean) => void; +} + +export const useAutofocusStore = create((set) => { + const autofocus = typeof Storage !== 'undefined' && window.localStorage.getItem('autofocus') == 'true'; + + return { + autofocus, + setAutofocus: (autofocus) => { + if (typeof Storage !== 'undefined') { + window.localStorage.setItem('autofocus', autofocus.toString()); + } + set({ autofocus }); + }, + }; +}); From f3f7d40a716b1c7b2f74187db92e79c430d93569 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 27 Dec 2023 03:42:57 -0800 Subject: [PATCH 2/4] style: reduce gap between settings --- apps/antalmanac/src/components/Header/SettingsMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index 0b46263bf..8039d967a 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -92,7 +92,7 @@ function TimeMenu() { return ( - + Time @@ -145,7 +145,7 @@ function AutofocusMenu() { return ( - + Autofocus From ad854c854683371dc8d4f351da910fabecf884d6 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 27 Dec 2023 04:35:50 -0800 Subject: [PATCH 3/4] style: update heading --- apps/antalmanac/src/components/Header/SettingsMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index 8039d967a..c96a91771 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -146,7 +146,7 @@ function AutofocusMenu() { return ( - Autofocus + Autofocus Search Date: Wed, 27 Dec 2023 04:36:11 -0800 Subject: [PATCH 4/4] feat: hook fuzzysearch up to setting --- .../components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx index bdcc8a0b1..b361f6429 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx @@ -8,6 +8,7 @@ type SearchResult = ReturnType; import RightPaneStore from '../../RightPaneStore'; import analyticsEnum, { logAnalytics } from '$lib/analytics'; +import { useAutofocusStore } from '$stores/SettingsStore'; const emojiMap: Record = { GE_CATEGORY: '🏫', // U+1F3EB :school: @@ -182,7 +183,7 @@ class FuzzySearch extends PureComponent { { - if (input && !isMobile()) { + if (input && !isMobile() && useAutofocusStore.getState().autofocus) { input.focus(); } }}