diff --git a/src/js/component/modal-manager.jsx b/src/js/component/modal-manager.jsx index 3bf2205b..c991a134 100644 --- a/src/js/component/modal-manager.jsx +++ b/src/js/component/modal-manager.jsx @@ -13,13 +13,14 @@ import NewCollectionModal from './modal/new-collection'; import NewFileModal from './modal/new-file'; import NewItemModal from './modal/new-item'; import RenameCollectionModal from './modal/rename-collection'; +import SettingsModal from './modal/settings'; import StyleInstallerModal from './modal/style-installer'; import IdentifierPicker from './modal/identifier-picker'; import ManageTagsModal from './modal/manage-tags'; import { ADD_LINKED_URL_TOUCH, BIBLIOGRAPHY, COLLECTION_ADD, COLLECTION_RENAME, COLLECTION_SELECT, -EXPORT, IDENTIFIER_PICKER, MANAGE_TAGS, MOVE_COLLECTION, NEW_ITEM, SORT_ITEMS, STYLE_INSTALLER, -ADD_BY_IDENTIFIER, NEW_FILE } from '../constants/modals'; +EXPORT, IDENTIFIER_PICKER, MANAGE_TAGS, MOVE_COLLECTION, NEW_ITEM, SETTINGS, SORT_ITEMS, +STYLE_INSTALLER, ADD_BY_IDENTIFIER, NEW_FILE } from '../constants/modals'; const lookup = { [ADD_BY_IDENTIFIER]: AddByIdentifierModal, @@ -36,6 +37,7 @@ const lookup = { [NEW_ITEM]: NewItemModal, [SORT_ITEMS]: ItemsSortModal, [STYLE_INSTALLER]: StyleInstallerModal, + [SETTINGS]: SettingsModal, }; const UNMOUNT_DELAY = 500; // to allow outro animatons (delay in ms) diff --git a/src/js/component/modal/settings.jsx b/src/js/component/modal/settings.jsx new file mode 100644 index 00000000..bd8a1c48 --- /dev/null +++ b/src/js/component/modal/settings.jsx @@ -0,0 +1,141 @@ +import cx from 'classnames'; +import { memo, useCallback, useRef } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { Button, Icon } from 'web-common/components'; + +import Modal from '../ui/modal'; +import { preferenceChange, toggleModal } from '../../actions'; +import { SETTINGS } from '../../constants/modals'; +import Select from '../form/select'; +import { getUniqueId } from '../../utils'; + +const colorSchemeOptions = [ + { label: 'Automatic', value: '' }, + { label: 'Light', value: 'light' }, + { label: 'Dark', value: 'dark' }, +]; + +const densityOptions = [ + { label: 'Automatic', value: '' }, + { label: 'Mouse', value: 'mouse' }, + { label: 'Touch', value: 'touch' }, +]; + +const SettingsModal = () => { + const dispatch = useDispatch(); + const colorScheme = useSelector(state => state.preferences.colorScheme); + const density = useSelector(state => state.preferences.density); + const useDarkModeForContent = useSelector(state => state.preferences.useDarkModeForContent); + const isSmall = useSelector(state => state.device.xxs || state.device.xs || state.device.sm); + const isOpen = useSelector(state => state.modal.id === SETTINGS); + const colorSchemeInputId = useRef(getUniqueId()); + const densityInputId = useRef(getUniqueId()); + const useDarkModeForContentInputId = useRef(getUniqueId()); + + console.log({ isSmall }); + + const handleChange = useCallback(() => true, []); + + const handleSelectColorScheme = useCallback((newColorScheme) => { + dispatch(preferenceChange('colorScheme', newColorScheme)); + }, [dispatch]); + + const handleSelectDensity = useCallback((newDensity) => { + dispatch(preferenceChange('density', newDensity)); + }, [dispatch]); + + const handleUseDarkModeForContentChange = useCallback((ev) => { + dispatch(preferenceChange('useDarkModeForContent', ev.target.checked)); + }, [dispatch]); + + const handleClose = useCallback( + () => dispatch(toggleModal(SETTINGS, false)), + [dispatch]); + + return ( + +
+
+
+
+

+ Settings +

+
+
+ +
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+ + ); +} + +export default memo(SettingsModal); diff --git a/src/js/component/ui/navbar.jsx b/src/js/component/ui/navbar.jsx index cf026869..74d15f6b 100644 --- a/src/js/component/ui/navbar.jsx +++ b/src/js/component/ui/navbar.jsx @@ -1,14 +1,15 @@ import PropTypes from 'prop-types'; -import cx from 'classnames'; import { Fragment, memo, useCallback, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { Button, DropdownToggle, DropdownMenu, DropdownItem, Icon, UncontrolledDropdown } from 'web-common/components'; +import { Button, Icon } from 'web-common/components'; import { useFocusManager } from 'web-common/hooks'; import { isTriggerEvent } from 'web-common/utils'; import MenuEntry from './menu-entry'; import Search from './../../component/search'; -import { currentTriggerSearchMode, preferenceChange, toggleNavbar, toggleTouchTagSelector } from '../../actions'; +import { SETTINGS } from '../../constants/modals'; +import { currentTriggerSearchMode, toggleModal, + toggleNavbar, toggleTouchTagSelector } from '../../actions'; const Navbar = memo(({ entries = [] }) => { const ref = useRef(null); @@ -18,8 +19,6 @@ const Navbar = memo(({ entries = [] }) => { const isLibrariesView = useSelector(state => state.current.view === 'libraries'); const isSingleColumn = useSelector(state => state.device.isSingleColumn); const colorScheme = useSelector(state => state.preferences.colorScheme); - // useDarkModeForContent === null means enabled - const useDarkModeForContent = useSelector(state => state.preferences.useDarkModeForContent) ?? true; const handleSearchButtonClick = useCallback(() => { dispatch(currentTriggerSearchMode()); @@ -29,16 +28,6 @@ const Navbar = memo(({ entries = [] }) => { dispatch(toggleTouchTagSelector()); }, [dispatch]); - const handleSelectColorScheme = useCallback((ev) => { - const colorScheme = ev.target.dataset.colorScheme === 'automatic' - ? null : ev.target.dataset.colorScheme; - dispatch(preferenceChange('colorScheme', colorScheme)); - }, [dispatch]); - - const handleToggleUseDarkModeForContent = useCallback(() => { - dispatch(preferenceChange('useDarkModeForContent', !useDarkModeForContent)); - }, [dispatch, useDarkModeForContent]); - const handleKeyDown = useCallback(ev => { if(ev.target !== ev.currentTarget) { return; @@ -55,6 +44,10 @@ const Navbar = memo(({ entries = [] }) => { } }, [focusNext, focusPrev]); + const handleSettingsButtonClick = useCallback(() => { + dispatch(toggleModal(SETTINGS, true)); + }, [dispatch]); + const handleNavbarToggle = useCallback(() => { dispatch(toggleNavbar(null)); }, [dispatch]); @@ -122,63 +115,16 @@ const Navbar = memo(({ entries = [] }) => { ) } - - - - - - - - { !colorScheme ? "✓" : ""} - Automatic - - - { colorScheme === 'light' ? "✓" : "" } - Light - - - { colorScheme === 'dark' ? "✓" : "" } - Dark - - - - {useDarkModeForContent ? "✓" : ""} - Use Dark Mode for content - - - + +