nav moon logic

2 files changed, 46 insertions, 20 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index de76368..2c17621 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -14,7 +14,7 @@
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
 }
-.main-nav:hover {
+.main-nav.hovering-nav {
   background: black;
   color: white;
 }
@@ -52,7 +52,10 @@
   justify-content: flex-start;
   align-items: center;
 }
-.viewer-nav > .nav-row > div:nth-child(2) {
+.viewer-nav > .nav-row > div:nth-child(2),
+.viewer-nav > .nav-row > div:nth-child(2) > div {
+  display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
 }
@@ -136,8 +139,8 @@
 }
 .viewer-nav.black .arrow path,
 .viewer-nav.black .arrow polygon,
-.viewer-nav .main-nav:hover .arrow path,
-.viewer-nav .main-nav:hover .arrow polygon,
+.viewer-nav .main-nav.hovering-nav .arrow path,
+.viewer-nav .main-nav.hovering-nav .arrow polygon,
 .nav-open .viewer-nav .arrow path,
 .nav-open .viewer-nav .arrow polygon,
 .checklist-open .viewer-nav .arrow path,
@@ -154,7 +157,7 @@
 .nav-player.playing {
   opacity: 0.0;
 }
-.main-nav:hover .nav-player.playing,
+.main-nav.hovering-nav .nav-player.playing,
 .nav-open .nav-player.playing {
   opacity: 1.0;
 }
@@ -174,11 +177,11 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.main-nav:hover .volume path,
+.main-nav.hovering-nav .volume path,
 .nav-open .volume path {
   fill: #fff;
 }
-.main-nav:hover .volume.muted path,
+.main-nav.hovering-nav .volume.muted path,
 .nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
@@ -195,8 +198,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.main-nav:hover .playToggle path,
-.main-nav:hover .playToggle polygon,
+.main-nav.hovering-nav .playToggle path,
+.main-nav.hovering-nav .playToggle polygon,
 .nav-open .playToggle path,
 .nav-open .playToggle polygon {
   fill: #fff;
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index e242e8a..c27947b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -9,27 +9,44 @@ import { thumbnailURL } from 'app/utils/annotation.utils'
 
 class NavParent extends Component {
   state = {
-    hovering: false,
+    hoveringNext: false,
+    hoveringNav: false,
     suppressHover: false,
   }
   constructor(props){
     super(props)
-    this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
+    this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this)
   }
   handleMouseEnter(){
     if (this.state.suppressHover) return
-    this.setState({ hovering: true })
+    this.setState({ hoveringNext: false, hoveringNav: true })
+  }
+  handleMouseEnterNext(){
+    if (this.state.suppressHover) return
+    this.setState({ hoveringNext: true, hoveringNav: false })
   }
   handleMouseLeave(){
-    this.setState({ hovering: false, suppressHover: false })
+    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: false })
+  }
+  handleMouseLeaveNext(){
+    this.setState({ hoveringNext: false, suppressHover: true, })
+    setTimeout(() => {
+      this.setState({ suppressHover: false })
+    }, 50)
   }
   render() {
     const { viewer } = this.props
+    let containerClassName = "viewer-nav " + viewer.navStyle
+    let navClassName = 'nav-row main-nav'
+    if (this.state.hoveringNav) navClassName += ' hovering-nav'
+    if (this.state.hoveringNext) containerClassName += ' hovering-next'
     return (
-      <div className={"viewer-nav " + viewer.navStyle + " " + (this.state.hovering ? 'hovering-next': '')} onMouseLeave={this.handleMouseLeave}>
-        <div className='nav-row main-nav'>
-          <div className='nav-section-name'>
+      <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
+        <div className={navClassName}>
+          <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
               {viewer.currentSection && 
@@ -41,10 +58,16 @@ class NavParent extends Component {
               }
             </span>
           </div>
-          <NavPlayer />
-          <div className='nav-next' onMouseEnter={this.handleMouseEnter}>
+          <div onMouseEnter={this.handleMouseEnter}>
+            <NavPlayer />
+          </div>
+          <div className='nav-next'>
             {viewer.nextSection &&
-              <span className="next-link link" onClick={() => actions.viewer.seekToSection(viewer.nextSection)}>
+              <span
+                className="next-link link"
+                onMouseEnter={this.handleMouseEnterNext}
+                onClick={() => actions.viewer.seekToSection(viewer.nextSection)}
+              >
                 Next
                 <Arrow type={'right'} />
               </span>
@@ -55,7 +78,7 @@ class NavParent extends Component {
           <div className="next-section-thumbnail"
             onClick={() => {
               actions.viewer.seekToSection(viewer.nextSection)
-              this.setState({ hovering: false, suppressHover: true })
+              this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
             }}
             style={{
             backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')',