Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

IE11: Add custom CSS class to advanced filters controls

This commit is contained in:
Tiago Noronha 2019-02-13 23:56:50 +00:00
parent 5724aed4cb
commit 3495ec74dd
6 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
View File

@ -186,7 +186,7 @@ class DateFilter extends Component {
} }
render() { render() {
const { config, filter, isEnglish } = this.props; const { className, config, filter, isEnglish } = this.props;
const { rule } = filter; const { rule } = filter;
const { labels, rules } = config; const { labels, rules } = config;
const screenReaderText = this.getScreenReaderText( filter, config ); const screenReaderText = this.getScreenReaderText( filter, config );
@ -195,7 +195,7 @@ class DateFilter extends Component {
components: { components: {
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ this.onRuleChange } onChange={ this.onRuleChange }
@ -204,7 +204,7 @@ class DateFilter extends Component {
), ),
filter: ( filter: (
<div <div
className={ classnames( 'woocommerce-filters-advanced__input-range', { className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
'is-between': 'between' === rule, 'is-between': 'between' === rule,
} ) } } ) }
> >

5
plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
View File

@ -191,6 +191,7 @@ class AdvancedFilters extends Component {
<li className="woocommerce-filters-advanced__list-item" key={ key }> <li className="woocommerce-filters-advanced__list-item" key={ key }>
{ 'SelectControl' === input.component && ( { 'SelectControl' === input.component && (
<SelectFilter <SelectFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -199,6 +200,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Search' === input.component && ( { 'Search' === input.component && (
<SearchFilter <SearchFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -208,6 +210,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Number' === input.component && ( { 'Number' === input.component && (
<NumberFilter <NumberFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -217,6 +220,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Currency' === input.component && ( { 'Currency' === input.component && (
<NumberFilter <NumberFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ { ...config.filters[ key ], ...{ input: { type: 'currency', component: 'Currency' } } } } config={ { ...config.filters[ key ], ...{ input: { type: 'currency', component: 'Currency' } } } }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -226,6 +230,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Date' === input.component && ( { 'Date' === input.component && (
<DateFilter <DateFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
View File

@ -185,7 +185,7 @@ class NumberFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { key, rule } = filter; const { key, rule } = filter;
const { labels, rules } = config; const { labels, rules } = config;
@ -194,7 +194,7 @@ class NumberFilter extends Component {
components: { components: {
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -203,7 +203,7 @@ class NumberFilter extends Component {
), ),
filter: ( filter: (
<div <div
className={ classnames( 'woocommerce-filters-advanced__input-range', { className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
'is-between': 'between' === rule, 'is-between': 'between' === rule,
} ) } } ) }
> >

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
View File

@ -72,7 +72,7 @@ class SearchFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { selected } = this.state; const { selected } = this.state;
const { key, rule } = filter; const { key, rule } = filter;
const { input, labels, rules } = config; const { input, labels, rules } = config;
@ -81,7 +81,7 @@ class SearchFilter extends Component {
components: { components: {
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -90,7 +90,7 @@ class SearchFilter extends Component {
), ),
filter: ( filter: (
<Search <Search
className="woocommerce-filters-advanced__input" className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
onChange={ this.onSearchChange } onChange={ this.onSearchChange }
type={ input.type } type={ input.type }
placeholder={ labels.placeholder } placeholder={ labels.placeholder }

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
View File

@ -64,7 +64,7 @@ class SelectFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { options } = this.state; const { options } = this.state;
const { key, rule, value } = filter; const { key, rule, value } = filter;
const { labels, rules } = config; const { labels, rules } = config;
@ -73,7 +73,7 @@ class SelectFilter extends Component {
components: { components: {
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -82,7 +82,7 @@ class SelectFilter extends Component {
), ),
filter: options ? ( filter: options ? (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__input" className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
options={ options } options={ options }
value={ value } value={ value }
onChange={ partial( onFilterChange, filter.key, 'value' ) } onChange={ partial( onFilterChange, filter.key, 'value' ) }

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
View File

@ -129,7 +129,11 @@
&.is-english { &.is-english {
display: grid; display: grid;
grid-template-columns: 100px 150px auto; grid-template-columns: 100px 150px 1fr;
.woocommerce-filters-advanced__fieldset-item {
@include set-grid-item-position( 3, 3 );
}
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
display: block; display: block;