From 270fcbc3bc87d619ef65d80905ae0063edfde222 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Tue, 21 Dec 2021 20:31:11 +0530 Subject: [PATCH] refactor: Move notes_view to React (#761) --- app/assets/javascripts/app.ts | 4 +- .../components/NoAccountWarning.tsx | 2 +- .../javascripts/components/NotesList.tsx | 107 ++ .../javascripts/components/NotesListItem.tsx | 142 +++ .../components/NotesListOptionsMenu.tsx | 10 +- .../javascripts/components/NotesView.tsx | 256 +++++ .../javascripts/components/PanelResizer.tsx | 60 ++ .../javascripts/components/SearchOptions.tsx | 2 +- .../directives/views/panelResizer.ts | 105 +- app/assets/javascripts/services/ioService.ts | 17 +- .../ui_models/app_state/app_state.ts | 7 + .../ui_models/app_state/notes_view_state.ts | 541 ++++++++++ .../javascripts/ui_models/panel_resizer.ts | 291 ++++++ .../views/application/application-view.pug | 5 +- app/assets/javascripts/views/index.ts | 1 - .../javascripts/views/notes/notes-view.pug | 115 --- .../javascripts/views/notes/notes_view.ts | 955 ------------------ app/assets/stylesheets/_focused.scss | 6 +- app/assets/stylesheets/_main.scss | 2 +- app/assets/stylesheets/_notes.scss | 9 +- 20 files changed, 1495 insertions(+), 1142 deletions(-) create mode 100644 app/assets/javascripts/components/NotesList.tsx create mode 100644 app/assets/javascripts/components/NotesListItem.tsx create mode 100644 app/assets/javascripts/components/NotesView.tsx create mode 100644 app/assets/javascripts/components/PanelResizer.tsx create mode 100644 app/assets/javascripts/ui_models/app_state/notes_view_state.ts create mode 100644 app/assets/javascripts/ui_models/panel_resizer.ts delete mode 100644 app/assets/javascripts/views/notes/notes-view.pug delete mode 100644 app/assets/javascripts/views/notes/notes_view.ts diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts index d9f5f8105..6202a9353 100644 --- a/app/assets/javascripts/app.ts +++ b/app/assets/javascripts/app.ts @@ -26,7 +26,6 @@ import { EditorGroupView, EditorView, TagsView, - NotesView, FooterView, ChallengeModal, } from '@/views'; @@ -81,6 +80,7 @@ import { PurchaseFlowDirective } from './purchaseFlow'; import { QuickSettingsMenuDirective } from './components/QuickSettingsMenu/QuickSettingsMenu'; import { ComponentViewDirective } from '@/components/ComponentView'; import { TagsListDirective } from '@/components/TagsList'; +import { NotesViewDirective } from './components/NotesView'; import { PinNoteButtonDirective } from '@/components/PinNoteButton'; function reloadHiddenFirefoxTab(): boolean { @@ -137,7 +137,6 @@ const startApplication: StartApplication = async function startApplication( .directive('editorGroupView', () => new EditorGroupView()) .directive('editorView', () => new EditorView()) .directive('tagsView', () => new TagsView()) - .directive('notesView', () => new NotesView()) .directive('footerView', () => new FooterView()); // Directives - Functional @@ -186,6 +185,7 @@ const startApplication: StartApplication = async function startApplication( .directive('tags', TagsListDirective) .directive('preferences', PreferencesDirective) .directive('purchaseFlow', PurchaseFlowDirective) + .directive('notesView', NotesViewDirective) .directive('pinNoteButton', PinNoteButtonDirective); // Filters diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/components/NoAccountWarning.tsx index a462b4920..e2fc6a115 100644 --- a/app/assets/javascripts/components/NoAccountWarning.tsx +++ b/app/assets/javascripts/components/NoAccountWarning.tsx @@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'; type Props = { appState: AppState }; -const NoAccountWarning = observer(({ appState }: Props) => { +export const NoAccountWarning = observer(({ appState }: Props) => { const canShow = appState.noAccountWarning.show; if (!canShow) { return null; diff --git a/app/assets/javascripts/components/NotesList.tsx b/app/assets/javascripts/components/NotesList.tsx new file mode 100644 index 000000000..e443393aa --- /dev/null +++ b/app/assets/javascripts/components/NotesList.tsx @@ -0,0 +1,107 @@ +import { KeyboardKey } from '@/services/ioService'; +import { AppState } from '@/ui_models/app_state'; +import { DisplayOptions } from '@/ui_models/app_state/notes_view_state'; +import { SNNote } from '@standardnotes/snjs'; +import { observer } from 'mobx-react-lite'; +import { FunctionComponent } from 'preact'; +import { NotesListItem } from './NotesListItem'; + +type Props = { + appState: AppState; + notes: SNNote[]; + selectedNotes: Record; + displayOptions: DisplayOptions; + paginate: () => void; +}; + +const FOCUSABLE_BUT_NOT_TABBABLE = -1; +const NOTES_LIST_SCROLL_THRESHOLD = 200; + +export const NotesList: FunctionComponent = observer( + ({ appState, notes, selectedNotes, displayOptions, paginate }) => { + const { selectPreviousNote, selectNextNote } = appState.notesView; + const { hideTags, hideDate, hideNotePreview, sortBy } = displayOptions; + + const tagsStringForNote = (note: SNNote): string => { + if (hideTags) { + return ''; + } + const selectedTag = appState.selectedTag; + if (!selectedTag) { + return ''; + } + const tags = appState.getNoteTags(note); + if (!selectedTag.isSmartTag && tags.length === 1) { + return ''; + } + return tags.map((tag) => `#${tag.title}`).join(' '); + }; + + const openNoteContextMenu = (posX: number, posY: number) => { + appState.notes.setContextMenuClickLocation({ + x: posX, + y: posY, + }); + appState.notes.reloadContextMenuLayout(); + appState.notes.setContextMenuOpen(true); + }; + + const onContextMenu = async (note: SNNote, posX: number, posY: number) => { + await appState.notes.selectNote(note.uuid, true); + if (selectedNotes[note.uuid]) { + openNoteContextMenu(posX, posY); + } + }; + + const onScroll = (e: Event) => { + const offset = NOTES_LIST_SCROLL_THRESHOLD; + const element = e.target as HTMLElement; + if ( + element.scrollTop + element.offsetHeight >= + element.scrollHeight - offset + ) { + paginate(); + } + }; + + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === KeyboardKey.Up) { + e.preventDefault(); + selectPreviousNote(); + } else if (e.key === KeyboardKey.Down) { + e.preventDefault(); + selectNextNote(); + } + }; + + return ( +
+ {notes.map((note) => ( + { + appState.notes.selectNote(note.uuid, true); + }} + onContextMenu={(e: MouseEvent) => { + e.preventDefault(); + onContextMenu(note, e.clientX, e.clientY); + }} + /> + ))} +
+ ); + } +); diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/components/NotesListItem.tsx new file mode 100644 index 000000000..bd3e0598b --- /dev/null +++ b/app/assets/javascripts/components/NotesListItem.tsx @@ -0,0 +1,142 @@ +import { CollectionSort, SNNote } from '@standardnotes/snjs'; +import { FunctionComponent } from 'preact'; + +type Props = { + note: SNNote; + tags: string; + hideDate: boolean; + hidePreview: boolean; + hideTags: boolean; + onClick: () => void; + onContextMenu: (e: MouseEvent) => void; + selected: boolean; + sortedBy?: CollectionSort; +}; + +type NoteFlag = { + text: string; + class: 'info' | 'neutral' | 'warning' | 'success' | 'danger'; +}; + +const flagsForNote = (note: SNNote) => { + const flags = [] as NoteFlag[]; + if (note.pinned) { + flags.push({ + text: 'Pinned', + class: 'info', + }); + } + if (note.archived) { + flags.push({ + text: 'Archived', + class: 'warning', + }); + } + if (note.locked) { + flags.push({ + text: 'Editing Disabled', + class: 'neutral', + }); + } + if (note.trashed) { + flags.push({ + text: 'Deleted', + class: 'danger', + }); + } + if (note.conflictOf) { + flags.push({ + text: 'Conflicted Copy', + class: 'danger', + }); + } + if (note.errorDecrypting) { + if (note.waitingForKey) { + flags.push({ + text: 'Waiting For Keys', + class: 'info', + }); + } else { + flags.push({ + text: 'Missing Keys', + class: 'danger', + }); + } + } + if (note.deleted) { + flags.push({ + text: 'Deletion Pending Sync', + class: 'danger', + }); + } + return flags; +}; + +export const NotesListItem: FunctionComponent = ({ + hideDate, + hidePreview, + hideTags, + note, + onClick, + onContextMenu, + selected, + sortedBy, + tags, +}) => { + const flags = flagsForNote(note); + const showModifiedDate = sortedBy === CollectionSort.UpdatedAt; + + return ( +
+ {flags && flags.length > 0 ? ( +
+ {flags.map((flag) => ( +
+
{flag.text}
+
+ ))} +
+ ) : null} +
{note.title}
+ {!hidePreview && !note.hidePreview && !note.protected ? ( +
+ {note.preview_html ? ( +
+ ) : null} + {!note.preview_html && note.preview_plain ? ( +
{note.preview_plain}
+ ) : null} + {!note.preview_html && !note.preview_plain ? ( +
{note.text}
+ ) : null} +
+ ) : null} + {!hideDate || note.protected ? ( +
+ {note.protected ? ( + Protected {hideDate ? '' : ' • '} + ) : null} + {!hideDate && showModifiedDate ? ( + Modified {note.updatedAtString || 'Now'} + ) : null} + {!hideDate && !showModifiedDate ? ( + {note.createdAtString || 'Now'} + ) : null} +
+ ) : null} + {!hideTags && ( +
+
{tags}
+
+ )} +
+ ); +}; diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx index 861b96a51..ea59f76f0 100644 --- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx +++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx @@ -10,11 +10,11 @@ import { toDirective, useCloseOnClickOutside } from './utils'; type Props = { application: WebApplication; - setShowMenuFalse: () => void; + closeDisplayOptionsMenu: () => void; }; export const NotesListOptionsMenu: FunctionComponent = observer( - ({ setShowMenuFalse, application }) => { + ({ closeDisplayOptionsMenu, application }) => { const menuClassName = 'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \ border-1 border-solid border-main text-sm z-index-dropdown-menu \ @@ -112,13 +112,13 @@ flex flex-col py-2 bottom-0 left-2 absolute'; useCloseOnClickOutside(menuRef as any, (open: boolean) => { if (!open) { - setShowMenuFalse(); + closeDisplayOptionsMenu(); } }); return (
- +
Sort by
@@ -246,7 +246,7 @@ flex flex-col py-2 bottom-0 left-2 absolute'; export const NotesListOptionsDirective = toDirective( NotesListOptionsMenu, { - setShowMenuFalse: '=', + closeDisplayOptionsMenu: '=', state: '&', } ); diff --git a/app/assets/javascripts/components/NotesView.tsx b/app/assets/javascripts/components/NotesView.tsx new file mode 100644 index 000000000..004a54e1d --- /dev/null +++ b/app/assets/javascripts/components/NotesView.tsx @@ -0,0 +1,256 @@ +import { + PanelSide, + ResizeFinishCallback, +} from '@/directives/views/panelResizer'; +import { KeyboardKey, KeyboardModifier } from '@/services/ioService'; +import { WebApplication } from '@/ui_models/application'; +import { AppState } from '@/ui_models/app_state'; +import { PANEL_NAME_NOTES } from '@/views/constants'; +import { PrefKey } from '@standardnotes/snjs'; +import { observer } from 'mobx-react-lite'; +import { FunctionComponent } from 'preact'; +import { useEffect, useRef } from 'preact/hooks'; +import { NoAccountWarning } from './NoAccountWarning'; +import { NotesList } from './NotesList'; +import { NotesListOptionsMenu } from './NotesListOptionsMenu'; +import { PanelResizer } from './PanelResizer'; +import { SearchOptions } from './SearchOptions'; +import { toDirective } from './utils'; + +type Props = { + application: WebApplication; + appState: AppState; +}; + +const NotesView: FunctionComponent = observer( + ({ application, appState }) => { + const notesViewPanelRef = useRef(null); + + const { + completedFullSync, + createNewNote, + displayOptions, + noteFilterText, + optionsSubtitle, + panelTitle, + renderedNotes, + selectedNotes, + setNoteFilterText, + showDisplayOptionsMenu, + toggleDisplayOptionsMenu, + searchBarElement, + selectNextNote, + selectPreviousNote, + onFilterEnter, + handleFilterTextChanged, + onSearchInputBlur, + clearFilterText, + paginate, + } = appState.notesView; + + useEffect(() => { + handleFilterTextChanged(); + }, [noteFilterText, handleFilterTextChanged]); + + useEffect(() => { + /** + * In the browser we're not allowed to override cmd/ctrl + n, so we have to + * use Control modifier as well. These rules don't apply to desktop, but + * probably better to be consistent. + */ + const newNoteKeyObserver = application.io.addKeyObserver({ + key: 'n', + modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl], + onKeyDown: (event) => { + event.preventDefault(); + createNewNote(); + }, + }); + + const nextNoteKeyObserver = application.io.addKeyObserver({ + key: KeyboardKey.Down, + elements: [ + document.body, + ...(searchBarElement ? [searchBarElement] : []), + ], + onKeyDown: () => { + if (searchBarElement === document.activeElement) { + searchBarElement?.blur(); + } + selectNextNote(); + }, + }); + + const previousNoteKeyObserver = application.io.addKeyObserver({ + key: KeyboardKey.Up, + element: document.body, + onKeyDown: () => { + selectPreviousNote(); + }, + }); + + const searchKeyObserver = application.io.addKeyObserver({ + key: 'f', + modifiers: [KeyboardModifier.Meta, KeyboardModifier.Shift], + onKeyDown: () => { + if (searchBarElement) { + searchBarElement.focus(); + } + }, + }); + + return () => { + newNoteKeyObserver(); + nextNoteKeyObserver(); + previousNoteKeyObserver(); + searchKeyObserver(); + }; + }, [ + application.io, + createNewNote, + searchBarElement, + selectNextNote, + selectPreviousNote, + ]); + + const onNoteFilterTextChange = (e: Event) => { + setNoteFilterText((e.target as HTMLInputElement).value); + }; + + const onNoteFilterKeyUp = (e: KeyboardEvent) => { + if (e.key === KeyboardKey.Enter) { + onFilterEnter(); + } + }; + + const panelResizeFinishCallback: ResizeFinishCallback = ( + _w, + _l, + _mw, + isCollapsed + ) => { + appState.noteTags.reloadTagsContainerMaxWidth(); + appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed); + }; + + const panelWidthEventCallback = () => { + appState.noteTags.reloadTagsContainerMaxWidth(); + }; + + return ( +
+
+
+
+
+
{panelTitle}
+ +
+
+ onSearchInputBlur()} + /> + {noteFilterText ? ( + + ) : null} +
+ +
+
+ +
+
+
+
+
+ toggleDisplayOptionsMenu(!showDisplayOptionsMenu) + } + > +
+
Options
+
+
+
{optionsSubtitle}
+
+
+
+
+ {showDisplayOptionsMenu && ( + + toggleDisplayOptionsMenu(false) + } + /> + )} +
+
+ {completedFullSync && !renderedNotes.length ? ( +

No notes.

+ ) : null} + {!completedFullSync && !renderedNotes.length ? ( +

Loading notes...

+ ) : null} + {renderedNotes.length ? ( + + ) : null} +
+ {notesViewPanelRef.current && ( + + )} +
+ ); + } +); + +export const NotesViewDirective = toDirective(NotesView); diff --git a/app/assets/javascripts/components/PanelResizer.tsx b/app/assets/javascripts/components/PanelResizer.tsx new file mode 100644 index 000000000..22a73d92e --- /dev/null +++ b/app/assets/javascripts/components/PanelResizer.tsx @@ -0,0 +1,60 @@ +import { + PanelResizerProps, + PanelResizerState, +} from '@/ui_models/panel_resizer'; +import { observer } from 'mobx-react-lite'; +import { FunctionComponent } from 'preact'; +import { useEffect, useRef, useState } from 'preact/hooks'; + +export const PanelResizer: FunctionComponent = observer( + ({ + alwaysVisible, + application, + defaultWidth, + hoverable, + collapsable, + minWidth, + panel, + prefKey, + resizeFinishCallback, + side, + widthEventCallback, + }) => { + const [panelResizerState] = useState( + () => + new PanelResizerState({ + alwaysVisible, + application, + defaultWidth, + hoverable, + collapsable, + minWidth, + panel, + prefKey, + resizeFinishCallback, + side, + widthEventCallback, + }) + ); + const panelResizerRef = useRef(null); + + useEffect(() => { + if (panelResizerRef.current) { + panelResizerState.setMinWidth(panelResizerRef.current.offsetWidth + 2); + } + }, [panelResizerState]); + + return ( +
+ ); + } +); diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx index a67dfcc60..df71dbfd2 100644 --- a/app/assets/javascripts/components/SearchOptions.tsx +++ b/app/assets/javascripts/components/SearchOptions.tsx @@ -17,7 +17,7 @@ type Props = { application: WebApplication; }; -const SearchOptions = observer(({ appState }: Props) => { +export const SearchOptions = observer(({ appState }: Props) => { const { searchOptions } = appState; const { diff --git a/app/assets/javascripts/directives/views/panelResizer.ts b/app/assets/javascripts/directives/views/panelResizer.ts index 99d054ea5..739225dc6 100644 --- a/app/assets/javascripts/directives/views/panelResizer.ts +++ b/app/assets/javascripts/directives/views/panelResizer.ts @@ -3,14 +3,14 @@ import angular from 'angular'; import template from '%/directives/panel-resizer.pug'; import { debounce } from '@/utils'; -enum PanelSide { +export enum PanelSide { Right = 'right', - Left = 'left' + Left = 'left', } enum MouseEventType { Move = 'mousemove', Down = 'mousedown', - Up = 'mouseup' + Up = 'mouseup', } enum CssClass { Hoverable = 'hoverable', @@ -22,64 +22,63 @@ enum CssClass { } const WINDOW_EVENT_RESIZE = 'resize'; -type ResizeFinishCallback = ( +export type ResizeFinishCallback = ( lastWidth: number, lastLeft: number, isMaxWidth: boolean, isCollapsed: boolean -) => void +) => void; interface PanelResizerScope { - alwaysVisible: boolean - collapsable: boolean - control: PanelPuppet - defaultWidth: number - hoverable: boolean - index: number - minWidth: number - onResizeFinish: () => ResizeFinishCallback - onWidthEvent?: () => void - panelId: string - property: PanelSide + alwaysVisible: boolean; + collapsable: boolean; + control: PanelPuppet; + defaultWidth: number; + hoverable: boolean; + index: number; + minWidth: number; + onResizeFinish: () => ResizeFinishCallback; + onWidthEvent?: () => void; + panelId: string; + property: PanelSide; } class PanelResizerCtrl implements PanelResizerScope { - /** @scope */ - alwaysVisible!: boolean - collapsable!: boolean - control!: PanelPuppet - defaultWidth!: number - hoverable!: boolean - index!: number - minWidth!: number - onResizeFinish!: () => ResizeFinishCallback - onWidthEvent?: () => () => void - panelId!: string - property!: PanelSide + alwaysVisible!: boolean; + collapsable!: boolean; + control!: PanelPuppet; + defaultWidth!: number; + hoverable!: boolean; + index!: number; + minWidth!: number; + onResizeFinish!: () => ResizeFinishCallback; + onWidthEvent?: () => () => void; + panelId!: string; + property!: PanelSide; - $compile: ng.ICompileService - $element: JQLite - $timeout: ng.ITimeoutService - panel!: HTMLElement - resizerColumn!: HTMLElement - currentMinWidth = 0 - pressed = false - startWidth = 0 - lastDownX = 0 - collapsed = false - lastWidth = 0 - startLeft = 0 - lastLeft = 0 - appFrame?: DOMRect - widthBeforeLastDblClick = 0 - overlay?: JQLite + $compile: ng.ICompileService; + $element: JQLite; + $timeout: ng.ITimeoutService; + panel!: HTMLElement; + resizerColumn!: HTMLElement; + currentMinWidth = 0; + pressed = false; + startWidth = 0; + lastDownX = 0; + collapsed = false; + lastWidth = 0; + startLeft = 0; + lastLeft = 0; + appFrame?: DOMRect; + widthBeforeLastDblClick = 0; + overlay?: JQLite; /* @ngInject */ constructor( $compile: ng.ICompileService, $element: JQLite, - $timeout: ng.ITimeoutService, + $timeout: ng.ITimeoutService ) { this.$compile = $compile; this.$element = $element; @@ -109,7 +108,10 @@ class PanelResizerCtrl implements PanelResizerScope { window.removeEventListener(WINDOW_EVENT_RESIZE, this.handleResize); document.removeEventListener(MouseEventType.Move, this.onMouseMove); document.removeEventListener(MouseEventType.Up, this.onMouseUp); - this.resizerColumn.removeEventListener(MouseEventType.Down, this.onMouseDown); + this.resizerColumn.removeEventListener( + MouseEventType.Down, + this.onMouseDown + ); (this.handleResize as any) = undefined; (this.onMouseMove as any) = undefined; (this.onMouseUp as any) = undefined; @@ -140,7 +142,7 @@ class PanelResizerCtrl implements PanelResizerScope { return; } this.resizerColumn = this.$element[0]; - this.currentMinWidth = this.minWidth || (this.resizerColumn.offsetWidth + 2); + this.currentMinWidth = this.minWidth || this.resizerColumn.offsetWidth + 2; this.pressed = false; this.startWidth = this.panel.scrollWidth; this.lastDownX = 0; @@ -313,7 +315,8 @@ class PanelResizerCtrl implements PanelResizerScope { width = parentRect.width; } - const maxWidth = this.appFrame!.width - this.panel.getBoundingClientRect().x; + const maxWidth = + this.appFrame!.width - this.panel.getBoundingClientRect().x; if (width > maxWidth) { width = maxWidth; } @@ -356,7 +359,9 @@ class PanelResizerCtrl implements PanelResizerScope { if (this.overlay) { return; } - this.overlay = this.$compile(`
`)(this as any); + this.overlay = this.$compile(`
`)( + this as any + ); angular.element(document.body).prepend(this.overlay); } @@ -395,7 +400,7 @@ export class PanelResizer extends WebDirective { onResizeFinish: '&', onWidthEvent: '&', panelId: '=', - property: '=' + property: '=', }; } } diff --git a/app/assets/javascripts/services/ioService.ts b/app/assets/javascripts/services/ioService.ts index e1c775047..5883ba1aa 100644 --- a/app/assets/javascripts/services/ioService.ts +++ b/app/assets/javascripts/services/ioService.ts @@ -4,6 +4,7 @@ export enum KeyboardKey { Backspace = 'Backspace', Up = 'ArrowUp', Down = 'ArrowDown', + Enter = 'Enter', } export enum KeyboardModifier { @@ -51,7 +52,9 @@ export class IOService { (this.handleWindowBlur as unknown) = undefined; } - private addActiveModifier = (modifier: KeyboardModifier | undefined): void => { + private addActiveModifier = ( + modifier: KeyboardModifier | undefined + ): void => { if (!modifier) { return; } @@ -73,14 +76,16 @@ export class IOService { break; } } - } + }; - private removeActiveModifier = (modifier: KeyboardModifier | undefined): void => { + private removeActiveModifier = ( + modifier: KeyboardModifier | undefined + ): void => { if (!modifier) { return; } this.activeModifiers.delete(modifier); - } + }; handleKeyDown = (event: KeyboardEvent): void => { for (const modifier of this.modifiersForEvent(event)) { @@ -91,7 +96,7 @@ export class IOService { handleComponentKeyDown = (modifier: KeyboardModifier | undefined): void => { this.addActiveModifier(modifier); - } + }; handleKeyUp = (event: KeyboardEvent): void => { for (const modifier of this.modifiersForEvent(event)) { @@ -102,7 +107,7 @@ export class IOService { handleComponentKeyUp = (modifier: KeyboardModifier | undefined): void => { this.removeActiveModifier(modifier); - } + }; handleWindowBlur = (): void => { for (const modifier of this.activeModifiers) { diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts index 7ee09f8d8..98e88e81b 100644 --- a/app/assets/javascripts/ui_models/app_state/app_state.ts +++ b/app/assets/javascripts/ui_models/app_state/app_state.ts @@ -23,6 +23,7 @@ import { } from 'mobx'; import { ActionsMenuState } from './actions_menu_state'; import { NotesState } from './notes_state'; +import { NotesViewState } from './notes_view_state'; import { NoteTagsState } from './note_tags_state'; import { NoAccountWarningState } from './no_account_warning_state'; import { PreferencesState } from './preferences_state'; @@ -86,6 +87,7 @@ export class AppState { readonly searchOptions: SearchOptionsState; readonly notes: NotesState; readonly tags: TagsState; + readonly notesView: NotesViewState; isSessionsModalVisible = false; private appEventObserverRemovers: (() => void)[] = []; @@ -127,6 +129,11 @@ export class AppState { this.appEventObserverRemovers ); this.purchaseFlow = new PurchaseFlowState(application); + this.notesView = new NotesViewState( + application, + this, + this.appEventObserverRemovers + ); this.addAppEventObserver(); this.streamNotesAndTags(); this.onVisibilityChange = () => { diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts new file mode 100644 index 000000000..62a5f6047 --- /dev/null +++ b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts @@ -0,0 +1,541 @@ +import { + ApplicationEvent, + CollectionSort, + ContentType, + findInArray, + NotesDisplayCriteria, + PrefKey, + SNNote, + SNTag, + UuidString, +} from '@standardnotes/snjs'; +import { + action, + autorun, + computed, + makeObservable, + observable, + reaction, +} from 'mobx'; +import { AppState, AppStateEvent } from '.'; +import { WebApplication } from '../application'; + +const MIN_NOTE_CELL_HEIGHT = 51.0; +const DEFAULT_LIST_NUM_NOTES = 20; +const ELEMENT_ID_SEARCH_BAR = 'search-bar'; +const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable'; + +export type DisplayOptions = { + sortBy: CollectionSort; + sortReverse: boolean; + hidePinned: boolean; + showArchived: boolean; + showTrashed: boolean; + hideProtected: boolean; + hideTags: boolean; + hideNotePreview: boolean; + hideDate: boolean; +}; + +export class NotesViewState { + completedFullSync = false; + noteFilterText = ''; + notes: SNNote[] = []; + notesToDisplay = 0; + pageSize = 0; + panelTitle = 'All Notes'; + renderedNotes: SNNote[] = []; + searchSubmitted = false; + selectedNotes: Record = {}; + showDisplayOptionsMenu = false; + displayOptions = { + sortBy: CollectionSort.CreatedAt, + sortReverse: false, + hidePinned: false, + showArchived: false, + showTrashed: false, + hideProtected: false, + hideTags: true, + hideDate: false, + hideNotePreview: false, + }; + + constructor( + private application: WebApplication, + private appState: AppState, + appObservers: (() => void)[] + ) { + this.resetPagination(); + + appObservers.push( + application.streamItems(ContentType.Note, () => { + this.reloadNotes(); + const activeNote = this.appState.notes.activeEditor?.note; + if (this.application.getAppState().notes.selectedNotesCount < 2) { + if (activeNote) { + const discarded = activeNote.deleted || activeNote.trashed; + if ( + discarded && + !this.appState?.selectedTag?.isTrashTag && + !this.appState?.searchOptions.includeTrashed + ) { + this.selectNextOrCreateNew(); + } else if (!this.selectedNotes[activeNote.uuid]) { + this.selectNote(activeNote); + } + } else { + this.selectFirstNote(); + } + } + }), + application.streamItems([ContentType.Tag], async (items) => { + const tags = items as SNTag[]; + /** A tag could have changed its relationships, so we need to reload the filter */ + this.reloadNotesDisplayOptions(); + this.reloadNotes(); + if (findInArray(tags, 'uuid', this.appState.selectedTag?.uuid)) { + /** Tag title could have changed */ + this.reloadPanelTitle(); + } + }), + application.addEventObserver(async () => { + this.reloadPreferences(); + }, ApplicationEvent.PreferencesChanged), + application.addEventObserver(async () => { + this.appState.closeAllEditors(); + this.selectFirstNote(); + this.setCompletedFullSync(false); + }, ApplicationEvent.SignedIn), + application.addEventObserver(async () => { + this.reloadNotes(); + if ( + this.notes.length === 0 && + this.appState.selectedTag?.isAllTag && + this.noteFilterText === '' + ) { + this.createPlaceholderNote(); + } + this.setCompletedFullSync(true); + }, ApplicationEvent.CompletedFullSync), + autorun(() => { + if (appState.notes.selectedNotes) { + this.syncSelectedNotes(); + } + }), + reaction( + () => [ + appState.searchOptions.includeProtectedContents, + appState.searchOptions.includeArchived, + appState.searchOptions.includeTrashed, + ], + () => { + this.reloadNotesDisplayOptions(); + this.reloadNotes(); + } + ), + appState.addObserver(async (eventName) => { + if (eventName === AppStateEvent.TagChanged) { + this.handleTagChange(); + } else if (eventName === AppStateEvent.ActiveEditorChanged) { + this.handleEditorChange(); + } else if (eventName === AppStateEvent.EditorFocused) { + this.toggleDisplayOptionsMenu(false); + } + }) + ); + + makeObservable(this, { + completedFullSync: observable, + displayOptions: observable.struct, + noteFilterText: observable, + notes: observable, + notesToDisplay: observable, + panelTitle: observable, + renderedNotes: observable, + selectedNotes: observable, + showDisplayOptionsMenu: observable, + + reloadNotes: action, + reloadPanelTitle: action, + reloadPreferences: action, + resetPagination: action, + setCompletedFullSync: action, + setNoteFilterText: action, + syncSelectedNotes: action, + toggleDisplayOptionsMenu: action, + onFilterEnter: action, + handleFilterTextChanged: action, + + optionsSubtitle: computed, + }); + + window.onresize = () => { + this.resetPagination(true); + }; + } + + setCompletedFullSync = (completed: boolean) => { + this.completedFullSync = completed; + }; + + toggleDisplayOptionsMenu = (enabled: boolean) => { + this.showDisplayOptionsMenu = enabled; + }; + + get searchBarElement() { + return document.getElementById(ELEMENT_ID_SEARCH_BAR); + } + + get isFiltering(): boolean { + return !!this.noteFilterText && this.noteFilterText.length > 0; + } + + get activeEditorNote() { + return this.appState.notes.activeEditor?.note; + } + + reloadPanelTitle = () => { + let title = this.panelTitle; + if (this.isFiltering) { + const resultCount = this.notes.length; + title = `${resultCount} search results`; + } else if (this.appState.selectedTag) { + title = `${this.appState.selectedTag.title}`; + } + this.panelTitle = title; + }; + + reloadNotes = () => { + const tag = this.appState.selectedTag; + if (!tag) { + return; + } + const notes = this.application.getDisplayableItems( + ContentType.Note + ) as SNNote[]; + const renderedNotes = notes.slice(0, this.notesToDisplay); + + this.notes = notes; + this.renderedNotes = renderedNotes; + this.reloadPanelTitle(); + }; + + reloadNotesDisplayOptions = () => { + const tag = this.appState.selectedTag; + + const searchText = this.noteFilterText.toLowerCase(); + const isSearching = searchText.length; + let includeArchived: boolean; + let includeTrashed: boolean; + + if (isSearching) { + includeArchived = this.appState.searchOptions.includeArchived; + includeTrashed = this.appState.searchOptions.includeTrashed; + } else { + includeArchived = this.displayOptions.showArchived ?? false; + includeTrashed = this.displayOptions.showTrashed ?? false; + } + + const criteria = NotesDisplayCriteria.Create({ + sortProperty: this.displayOptions.sortBy as CollectionSort, + sortDirection: this.displayOptions.sortReverse ? 'asc' : 'dsc', + tags: tag ? [tag] : [], + includeArchived, + includeTrashed, + includePinned: !this.displayOptions.hidePinned, + includeProtected: !this.displayOptions.hideProtected, + searchQuery: { + query: searchText, + includeProtectedNoteText: + this.appState.searchOptions.includeProtectedContents, + }, + }); + this.application.setNotesDisplayCriteria(criteria); + }; + + reloadPreferences = () => { + const freshDisplayOptions = {} as DisplayOptions; + const currentSortBy = this.displayOptions.sortBy; + let sortBy = this.application.getPreference( + PrefKey.SortNotesBy, + CollectionSort.CreatedAt + ); + if ( + sortBy === CollectionSort.UpdatedAt || + (sortBy as string) === 'client_updated_at' + ) { + /** Use UserUpdatedAt instead */ + sortBy = CollectionSort.UpdatedAt; + } + freshDisplayOptions.sortBy = sortBy; + freshDisplayOptions.sortReverse = this.application.getPreference( + PrefKey.SortNotesReverse, + false + ); + freshDisplayOptions.showArchived = this.application.getPreference( + PrefKey.NotesShowArchived, + false + ); + freshDisplayOptions.showTrashed = this.application.getPreference( + PrefKey.NotesShowTrashed, + false + ) as boolean; + freshDisplayOptions.hidePinned = this.application.getPreference( + PrefKey.NotesHidePinned, + false + ); + freshDisplayOptions.hideProtected = this.application.getPreference( + PrefKey.NotesHideProtected, + false + ); + freshDisplayOptions.hideNotePreview = this.application.getPreference( + PrefKey.NotesHideNotePreview, + false + ); + freshDisplayOptions.hideDate = this.application.getPreference( + PrefKey.NotesHideDate, + false + ); + freshDisplayOptions.hideTags = this.application.getPreference( + PrefKey.NotesHideTags, + true + ); + const displayOptionsChanged = + freshDisplayOptions.sortBy !== this.displayOptions.sortBy || + freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse || + freshDisplayOptions.hidePinned !== this.displayOptions.hidePinned || + freshDisplayOptions.showArchived !== this.displayOptions.showArchived || + freshDisplayOptions.showTrashed !== this.displayOptions.showTrashed || + freshDisplayOptions.hideProtected !== this.displayOptions.hideProtected || + freshDisplayOptions.hideTags !== this.displayOptions.hideTags; + this.displayOptions = freshDisplayOptions; + if (displayOptionsChanged) { + this.reloadNotesDisplayOptions(); + } + this.reloadNotes(); + if (freshDisplayOptions.sortBy !== currentSortBy) { + this.selectFirstNote(); + } + }; + + createNewNote = async (focusNewNote = true) => { + this.appState.notes.unselectNotes(); + let title = `Note ${this.notes.length + 1}`; + if (this.isFiltering) { + title = this.noteFilterText; + } + await this.appState.createEditor(title); + this.reloadNotes(); + this.appState.noteTags.reloadTags(); + const noteTitleEditorElement = document.getElementById('note-title-editor'); + if (focusNewNote) { + noteTitleEditorElement?.focus(); + } + }; + + createPlaceholderNote = () => { + const selectedTag = this.appState.selectedTag; + if (selectedTag && selectedTag.isSmartTag && !selectedTag.isAllTag) { + return; + } + return this.createNewNote(false); + }; + + get optionsSubtitle(): string { + let base = ''; + if (this.displayOptions.sortBy === CollectionSort.CreatedAt) { + base += ' Date Added'; + } else if (this.displayOptions.sortBy === CollectionSort.UpdatedAt) { + base += ' Date Modified'; + } else if (this.displayOptions.sortBy === CollectionSort.Title) { + base += ' Title'; + } + if (this.displayOptions.showArchived) { + base += ' | + Archived'; + } + if (this.displayOptions.showTrashed) { + base += ' | + Trashed'; + } + if (this.displayOptions.hidePinned) { + base += ' | – Pinned'; + } + if (this.displayOptions.hideProtected) { + base += ' | – Protected'; + } + if (this.displayOptions.sortReverse) { + base += ' | Reversed'; + } + return base; + } + + paginate = () => { + this.notesToDisplay += this.pageSize; + this.reloadNotes(); + if (this.searchSubmitted) { + this.application.getDesktopService().searchText(this.noteFilterText); + } + }; + + resetPagination = (keepCurrentIfLarger = false) => { + const clientHeight = document.documentElement.clientHeight; + this.pageSize = Math.ceil(clientHeight / MIN_NOTE_CELL_HEIGHT); + if (this.pageSize === 0) { + this.pageSize = DEFAULT_LIST_NUM_NOTES; + } + if (keepCurrentIfLarger && this.notesToDisplay > this.pageSize) { + return; + } + this.notesToDisplay = this.pageSize; + }; + + getFirstNonProtectedNote = () => { + return this.notes.find((note) => !note.protected); + }; + + get notesListScrollContainer() { + return document.getElementById(ELEMENT_ID_SCROLL_CONTAINER); + } + + selectNote = async ( + note: SNNote, + userTriggered?: boolean, + scrollIntoView = true + ): Promise => { + await this.appState.notes.selectNote(note.uuid, userTriggered); + if (scrollIntoView) { + const noteElement = document.getElementById(`note-${note.uuid}`); + noteElement?.scrollIntoView({ + behavior: 'smooth', + }); + } + }; + + selectFirstNote = () => { + const note = this.getFirstNonProtectedNote(); + if (note) { + this.selectNote(note, false, false); + this.resetScrollPosition(); + } + }; + + selectNextNote = () => { + const displayableNotes = this.notes; + const currentIndex = displayableNotes.findIndex((candidate) => { + return candidate.uuid === this.activeEditorNote?.uuid; + }); + if (currentIndex + 1 < displayableNotes.length) { + const nextNote = displayableNotes[currentIndex + 1]; + this.selectNote(nextNote); + const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`); + nextNoteElement?.focus(); + } + }; + + selectNextOrCreateNew = () => { + const note = this.getFirstNonProtectedNote(); + if (note) { + this.selectNote(note, false, false); + } else { + this.appState.closeActiveEditor(); + } + }; + + selectPreviousNote = () => { + const displayableNotes = this.notes; + if (this.activeEditorNote) { + const currentIndex = displayableNotes.indexOf(this.activeEditorNote); + if (currentIndex - 1 >= 0) { + const previousNote = displayableNotes[currentIndex - 1]; + this.selectNote(previousNote); + const previousNoteElement = document.getElementById( + `note-${previousNote.uuid}` + ); + previousNoteElement?.focus(); + return true; + } else { + return false; + } + } + }; + + setNoteFilterText = (text: string) => { + this.noteFilterText = text; + }; + + syncSelectedNotes = () => { + this.selectedNotes = this.appState.notes.selectedNotes; + }; + + handleEditorChange = async () => { + const activeNote = this.appState.getActiveEditor()?.note; + if (activeNote && activeNote.conflictOf) { + this.application.changeAndSaveItem(activeNote.uuid, (mutator) => { + mutator.conflictOf = undefined; + }); + } + if (this.isFiltering) { + this.application.getDesktopService().searchText(this.noteFilterText); + } + }; + + resetScrollPosition = () => { + if (this.notesListScrollContainer) { + this.notesListScrollContainer.scrollTop = 0; + this.notesListScrollContainer.scrollLeft = 0; + } + }; + + handleTagChange = () => { + this.resetScrollPosition(); + this.toggleDisplayOptionsMenu(false); + this.setNoteFilterText(''); + this.application.getDesktopService().searchText(); + this.resetPagination(); + + /* Capture db load state before beginning reloadNotes, + since this status may change during reload */ + const dbLoaded = this.application.isDatabaseLoaded(); + this.reloadNotesDisplayOptions(); + this.reloadNotes(); + + if (this.notes.length > 0) { + this.selectFirstNote(); + } else if (dbLoaded) { + if ( + this.activeEditorNote && + !this.notes.includes(this.activeEditorNote) + ) { + this.appState.closeActiveEditor(); + } + } + }; + + onFilterEnter = () => { + /** + * For Desktop, performing a search right away causes + * input to lose focus. We wait until user explicity hits + * enter before highlighting desktop search results. + */ + this.searchSubmitted = true; + this.application.getDesktopService().searchText(this.noteFilterText); + }; + + handleFilterTextChanged = () => { + if (this.searchSubmitted) { + this.searchSubmitted = false; + } + this.reloadNotesDisplayOptions(); + this.reloadNotes(); + }; + + onSearchInputBlur = () => { + this.appState.searchOptions.refreshIncludeProtectedContents(); + }; + + clearFilterText = () => { + this.setNoteFilterText(''); + this.onFilterEnter(); + this.handleFilterTextChanged(); + this.resetPagination(); + }; +} diff --git a/app/assets/javascripts/ui_models/panel_resizer.ts b/app/assets/javascripts/ui_models/panel_resizer.ts new file mode 100644 index 000000000..18276952e --- /dev/null +++ b/app/assets/javascripts/ui_models/panel_resizer.ts @@ -0,0 +1,291 @@ +import { + PanelSide, + ResizeFinishCallback, +} from '@/directives/views/panelResizer'; +import { debounce } from '@/utils'; +import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'; +import { action, computed, makeObservable, observable } from 'mobx'; +import { WebApplication } from './application'; + +export type PanelResizerProps = { + alwaysVisible?: boolean; + application: WebApplication; + collapsable: boolean; + defaultWidth?: number; + hoverable?: boolean; + minWidth?: number; + panel: HTMLDivElement; + prefKey: PrefKey; + resizeFinishCallback?: ResizeFinishCallback; + side: PanelSide; + widthEventCallback?: () => void; +}; + +export class PanelResizerState { + private application: WebApplication; + alwaysVisible: boolean; + collapsable: boolean; + collapsed = false; + currentMinWidth = 0; + defaultWidth: number; + hoverable: boolean; + lastDownX = 0; + lastLeft = 0; + lastWidth = 0; + panel: HTMLDivElement; + pressed = false; + prefKey: PrefKey; + resizeFinishCallback?: ResizeFinishCallback; + side: PanelSide; + startLeft = 0; + startWidth = 0; + widthBeforeLastDblClick = 0; + widthEventCallback?: () => void; + + constructor({ + alwaysVisible, + application, + defaultWidth, + hoverable, + collapsable, + minWidth, + panel, + prefKey, + resizeFinishCallback, + side, + widthEventCallback, + }: PanelResizerProps) { + this.alwaysVisible = alwaysVisible ?? false; + this.application = application; + this.collapsable = collapsable ?? false; + this.collapsed = false; + this.currentMinWidth = minWidth ?? 0; + this.defaultWidth = defaultWidth ?? 0; + this.hoverable = hoverable ?? true; + this.lastDownX = 0; + this.lastLeft = this.startLeft; + this.lastWidth = this.startWidth; + this.panel = panel; + this.prefKey = prefKey; + this.pressed = false; + this.side = side; + this.startLeft = this.panel.offsetLeft; + this.startWidth = this.panel.scrollWidth; + this.widthBeforeLastDblClick = 0; + this.widthEventCallback = widthEventCallback; + this.resizeFinishCallback = resizeFinishCallback; + + application.addEventObserver(async () => { + const changedWidth = application.getPreference(prefKey) as number; + if (changedWidth !== this.lastWidth) this.setWidth(changedWidth, true); + }, ApplicationEvent.PreferencesChanged); + + makeObservable(this, { + pressed: observable, + collapsed: observable, + + onMouseUp: action, + onMouseDown: action, + onDblClick: action, + handleWidthEvent: action, + handleLeftEvent: action, + setWidth: action, + setMinWidth: action, + reloadDefaultValues: action, + + appFrame: computed, + }); + + document.addEventListener('mouseup', this.onMouseUp.bind(this)); + document.addEventListener('mousemove', this.onMouseMove.bind(this)); + if (this.side === PanelSide.Right) { + window.addEventListener( + 'resize', + debounce(this.handleResize.bind(this), 250) + ); + } + } + + get appFrame() { + return document.getElementById('app')?.getBoundingClientRect() as DOMRect; + } + + getParentRect() { + return (this.panel.parentNode as HTMLElement).getBoundingClientRect(); + } + + isAtMaxWidth = () => { + return ( + Math.round(this.lastWidth + this.lastLeft) === + Math.round(this.getParentRect().width) + ); + }; + + isCollapsed() { + return this.lastWidth <= this.currentMinWidth; + } + + reloadDefaultValues = () => { + this.startWidth = this.isAtMaxWidth() + ? this.getParentRect().width + : this.panel.scrollWidth; + this.lastWidth = this.startWidth; + }; + + finishSettingWidth = () => { + if (!this.collapsable) { + return; + } + + this.collapsed = this.isCollapsed(); + }; + + setWidth = (width: number, finish = false) => { + if (width < this.currentMinWidth) { + width = this.currentMinWidth; + } + const parentRect = this.getParentRect(); + if (width > parentRect.width) { + width = parentRect.width; + } + + const maxWidth = this.appFrame.width - this.panel.getBoundingClientRect().x; + if (width > maxWidth) { + width = maxWidth; + } + + if (Math.round(width + this.lastLeft) === Math.round(parentRect.width)) { + this.panel.style.width = `calc(100% - ${this.lastLeft}px)`; + } else { + this.panel.style.width = width + 'px'; + } + + this.lastWidth = width; + + if (finish) { + this.finishSettingWidth(); + if (this.resizeFinishCallback) { + this.resizeFinishCallback( + this.lastWidth, + this.lastLeft, + this.isAtMaxWidth(), + this.isCollapsed() + ); + } + } + + this.application.setPreference(this.prefKey, this.lastWidth); + }; + + setLeft = (left: number) => { + this.panel.style.left = left + 'px'; + this.lastLeft = left; + }; + + onDblClick = () => { + const collapsed = this.isCollapsed(); + if (collapsed) { + this.setWidth(this.widthBeforeLastDblClick || this.defaultWidth); + } else { + this.widthBeforeLastDblClick = this.lastWidth; + this.setWidth(this.currentMinWidth); + } + this.application.setPreference(this.prefKey, this.lastWidth); + this.finishSettingWidth(); + if (this.resizeFinishCallback) { + this.resizeFinishCallback( + this.lastWidth, + this.lastLeft, + this.isAtMaxWidth(), + this.isCollapsed() + ); + } + }; + + handleWidthEvent(event?: MouseEvent) { + if (this.widthEventCallback) { + this.widthEventCallback(); + } + let x; + if (event) { + x = event.clientX; + } else { + /** Coming from resize event */ + x = 0; + this.lastDownX = 0; + } + const deltaX = x - this.lastDownX; + const newWidth = this.startWidth + deltaX; + this.setWidth(newWidth, false); + } + + handleLeftEvent(event: MouseEvent) { + const panelRect = this.panel.getBoundingClientRect(); + const x = event.clientX || panelRect.x; + let deltaX = x - this.lastDownX; + let newLeft = this.startLeft + deltaX; + if (newLeft < 0) { + newLeft = 0; + deltaX = -this.startLeft; + } + const parentRect = this.getParentRect(); + let newWidth = this.startWidth - deltaX; + if (newWidth < this.currentMinWidth) { + newWidth = this.currentMinWidth; + } + if (newWidth > parentRect.width) { + newWidth = parentRect.width; + } + if (newLeft + newWidth > parentRect.width) { + newLeft = parentRect.width - newWidth; + } + this.setLeft(newLeft); + this.setWidth(newWidth, false); + } + + handleResize = () => { + this.reloadDefaultValues(); + this.handleWidthEvent(); + this.finishSettingWidth(); + }; + + onMouseDown = (event: MouseEvent) => { + this.pressed = true; + this.lastDownX = event.clientX; + this.startWidth = this.panel.scrollWidth; + this.startLeft = this.panel.offsetLeft; + }; + + onMouseUp = () => { + if (!this.pressed) { + return; + } + this.pressed = false; + const isMaxWidth = this.isAtMaxWidth(); + if (this.resizeFinishCallback) { + this.resizeFinishCallback( + this.lastWidth, + this.lastLeft, + isMaxWidth, + this.isCollapsed() + ); + } + this.finishSettingWidth(); + }; + + onMouseMove(event: MouseEvent) { + if (!this.pressed) { + return; + } + event.preventDefault(); + if (this.side === PanelSide.Left) { + this.handleLeftEvent(event); + } else { + this.handleWidthEvent(event); + } + } + + setMinWidth = (minWidth?: number) => { + this.currentMinWidth = minWidth ?? this.currentMinWidth; + }; +} diff --git a/app/assets/javascripts/views/application/application-view.pug b/app/assets/javascripts/views/application/application-view.pug index 785ce2df5..66d15f53b 100644 --- a/app/assets/javascripts/views/application/application-view.pug +++ b/app/assets/javascripts/views/application/application-view.pug @@ -6,7 +6,10 @@ ng-if='!self.state.needsUnlock && self.state.ready' ) tags-view(application='self.application') - notes-view(application='self.application') + notes-view( + application='self.application' + app-state='self.appState' + ) editor-group-view.flex-grow(application='self.application') footer-view( diff --git a/app/assets/javascripts/views/index.ts b/app/assets/javascripts/views/index.ts index fc5b9525f..a68bf862d 100644 --- a/app/assets/javascripts/views/index.ts +++ b/app/assets/javascripts/views/index.ts @@ -4,6 +4,5 @@ export { ApplicationView } from './application/application_view'; export { EditorGroupView } from './editor_group/editor_group_view'; export { EditorView } from './editor/editor_view'; export { FooterView } from './footer/footer_view'; -export { NotesView } from './notes/notes_view'; export { TagsView } from './tags/tags_view'; export { ChallengeModal } from './challenge_modal/challenge_modal'; diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug deleted file mode 100644 index d373eb36a..000000000 --- a/app/assets/javascripts/views/notes/notes-view.pug +++ /dev/null @@ -1,115 +0,0 @@ -#notes-column.sn-component.section.notes(aria-label='Notes') - .content - #notes-title-bar.section-title-bar - .p-4 - .section-title-bar-header - .sk-h2.font-semibold.title {{self.state.panelTitle}} - .sk-button.contrast.wide( - ng-click='self.createNewNote()', - title='Create a new note in the selected tag' - aria-label="Create new note" - ) - .sk-label - i.icon.ion-plus.add-button - .filter-section(role='search') - input#search-bar.filter-bar( - type="text" - ng-ref='self.searchBarInput' - ng-focus='self.onSearchInputFocus()' - ng-blur='self.onSearchInputBlur()', - ng-change='self.filterTextChanged()', - ng-keyup='$event.keyCode == 13 && self.onFilterEnter();', - ng-model='self.state.noteFilter.text', - placeholder='Search', - select-on-focus='true', - title='Searches notes in the currently selected tag' - ) - #search-clear-button( - ng-click='self.clearFilterText();', - ng-show='self.state.noteFilter.text' - aria-role="button" - ) ✕ - search-options( - class="ml-2" - app-state='self.appState' - ) - no-account-warning( - application='self.application' - app-state='self.appState' - ) - #notes-menu-bar.sn-component - .sk-app-bar.no-edges - .left - .sk-app-bar-item( - ng-class="{'selected' : self.state.mutable.showMenu}", - ng-click='self.state.mutable.showMenu = !self.state.mutable.showMenu' - ) - .sk-app-bar-item-column - .sk-label - | Options - .sk-app-bar-item-column - .sk-sublabel {{self.optionsSubtitle()}} - notes-list-options-menu( - ng-if='self.state.mutable.showMenu' - app-state='self.appState' - application='self.application' - set-show-menu-false='self.setShowMenuFalse' - ) - p.empty-notes-list.faded( - ng-if="self.state.completedFullSync && !self.state.renderedNotes.length" - ) No notes. - p.empty-notes-list.faded( - ng-if="!self.state.completedFullSync && !self.state.renderedNotes.length" - ) Loading notes… - .scrollable(ng-if="self.state.renderedNotes.length") - #notes-scrollable.infinite-scroll( - can-load='true', - infinite-scroll='self.paginate()', - threshold='200' - ) - .note( - ng-attr-id='note-{{note.uuid}}' - ng-repeat='note in self.state.renderedNotes track by note.uuid' - ng-class="{'selected' : self.isNoteSelected(note.uuid) }" - ng-click='self.selectNote(note, true)' - ) - .note-flags.flex.flex-wrap(ng-show='self.noteFlags[note.uuid].length > 0') - .flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]') - .label {{flag.text}} - .name(ng-show='note.title') - | {{note.title}} - .note-preview( - ng-if=` - !self.state.hideNotePreview && - !note.hidePreview && - !note.protected` - ) - .html-preview( - ng-bind-html='note.preview_html', - ng-show='note.preview_html' - ) - .plain-preview( - ng-show='!note.preview_html && note.preview_plain' - ) {{note.preview_plain}} - .default-preview( - ng-show='!note.preview_html && !note.preview_plain' - ) {{note.text}} - .bottom-info.faded(ng-show='!self.state.hideDate || note.protected') - span(ng-if="note.protected") - | Protected{{self.state.hideDate ? '' : ' • '}} - span(ng-show="!self.state.hideDate && self.state.sortBy == 'userModifiedDate'") - | Modified {{note.updatedAtString || 'Now'}} - span(ng-show="!self.state.hideDate && self.state.sortBy != 'userModifiedDate'") - | {{note.createdAtString || 'Now'}} - .tags-string(ng-if='!self.state.hideTags && self.state.renderedNotesTags[$index]') - .faded {{self.state.renderedNotesTags[$index]}} - - panel-resizer( - collapsable="true" - control="self.panelPuppet" - default-width="300" - hoverable="true" - on-resize-finish="self.onPanelResize" - on-width-event="self.onPanelWidthEvent" - panel-id="'notes-column'" - ) diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts deleted file mode 100644 index d8b69852b..000000000 --- a/app/assets/javascripts/views/notes/notes_view.ts +++ /dev/null @@ -1,955 +0,0 @@ -import { PanelPuppet, WebDirective } from './../../types'; -import template from './notes-view.pug'; -import { - ApplicationEvent, - ContentType, - removeFromArray, - SNNote, - SNTag, - PrefKey, - findInArray, - CollectionSort, - UuidString, - NotesDisplayCriteria -} from '@standardnotes/snjs'; -import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl'; -import { AppStateEvent } from '@/ui_models/app_state'; -import { KeyboardKey, KeyboardModifier } from '@/services/ioService'; -import { - PANEL_NAME_NOTES -} from '@/views/constants'; - -type NotesCtrlState = { - panelTitle: string - notes: SNNote[] - renderedNotes: SNNote[] - renderedNotesTags: string[], - selectedNotes: Record, - sortBy?: string - sortReverse?: boolean - showArchived?: boolean - hidePinned?: boolean - hideNotePreview?: boolean - hideDate?: boolean - hideTags: boolean - noteFilter: { - text: string; - } - searchOptions: { - includeProtectedContents: boolean; - includeArchived: boolean; - includeTrashed: boolean; - } - mutable: { showMenu: boolean } - completedFullSync: boolean - [PrefKey.TagsPanelWidth]?: number - [PrefKey.NotesPanelWidth]?: number - [PrefKey.EditorWidth]?: number - [PrefKey.EditorLeft]?: number - [PrefKey.EditorMonospaceEnabled]?: boolean - [PrefKey.EditorSpellcheck]?: boolean - [PrefKey.EditorResizersEnabled]?: boolean - [PrefKey.NotesShowTrashed]?: boolean - [PrefKey.NotesHideProtected]?: boolean -} - -type NoteFlag = { - text: string - class: 'info' | 'neutral' | 'warning' | 'success' | 'danger' -} - -/** - * This is the height of a note cell with nothing but the title, - * which *is* a display option - */ -const MIN_NOTE_CELL_HEIGHT = 51.0; -const DEFAULT_LIST_NUM_NOTES = 20; -const ELEMENT_ID_SEARCH_BAR = 'search-bar'; -const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable'; - -class NotesViewCtrl extends PureViewCtrl { - - private panelPuppet?: PanelPuppet - private reloadNotesPromise?: any - private notesToDisplay = 0 - private pageSize = 0 - private searchSubmitted = false - private newNoteKeyObserver: any - private nextNoteKeyObserver: any - private previousNoteKeyObserver: any - private searchKeyObserver: any - private noteFlags: Partial> = {} - private removeObservers: Array<() => void> = []; - private rightClickListeners: Map void> = new Map(); - - /* @ngInject */ - constructor($timeout: ng.ITimeoutService,) { - super($timeout); - this.resetPagination(); - } - - $onInit() { - super.$onInit(); - this.panelPuppet = { - onReady: () => this.reloadPanelWidth() - }; - this.onWindowResize = this.onWindowResize.bind(this); - this.onPanelResize = this.onPanelResize.bind(this); - this.onPanelWidthEvent = this.onPanelWidthEvent.bind(this); - this.setShowMenuFalse = this.setShowMenuFalse.bind(this); - window.addEventListener('resize', this.onWindowResize, true); - this.registerKeyboardShortcuts(); - this.autorun(async () => { - const { - includeProtectedContents, - includeArchived, - includeTrashed, - } = this.appState.searchOptions; - await this.setState({ - searchOptions: { - includeProtectedContents, - includeArchived, - includeTrashed, - } - }); - if (this.state.noteFilter.text) { - this.reloadNotesDisplayOptions(); - this.reloadNotes(); - } - }); - this.autorun(() => { - this.setState({ - selectedNotes: this.appState.notes.selectedNotes, - }); - }); - } - - onWindowResize() { - this.resetPagination(true); - } - - deinit() { - for (const remove of this.removeObservers) remove(); - this.removeObservers.length = 0; - this.removeRightClickListeners(); - this.panelPuppet!.onReady = undefined; - this.panelPuppet = undefined; - window.removeEventListener('resize', this.onWindowResize, true); - (this.onWindowResize as any) = undefined; - (this.onPanelResize as any) = undefined; - (this.onPanelWidthEvent as any) = undefined; - this.newNoteKeyObserver(); - this.nextNoteKeyObserver(); - this.previousNoteKeyObserver(); - this.searchKeyObserver(); - this.newNoteKeyObserver = undefined; - this.nextNoteKeyObserver = undefined; - this.previousNoteKeyObserver = undefined; - this.searchKeyObserver = undefined; - super.deinit(); - } - - async setNotesState(state: Partial) { - return this.setState(state); - } - - getInitialState(): NotesCtrlState { - return { - notes: [], - renderedNotes: [], - renderedNotesTags: [], - selectedNotes: {}, - mutable: { showMenu: false }, - noteFilter: { - text: '', - }, - searchOptions: { - includeArchived: false, - includeProtectedContents: false, - includeTrashed: false, - }, - panelTitle: '', - completedFullSync: false, - hideTags: true - }; - } - - async onAppLaunch() { - super.onAppLaunch(); - this.streamNotesAndTags(); - this.reloadPreferences(); - } - - /** @override */ - onAppStateEvent(eventName: AppStateEvent, data?: any) { - if (eventName === AppStateEvent.TagChanged) { - this.handleTagChange(this.selectedTag!); - } else if (eventName === AppStateEvent.ActiveEditorChanged) { - this.handleEditorChange(); - } else if (eventName === AppStateEvent.EditorFocused) { - this.setShowMenuFalse(); - } - } - - private get activeEditorNote() { - return this.appState.notes.activeEditor?.note; - } - - /** @template */ - public isNoteSelected(uuid: UuidString) { - return !!this.state.selectedNotes[uuid]; - } - - public get editorNotes() { - return this.appState.getEditors().map((editor) => editor.note); - } - - /** @override */ - async onAppEvent(eventName: ApplicationEvent) { - switch (eventName) { - case ApplicationEvent.PreferencesChanged: - this.reloadPreferences(); - break; - case ApplicationEvent.SignedIn: - this.appState.closeAllEditors(); - this.selectFirstNote(); - this.setState({ - completedFullSync: false, - }); - break; - case ApplicationEvent.CompletedFullSync: - this.getMostValidNotes().then((notes) => { - if (notes.length === 0 && this.selectedTag?.isAllTag && this.state.noteFilter.text === '') { - this.createPlaceholderNote(); - } - }); - this.setState({ - completedFullSync: true, - }); - break; - } - } - - /** - * Access the current state notes without awaiting any potential reloads - * that may be in progress. This is the sync alternative to `async getMostValidNotes` - */ - private getPossiblyStaleNotes() { - return this.state.notes; - } - - /** - * Access the current state notes after waiting for any pending reloads. - * This returns the most up to date notes, but is the asyncronous counterpart - * to `getPossiblyStaleNotes` - */ - private async getMostValidNotes() { - await this.reloadNotesPromise; - return this.getPossiblyStaleNotes(); - } - - /** - * Triggered programatically to create a new placeholder note - * when conditions allow for it. This is as opposed to creating a new note - * as part of user interaction (pressing the + button). - */ - private async createPlaceholderNote() { - const selectedTag = this.selectedTag!; - if (selectedTag.isSmartTag && !selectedTag.isAllTag) { - return; - } - return this.createNewNote(false); - } - - streamNotesAndTags() { - this.removeObservers.push(this.application.streamItems( - [ContentType.Note], - async (items) => { - const notes = items as SNNote[]; - /** Note has changed values, reset its flags */ - for (const note of notes) { - if (note.deleted) { - continue; - } - this.loadFlagsForNote(note); - } - /** If a note changes, it will be queried against the existing filter; - * we dont need to reload display options */ - await this.reloadNotes(); - const activeNote = this.activeEditorNote; - if (this.application.getAppState().notes.selectedNotesCount < 2) { - if (activeNote) { - const discarded = activeNote.deleted || activeNote.trashed; - if ( - discarded && - !this.appState?.selectedTag?.isTrashTag && - !this.appState?.searchOptions.includeTrashed - ) { - this.selectNextOrCreateNew(); - } else if (!this.state.selectedNotes[activeNote.uuid]) { - this.selectNote(activeNote); - } - } else { - this.selectFirstNote(); - } - } - } - )); - - this.removeObservers.push(this.application.streamItems( - [ContentType.Tag], - async (items) => { - const tags = items as SNTag[]; - /** A tag could have changed its relationships, so we need to reload the filter */ - this.reloadNotesDisplayOptions(); - await this.reloadNotes(); - if (findInArray(tags, 'uuid', this.appState.selectedTag?.uuid)) { - /** Tag title could have changed */ - this.reloadPanelTitle(); - } - } - )); - } - - private async openNotesContextMenu(e: MouseEvent, note: SNNote) { - e.preventDefault(); - if (!this.state.selectedNotes[note.uuid]) { - await this.selectNote(note, true); - } - if (this.state.selectedNotes[note.uuid]) { - this.appState.notes.setContextMenuClickLocation({ - x: e.clientX, - y: e.clientY, - }); - this.appState.notes.reloadContextMenuLayout(); - this.appState.notes.setContextMenuOpen(true); - } - } - - private removeRightClickListeners() { - for (const [noteUuid, listener] of this.rightClickListeners.entries()) { - document - .getElementById(`note-${noteUuid}`) - ?.removeEventListener('contextmenu', listener); - } - this.rightClickListeners.clear(); - } - - private addRightClickListeners() { - for (const [noteUuid, listener] of this.rightClickListeners.entries()) { - if (!this.state.renderedNotes.find(note => note.uuid === noteUuid)) { - document - .getElementById(`note-${noteUuid}`) - ?.removeEventListener('contextmenu', listener); - this.rightClickListeners.delete(noteUuid); - } - } - for (const note of this.state.renderedNotes) { - if (!this.rightClickListeners.has(note.uuid)) { - const listener = async (e: MouseEvent): Promise => { - return await this.openNotesContextMenu(e, note); - }; - document - .getElementById(`note-${note.uuid}`) - ?.addEventListener('contextmenu', listener); - this.rightClickListeners.set(note.uuid, listener); - } - } - } - - async selectNote(note: SNNote, userTriggered?: boolean): Promise { - await this.appState.notes.selectNote(note.uuid, userTriggered); - } - - async createNewNote(focusNewNote = true) { - this.appState.notes.unselectNotes(); - let title = `Note ${this.state.notes.length + 1}`; - if (this.isFiltering()) { - title = this.state.noteFilter.text; - } - await this.appState.createEditor(title); - await this.flushUI(); - await this.reloadNotes(); - await this.appState.noteTags.reloadTags(); - const noteTitleEditorElement = document.getElementById('note-title-editor'); - if (focusNewNote) { - noteTitleEditorElement?.focus(); - } - } - - async handleTagChange(tag: SNTag) { - this.resetScrollPosition(); - this.setShowMenuFalse(); - await this.setNoteFilterText(''); - this.application.getDesktopService().searchText(); - this.resetPagination(); - - /* Capture db load state before beginning reloadNotes, - since this status may change during reload */ - const dbLoaded = this.application.isDatabaseLoaded(); - this.reloadNotesDisplayOptions(); - await this.reloadNotes(); - - if (this.state.notes.length > 0) { - this.selectFirstNote(); - } else if (dbLoaded) { - if ( - this.activeEditorNote && - !this.state.notes.includes(this.activeEditorNote!) - ) { - this.appState.closeActiveEditor(); - } - } - } - - resetScrollPosition() { - const scrollable = document.getElementById(ELEMENT_ID_SCROLL_CONTAINER); - if (scrollable) { - scrollable.scrollTop = 0; - scrollable.scrollLeft = 0; - } - } - - async removeNoteFromList(note: SNNote) { - const notes = this.state.notes; - removeFromArray(notes, note); - await this.setNotesState({ - notes: notes, - renderedNotes: notes.slice(0, this.notesToDisplay) - }); - } - - private async reloadNotes() { - this.reloadNotesPromise = this.performReloadNotes(); - return this.reloadNotesPromise; - } - - /** - * Note that reloading display options destroys the current index and rebuilds it, - * so call sparingly. The runtime complexity of destroying and building - * an index is roughly O(n^2). - */ - private reloadNotesDisplayOptions() { - const tag = this.appState.selectedTag; - - const searchText = this.state.noteFilter.text.toLowerCase(); - const isSearching = searchText.length; - let includeArchived: boolean; - let includeTrashed: boolean; - - if (isSearching) { - includeArchived = this.state.searchOptions.includeArchived; - includeTrashed = this.state.searchOptions.includeTrashed; - } else { - includeArchived = this.state.showArchived ?? false; - includeTrashed = this.state.showTrashed ?? false; - } - - const criteria = NotesDisplayCriteria.Create({ - sortProperty: this.state.sortBy as CollectionSort, - sortDirection: this.state.sortReverse ? 'asc' : 'dsc', - tags: tag ? [tag] : [], - includeArchived, - includeTrashed, - includePinned: !this.state.hidePinned, - includeProtected: !this.state.hideProtected, - searchQuery: { - query: searchText, - includeProtectedNoteText: this.state.searchOptions.includeProtectedContents - } - }); - this.application.setNotesDisplayCriteria(criteria); - } - - private get selectedTag() { - return this.application.getAppState().getSelectedTag(); - } - - private async performReloadNotes() { - const tag = this.appState.selectedTag!; - if (!tag) { - return; - } - const notes = this.application.getDisplayableItems( - ContentType.Note - ) as SNNote[]; - const renderedNotes = notes.slice(0, this.notesToDisplay); - const renderedNotesTags = this.notesTagsList(renderedNotes); - - await this.setNotesState({ - notes, - renderedNotesTags, - renderedNotes, - }); - this.reloadPanelTitle(); - this.addRightClickListeners(); - } - - private notesTagsList(notes: SNNote[]): string[] { - if (this.state.hideTags) { - return []; - } else { - const selectedTag = this.appState.selectedTag; - if (!selectedTag) { - return []; - } else if (selectedTag?.isSmartTag) { - return notes.map((note) => - this.appState - .getNoteTags(note) - .map((tag) => '#' + tag.title) - .join(' ') - ); - } else { - /** - * Displaying a normal tag, hide the note's tag when there's only one - */ - return notes.map((note) => { - const tags = this.appState.getNoteTags(note); - if (tags.length === 1) return ''; - return tags.map((tag) => '#' + tag.title).join(' '); - }); - } - } - } - - setShowMenuFalse() { - this.setNotesState({ - mutable: { - ...this.state.mutable, - showMenu: false - } - }); - } - - async handleEditorChange() { - const activeNote = this.appState.getActiveEditor()?.note; - if (activeNote && activeNote.conflictOf) { - this.application.changeAndSaveItem(activeNote.uuid, (mutator) => { - mutator.conflictOf = undefined; - }); - } - if (this.isFiltering()) { - this.application.getDesktopService().searchText(this.state.noteFilter.text); - } - } - - async reloadPreferences() { - const viewOptions = {} as NotesCtrlState; - const prevSortValue = this.state.sortBy; - let sortBy = this.application.getPreference( - PrefKey.SortNotesBy, - CollectionSort.CreatedAt - ); - if ( - sortBy === CollectionSort.UpdatedAt || - (sortBy as string) === "client_updated_at" - ) { - /** Use UserUpdatedAt instead */ - sortBy = CollectionSort.UpdatedAt; - } - viewOptions.sortBy = sortBy; - viewOptions.sortReverse = this.application.getPreference( - PrefKey.SortNotesReverse, - false - ); - viewOptions.showArchived = this.application.getPreference( - PrefKey.NotesShowArchived, - false - ); - viewOptions.showTrashed = this.application.getPreference( - PrefKey.NotesShowTrashed, - false - ) as boolean; - viewOptions.hidePinned = this.application.getPreference( - PrefKey.NotesHidePinned, - false - ); - viewOptions.hideProtected = this.application.getPreference( - PrefKey.NotesHideProtected, - false - ); - viewOptions.hideNotePreview = this.application.getPreference( - PrefKey.NotesHideNotePreview, - false - ); - viewOptions.hideDate = this.application.getPreference( - PrefKey.NotesHideDate, - false - ); - viewOptions.hideTags = this.application.getPreference( - PrefKey.NotesHideTags, - true, - ); - const state = this.state; - const displayOptionsChanged = ( - viewOptions.sortBy !== state.sortBy || - viewOptions.sortReverse !== state.sortReverse || - viewOptions.hidePinned !== state.hidePinned || - viewOptions.showArchived !== state.showArchived || - viewOptions.showTrashed !== state.showTrashed || - viewOptions.hideProtected !== state.hideProtected || - viewOptions.hideTags !== state.hideTags - ); - await this.setNotesState({ - ...viewOptions - }); - this.reloadPanelWidth(); - if (displayOptionsChanged) { - this.reloadNotesDisplayOptions(); - } - await this.reloadNotes(); - if (prevSortValue && prevSortValue !== sortBy) { - this.selectFirstNote(); - } - } - - reloadPanelWidth() { - const width = this.application.getPreference( - PrefKey.NotesPanelWidth - ); - if (width && this.panelPuppet!.ready) { - this.panelPuppet!.setWidth!(width); - if (this.panelPuppet!.isCollapsed!()) { - this.application.getAppState().panelDidResize( - PANEL_NAME_NOTES, - this.panelPuppet!.isCollapsed!() - ); - } - } - } - - onPanelResize( - newWidth: number, - newLeft: number, - __: boolean, - isCollapsed: boolean - ) { - this.appState.noteTags.reloadTagsContainerMaxWidth(); - this.application.setPreference( - PrefKey.NotesPanelWidth, - newWidth - ); - this.application.getAppState().panelDidResize( - PANEL_NAME_NOTES, - isCollapsed - ); - } - - onPanelWidthEvent(): void { - this.appState.noteTags.reloadTagsContainerMaxWidth(); - } - - paginate() { - this.notesToDisplay += this.pageSize; - this.reloadNotes(); - if (this.searchSubmitted) { - this.application.getDesktopService().searchText(this.state.noteFilter.text); - } - } - - resetPagination(keepCurrentIfLarger = false) { - const clientHeight = document.documentElement.clientHeight; - this.pageSize = Math.ceil(clientHeight / MIN_NOTE_CELL_HEIGHT); - if (this.pageSize === 0) { - this.pageSize = DEFAULT_LIST_NUM_NOTES; - } - if (keepCurrentIfLarger && this.notesToDisplay > this.pageSize) { - return; - } - this.notesToDisplay = this.pageSize; - } - - reloadPanelTitle() { - let title; - if (this.isFiltering()) { - const resultCount = this.state.notes.length; - title = `${resultCount} search results`; - } else if (this.appState.selectedTag) { - title = `${this.appState.selectedTag.title}`; - } - this.setNotesState({ - panelTitle: title - }); - } - - optionsSubtitle() { - let base = ""; - if (this.state.sortBy === CollectionSort.CreatedAt) { - base += " Date Added"; - } else if (this.state.sortBy === CollectionSort.UpdatedAt) { - base += " Date Modified"; - } else if (this.state.sortBy === CollectionSort.Title) { - base += " Title"; - } - if (this.state.showArchived) { - base += " | + Archived"; - } - if (this.state.showTrashed) { - base += " | + Trashed"; - } - if (this.state.hidePinned) { - base += " | – Pinned"; - } - if (this.state.hideProtected) { - base += " | – Protected"; - } - if (this.state.sortReverse) { - base += " | Reversed"; - } - return base; - } - - loadFlagsForNote(note: SNNote) { - const flags = [] as NoteFlag[]; - if (note.pinned) { - flags.push({ - text: "Pinned", - class: 'info' - }); - } - if (note.archived) { - flags.push({ - text: "Archived", - class: 'warning' - }); - } - if (note.locked) { - flags.push({ - text: "Editing Disabled", - class: 'neutral' - }); - } - if (note.trashed) { - flags.push({ - text: "Deleted", - class: 'danger' - }); - } - if (note.conflictOf) { - flags.push({ - text: "Conflicted Copy", - class: 'danger' - }); - } - if (note.errorDecrypting) { - if (note.waitingForKey) { - flags.push({ - text: "Waiting For Keys", - class: 'info' - }); - } else { - flags.push({ - text: "Missing Keys", - class: 'danger' - }); - } - } - if (note.deleted) { - flags.push({ - text: "Deletion Pending Sync", - class: 'danger' - }); - } - this.noteFlags[note.uuid] = flags; - } - - getFirstNonProtectedNote() { - return this.state.notes.find(note => !note.protected); - } - - selectFirstNote() { - const note = this.getFirstNonProtectedNote(); - if (note) { - this.selectNote(note); - } - } - - selectNextNote() { - const displayableNotes = this.state.notes; - const currentIndex = displayableNotes.findIndex((candidate) => { - return candidate.uuid === this.activeEditorNote?.uuid; - }); - if (currentIndex + 1 < displayableNotes.length) { - const nextNote = displayableNotes[currentIndex + 1]; - this.selectNote(nextNote); - const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`); - nextNoteElement?.focus(); - } - } - - selectNextOrCreateNew() { - const note = this.getFirstNonProtectedNote(); - if (note) { - this.selectNote(note); - } else { - this.appState.closeActiveEditor(); - } - } - - selectPreviousNote() { - const displayableNotes = this.state.notes; - const currentIndex = displayableNotes.indexOf(this.activeEditorNote!); - if (currentIndex - 1 >= 0) { - const previousNote = displayableNotes[currentIndex - 1]; - this.selectNote(previousNote); - const previousNoteElement = document.getElementById(`note-${previousNote.uuid}`); - previousNoteElement?.focus(); - return true; - } else { - return false; - } - } - - isFiltering() { - return this.state.noteFilter.text && - this.state.noteFilter.text.length > 0; - } - - async setNoteFilterText(text: string) { - await this.setNotesState({ - noteFilter: { - ...this.state.noteFilter, - text: text - } - }); - } - - async clearFilterText() { - await this.setNoteFilterText(''); - this.onFilterEnter(); - this.filterTextChanged(); - this.resetPagination(); - } - - async filterTextChanged() { - if (this.searchSubmitted) { - this.searchSubmitted = false; - } - this.reloadNotesDisplayOptions(); - await this.reloadNotes(); - } - - async onSearchInputBlur() { - this.appState.searchOptions.refreshIncludeProtectedContents(); - } - - onFilterEnter() { - /** - * For Desktop, performing a search right away causes - * input to lose focus. We wait until user explicity hits - * enter before highlighting desktop search results. - */ - this.searchSubmitted = true; - this.application.getDesktopService().searchText(this.state.noteFilter.text); - } - - selectedMenuItem() { - this.setShowMenuFalse(); - } - - togglePrefKey(key: PrefKey) { - this.application.setPreference( - key, - !this.state[key] - ); - } - - selectedSortByCreated() { - this.setSortBy(CollectionSort.CreatedAt); - } - - selectedSortByUpdated() { - this.setSortBy(CollectionSort.UpdatedAt); - } - - selectedSortByTitle() { - this.setSortBy(CollectionSort.Title); - } - - toggleReverseSort() { - this.selectedMenuItem(); - this.application.setPreference( - PrefKey.SortNotesReverse, - !this.state.sortReverse - ); - } - - setSortBy(type: CollectionSort) { - this.application.setPreference( - PrefKey.SortNotesBy, - type - ); - } - - getSearchBar() { - return document.getElementById(ELEMENT_ID_SEARCH_BAR)!; - } - - registerKeyboardShortcuts() { - /** - * In the browser we're not allowed to override cmd/ctrl + n, so we have to - * use Control modifier as well. These rules don't apply to desktop, but - * probably better to be consistent. - */ - this.newNoteKeyObserver = this.application.io.addKeyObserver({ - key: 'n', - modifiers: [ - KeyboardModifier.Meta, - KeyboardModifier.Ctrl - ], - onKeyDown: (event) => { - event.preventDefault(); - this.createNewNote(); - } - }); - - this.nextNoteKeyObserver = this.application.io.addKeyObserver({ - key: KeyboardKey.Down, - elements: [ - document.body, - this.getSearchBar() - ], - onKeyDown: () => { - const searchBar = this.getSearchBar(); - if (searchBar === document.activeElement) { - searchBar.blur(); - } - this.selectNextNote(); - } - }); - - this.previousNoteKeyObserver = this.application.io.addKeyObserver({ - key: KeyboardKey.Up, - element: document.body, - onKeyDown: () => { - this.selectPreviousNote(); - } - }); - - this.searchKeyObserver = this.application.io.addKeyObserver({ - key: "f", - modifiers: [ - KeyboardModifier.Meta, - KeyboardModifier.Shift - ], - onKeyDown: () => { - const searchBar = this.getSearchBar(); - if (searchBar) { searchBar.focus(); } - } - }); - } -} - -export class NotesView extends WebDirective { - constructor() { - super(); - this.template = template; - this.replace = true; - this.controller = NotesViewCtrl; - this.controllerAs = 'self'; - this.bindToController = true; - this.scope = { - application: '=' - }; - } -} diff --git a/app/assets/stylesheets/_focused.scss b/app/assets/stylesheets/_focused.scss index edcbf0f45..d16d4866a 100644 --- a/app/assets/stylesheets/_focused.scss +++ b/app/assets/stylesheets/_focused.scss @@ -36,7 +36,7 @@ } .section.tags, - .section.notes { + notes-view { will-change: opacity; animation: fade-out 1.25s forwards; transition: width 1.25s; @@ -50,7 +50,7 @@ width: 0px !important; } - .section.notes:hover { + notes-view:hover { flex: initial; width: 0px !important; } @@ -58,7 +58,7 @@ .disable-focus-mode { .section.tags, - .section.notes { + notes-view { transition: width 1.25s; will-change: opacity; animation: fade-in 1.25s forwards; diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss index a6b059eb2..635816c3e 100644 --- a/app/assets/stylesheets/_main.scss +++ b/app/assets/stylesheets/_main.scss @@ -136,7 +136,7 @@ $footer-height: 2rem; overflow: hidden; position: relative; - panel-resizer { + panel-resizer, .panel-resizer { top: 0; right: 0; z-index: $z-index-panel-resizer; diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss index 0ccf25e65..6ec937804 100644 --- a/app/assets/stylesheets/_notes.scss +++ b/app/assets/stylesheets/_notes.scss @@ -1,11 +1,16 @@ +notes-view { + width: 350px; +} + #notes-column, .notes { + width: 100%; + border-left: 1px solid var(--sn-stylekit-border-color); border-right: 1px solid var(--sn-stylekit-border-color); font-size: var(--sn-stylekit-font-size-h2); - width: 350px; flex-grow: 0; user-select: none; @@ -71,6 +76,8 @@ } #search-clear-button { + padding: 0; + border: none; border-radius: 50%; width: 17px; height: 17px;