From cc01e07726cce2f32df67911f0fe5f293211313c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 22 Sep 2018 20:18:34 +0100
Subject: [PATCH 1/2] feat(ui): animate navbar show/hide

---
 .../Components/Animations/MountFade/index.css | 12 +---
 ui/src/Components/NavBar/index.js             | 62 +++++++++++--------
 ui/src/Components/NavBar/index.test.js        | 29 ++++++---
 3 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/ui/src/Components/Animations/MountFade/index.css b/ui/src/Components/Animations/MountFade/index.css
index 61752ab91..96cc05776 100644
--- a/ui/src/Components/Animations/MountFade/index.css
+++ b/ui/src/Components/Animations/MountFade/index.css
@@ -1,14 +1,8 @@
-.components-animation-fade-appear {
-  opacity: 0.01;
-}
-.components-animation-fade-appear-active {
-  opacity: 1;
-  transition: opacity 0.15s ease-in;
-}
-
+.components-animation-fade-appear,
 .components-animation-fade-enter {
   opacity: 0.01;
 }
+.components-animation-fade-appear-active,
 .components-animation-fade-enter-active {
   opacity: 1;
   transition: opacity 0.15s ease-in;
@@ -19,5 +13,5 @@
 }
 .components-animation-fade-exit-active {
   opacity: 0.01;
-  transition: opacity 0.15s ease-in;
+  transition: opacity 0.15s ease-out;
 }
diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 4fccf366a..a556e3100 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -11,10 +11,11 @@ import IdleTimer from "react-idle-timer";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
-import { FetchIndicator } from "./FetchIndicator";
-import { FilterInput } from "./FilterInput";
+import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { MainModal } from "Components/MainModal";
 import { SilenceModal } from "Components/SilenceModal";
+import { FetchIndicator } from "./FetchIndicator";
+import { FilterInput } from "./FilterInput";
 
 import "./index.css";
 
@@ -46,6 +47,10 @@ const NavBar = observer(
       }
     );
 
+    onHide = () => {
+      NavbarOnResize(0, 0);
+    };
+
     render() {
       const { alertStore, settingsStore, silenceFormStore } = this.props;
 
@@ -63,34 +68,37 @@ const NavBar = observer(
           onIdle={this.activityStatus.setIdle}
           timeout={1000 * 60 * 3}
         >
-          <div className="container">
-            <nav
-              className={`navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent ${
-                this.activityStatus.idle ? "d-none" : "d-inline-block"
-              }`}
-            >
-              <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
-              <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
-                {alertStore.info.totalAlerts}
-                <FetchIndicator alertStore={alertStore} />
-              </span>
-              <ul className={`navbar-nav float-right d-flex ${flexClass}`}>
-                <SilenceModal
-                  alertStore={alertStore}
-                  silenceFormStore={silenceFormStore}
-                  settingsStore={settingsStore}
-                />
-                <MainModal
+          <DropdownSlide
+            in={!this.activityStatus.idle}
+            appear={false}
+            onExited={this.onHide}
+            unmountOnExit
+          >
+            <div className="container">
+              <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
+                <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
+                <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
+                  {alertStore.info.totalAlerts}
+                  <FetchIndicator alertStore={alertStore} />
+                </span>
+                <ul className={`navbar-nav float-right d-flex ${flexClass}`}>
+                  <SilenceModal
+                    alertStore={alertStore}
+                    silenceFormStore={silenceFormStore}
+                    settingsStore={settingsStore}
+                  />
+                  <MainModal
+                    alertStore={alertStore}
+                    settingsStore={settingsStore}
+                  />
+                </ul>
+                <FilterInput
                   alertStore={alertStore}
                   settingsStore={settingsStore}
                 />
-              </ul>
-              <FilterInput
-                alertStore={alertStore}
-                settingsStore={settingsStore}
-              />
-            </nav>
-          </div>
+              </nav>
+            </div>
+          </DropdownSlide>
         </IdleTimer>
       );
     }
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index 8ab115c07..dac1e72b1 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -112,26 +112,39 @@ describe("<IdleTimer />", () => {
 
   it("hides navbar after 4 minutes", () => {
     const tree = MountedNavbar();
-    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(true);
-    expect(tree.find(".navbar").hasClass("d-none")).toBe(false);
+    expect(tree.find(".navbar")).toHaveLength(1);
 
     jest.runTimersToTime(1000 * 60 * 4);
     tree.update();
-    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(false);
-    expect(tree.find(".navbar").hasClass("d-none")).toBe(true);
+    expect(tree.find(".navbar")).toHaveLength(0);
   });
 
   it("hidden navbar shows up again after activity", () => {
     const tree = MountedNavbar();
     const instance = tree.instance();
+
     instance.activityStatus.idle = true;
+    jest.runOnlyPendingTimers();
     tree.update();
-    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(false);
-    expect(tree.find(".navbar").hasClass("d-none")).toBe(true);
+    expect(tree.find(".navbar")).toHaveLength(0);
 
     instance.activityStatus.setActive();
+    jest.runOnlyPendingTimers();
     tree.update();
-    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(true);
-    expect(tree.find(".navbar").hasClass("d-none")).toBe(false);
+    expect(tree.find(".navbar")).toHaveLength(1);
+  });
+
+  it("body padding-top is 4px when navbar is hidden", () => {
+    const tree = MountedNavbar();
+    const instance = tree.instance();
+
+    instance.activityStatus.setIdle();
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(
+      window
+        .getComputedStyle(document.body, null)
+        .getPropertyValue("padding-top")
+    ).toBe("4px");
   });
 });

From bdbffd151f3339d0f1d6d285133e5e00ad5ff3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 22 Sep 2018 20:59:46 +0100
Subject: [PATCH 2/2] feat(ui): use different idle value for desktop and mobile

Very simple version, no resize handling, but it will cover 95% cases
---
 ui/src/Components/NavBar/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index a556e3100..215b9e34c 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -19,6 +19,9 @@ import { FilterInput } from "./FilterInput";
 
 import "./index.css";
 
+const DesktopIdleTimeout = 1000 * 60 * 3;
+const MobileIdleTimeout = 1000 * 5;
+
 const NavbarOnResize = function(width, height) {
   document.body.style["padding-top"] = `${height + 4}px`;
 };
@@ -66,7 +69,9 @@ const NavBar = observer(
         <IdleTimer
           onActive={this.activityStatus.setActive}
           onIdle={this.activityStatus.setIdle}
-          timeout={1000 * 60 * 3}
+          timeout={
+            window.innerWidth >= 768 ? DesktopIdleTimeout : MobileIdleTimeout
+          }
         >
           <DropdownSlide
             in={!this.activityStatus.idle}