fix: open menu to the top when at the bottom of the screen

standardnotes · May 7, 2021 · 24eb348 · 24eb348
1 parent 437aa40
commit 24eb348
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
@@ -16,6 +16,8 @@ type Props = {
   onSubmenuChange?: (submenuOpen: boolean) => void;
 };
 
+const MAX_TAGS_MENU_HEIGHT = 265;
+
 export const NotesOptions = observer(
   ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => {
     const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
@@ -84,7 +86,7 @@ export const NotesOptions = observer(
               setTagsMenuPosition({
                 top: offsetTop,
                 right:
-                  buttonRect.right + 265 > document.body.clientWidth
+                  buttonRect.right + MAX_TAGS_MENU_HEIGHT > document.body.clientWidth
                     ? offsetWidth
                     : -offsetWidth,
               });

diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -6,7 +6,6 @@ import {
   SNNote,
   NoteMutator,
   ContentType,
-  SNTag,
 } from '@standardnotes/snjs';
 import {
   makeObservable,
@@ -23,7 +22,7 @@ export class NotesState {
   lastSelectedNote: SNNote | undefined;
   selectedNotes: Record<UuidString, SNNote> = {};
   contextMenuOpen = false;
-  contextMenuPosition: { top: number; left: number } = { top: 0, left: 0 };
+  contextMenuPosition: { top?: number; left: number, bottom?: number } = { top: 0, left: 0 };
 
   constructor(
     private application: WebApplication,
@@ -162,7 +161,7 @@ export class NotesState {
     this.contextMenuOpen = open;
   }
 
-  setContextMenuPosition(position: { top: number; left: number }): void {
+  setContextMenuPosition(position: { top?: number; left: number, bottom?: number }): void {
     this.contextMenuPosition = position;
   }
 

diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts
@@ -62,6 +62,7 @@ type NoteFlag = {
  */
 const MIN_NOTE_CELL_HEIGHT = 51.0;
 const DEFAULT_LIST_NUM_NOTES = 20;
+const MAX_CONTEXT_MENU_HEIGHT = 245;
 const ELEMENT_ID_SEARCH_BAR = 'search-bar';
 const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable';
 
@@ -304,10 +305,18 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
       await this.selectNote(note);
     }
     if (this.state.selectedNotes[note.uuid]) {
-      this.application.getAppState().notes.setContextMenuPosition({
-        top: e.clientY,
-        left: e.clientX,
-      });
+      const clientHeight = document.documentElement.clientHeight;
+      if (e.clientY > clientHeight - MAX_CONTEXT_MENU_HEIGHT) {
+        this.application.getAppState().notes.setContextMenuPosition({
+          bottom: clientHeight - e.clientY,
+          left: e.clientX,
+        });
+      } else {
+        this.application.getAppState().notes.setContextMenuPosition({
+          top: e.clientY,
+          left: e.clientX,
+        });
+      }
       this.application.getAppState().notes.setContextMenuOpen(true);
     }
   }