rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-07 18:35:02 -03:00
parent 437aa40d7a
commit 24eb348b08
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -16,6 +16,8 @@ type Props = {
onSubmenuChange?: (submenuOpen: boolean) => void; onSubmenuChange?: (submenuOpen: boolean) => void;
}; };
const MAX_TAGS_MENU_HEIGHT = 265;
export const NotesOptions = observer( export const NotesOptions = observer(
({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => { ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => {
const [tagsMenuOpen, setTagsMenuOpen] = useState(false); const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
@@ -84,7 +86,7 @@ export const NotesOptions = observer(
setTagsMenuPosition({ setTagsMenuPosition({
top: offsetTop, top: offsetTop,
right: right:
buttonRect.right + 265 > document.body.clientWidth buttonRect.right + MAX_TAGS_MENU_HEIGHT > document.body.clientWidth
? offsetWidth ? offsetWidth
: -offsetWidth, : -offsetWidth,
}); });

5
app/assets/javascripts/ui_models/app_state/notes_state.ts
View File

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

17
app/assets/javascripts/views/notes/notes_view.ts
View File

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