forked from treehouse/mastodon
[Glitch] Fix hashtags select styling in default and high contrast skins
Port 169b9d4428
to glitch-soc
signup-info-prompt
parent
4dcb04b888
commit
a151c5566a
|
@ -1,10 +1,15 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
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 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' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class ColumnSettings extends React.PureComponent {
|
||||
|
||||
|
@ -25,6 +30,7 @@ export default class ColumnSettings extends React.PureComponent {
|
|||
|
||||
tags (mode) {
|
||||
let tags = this.props.settings.getIn(['tags', mode]) || [];
|
||||
|
||||
if (tags.toJSON) {
|
||||
return tags.toJSON();
|
||||
} else {
|
||||
|
@ -32,33 +38,36 @@ export default class ColumnSettings extends React.PureComponent {
|
|||
}
|
||||
};
|
||||
|
||||
onSelect = (mode) => {
|
||||
return (value) => {
|
||||
this.props.onChange(['tags', mode], value);
|
||||
};
|
||||
};
|
||||
onSelect = mode => value => this.props.onChange(['tags', mode], value);
|
||||
|
||||
onToggle = () => {
|
||||
if (this.state.open && this.hasTags()) {
|
||||
this.props.onChange('tags', {});
|
||||
}
|
||||
|
||||
this.setState({ open: !this.state.open });
|
||||
};
|
||||
|
||||
noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
|
||||
|
||||
modeSelect (mode) {
|
||||
return (
|
||||
<div className='column-settings__section'>
|
||||
{this.modeLabel(mode)}
|
||||
<div className='column-settings__row'>
|
||||
<span className='column-settings__section'>
|
||||
{this.modeLabel(mode)}
|
||||
</span>
|
||||
|
||||
<AsyncSelect
|
||||
isMulti
|
||||
autoFocus
|
||||
value={this.tags(mode)}
|
||||
settings={this.props.settings}
|
||||
settingPath={['tags', mode]}
|
||||
onChange={this.onSelect(mode)}
|
||||
loadOptions={this.props.onLoad}
|
||||
classNamePrefix='column-settings__hashtag-select'
|
||||
className='column-select__container'
|
||||
classNamePrefix='column-select'
|
||||
name='tags'
|
||||
placeholder={this.props.intl.formatMessage(messages.placeholder)}
|
||||
noOptionsMessage={this.noOptionsMessage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -66,11 +75,15 @@ export default class ColumnSettings extends React.PureComponent {
|
|||
|
||||
modeLabel (mode) {
|
||||
switch(mode) {
|
||||
case 'any': return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any 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' />;
|
||||
case 'any':
|
||||
return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any 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 () {
|
||||
|
@ -78,23 +91,21 @@ export default class ColumnSettings extends React.PureComponent {
|
|||
<div>
|
||||
<div className='column-settings__row'>
|
||||
<div className='setting-toggle'>
|
||||
<Toggle
|
||||
id='hashtag.column_settings.tag_toggle'
|
||||
onChange={this.onToggle}
|
||||
checked={this.state.open}
|
||||
/>
|
||||
<Toggle id='hashtag.column_settings.tag_toggle' onChange={this.onToggle} checked={this.state.open} />
|
||||
|
||||
<span className='setting-toggle__label'>
|
||||
<FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.open &&
|
||||
|
||||
{this.state.open && (
|
||||
<div className='column-settings__hashtags'>
|
||||
{this.modeSelect('any')}
|
||||
{this.modeSelect('all')}
|
||||
{this.modeSelect('none')}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -82,3 +82,34 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -339,14 +339,41 @@
|
|||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.column-settings__hashtag-select {
|
||||
.column-settings__hashtags {
|
||||
.column-settings__row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.column-select {
|
||||
&__control {
|
||||
@include search-input();
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
color: $dark-text-color;
|
||||
padding-left: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__value-container {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&__multi-value {
|
||||
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,
|
||||
|
@ -354,9 +381,42 @@
|
|||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__indicator-separator,
|
||||
&__clear-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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -157,29 +157,7 @@
|
|||
}
|
||||
|
||||
.drawer--search--popout {
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px 14px 14px;
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
color: $light-text-color;
|
||||
background: $simple-background-color;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
color: $light-text-color;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul { margin-bottom: 10px }
|
||||
li { padding: 4px 0 }
|
||||
|
||||
em {
|
||||
color: $inverted-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
@include search-popout();
|
||||
}
|
||||
|
||||
.drawer--account {
|
||||
|
|
Loading…
Reference in New Issue