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}>
<input
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}
onChange={onSearchQueryChange}
type="text"
@@ -121,7 +121,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
{dropdownVisible && (
<DisclosurePanel
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 }}
>
<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,
} = appState.activeNote;
const [containerHeight, setContainerHeight] =
useState(TAGS_ROW_HEIGHT);
const [tagsContainerHeight, setTagsContainerHeight] =
useState(TAGS_ROW_HEIGHT);
const [overflowCountPosition, setOverflowCountPosition] = useState(0);
@@ -76,11 +78,18 @@ const NoteTags = observer(({ application, appState }: Props) => {
setOverflowCountPosition(position);
}, [isTagOverflowed, tagsContainerExpanded, tagsContainerPosition]);
const reloadTagsContainerHeight = useCallback(() => {
const height = tagsContainerExpanded
const reloadContainersHeight = useCallback(() => {
const containerHeight = tagsContainerExpanded
? tagsContainerRef.current.scrollHeight
: 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]);
const reloadOverflowCount = useCallback(() => {
@@ -97,28 +106,30 @@ const NoteTags = observer(({ application, appState }: Props) => {
useEffect(() => {
appState.activeNote.reloadTagsContainerLayout();
reloadOverflowCountPosition();
reloadTagsContainerHeight();
reloadContainersHeight();
reloadOverflowCount();
}, [
appState.activeNote,
reloadOverflowCountPosition,
reloadTagsContainerHeight,
reloadContainersHeight,
reloadOverflowCount,
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`;
return (
<div
className="flex transition-height duration-150"
ref={containerRef}
style={{ height: tagsContainerHeight }}
style={{ height: containerHeight }}
>
<div
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={{
maxWidth: tagsContainerMaxWidth,
height: tagsContainerHeight,