diff --git a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx index 6698316e4..b36a0adbf 100644 --- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx +++ b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx @@ -2,19 +2,21 @@ import { FileItem, FileViewController, NoteViewController } from '@standardnotes import { PureComponent } from '@/Components/Abstract/PureComponent' import { WebApplication } from '@/Application/Application' import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes' -import NoteView from '@/Components/NoteView/NoteView' import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles' import { ElementIds } from '@/Constants/ElementIDs' -import FileView from '@/Components/FileView/FileView' import { FileDnDContext } from '@/Components/FileDragNDropProvider/FileDragNDropProvider' import { AppPaneId } from '../ResponsivePane/AppPaneMetadata' import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent' +import FileView from '../FileView/FileView' +import NoteView from '../NoteView/NoteView' type State = { showMultipleSelectedNotes: boolean showMultipleSelectedFiles: boolean controllers: (NoteViewController | FileViewController)[] selectedFile: FileItem | undefined + selectedPane?: AppPaneId + isInMobileView?: boolean } type Props = { @@ -73,6 +75,15 @@ class NoteGroupView extends PureComponent { }) } }) + + this.autorun(() => { + if (this.viewControllerManager && this.viewControllerManager.paneController) { + this.setState({ + selectedPane: this.viewControllerManager.paneController.currentPane, + isInMobileView: this.viewControllerManager.paneController.isInMobileView, + }) + } + }) } override deinit() { @@ -88,6 +99,10 @@ class NoteGroupView extends PureComponent { const shouldNotShowMultipleSelectedItems = !this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles + const hasControllers = this.state.controllers.length > 0 + + const canRenderEditorView = this.state.selectedPane === AppPaneId.Editor || !this.state.isInMobileView + return (
{ Drop your files to upload them
)} - {shouldNotShowMultipleSelectedItems && this.state.controllers.length > 0 && ( + {shouldNotShowMultipleSelectedItems && hasControllers && canRenderEditorView && ( <> {this.state.controllers.map((controller) => { return controller instanceof NoteViewController ? ( diff --git a/packages/web/src/javascripts/Controllers/PaneController.ts b/packages/web/src/javascripts/Controllers/PaneController.ts index fc96f3f54..83d21dc2c 100644 --- a/packages/web/src/javascripts/Controllers/PaneController.ts +++ b/packages/web/src/javascripts/Controllers/PaneController.ts @@ -1,19 +1,39 @@ import { AppPaneId } from './../Components/ResponsivePane/AppPaneMetadata' import { isMobileScreen } from '@/Utils' import { makeObservable, observable, action } from 'mobx' +import { Disposer } from '@/Types/Disposer' +import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery' export class PaneController { currentPane: AppPaneId = isMobileScreen() ? AppPaneId.Items : AppPaneId.Editor previousPane: AppPaneId = isMobileScreen() ? AppPaneId.Items : AppPaneId.Editor + isInMobileView = isMobileScreen() + protected disposers: Disposer[] = [] constructor() { makeObservable(this, { currentPane: observable, previousPane: observable, + isInMobileView: observable, setCurrentPane: action, setPreviousPane: action, + setIsInMobileView: action, }) + + window.matchMedia(MediaQueryBreakpoints.md).addEventListener('change', this.mediumScreenMQHandler) + } + + deinit() { + window.matchMedia(MediaQueryBreakpoints.md).removeEventListener('change', this.mediumScreenMQHandler) + } + + mediumScreenMQHandler = (event: MediaQueryListEvent) => { + if (event.matches) { + this.isInMobileView = false + } else { + this.isInMobileView = true + } } setCurrentPane(pane: AppPaneId): void { @@ -23,4 +43,8 @@ export class PaneController { setPreviousPane(pane: AppPaneId): void { this.previousPane = pane } + + setIsInMobileView(isInMobileView: boolean) { + this.isInMobileView = isInMobileView + } } diff --git a/packages/web/src/javascripts/Controllers/ViewControllerManager.ts b/packages/web/src/javascripts/Controllers/ViewControllerManager.ts index 6695a77e3..0da6bdb9f 100644 --- a/packages/web/src/javascripts/Controllers/ViewControllerManager.ts +++ b/packages/web/src/javascripts/Controllers/ViewControllerManager.ts @@ -211,6 +211,8 @@ export class ViewControllerManager { this.historyModalController.deinit() ;(this.historyModalController as unknown) = undefined + + this.paneController.deinit() ;(this.paneController as unknown) = undefined destroyAllObjectProperties(this)