From 9433d188fc6d6135991372aafb474db4b5c149fe Mon Sep 17 00:00:00 2001
From: siddhant <30566406+siddhant1@users.noreply.github.com>
Date: Wed, 27 Mar 2019 22:20:55 +0530
Subject: [PATCH] Added autoOpen items on hover  (#900)

* AutoOpen Header

* removed nav heading

* Fixed #908

* Fixed Styles

* Fixed styles

* Refactor editor

* Issues Fixed

* keyup -> keyown
---
 client/components/Nav.jsx          |  79 +++++++++----------
 client/styles/components/_nav.scss | 120 ++++++++++++++++++-----------
 2 files changed, 115 insertions(+), 84 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 26aeccd0..e1203f62 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -28,14 +28,16 @@ class Nav extends React.PureComponent {
     this.clearHideTimeout = this.clearHideTimeout.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.closeDropDown = this.closeDropDown.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     document.addEventListener('mousedown', this.handleClick, false);
+    document.addEventListener('keydown', this.closeDropDown, false);
   }
-
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
+    document.removeEventListener('keydown', this.closeDropDown, false);
   }
 
   setDropdown(dropdown) {
@@ -44,8 +46,17 @@ class Nav extends React.PureComponent {
     });
   }
 
+  closeDropDown(e) {
+    if (e.keyCode === 27) {
+      this.setDropdown('none');
+    }
+  }
+
   handleClick(e) {
-    if (this.node.contains(e.target)) {
+    if (!this.node) {
+      return;
+    }
+    if (this.node && this.node.contains(e.target)) {
       return;
     }
 
@@ -124,18 +135,16 @@ class Nav extends React.PureComponent {
               onClick={this.toggleDropdown.bind(this, 'file')}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
+              onMouseOver={() => {
+                if (this.state.dropdownOpen !== 'none') {
+                  this.setDropdown('file');
+                }
+              }}
             >
               <span className="nav__item-header">File</span>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <button
-                onClick={this.toggleDropdown.bind(this, 'file')}
-                className="nav__dropdown-heading"
-              >
-                <span>File</span>
-                <InlineSVG src={triangleUrl} />
-              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -239,18 +248,16 @@ class Nav extends React.PureComponent {
               onClick={this.toggleDropdown.bind(this, 'edit')}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
+              onMouseOver={() => {
+                if (this.state.dropdownOpen !== 'none') {
+                  this.setDropdown('edit');
+                }
+              }}
             >
               <span className="nav__item-header">Edit</span>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
-            <ul className="nav__dropdown">
-              <button
-                onClick={this.toggleDropdown.bind(this, 'edit')}
-                className="nav__dropdown-heading"
-              >
-                <span>Edit</span>
-                <InlineSVG src={triangleUrl} />
-              </button>
+            <ul className="nav__dropdown" >
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -310,18 +317,16 @@ class Nav extends React.PureComponent {
               onClick={this.toggleDropdown.bind(this, 'sketch')}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
+              onMouseOver={() => {
+                if (this.state.dropdownOpen !== 'none') {
+                  this.setDropdown('sketch');
+                }
+              }}
             >
               <span className="nav__item-header">Sketch</span>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <button
-                onClick={this.toggleDropdown.bind(this, 'sketch')}
-                className="nav__dropdown-heading"
-              >
-                <span>Sketch</span>
-                <InlineSVG src={triangleUrl} />
-              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -405,18 +410,16 @@ class Nav extends React.PureComponent {
               onClick={this.toggleDropdown.bind(this, 'help')}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
+              onMouseOver={() => {
+                if (this.state.dropdownOpen !== 'none') {
+                  this.setDropdown('help');
+                }
+              }}
             >
               <span className="nav__item-header">Help & Feedback</span>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <button
-                onClick={this.toggleDropdown.bind(this, 'help')}
-                className="nav__dropdown-heading"
-              >
-                <span>Help & Feedback</span>
-                <InlineSVG src={triangleUrl} />
-              </button>
               <li className="nav__dropdown-item">
                 <button
                   onFocus={this.handleFocus.bind(this, 'help')}
@@ -485,18 +488,16 @@ class Nav extends React.PureComponent {
                 onClick={this.toggleDropdown.bind(this, 'account')}
                 onBlur={this.handleBlur}
                 onFocus={this.clearHideTimeout}
+                onMouseOver={() => {
+                  if (this.state.dropdownOpen !== 'none') {
+                    this.setDropdown('account');
+                  }
+                }}
               >
                 My Account
                 <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
               </button>
               <ul className="nav__dropdown">
-                <button
-                  onClick={this.toggleDropdown.bind(this, 'account')}
-                  className="nav__dropdown-heading"
-                >
-                  <span>My Account</span>
-                  <InlineSVG src={triangleUrl} />
-                </button>
                 <li className="nav__dropdown-item">
                   <Link
                     to={`/${this.props.user.username}/sketches`}
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 4497d8e9..710db56f 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -1,21 +1,24 @@
 .nav {
   height: #{42 / $base-font-size}rem;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	@include themify() {
-		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
-	}
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  @include themify() {
+    border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
+  }
+
   & button {
     padding: 0;
   }
 }
 
-.nav__items-left, .nav__items-right {
-	list-style: none;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
+.nav__items-left,
+.nav__items-right {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   height: 100%;
   align-items: center;
 }
@@ -29,20 +32,23 @@
 }
 
 .nav__item {
-	position: relative;
-	padding: 0 #{10 / $base-font-size}rem;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
+
+  & button {
+    padding: #{12 / $base-font-size}rem #{10 / $base-font-size}rem;
+  }
 }
 
 .nav__item:first-child {
-	padding-left: #{15 / $base-font-size}rem;
+  padding-left: #{15 / $base-font-size}rem;
 }
 
 .nav__item:last-child {
-	padding-right: #{15 / $base-font-size}rem;
+  padding-right: #{15 / $base-font-size}rem;
 }
 
 .nav__item-header {
@@ -55,50 +61,57 @@
       color: getThemifyVariable('nav-hover-color');
     }
   }
+
   .nav__item-header-triangle polygon {
-   @include themify() {
+    @include themify() {
       fill: getThemifyVariable('nav-hover-color');
-    } 
+    }
   }
 }
 
 .nav__dropdown {
-	@include themify() {
-		background-color: map-get($theme-map, 'modal-background-color');
-		border: 1px solid map-get($theme-map, 'modal-border-color');
-		box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+  @include themify() {
+    background-color: map-get($theme-map, 'modal-background-color');
+    border: 1px solid map-get($theme-map, 'modal-border-color');
+    box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
     color: getThemifyVariable('dropdown-color');
-	}
+  }
+
   display: none;
-	text-align: left;
-	width: #{180 / $base-font-size}rem;
-	.nav__item--open & {
-		display: flex;
-		position: absolute;
-		flex-direction: column;
-  	top: 4px;
-		left: 0;
-		height: auto;
-	}
+  text-align: left;
+  width: #{180 / $base-font-size}rem;
+
+  .nav__item--open & {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    top: #{40 / $base-font-size}rem;
+    left: 0;
+    height: auto;
+  }
+
   z-index: 9999;
   border-radius: #{6 / $base-font-size}rem;
+  border-top-left-radius: 0px;
 }
 
 .nav__items-right {
   padding-right: #{20 / $base-font-size}rem;
+
   & .nav__dropdown {
     width: #{121 / $base-font-size}rem;
   }
 }
 
 .nav__item-spacer {
-	@include themify() {
-		color: map-get($theme-map, 'inactive-text-color');
+  @include themify() {
+    color: map-get($theme-map, 'inactive-text-color');
     margin: 0 #{8 / $base-font-size}rem;
-	}
+  }
 }
 
-.nav__dropdown a, button {
+.nav__dropdown a,
+button {
   @include themify() {
     color: getThemifyVariable('secondary-text-color');
   }
@@ -116,32 +129,37 @@
 
 .nav__dropdown-heading {
   @include themify() {
-		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
+    border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
   }
+
   height: #{(42 - 5) / $base-font-size}rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 #{16 / $base-font-size}rem;
   cursor: pointer;
+
   &:hover {
     span {
       @include themify() {
         color: getThemifyVariable('nav-hover-color');
       }
     }
+
     polygon {
-     @include themify() {
+      @include themify() {
         fill: getThemifyVariable('nav-hover-color');
-      } 
+      }
     }
   }
 }
 
-.nav__dropdown-heading a, .nav__dropdown-heading a:hover {
+.nav__dropdown-heading a,
+.nav__dropdown-heading a:hover {
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
+
   cursor: default;
   width: 100%;
 }
@@ -158,24 +176,30 @@
   align-items: center;
   padding: 0 #{16 / $base-font-size}rem;
   cursor: pointer;
-  & button, & a {
+
+  & button,
+  & a {
     @include themify() {
       color: getThemifyVariable('dropdown-color');
     }
   }
+
   &:hover {
     @include themify() {
       background-color: getThemifyVariable('button-background-hover-color');
       color: getThemifyVariable('button-hover-color')
     }
-    & button, & a {
+
+    & button,
+    & a {
       @include themify() {
         color: getThemifyVariable('button-hover-color');
       }
     }
   }
 
-  & button, & a {
+  & button,
+  & a {
     width: 100%;
     height: 100%;
     display: flex;
@@ -185,7 +209,10 @@
 }
 
 .nav__dropdown-item:last-child {
-  border-radius: 0 0 #{6 / $base-font-size}rem #{6 / $base-font-size}rem;
+  border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+}
+.nav__dropdown-item:first-child {
+  border-radius: 0 #{5 / $base-font-size}rem 0 0;
 }
 
 .nav__announce {
@@ -207,6 +234,7 @@
   position: relative;
   height: #{42 / $base-font-size}rem;
   width: #{56 / $base-font-size}rem;
+
   & span {
     position: absolute;
   }
@@ -215,12 +243,14 @@
 .nav__keyboard-shortcut {
   font-size: #{12 / $base-font-size}rem;
   font-family: Inconsololata, monospace;
+
   @include themify() {
     color: getThemifyVariable('keyboard-shortcut-color');
   }
+
   .nav__dropdown-item:hover & {
     @include themify() {
       color: getThemifyVariable('button-hover-color');
     }
   }
-}
+}
\ No newline at end of file