Redesign listing search [MAILPOET-2778]
This commit is contained in:
@ -74,6 +74,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mailpoet-listing-search {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mailpoet_listing_loading tbody tr,
|
||||
.mailpoet_form_loading tbody tr {
|
||||
opacity: .2;
|
||||
|
7
assets/js/src/listing/assets/search_icon.tsx
Normal file
7
assets/js/src/listing/assets/search_icon.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
export default (
|
||||
<svg viewBox="3 3 18 18">
|
||||
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
|
||||
</svg>
|
||||
);
|
@ -595,8 +595,7 @@ class Listing extends React.Component {
|
||||
{ this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
|
||||
<div className="mailpoet-listing">
|
||||
{ groups }
|
||||
{ search }
|
||||
<div className="tablenav top clearfix">
|
||||
<div>
|
||||
<ListingBulkActions
|
||||
count={this.state.count}
|
||||
bulk_actions={bulkActions}
|
||||
@ -604,6 +603,7 @@ class Listing extends React.Component {
|
||||
selected_ids={this.state.selected_ids}
|
||||
onBulkAction={this.handleBulkAction}
|
||||
/>
|
||||
{ search }
|
||||
<ListingFilters
|
||||
filters={this.state.filters}
|
||||
filter={this.state.filter}
|
||||
|
@ -1,6 +1,9 @@
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import _ from 'underscore';
|
||||
import PropTypes from 'prop-types';
|
||||
import Input from 'common/form/input/input.tsx';
|
||||
import icon from './assets/search_icon.tsx';
|
||||
|
||||
class ListingSearch extends React.Component {
|
||||
constructor(props) {
|
||||
@ -9,6 +12,7 @@ class ListingSearch extends React.Component {
|
||||
search: '',
|
||||
};
|
||||
this.handleSearch = this.handleSearch.bind(this);
|
||||
this.debouncedHandleSearch = _.debounce(this.handleSearch, 300);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
@ -22,10 +26,10 @@ class ListingSearch extends React.Component {
|
||||
|
||||
onChange(e) {
|
||||
this.setState({ search: e.target.value });
|
||||
this.debouncedHandleSearch();
|
||||
}
|
||||
|
||||
handleSearch(e) {
|
||||
e.preventDefault();
|
||||
handleSearch() {
|
||||
this.props.onSearch(
|
||||
this.state.search.trim()
|
||||
);
|
||||
@ -36,25 +40,23 @@ class ListingSearch extends React.Component {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
<form name="search" onSubmit={this.handleSearch}>
|
||||
<p className="search-box">
|
||||
<div className="mailpoet-listing-search">
|
||||
<form name="search" onSubmit={(e) => { e.preventDefault(); this.handleSearch(); }}>
|
||||
<label htmlFor="search_input" className="screen-reader-text">
|
||||
{MailPoet.I18n.t('searchLabel')}
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
dimension="small"
|
||||
iconStart={icon}
|
||||
type="search"
|
||||
id="search_input"
|
||||
name="s"
|
||||
onChange={this.onChange}
|
||||
value={this.state.search}
|
||||
placeholder={MailPoet.I18n.t('searchLabel')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value={MailPoet.I18n.t('searchLabel')}
|
||||
className="button"
|
||||
/>
|
||||
</p>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -190,12 +190,12 @@ class AcceptanceTester extends \Codeception\Actor {
|
||||
expect($attributeValue)->notContains($notContains);
|
||||
}
|
||||
|
||||
public function searchFor($query, $element = '#search_input', $button = 'Search') {
|
||||
public function searchFor($query, $element = '#search_input') {
|
||||
$i = $this;
|
||||
$i->waitForElement($element);
|
||||
$i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
|
||||
$i->fillField($element, $query);
|
||||
$i->click($button);
|
||||
$i->pressKey($element, \WebDriverKeys::ENTER);
|
||||
$i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user