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

fix: fix tags dropdown width and tags container height

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-31 19:26:26 -03:00
parent 6d1f6c6f24
commit 31fbf2ce35
3 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,7 +99,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
<Disclosure open={dropdownVisible} onChange={showDropdown}> <Disclosure open={dropdownVisible} onChange={showDropdown}>
<input <input
ref={inputRef} ref={inputRef}
className="min-w-80 bg-default text-xs color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom" className="w-80 bg-default text-xs color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom"
value={searchQuery} value={searchQuery}
onChange={onSearchQueryChange} onChange={onSearchQueryChange}
type="text" type="text"
@@ -121,7 +121,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
{dropdownVisible && ( {dropdownVisible && (
<DisclosurePanel <DisclosurePanel
ref={dropdownRef} ref={dropdownRef}
className="sn-dropdown flex flex-col py-2 absolute" className="sn-dropdown w-80 flex flex-col py-2 absolute"
style={{ maxHeight: dropdownMaxHeight }} style={{ maxHeight: dropdownMaxHeight }}
> >
<div className="overflow-y-scroll"> <div className="overflow-y-scroll">

27
app/assets/javascripts/components/NoteTags.tsx
View File

@@ -26,6 +26,8 @@ const NoteTags = observer(({ application, appState }: Props) => {
tagsOverflowed, tagsOverflowed,
} = appState.activeNote; } = appState.activeNote;
const [containerHeight, setContainerHeight] =
useState(TAGS_ROW_HEIGHT);
const [tagsContainerHeight, setTagsContainerHeight] = const [tagsContainerHeight, setTagsContainerHeight] =
useState(TAGS_ROW_HEIGHT); useState(TAGS_ROW_HEIGHT);
const [overflowCountPosition, setOverflowCountPosition] = useState(0); const [overflowCountPosition, setOverflowCountPosition] = useState(0);
@@ -76,11 +78,18 @@ const NoteTags = observer(({ application, appState }: Props) => {
setOverflowCountPosition(position); setOverflowCountPosition(position);
}, [isTagOverflowed, tagsContainerExpanded, tagsContainerPosition]); }, [isTagOverflowed, tagsContainerExpanded, tagsContainerPosition]);
const reloadTagsContainerHeight = useCallback(() => { const reloadContainersHeight = useCallback(() => {
const height = tagsContainerExpanded const containerHeight = tagsContainerExpanded
? tagsContainerRef.current.scrollHeight ? tagsContainerRef.current.scrollHeight
: TAGS_ROW_HEIGHT; : TAGS_ROW_HEIGHT;
setTagsContainerHeight(height); setContainerHeight(containerHeight);
const firstTagTop = tagsRef.current[0].getBoundingClientRect().top;
const lastTagBottom = tagsRef.current[tagsRef.current.length - 1].getBoundingClientRect().bottom;
const tagsContainerHeight = tagsContainerExpanded
? lastTagBottom - firstTagTop
: TAGS_ROW_HEIGHT;
setTagsContainerHeight(tagsContainerHeight);
}, [tagsContainerExpanded]); }, [tagsContainerExpanded]);
const reloadOverflowCount = useCallback(() => { const reloadOverflowCount = useCallback(() => {
@@ -97,28 +106,30 @@ const NoteTags = observer(({ application, appState }: Props) => {
useEffect(() => { useEffect(() => {
appState.activeNote.reloadTagsContainerLayout(); appState.activeNote.reloadTagsContainerLayout();
reloadOverflowCountPosition(); reloadOverflowCountPosition();
reloadTagsContainerHeight(); reloadContainersHeight();
reloadOverflowCount(); reloadOverflowCount();
}, [ }, [
appState.activeNote, appState.activeNote,
reloadOverflowCountPosition, reloadOverflowCountPosition,
reloadTagsContainerHeight, reloadContainersHeight,
reloadOverflowCount, reloadOverflowCount,
tags, tags,
]); ]);
const tagClass = `bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center const tagClass = `h-6 bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center
mt-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`; mt-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`;
return ( return (
<div <div
className="flex transition-height duration-150" className="flex transition-height duration-150"
ref={containerRef} ref={containerRef}
style={{ height: tagsContainerHeight }} style={{ height: containerHeight }}
> >
<div <div
ref={tagsContainerRef} ref={tagsContainerRef}
className="absolute flex flex-wrap pl-1 -ml-1 overflow-hidden transition-height duration-150" className={`absolute flex flex-wrap pl-1 -ml-1 transition-height duration-150 ${
tagsContainerExpanded ? '' : 'overflow-hidden'
}`}
style={{ style={{
maxWidth: tagsContainerMaxWidth, maxWidth: tagsContainerMaxWidth,
height: tagsContainerHeight, height: tagsContainerHeight,

8
app/assets/stylesheets/_sn.scss
View File

@@ -180,6 +180,10 @@
height: 1.25rem; height: 1.25rem;
} }
.h-6 {
height: 1.5rem;
}
.h-7 { .h-7 {
height: 1.75rem; height: 1.75rem;
} }
@@ -240,6 +244,10 @@
transition-property: height; transition-property: height;
} }
.w-80 {
width: 20rem;
}
/** /**
* A button that is just an icon. Separated from .sn-button because there * A button that is just an icon. Separated from .sn-button because there
* is almost no style overlap. * is almost no style overlap.