Add an element for user to hide advanced menu

Provide a more visible way to hide the advanced menu.
massix · Feb 2, 2015 · 55e22eb · 55e22eb
1 parent acf68a5
commit 55e22eb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/pub/assets/css/hound.css b/pub/assets/css/hound.css
@@ -115,6 +115,11 @@ button:focus {
   transition: height, padding 0.1s ease-in-out;
 }
 
+#adv > .hideAdv {
+  color: #aaa;
+  text-decoration: underline;
+}
+
 /* Media object clearfix */
 #adv > .field {
   overflow: hidden;

diff --git a/pub/assets/js/hound.js b/pub/assets/js/hound.js
@@ -397,13 +397,16 @@ var SearchBar = React.createClass({
   },
   hideAdvanced: function() {
     var adv = this.refs.adv.getDOMNode(),
-        ban = this.refs.ban.getDOMNode();
+        ban = this.refs.ban.getDOMNode(),
+        q = this.refs.q.getDOMNode();
 
     css(adv, 'height', '0');
     css(adv, 'padding', '0');
 
     css(ban, 'max-height', '100px');
     css(ban, 'opacity', '1');
+
+    q.focus();
   },
   render: function() {
     var repoCount = this.state.allRepos.length,
@@ -448,6 +451,9 @@ var SearchBar = React.createClass({
 
         <div id="inb">
           <div id="adv" ref="adv">
+            <div className="hideAdv" onClick={this.hideAdvanced}>
+                Hide Advanced
+            </div>
             <div className="field">
               <label>File Path</label>
               <div className="field-input">