diff options
Diffstat (limited to 'packages')
3 files changed, 44 insertions, 1 deletions
diff --git a/packages/gitbook-plugin-search/src/components/Input.js b/packages/gitbook-plugin-search/src/components/Input.js index 22351cc..216a5d2 100644 --- a/packages/gitbook-plugin-search/src/components/Input.js +++ b/packages/gitbook-plugin-search/src/components/Input.js @@ -3,6 +3,8 @@ const { React } = GitBook; const search = require('../actions/search'); +const ESCAPE = 27; + const SearchInput = React.createClass({ propTypes: { query: React.PropTypes.string, @@ -17,17 +19,47 @@ const SearchInput = React.createClass({ dispatch(search.query(value)); }, + /** + * On Escape key down, clear the search field + */ + onKeyDown(e) { + const { query } = this.props; + if (e.keyCode == ESCAPE && query != '') { + e.preventDefault(); + e.stopPropagation(); + this.clearSearch(); + } + }, + + clearSearch() { + this.props.dispatch(search.query('')); + }, + render() { const { i18n, query } = this.props; + let clear; + if (query != '') { + clear = ( + <span className="Search-Clear" + onClick={this.clearSearch}> + ✕ + </span> + ); + // clear = <GitBook.Icon id="x" onClick={this.clearSearch}/>; + } + return ( <div className="Search-Input"> <input type="text" + onKeyDown={this.onKeyDown} value={query} placeholder={i18n.t('SEARCH_PLACEHOLDER')} onChange={this.onChange} /> + + { clear } </div> ); } diff --git a/packages/gitbook-plugin-theme-default/less/Search.less b/packages/gitbook-plugin-theme-default/less/Search.less index 38c1812..faa871f 100644 --- a/packages/gitbook-plugin-theme-default/less/Search.less +++ b/packages/gitbook-plugin-theme-default/less/Search.less @@ -11,7 +11,7 @@ margin-top: -1px; input, input:focus, input:hover { - width: 100%; + width: 90%; // 10% room for clear input X background: transparent; border: 1px solid transparent; box-shadow: none; @@ -22,6 +22,16 @@ } } +.Search-Clear { + width: 10%; + display: inline-block; + text-align: center; + font-size: 14px; + line-height: 22px; + color: @search-clear-color; + cursor: pointer; +} + .Search-MatchSpan { background: @search-highlight-color; diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index dd84dcf..4a063c9 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/packages/gitbook-plugin-theme-default/less/variables.less @@ -45,6 +45,7 @@ @tooltip-color: #fff; // Search @search-highlight-color: rgba(255, 220, 0, 0.4); +@search-clear-color: @button-color; // Font awesome @path-assets: '.'; @path-fonts: '@{path-assets}/fonts'; |