Fix hashtags select styling in default and high contrast themes (#10029)

This commit is contained in:
Eugen Rochko 2019-02-13 18:34:58 +01:00
parent f0f657e77c
commit a46487e895
3 changed files with 128 additions and 53 deletions

View File

@ -1,10 +1,15 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import AsyncSelect from 'react-select/lib/Async'; import AsyncSelect from 'react-select/lib/Async';
const messages = defineMessages({
placeholder: { id: 'hashtag.column_settings.select.placeholder', defaultMessage: 'Enter hashtags…' },
noOptions: { id: 'hashtag.column_settings.select.no_options_message', defaultMessage: 'No suggestions found' },
});
export default @injectIntl export default @injectIntl
class ColumnSettings extends React.PureComponent { class ColumnSettings extends React.PureComponent {
@ -25,6 +30,7 @@ class ColumnSettings extends React.PureComponent {
tags (mode) { tags (mode) {
let tags = this.props.settings.getIn(['tags', mode]) || []; let tags = this.props.settings.getIn(['tags', mode]) || [];
if (tags.toJSON) { if (tags.toJSON) {
return tags.toJSON(); return tags.toJSON();
} else { } else {
@ -32,33 +38,36 @@ class ColumnSettings extends React.PureComponent {
} }
}; };
onSelect = (mode) => { onSelect = mode => value => this.props.onChange(['tags', mode], value);
return (value) => {
this.props.onChange(['tags', mode], value);
};
};
onToggle = () => { onToggle = () => {
if (this.state.open && this.hasTags()) { if (this.state.open && this.hasTags()) {
this.props.onChange('tags', {}); this.props.onChange('tags', {});
} }
this.setState({ open: !this.state.open }); this.setState({ open: !this.state.open });
}; };
noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
modeSelect (mode) { modeSelect (mode) {
return ( return (
<div className='column-settings__section'> <div className='column-settings__row'>
{this.modeLabel(mode)} <span className='column-settings__section'>
{this.modeLabel(mode)}
</span>
<AsyncSelect <AsyncSelect
isMulti isMulti
autoFocus autoFocus
value={this.tags(mode)} value={this.tags(mode)}
settings={this.props.settings}
settingPath={['tags', mode]}
onChange={this.onSelect(mode)} onChange={this.onSelect(mode)}
loadOptions={this.props.onLoad} loadOptions={this.props.onLoad}
classNamePrefix='column-settings__hashtag-select' className='column-select__container'
classNamePrefix='column-select'
name='tags' name='tags'
placeholder={this.props.intl.formatMessage(messages.placeholder)}
noOptionsMessage={this.noOptionsMessage}
/> />
</div> </div>
); );
@ -66,11 +75,15 @@ class ColumnSettings extends React.PureComponent {
modeLabel (mode) { modeLabel (mode) {
switch(mode) { switch(mode) {
case 'any': return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />; case 'any':
case 'all': return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />; return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />;
case 'none': return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />; case 'all':
return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />;
case 'none':
return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />;
default:
return '';
} }
return '';
}; };
render () { render () {
@ -78,23 +91,21 @@ class ColumnSettings extends React.PureComponent {
<div> <div>
<div className='column-settings__row'> <div className='column-settings__row'>
<div className='setting-toggle'> <div className='setting-toggle'>
<Toggle <Toggle id='hashtag.column_settings.tag_toggle' onChange={this.onToggle} checked={this.state.open} />
id='hashtag.column_settings.tag_toggle'
onChange={this.onToggle}
checked={this.state.open}
/>
<span className='setting-toggle__label'> <span className='setting-toggle__label'>
<FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' /> <FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' />
</span> </span>
</div> </div>
</div> </div>
{this.state.open &&
{this.state.open && (
<div className='column-settings__hashtags'> <div className='column-settings__hashtags'>
{this.modeSelect('any')} {this.modeSelect('any')}
{this.modeSelect('all')} {this.modeSelect('all')}
{this.modeSelect('none')} {this.modeSelect('none')}
</div> </div>
} )}
</div> </div>
); );
} }

View File

@ -41,3 +41,34 @@
font-size: 16px; font-size: 16px;
} }
} }
@mixin search-popout() {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $light-text-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $inverted-text-color;
}
}

View File

@ -3056,14 +3056,41 @@ a.status-card.compact:hover {
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
}
.column-settings__hashtag-select { .column-settings__hashtags {
.column-settings__row {
margin-bottom: 15px;
}
.column-select {
&__control { &__control {
@include search-input(); @include search-input();
} }
&__placeholder {
color: $dark-text-color;
padding-left: 2px;
font-size: 12px;
}
&__value-container {
padding-left: 6px;
}
&__multi-value { &__multi-value {
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
&__remove {
cursor: pointer;
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
color: lighten($darker-text-color, 4%);
}
}
} }
&__multi-value__label, &__multi-value__label,
@ -3071,9 +3098,42 @@ a.status-card.compact:hover {
color: $darker-text-color; color: $darker-text-color;
} }
&__indicator-separator, &__clear-indicator,
&__dropdown-indicator { &__dropdown-indicator {
display: none; cursor: pointer;
transition: none;
color: $dark-text-color;
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
}
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
}
&__menu {
@include search-popout();
padding: 0;
background: $ui-secondary-color;
}
&__menu-list {
padding: 6px;
}
&__option {
color: $inverted-text-color;
border-radius: 4px;
font-size: 14px;
&--is-focused,
&--is-selected {
background: darken($ui-secondary-color, 10%);
}
} }
} }
} }
@ -4867,34 +4927,7 @@ a.status-card.compact:hover {
} }
.search-popout { .search-popout {
background: $simple-background-color; @include search-popout();
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $light-text-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $inverted-text-color;
}
} }
noscript { noscript {