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

fix: set tags menu max height when at the bottom of the screen

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-18 10:23:04 -03:00
parent 3813537e5c
commit 350fc20831
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@ export const NotesOptions = observer(
top: 0, top: 0,
right: 0, right: 0,
}); });
const [tagsMenuMaxHeight, setTagsMenuMaxHeight] = useState<number | 'auto'>('auto');
const toggleOn = (condition: (note: SNNote) => boolean) => { const toggleOn = (condition: (note: SNNote) => boolean) => {
const notesMatchingAttribute = notes.filter(condition); const notesMatchingAttribute = notes.filter(condition);
@@ -106,14 +107,18 @@ export const NotesOptions = observer(
const defaultFontSize = window.getComputedStyle( const defaultFontSize = window.getComputedStyle(
document.documentElement document.documentElement
).fontSize; ).fontSize;
const maxTagsMenuWidth = parseFloat(defaultFontSize) * 20; const maxTagsMenuSize = parseFloat(defaultFontSize) * 20;
const { clientWidth, clientHeight } = document.body;
const buttonRect = tagsButtonRef.current.getBoundingClientRect(); const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const { offsetTop, offsetWidth } = tagsButtonRef.current; const { offsetTop, offsetWidth } = tagsButtonRef.current;
if (buttonRect.top + maxTagsMenuSize > clientHeight) {
setTagsMenuMaxHeight(clientHeight - buttonRect.top);
}
setTagsMenuPosition({ setTagsMenuPosition({
top: offsetTop, top: offsetTop,
right: right:
buttonRect.right + maxTagsMenuWidth > buttonRect.right + maxTagsMenuSize >
document.body.clientWidth clientWidth
? offsetWidth ? offsetWidth
: -offsetWidth, : -offsetWidth,
}); });
@@ -148,6 +153,7 @@ export const NotesOptions = observer(
}} }}
style={{ style={{
...tagsMenuPosition, ...tagsMenuPosition,
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 overflow-y-scroll"
> >