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

fix: avoid tag menu opening behind footer

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-19 16:17:49 -03:00
parent ca04ff43de
commit eb929f9e87
1 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,6 +58,32 @@ export const NotesOptions = observer(
}
}, [tagsMenuOpen, onSubmenuChange]);
const openTagsMenu = () => {
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxTagsMenuSize = parseFloat(defaultFontSize) * 20;
const { clientWidth, clientHeight } = document.body;
const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const { offsetTop, offsetWidth } = tagsButtonRef.current;
const footerHeight = 32;
if (buttonRect.top + maxTagsMenuSize > clientHeight) {
setTagsMenuMaxHeight(clientHeight - buttonRect.top - footerHeight - 2);
}
setTagsMenuPosition({
top: offsetTop,
right:
buttonRect.right + maxTagsMenuSize >
clientWidth
? offsetWidth
: -offsetWidth,
});
setTagsMenuOpen(!tagsMenuOpen);
};
return (
<>
<Switch
@@ -103,27 +129,7 @@ export const NotesOptions = observer(
{appState.tags.tagsCount > 0 && (
<Disclosure
open={tagsMenuOpen}
onChange={() => {
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxTagsMenuSize = parseFloat(defaultFontSize) * 20;
const { clientWidth, clientHeight } = document.body;
const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const { offsetTop, offsetWidth } = tagsButtonRef.current;
if (buttonRect.top + maxTagsMenuSize > clientHeight) {
setTagsMenuMaxHeight(clientHeight - buttonRect.top);
}
setTagsMenuPosition({
top: offsetTop,
right:
buttonRect.right + maxTagsMenuSize >
clientWidth
? offsetWidth
: -offsetWidth,
});
setTagsMenuOpen(!tagsMenuOpen);
}}
onChange={openTagsMenu}
>
<DisclosureButton
onKeyUp={(event) => {