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

@@ -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>
               <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`}

client/styles/components/_nav.scss

@@ -3,15 +3,18 @@
   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 {
+.nav__items-left,
+.nav__items-right {
   list-style: none;
   display: flex;
   flex-direction: row;
@@ -30,11 +33,14 @@
 
 .nav__item {
   position: relative;
-	padding: 0 #{10 / $base-font-size}rem;
   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 {
@@ -55,6 +61,7 @@
       color: getThemifyVariable('nav-hover-color');
     }
   }
+
   .nav__item-header-triangle polygon {
     @include themify() {
       fill: getThemifyVariable('nav-hover-color');
@@ -69,23 +76,28 @@
     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;
+    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;
   }
@@ -98,7 +110,8 @@
   }
 }
 
-.nav__dropdown a, button {
+.nav__dropdown a,
+button {
   @include themify() {
     color: getThemifyVariable('secondary-text-color');
   }
@@ -118,18 +131,21 @@
   @include themify() {
     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() {
         fill: getThemifyVariable('nav-hover-color');
@@ -138,10 +154,12 @@
   }
 }
 
-.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,9 +243,11 @@
 .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');