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

fix: tags menu not opening

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-20 15:36:58 -03:00
parent 0b2665a01b
commit d826af7b55
4 changed files with 12 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,8 @@ const NotesContextMenu = observer(({ appState }: Props) => {
return appState.notes.contextMenuOpen ? ( return appState.notes.contextMenuOpen ? (
<div <div
ref={contextMenuRef} ref={contextMenuRef}
className="sn-dropdown max-w-80 flex flex-col py-2 overflow-y-scroll absolute" className="sn-dropdown max-w-80 flex flex-col py-2 absolute"
style={{ ...appState.notes.contextMenuPosition, maxHeight: appState.notes.contextMenuMaxHeight }} style={{ ...appState.notes.contextMenuPosition }}
> >
<NotesOptions <NotesOptions
appState={appState} appState={appState}

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

@@ -161,7 +161,7 @@ export const NotesOptions = observer(
...tagsMenuPosition, ...tagsMenuPosition,
maxHeight: tagsMenuMaxHeight, maxHeight: tagsMenuMaxHeight,
}} }}
className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-h-80 overflow-y-scroll" className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-h-80 absolute overflow-y-scroll"
> >
{appState.tags.tags.map((tag) => ( {appState.tags.tags.map((tag) => (
<button <button

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

@@ -27,7 +27,6 @@ export class NotesState {
top: 0, top: 0,
left: 0, left: 0,
}; };
contextMenuMaxHeight: number | 'auto' = 'auto';
showProtectedWarning = false; showProtectedWarning = false;
constructor( constructor(
@@ -46,7 +45,6 @@ export class NotesState {
setContextMenuOpen: action, setContextMenuOpen: action,
setContextMenuPosition: action, setContextMenuPosition: action,
setContextMenuMaxHeight: action,
setShowProtectedWarning: action, setShowProtectedWarning: action,
unselectNotes: action, unselectNotes: action,
}); });
@@ -183,10 +181,6 @@ export class NotesState {
this.contextMenuPosition = position; this.contextMenuPosition = position;
} }
setContextMenuMaxHeight(height: number | 'auto'): void {
this.contextMenuMaxHeight = height;
}
async changeSelectedNotes( async changeSelectedNotes(
mutate: (mutator: NoteMutator) => void mutate: (mutator: NoteMutator) => void
): Promise<void> { ): Promise<void> {

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

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