From 23c449628734a30f57feeb31e8d235123919f2d3 Mon Sep 17 00:00:00 2001
From: Aaron Boodman <zboogs@gmail.com>
Date: Tue, 17 Dec 2013 21:30:59 -0800
Subject: [PATCH] Add an explicit close gesture to the nav. Going to try this
 out for awhile.

Change-Id: Iae3db925fa4540a47fe802982759ae31da7156ee
---
 server/camlistored/ui/close.svg | 68 +++++++++++++++++++++++++++++++++
 server/camlistored/ui/nav.css   | 19 ++++++++-
 server/camlistored/ui/nav.js    | 40 +++++++++----------
 3 files changed, 103 insertions(+), 24 deletions(-)
 create mode 100644 server/camlistored/ui/close.svg

diff --git a/server/camlistored/ui/close.svg b/server/camlistored/ui/close.svg
new file mode 100644
index 000000000..70afcef53
--- /dev/null
+++ b/server/camlistored/ui/close.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   id="svg4477"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="New document 15">
+  <defs
+     id="defs4479" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.54631521"
+     inkscape:cx="21.258229"
+     inkscape:cy="39.132534"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1443"
+     inkscape:window-height="1000"
+     inkscape:window-x="384"
+     inkscape:window-y="170"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4482">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-952.36218)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 17.5,969.86217 65,65.00003"
+       id="path4995"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 17.5,1034.8622 65,-65.00002"
+       id="path4995-5"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/server/camlistored/ui/nav.css b/server/camlistored/ui/nav.css
index 12419f18e..89dab4905 100644
--- a/server/camlistored/ui/nav.css
+++ b/server/camlistored/ui/nav.css
@@ -31,6 +31,23 @@ limitations under the License.
   width: 36px;
 }
 
+.cam-nav>.cam-nav-close {
+  height: 34px;
+  opacity: 0.6;
+  padding: 9px;
+  position: absolute;
+  right: 0;
+  top: 3px;
+  width: 34px;
+  z-index: 1;
+}
+.cam-nav>.cam-nav-close:hover {
+  opacity: 0.9;
+}
+.cam-nav.cam-nav-collapsed>.cam-nav-close {
+  opacity: 0;
+}
+
 .cam-nav-item {
   background-color: transparent;
   background-repeat: no-repeat;
@@ -82,7 +99,7 @@ limitations under the License.
   margin: 0;
   padding: 0;
   height: 26px;
-  width: 220px;
+  width: 207px;
 }
 
 .cam-nav-searchitem input::-webkit-input-placeholder {
diff --git a/server/camlistored/ui/nav.js b/server/camlistored/ui/nav.js
index ffd825a53..b3e8ab151 100644
--- a/server/camlistored/ui/nav.js
+++ b/server/camlistored/ui/nav.js
@@ -34,25 +34,31 @@ camlistore.Nav = function(domHelper, opt_delegate) {
 
   this.delegate_ = opt_delegate;
   this.expandTimer_ = 0;
-  this.collapseTimer_ = 0;
 };
 goog.inherits(camlistore.Nav, goog.ui.Container);
 
 camlistore.Nav.prototype.createDom = function() {
   this.setElementInternal(this.dom_.createDom('div'));
   goog.dom.classes.add(this.element_, 'cam-nav');
+
+  this.closeButton_ = this.dom_.createDom('img', 'cam-nav-close');
+  this.closeButton_.src = 'close.svg';
+  this.getElement().appendChild(this.closeButton_);
+
   this.close();
 };
 
 camlistore.Nav.prototype.enterDocument = function() {
   goog.base(this, 'enterDocument');
 
-  this.getHandler().listen(this.getElement(), goog.events.EventType.MOUSEOVER,
+  this.getHandler().listen(this.getElement(), 'mouseover',
       this.handleMouseOver_);
-  this.getHandler().listen(this.getElement(), goog.events.EventType.MOUSEOUT,
-      this.handleMouseOut_);
-  this.getHandler().listen(this.getElement(), goog.events.EventType.CLICK,
-      this.toggle.bind(this));
+  this.getHandler().listen(this.getElement(), 'mouseout', this.handleMouseOut_);
+
+  this.getHandler().listen(this.closeButton_, 'click', function(e) {
+    e.stopPropagation();
+    this.close();
+  }.bind(this));
 
   this.getHandler().listen(this.getElement(), 'keyup', function(e) {
     if (e.keyCode == goog.events.KeyCodes.ESC) {
@@ -92,28 +98,16 @@ camlistore.Nav.prototype.toggle = function() {
 };
 
 camlistore.Nav.prototype.handleMouseOver_ = function() {
-  if (this.collapseTimer_) {
-    window.clearTimeout(this.collapseTimer_);
-    this.collapseTimer_ = 0;
-  } else {
-    this.expandTimer_ = window.setTimeout(function() {
-      this.expandTimer_ = 0;
-      this.open();
-    }.bind(this), 250);
-  }
+  this.expandTimer_ = window.setTimeout(function() {
+    this.expandTimer_ = 0;
+    this.open();
+  }.bind(this), 250);
 };
 
 camlistore.Nav.prototype.handleMouseOut_ = function() {
   if (this.expandTimer_) {
     window.clearTimeout(this.expandTimer_);
     this.expandTimer_ = 0;
-  } else {
-    if (this.isOpen()) {
-      this.collapseTimer_ = window.setTimeout(function() {
-        this.collapseTimer_ = 0;
-        this.close();
-      }.bind(this), 500);
-    }
   }
 };
 
@@ -184,7 +178,7 @@ camlistore.Nav.SearchItem.prototype.createDom = function() {
 camlistore.Nav.SearchItem.prototype.enterDocument = function() {
   goog.base(this, 'enterDocument');
 
-  this.getHandler().listen(this.getElement(), 'mouseover',
+  this.getHandler().listen(this.input_, 'mouseover',
                            this.input_.focus.bind(this.input_));
 
   this.getHandler().listen(this.getElement(), 'click', function(e) {