Merge pull request #440 from gemini-testing/HERMIONE-161.sticky_header

feat: sticky foldable header

Author: KuznetsovRoman

lib/static/components/gui.js

@@ -6,7 +6,7 @@ import {bindActionCreators} from 'redux';
 
 import {ROOT} from '../../constants/extension-points';
 import * as actions from '../modules/actions';
-import ControlButtons from './controls/gui-controls';
+import StickyHeader from './sticky-header/gui';
 import Loading from './loading';
 import ModalContainer from '../containers/modal';
 import MainTree from './main-tree';
@@ -81,7 +81,7 @@ class Gui extends Component {
                     <CustomScripts scripts={customScripts}/>
                     {notificationElem}
                     <FaviconChanger />
-                    <ControlButtons />
+                    <StickyHeader />
                     <main className="container">
                         <MainTree />
                     </main>

lib/static/components/header/header.css

@@ -1,4 +1,5 @@
 .header {
+    padding-top: 15px;
     padding-bottom: 15px;
     border-bottom: 1px solid #ccc;
 }

lib/static/components/report.js

@@ -7,8 +7,7 @@ import {bindActionCreators} from 'redux';
 import {ROOT} from '../../constants/extension-points';
 import * as actions from '../modules/actions';
 import Loading from './loading';
-import Header from './header';
-import ControlButtons from './controls/report-controls';
+import StickyHeader from './sticky-header/report';
 import MainTree from './main-tree';
 import CustomScripts from './custom-scripts';
 import FaviconChanger from './favicon-changer';
@@ -51,8 +50,7 @@ class Report extends Component {
                     <CustomScripts scripts={this.props.customScripts}/>
                     {notificationElem}
                     <FaviconChanger />
-                    <Header/>
-                    <ControlButtons/>
+                    <StickyHeader />
                     <main className="container">
                         <MainTree />
                     </main>

lib/static/components/sticky-header/gui.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import StickyHeaderTemplate from '.';
+import ControlButtons from '../controls/gui-controls';
+
+const StickyHeader = () => (
+    <StickyHeaderTemplate>
+        <ControlButtons />
+    </StickyHeaderTemplate>
+);
+
+export default StickyHeader;

lib/static/components/sticky-header/index.js

@@ -0,0 +1,36 @@
+import React, {useState, useCallback} from 'react';
+import {throttle} from 'lodash';
+
+import './index.styl';
+import useEventListener from '../../hooks/useEventListener';
+
+const MAX_SHOW_HEADER = 10;
+const MIN_HIDE_HEADER = 30;
+
+const StickyHeader = ({children}) => {
+    const [scrollHeight, setScrollHeight] = useState(0);
+    const shouldWrap = scrollHeight > MAX_SHOW_HEADER;
+    const handleScroll = useCallback(throttle(() => {
+        const shouldShow = scroll => (scroll < MAX_SHOW_HEADER && window.scrollY > MIN_HIDE_HEADER);
+        const shouldHide = scroll => (scroll > MIN_HIDE_HEADER && window.scrollY < MAX_SHOW_HEADER);
+        const shouldUpdate = scroll => shouldShow(scroll) || shouldHide(scroll);
+        const cb = scroll => shouldUpdate(scroll)
+            ? window.scrollY
+            : scroll;
+
+        setScrollHeight(cb);
+    }, 100), [setScrollHeight]);
+
+    useEventListener('scroll', handleScroll);
+
+    return (
+        <div className={`sticky-header sticky-header_${shouldWrap ? 'wrapped' : 'unwrapped'}`}>
+            <div className="sticky-header__wrap" />
+            <div className="sticky-header__content">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default StickyHeader;

lib/static/components/sticky-header/index.styl

@@ -0,0 +1,37 @@
+.sticky-header
+    display contents
+
+    .sticky-header__wrap
+        position fixed
+        width 100%
+        height 40px
+        z-index 1000
+        text-align center
+        background-color white
+        border-bottom 1px solid #ccc
+        transition transform 250ms ease-out 500ms
+        transform-origin top
+        transform translateY(-100%)
+
+        &::before
+            transform translateY(50%) rotate(180deg)
+
+    .sticky-header__content
+        position sticky
+        top 0
+        width 100%
+        z-index 1100
+        transform-origin top
+        transition transform 250ms linear 250ms
+        background-color white
+        border-bottom 1px solid #ccc
+
+    &.sticky-header_unwrapped .sticky-header__wrap
+        transition-delay 0ms
+
+    &.sticky-header_wrapped:not(:hover)
+        .sticky-header__wrap
+            transform translateY(0)
+
+        .sticky-header__content
+            transform translateY(-100%) scaleY(0)

lib/static/components/sticky-header/report.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import StickyHeaderTemplate from '.';
+import Header from '../header';
+import ControlButtons from '../controls/report-controls';
+
+const StickyHeader = () => (
+    <StickyHeaderTemplate>
+        <Header />
+        <ControlButtons />
+    </StickyHeaderTemplate>
+);
+
+export default StickyHeader;

lib/static/styles.css

@@ -22,7 +22,6 @@
 .report {
     font: 15px YS Text, Helvetica Neue, Arial, sans-serif;
     line-height: 20px;
-    margin-top: 15px;
     margin-bottom: 15px;
 }
 
@@ -285,7 +284,8 @@ main.container {
 .tests-group__title:before,
 .state-title:after,
 .details__summary:after,
-.error .details__summary:before {
+.error .details__summary:before,
+.sticky-header__wrap:before {
     content: '';
     width: 16px;
     height: 16px;