Skip to content

Commit a151c55

Browse files
committed
[Glitch] Fix hashtags select styling in default and high contrast skins
Port 169b9d4 to glitch-soc
1 parent 4dcb04b commit a151c55

4 files changed

Lines changed: 128 additions & 48 deletions

File tree

app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import ImmutablePropTypes from 'react-immutable-proptypes';
4-
import { injectIntl, FormattedMessage } from 'react-intl';
4+
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
55
import Toggle from 'react-toggle';
66
import AsyncSelect from 'react-select/lib/Async';
77

8+
const messages = defineMessages({
9+
placeholder: { id: 'hashtag.column_settings.select.placeholder', defaultMessage: 'Enter hashtags…' },
10+
noOptions: { id: 'hashtag.column_settings.select.no_options_message', defaultMessage: 'No suggestions found' },
11+
});
12+
813
@injectIntl
914
export default class ColumnSettings extends React.PureComponent {
1015

@@ -25,76 +30,82 @@ export default class ColumnSettings extends React.PureComponent {
2530

2631
tags (mode) {
2732
let tags = this.props.settings.getIn(['tags', mode]) || [];
33+
2834
if (tags.toJSON) {
2935
return tags.toJSON();
3036
} else {
3137
return tags;
3238
}
3339
};
3440

35-
onSelect = (mode) => {
36-
return (value) => {
37-
this.props.onChange(['tags', mode], value);
38-
};
39-
};
41+
onSelect = mode => value => this.props.onChange(['tags', mode], value);
4042

4143
onToggle = () => {
4244
if (this.state.open && this.hasTags()) {
4345
this.props.onChange('tags', {});
4446
}
47+
4548
this.setState({ open: !this.state.open });
4649
};
4750

51+
noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
52+
4853
modeSelect (mode) {
4954
return (
50-
<div className='column-settings__section'>
51-
{this.modeLabel(mode)}
55+
<div className='column-settings__row'>
56+
<span className='column-settings__section'>
57+
{this.modeLabel(mode)}
58+
</span>
59+
5260
<AsyncSelect
5361
isMulti
5462
autoFocus
5563
value={this.tags(mode)}
56-
settings={this.props.settings}
57-
settingPath={['tags', mode]}
5864
onChange={this.onSelect(mode)}
5965
loadOptions={this.props.onLoad}
60-
classNamePrefix='column-settings__hashtag-select'
66+
className='column-select__container'
67+
classNamePrefix='column-select'
6168
name='tags'
69+
placeholder={this.props.intl.formatMessage(messages.placeholder)}
70+
noOptionsMessage={this.noOptionsMessage}
6271
/>
6372
</div>
6473
);
6574
}
6675

6776
modeLabel (mode) {
6877
switch(mode) {
69-
case 'any': return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />;
70-
case 'all': return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />;
71-
case 'none': return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />;
78+
case 'any':
79+
return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />;
80+
case 'all':
81+
return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />;
82+
case 'none':
83+
return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />;
84+
default:
85+
return '';
7286
}
73-
return '';
7487
};
7588

7689
render () {
7790
return (
7891
<div>
7992
<div className='column-settings__row'>
8093
<div className='setting-toggle'>
81-
<Toggle
82-
id='hashtag.column_settings.tag_toggle'
83-
onChange={this.onToggle}
84-
checked={this.state.open}
85-
/>
94+
<Toggle id='hashtag.column_settings.tag_toggle' onChange={this.onToggle} checked={this.state.open} />
95+
8696
<span className='setting-toggle__label'>
8797
<FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' />
8898
</span>
8999
</div>
90100
</div>
91-
{this.state.open &&
101+
102+
{this.state.open && (
92103
<div className='column-settings__hashtags'>
93104
{this.modeSelect('any')}
94105
{this.modeSelect('all')}
95106
{this.modeSelect('none')}
96107
</div>
97-
}
108+
)}
98109
</div>
99110
);
100111
}

app/javascript/flavours/glitch/styles/_mixins.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,34 @@
8282
font-size: 16px;
8383
}
8484
}
85+
86+
@mixin search-popout() {
87+
background: $simple-background-color;
88+
border-radius: 4px;
89+
padding: 10px 14px;
90+
padding-bottom: 14px;
91+
margin-top: 10px;
92+
color: $light-text-color;
93+
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
94+
95+
h4 {
96+
text-transform: uppercase;
97+
color: $light-text-color;
98+
font-size: 13px;
99+
font-weight: 500;
100+
margin-bottom: 10px;
101+
}
102+
103+
li {
104+
padding: 4px 0;
105+
}
106+
107+
ul {
108+
margin-bottom: 10px;
109+
}
110+
111+
em {
112+
font-weight: 500;
113+
color: $inverted-text-color;
114+
}
115+
}

