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

fix: make menus scrollable when there's not enough space

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-20 16:57:34 -03:00
parent c7be130a94
commit 6a9d54c2ae
7 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -308,12 +308,16 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
await this.selectNote(note);
}
if (this.state.selectedNotes[note.uuid]) {
const clientHeight = document.documentElement.clientHeight;
const { clientHeight } = document.documentElement;
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxContextMenuHeight = parseFloat(defaultFontSize) * 20;
const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
const footerHeight = 32;
// Open up-bottom is default behavior
let openUpBottom = true;
const bottomSpace = clientHeight - footerHeight - e.clientY;
const upSpace = e.clientY;
@@ -321,23 +325,41 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
if (maxContextMenuHeight > bottomSpace) {
// If there's enough space, open bottom-up
if (upSpace > maxContextMenuHeight) {
this.appState.notes.setContextMenuPosition({
bottom: clientHeight - e.clientY,
left: e.clientX,
});
// Else, open on top of screen
openUpBottom = false;
this.appState.notes.setContextMenuMaxHeight(
'auto'
);
// Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
} else {
this.appState.notes.setContextMenuPosition({
top: 2,
left: e.clientX,
});
if (upSpace > bottomSpace) {
this.appState.notes.setContextMenuMaxHeight(
upSpace - 2
);
openUpBottom = false;
} else {
this.appState.notes.setContextMenuMaxHeight(
bottomSpace - 2
);
}
}
} else {
this.appState.notes.setContextMenuMaxHeight(
'auto'
);
}
if (openUpBottom) {
this.appState.notes.setContextMenuPosition({
top: e.clientY,
left: e.clientX,
});
} else {
this.appState.notes.setContextMenuPosition({
bottom: clientHeight - e.clientY,
left: e.clientX,
});
}
this.appState.notes.setContextMenuOpen(true);
}
}