forked from treehouse/mastodon
Fix hashtags select styling in default and high contrast themes (#10029)
parent
98d1a1f117
commit
169b9d4428
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue