moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AutosuggestInput: add icon to menu

This commit is contained in:
Alex Gleason 2021-11-01 13:53:30 -05:00
parent 4ef9a88f72
commit 23393710c7
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/soapbox/components/autosuggest_input.js
View File

@ -7,6 +7,7 @@ import { isRtl } from '../rtl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames'; import classNames from 'classnames';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import Icon from 'soapbox/components/icon';
const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => { const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
let word; let word;
@ -231,7 +232,11 @@ export default class AutosuggestInput extends ImmutablePureComponent {
onMouseDown={this.handleMenuItemClick(item)} onMouseDown={this.handleMenuItemClick(item)}
key={i} key={i}
> >
{item.text} {item.icon && (
<Icon src={item.icon} />
)}
<span>{item.text}</span>
</a> </a>
)); ));
}; };

2
app/soapbox/features/compose/components/search.js
View File

@ -90,7 +90,7 @@ class Search extends React.PureComponent {
const { intl, value } = this.props; const { intl, value } = this.props;
return [ return [
{ text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit }, { text: intl.formatMessage(messages.action, { query: value }), icon: require('@tabler/icons/icons/search.svg'), action: this.handleSubmit },
]; ];
} }

8
app/styles/autosuggest.scss
View File

@ -104,7 +104,8 @@
} }
.autosuggest-input__action { .autosuggest-input__action {
display: block; display: flex;
align-items: center;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
font-weight: bold; font-weight: bold;
@ -115,4 +116,9 @@
&.selected { &.selected {
background-color: var(--brand-color--med); background-color: var(--brand-color--med);
} }
.svg-icon {
margin-right: 8px;
transform: translateY(-1px);
}
} }