diff --git a/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts b/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts index f77e7fd66..28774417b 100644 --- a/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts +++ b/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts @@ -22,7 +22,6 @@ import { DesktopManager } from '../Device/DesktopManager' import { MomentsService } from '@/Controllers/Moments/MomentsService' import { PersistenceService } from '@/Controllers/Abstract/PersistenceService' import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController' -import { QuickSettingsController } from '@/Controllers/QuickSettingsController' import { PaneController } from '@/Controllers/PaneController/PaneController' import { PreferencesController } from '@/Controllers/PreferencesController' import { FeaturesController } from '@/Controllers/FeaturesController' @@ -172,10 +171,6 @@ export class WebDependencies extends DependencyContainer { return new FilePreviewModalController(application.items) }) - this.bind(Web_TYPES.QuickSettingsController, () => { - return new QuickSettingsController(application.events) - }) - this.bind(Web_TYPES.PaneController, () => { return new PaneController( application.preferences, diff --git a/packages/web/src/javascripts/Application/WebApplication.ts b/packages/web/src/javascripts/Application/WebApplication.ts index 56d1eb159..dbc0f4ece 100644 --- a/packages/web/src/javascripts/Application/WebApplication.ts +++ b/packages/web/src/javascripts/Application/WebApplication.ts @@ -71,7 +71,6 @@ import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalCo import { NavigationController } from '@/Controllers/Navigation/NavigationController' import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController' import { OpenSubscriptionDashboard } from './UseCase/OpenSubscriptionDashboard' -import { QuickSettingsController } from '@/Controllers/QuickSettingsController' import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController' import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController' import { SearchOptionsController } from '@/Controllers/SearchOptionsController' @@ -617,10 +616,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter return this.deps.get(Web_TYPES.PurchaseFlowController) } - get quickSettingsMenuController(): QuickSettingsController { - return this.deps.get(Web_TYPES.QuickSettingsController) - } - get persistence(): PersistenceService { return this.deps.get(Web_TYPES.PersistenceService) } diff --git a/packages/web/src/javascripts/Components/Footer/Footer.tsx b/packages/web/src/javascripts/Components/Footer/Footer.tsx index f6c3107c8..68ce0b448 100644 --- a/packages/web/src/javascripts/Components/Footer/Footer.tsx +++ b/packages/web/src/javascripts/Components/Footer/Footer.tsx @@ -37,7 +37,6 @@ type State = { showSyncResolution: boolean newUpdateAvailable: boolean showAccountMenu: boolean - showQuickSettingsMenu: boolean offline: boolean hasError: boolean arbitraryStatusMessage?: string @@ -64,7 +63,6 @@ class Footer extends AbstractComponent { showSyncResolution: false, newUpdateAvailable: false, showAccountMenu: false, - showQuickSettingsMenu: false, } this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => { @@ -125,7 +123,6 @@ class Footer extends AbstractComponent { this.autorun(() => { this.setState({ showAccountMenu: this.application.accountMenuController.show, - showQuickSettingsMenu: this.application.quickSettingsMenuController.open, }) }) } @@ -293,10 +290,6 @@ class Footer extends AbstractComponent { this.application.accountMenuController.toggleShow() } - quickSettingsClickHandler = () => { - this.application.quickSettingsMenuController.toggle() - } - syncResolutionClickHandler = () => { this.setState({ showSyncResolution: !this.state.showSyncResolution, @@ -336,12 +329,7 @@ class Footer extends AbstractComponent { this.application.accountMenuController.closeAccountMenu() } - clickOutsideQuickSettingsMenu = () => { - this.application.quickSettingsMenuController.closeQuickSettingsMenu() - } - openPreferences = (openWhatsNew: boolean) => { - this.clickOutsideQuickSettingsMenu() if (openWhatsNew) { this.application.preferencesController.setCurrentPane('whats-new') } @@ -372,12 +360,7 @@ class Footer extends AbstractComponent {
- +
diff --git a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx index 85f07924e..ae9a79aba 100644 --- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx +++ b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx @@ -1,9 +1,8 @@ import { WebApplication } from '@/Application/WebApplication' -import { QuickSettingsController } from '@/Controllers/QuickSettingsController' import { UIFeature, GetDarkThemeFeature } from '@standardnotes/snjs' import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services' import { classNames } from '@standardnotes/utils' -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import { useCommandService } from '../CommandProvider' import Icon from '../Icon/Icon' import Popover from '../Popover/Popover' @@ -11,16 +10,16 @@ import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu' import StyledTooltip from '../StyledTooltip/StyledTooltip' type Props = { - isOpen: boolean - toggleMenu: () => void application: WebApplication - quickSettingsMenuController: QuickSettingsController } -const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMenuController }: Props) => { +const QuickSettingsButton = ({ application }: Props) => { const buttonRef = useRef(null) const commandService = useCommandService() + const [isOpen, setIsOpen] = useState(false) + const toggleMenu = () => setIsOpen(!isOpen) + useEffect(() => { return commandService.addCommandHandler({ command: TOGGLE_DARK_MODE_COMMAND, @@ -52,7 +51,7 @@ const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMen align="start" className="py-2" > - + ) diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx index 1c419bb34..af4468890 100644 --- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx +++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx @@ -13,7 +13,6 @@ import Icon from '@/Components/Icon/Icon' import FocusModeSwitch from './FocusModeSwitch' import ThemesMenuButton from './ThemesMenuButton' import { sortThemes } from '@/Utils/SortThemes' -import { QuickSettingsController } from '@/Controllers/QuickSettingsController' import PanelSettingsSection from './PanelSettingsSection' import Menu from '../Menu/Menu' import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem' @@ -23,14 +22,13 @@ import { GetAllThemesUseCase } from '@standardnotes/ui-services' import MenuItemSeparator from '../Menu/MenuItemSeparator' type MenuProps = { - quickSettingsMenuController: QuickSettingsController + closeMenu: () => void } -const QuickSettingsMenu: FunctionComponent = ({ quickSettingsMenuController }) => { +const QuickSettingsMenu: FunctionComponent = ({ closeMenu }) => { const application = useApplication() const { focusModeEnabled, setFocusModeEnabled } = application.paneController - const { closeQuickSettingsMenu } = quickSettingsMenuController const [themes, setThemes] = useState[]>([]) const [editorStackComponents, setEditorStackComponents] = useState([]) @@ -147,7 +145,7 @@ const QuickSettingsMenu: FunctionComponent = ({ quickSettingsMenuCont diff --git a/packages/web/src/javascripts/Controllers/QuickSettingsController.ts b/packages/web/src/javascripts/Controllers/QuickSettingsController.ts deleted file mode 100644 index 1bbfaa604..000000000 --- a/packages/web/src/javascripts/Controllers/QuickSettingsController.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { InternalEventBusInterface } from '@standardnotes/snjs' -import { action, makeObservable, observable } from 'mobx' -import { AbstractViewController } from './Abstract/AbstractViewController' - -export class QuickSettingsController extends AbstractViewController { - open = false - shouldAnimateCloseMenu = false - - constructor(eventBus: InternalEventBusInterface) { - super(eventBus) - - makeObservable(this, { - open: observable, - shouldAnimateCloseMenu: observable, - - setOpen: action, - setShouldAnimateCloseMenu: action, - toggle: action, - closeQuickSettingsMenu: action, - }) - } - - setOpen = (open: boolean): void => { - this.open = open - } - - setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => { - this.shouldAnimateCloseMenu = shouldAnimate - } - - toggle = (): void => { - if (this.open) { - this.closeQuickSettingsMenu() - } else { - this.setOpen(true) - } - } - - closeQuickSettingsMenu = (): void => { - this.setShouldAnimateCloseMenu(true) - setTimeout(() => { - this.setOpen(false) - this.setShouldAnimateCloseMenu(false) - }, 150) - } -}