From 1aebe44dcdd602903bb4f906459d68f2c9575aca Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 1 Jun 2021 12:17:06 -0300
Subject: [PATCH] feat: use opacity for overflowed tags animation

---
 .../javascripts/components/NoteTags.tsx       | 19 +++++++------------
 app/assets/stylesheets/_sn.scss               | 12 ++++++++++++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 259835ca2..112877416 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -28,8 +28,6 @@ const NoteTags = observer(({ application, appState }: Props) => {
 
   const [containerHeight, setContainerHeight] =
     useState(TAGS_ROW_HEIGHT);
-  const [tagsContainerHeight, setTagsContainerHeight] =
-    useState(TAGS_ROW_HEIGHT);
   const [overflowCountPosition, setOverflowCountPosition] = useState(0);
 
   const containerRef = useRef<HTMLDivElement>();
@@ -90,13 +88,6 @@ const NoteTags = observer(({ application, appState }: Props) => {
       ? tagsContainerRef.current.scrollHeight
       : TAGS_ROW_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(() => {
@@ -134,17 +125,21 @@ const NoteTags = observer(({ application, appState }: Props) => {
     >
       <div
         ref={tagsContainerRef}
-        className={`absolute flex flex-wrap pl-1 -ml-1 transition-height duration-150 ${
+        className={`absolute flex flex-wrap pl-1 -ml-1 ${
           tagsContainerExpanded ? '' : 'overflow-hidden'
         }`}
         style={{
           maxWidth: tagsContainerMaxWidth,
-          height: tagsContainerHeight,
+          height: TAGS_ROW_HEIGHT,
         }}
       >
         {tags.map((tag: SNTag, index: number) => (
           <button
-            className={`${tagClass} pl-1 mr-2`}
+            className={`${tagClass} pl-1 mr-2 transition-opacity duration-150 ${
+              isTagOverflowed(tagsRef.current[index])
+                ? 'opacity-0'
+                : 'opacity-1'
+            }`}
             style={{ maxWidth: tagsContainerMaxWidth }}
             ref={(element) => {
               if (element) {
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index baa654209..32091c59a 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -244,6 +244,18 @@
   transition-property: height;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
 .w-80 {
   width: 20rem;
 }