From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Tue, 5 Mar 2019 20:51:09 +0000 (-0500)
Subject: Bug 1532482 - Improve “new changes since” indicator UX
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=61c24577464e244a4934134115b282476bfcaa81;p=thirdparty%2Fbugzilla.git

Bug 1532482 - Improve “new changes since” indicator UX
---

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 9e66c3bc9..1844c7f50 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -509,14 +509,28 @@ td.flag-requestee {
 }
 
 .new-changes-link {
-    margin: 8px 0;
+    position: sticky;
+    top: 8px;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    overflow: hidden;
+    margin: 8px -8px;
     border-radius: 4px;
     padding: 4px;
     font-size: 12px;
     text-align: center;
     color: #FFF;
     background: #277AC1;
+    opacity: 1;
     cursor: pointer;
+    transition: all .2s 2s;
+    will-change: transform; /* for performance */
+}
+
+.new-changes-link[hidden] {
+    display: block;
+    opacity: 0;
 }
 
 .new-changes-separator {
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 7d5f093cc..598c8c252 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -1438,7 +1438,8 @@ function show_new_changes_indicator() {
             const observer = new IntersectionObserver(entries => entries.forEach(entry => {
                 if (entry.intersectionRatio > 0) {
                     observer.unobserve($separator);
-                    $link.remove();
+                    $link.addEventListener('transitionend', () => $link.remove(), { once: true });
+                    $link.hidden = true;
                 }
             }), { root: document.querySelector('#bugzilla-body') });