diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
index 82936c8380ae0e..dc0ffee85f3a34 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
@@ -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 (
-
- {this.modeLabel(mode)}
+
+
+ {this.modeLabel(mode)}
+
+
);
@@ -66,11 +75,15 @@ export default class ColumnSettings extends React.PureComponent {
modeLabel (mode) {
switch(mode) {
- case 'any': return
;
- case 'all': return
;
- case 'none': return
;
+ case 'any':
+ return
;
+ case 'all':
+ return
;
+ case 'none':
+ return
;
+ default:
+ return '';
}
- return '';
};
render () {
@@ -78,23 +91,21 @@ export default class ColumnSettings extends React.PureComponent {
- {this.state.open &&
+
+ {this.state.open && (
{this.modeSelect('any')}
{this.modeSelect('all')}
{this.modeSelect('none')}
- }
+ )}
);
}
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index c46d7260dedfa0..586802185c24f0 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -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;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index ce6cc8b29337ee..0b7b58bb0dbaff 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -339,14 +339,41 @@
display: block;
font-weight: 500;
margin-bottom: 10px;
+}
+
+.column-settings__hashtags {
+ .column-settings__row {
+ margin-bottom: 15px;
+ }
- .column-settings__hashtag-select {
+ .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%);
+ }
}
}
}
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 2821deec72238b..f4931c36ccbcfd 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -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 {