app/javascript/flavours/glitch/styles/components/accounts.scss

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -339,24 +339,84 @@
339339
display: block;
340340
font-weight: 500;
341341
margin-bottom: 10px;
342+
}
343+
344+
.column-settings__hashtags {
345+
.column-settings__row {
346+
margin-bottom: 15px;
347+
}
342348

343-
.column-settings__hashtag-select {
349+
.column-select {
344350
&__control {
345351
@include search-input();
346352
}
347353

354+
&__placeholder {
355+
color: $dark-text-color;
356+
padding-left: 2px;
357+
font-size: 12px;
358+
}
359+
360+
&__value-container {
361+
padding-left: 6px;
362+
}
363+
348364
&__multi-value {
349365
background: lighten($ui-base-color, 8%);
366+
367+
&__remove {
368+
cursor: pointer;
369+
370+
&:hover,
371+
&:active,
372+
&:focus {
373+
background: lighten($ui-base-color, 12%);
374+
color: lighten($darker-text-color, 4%);
375+
}
376+
}
350377
}
351378

352379
&__multi-value__label,
353380
&__input {
354381
color: $darker-text-color;
355382
}
356383

357-
&__indicator-separator,
384+
&__clear-indicator,
358385
&__dropdown-indicator {
359-
display: none;
386+
cursor: pointer;
387+
transition: none;
388+
color: $dark-text-color;
389+
390+
&:hover,
391+
&:active,
392+
&:focus {
393+
color: lighten($dark-text-color, 4%);
394+
}
395+
}
396+
397+
&__indicator-separator {
398+
background-color: lighten($ui-base-color, 8%);
399+
}
400+
401+
&__menu {
402+
@include search-popout();
403+
padding: 0;
404+
background: $ui-secondary-color;
405+
}
406+
407+
&__menu-list {
408+
padding: 6px;
409+
}
410+
411+
&__option {
412+
color: $inverted-text-color;
413+
border-radius: 4px;
414+
font-size: 14px;
415+
416+
&--is-focused,
417+
&--is-selected {
418+
background: darken($ui-secondary-color, 10%);
419+
}
360420
}
361421
}
362422
}

app/javascript/flavours/glitch/styles/components/drawer.scss

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -157,29 +157,7 @@
157157
}
158158

159159
.drawer--search--popout {
160-
box-sizing: border-box;
161-
margin-top: 10px;
162-
border-radius: 4px;
163-
padding: 10px 14px 14px 14px;
164-
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
165-
color: $light-text-color;
166-
background: $simple-background-color;
167-
168-
h4 {
169-
margin-bottom: 10px;
170-
color: $light-text-color;
171-
font-size: 13px;
172-
font-weight: 500;
173-
text-transform: uppercase;
174-
}
175-
176-
ul { margin-bottom: 10px }
177-
li { padding: 4px 0 }
178-
179-
em {
180-
color: $inverted-text-color;
181-
font-weight: 500;
182-
}
160+
@include search-popout();
183161
}
184162

185163
.drawer--account {

0 commit comments

Comments
 (0)