add close button to room search filter

This commit is contained in:
Matthew Hodgson 2016-05-16 23:36:52 +01:00
parent 8a9c85c97d
commit e640f65640
3 changed files with 38 additions and 0 deletions

View File

@ -81,6 +81,16 @@ module.exports = React.createClass({
var searchControls; var searchControls;
if (!this.props.collapsed) { if (!this.props.collapsed) {
searchControls = [ searchControls = [
this.state.searchTerm.length > 0 ?
<div key="button"
className="mx_SearchBox_closeButton"
onClick={ ()=>{ this.refs.search.value = ""; this.onChange(); } }>
<TintableSvg
className="mx_SearchBox_searchButton"
src="img/icons-close.svg" width="24" height="24"
/>
</div>
:
<TintableSvg <TintableSvg
key="button" key="button"
className="mx_SearchBox_searchButton" className="mx_SearchBox_searchButton"

View File

@ -28,6 +28,11 @@ limitations under the License.
.mx_SearchBox_searchButton { .mx_SearchBox_searchButton {
margin-right: 10px; margin-right: 10px;
pointer-events: none;
}
.mx_SearchBox_closeButton {
cursor: pointer;
} }
.mx_SearchBox_search { .mx_SearchBox_search {

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-11 13 24 24" xml:space="preserve">
<style type="text/css">
.st1{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
</style>
<title>icons_create_room</title>
<desc>Created with sketchtool.</desc>
<g id="_x30_3-Input" sketch:type="MSPage">
<g id="_x30_3_x5F_4-Uploading" transform="translate(-20.000000, -726.000000)" sketch:type="MSArtboardGroup">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list_x2F_Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
<g id="icons_create_room" transform="translate(20.000000, 18.000000)">
<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="1" cy="25" r="12"/>
<path id="Line" class="st1" d="M-2.5,28.5l7.1-7.1"/>
<path id="Line_1_" class="st1" d="M-2.5,21.5l7.1,7.1"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB