Commit 48ea8f8c authored by Mattias Lundmark's avatar Mattias Lundmark
Browse files

Added an x to search input to clear current search

parent a183e1c5
......@@ -56,7 +56,7 @@ export const messages = defineMessages({
noItems: {
id: 'History.noItems',
description: 'Message to show when user has no history items yet',
defaultMessage: "You don’t have any history yet. Check out and return something!"
defaultMessage: 'You don’t have any history yet. Check out and return something!'
}
})
......
......@@ -10,6 +10,7 @@ class SearchHeader extends React.Component {
constructor (props) {
super(props)
this.handleSearch = this.handleSearch.bind(this)
this.clearSearch = this.clearSearch.bind(this)
this.handleLoginClick = this.handleLoginClick.bind(this)
this.toggleMobileNav = this.toggleMobileNav.bind(this)
}
......@@ -38,6 +39,11 @@ class SearchHeader extends React.Component {
}
}
clearSearch (event) {
event.preventDefault()
this.searchFieldInput.value = ''
}
handleLoginClick (event) {
event.preventDefault()
this.props.mobileNavigationActions.hideMobileNavigation()
......@@ -275,11 +281,19 @@ class SearchHeader extends React.Component {
<div className="search-field" >
{this.renderSearchField()}
</div >
<div className="search-button" >
<button onClick={this.handleSearch} type="button" className="search-submit"
data-automation-id="search_button" >
<img src="/images/search16.svg" />
</button >
<div className="search-buttons-wrapper" >
<div className="clear-search-button" >
<button onClick={this.clearSearch} type="button" className="search-clear"
data-automation-id="search_button" >
<img src="/images/x.svg" />
</button >
</div >
<div className="search-button" >
<button onClick={this.handleSearch} type="button" className="search-submit"
data-automation-id="search_button" >
<img src="/images/search16.svg" />
</button >
</div >
</div >
</div >
</form >
......
......@@ -183,7 +183,7 @@ class PaymentResponse extends React.Component {
transactionId={this.props.transactionId}
authorizationId={this.props.authorizationId}
sendPaymentReceiptSuccess={this.props.sendPaymentReceiptSuccess}
successfulExtends={this.props.successfulExtends}/>
successfulExtends={this.props.successfulExtends} />
<Link to="/profile/loans" >
<FormattedMessage {...messages.paymentReturnToMypage} />
</Link >
......
......@@ -43,8 +43,6 @@ class EmailReceiptForm extends React.Component {
formName={formName}
getValidator={this.getValidator} />
{!this.props.sendPaymentReceiptSuccess &&
<button className="blue-btn" type="submit" disabled={submitting} data-automation-id="emailReceiptForm_button">
<FormattedMessage {...messages.sendPaymentReceipt} /><br />
......
......@@ -4055,6 +4055,13 @@ footer .social-icons {
height: 100%;
}
.clear-search-button button {
margin: 0;
padding: 0;
width: 50%;
height: 50%;
}
.search-box input {
-webkit-appearance: none;
background-position: 0.5em center;
......@@ -4066,18 +4073,34 @@ footer .social-icons {
width: 100%;
}
.search-buttons-wrapper {
display: flex;
justify-content: flex-end;
}
.search-button {
margin: 0.5em;
margin: 0.5em 0.5em 0.5em 0em;
width: 32px;
height: 32px;
float: right;
flex-shrink: 0;
}
.clear-search-button {
margin: 0.6em 0em 0.5em 0.5em;
width: 32px;
height: 32px;
float: right;
flex-shrink: 0;
}
.search-box button:hover, .search-box button:active, .search-box button:focus {
cursor: pointer;
}
.search-field {
@include span(9);
}
@include breakpoint($small) {
......@@ -4116,14 +4139,14 @@ footer .social-icons {
}
}
.search-field {
@include span(9);
}
@include breakpoint($small) {
.search-button {
margin: 1em;
margin: 1em 1em 1em 0em;
}
.clear-search-button {
margin: 1.1em 0em 1em 1em;
}
.search-box {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment