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

Chats: fix search results position on main pane

This commit is contained in:
Alex Gleason 2022-06-04 17:23:25 -05:00
parent 8dbee455f1
commit a261e02329
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/account_search.tsx
View File

@ -14,6 +14,8 @@ interface IAccountSearch {
onSelected: (accountId: string) => void, onSelected: (accountId: string) => void,
/** Override the default placeholder of the input. */ /** Override the default placeholder of the input. */
placeholder?: string, placeholder?: string,
/** Position of results relative to the input. */
resultsPosition?: 'above' | 'below',
} }
/** Input to search for accounts. */ /** Input to search for accounts. */

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

@ -57,12 +57,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
searchTokens: PropTypes.arrayOf(PropTypes.string), searchTokens: PropTypes.arrayOf(PropTypes.string),
maxLength: PropTypes.number, maxLength: PropTypes.number,
menu: PropTypes.arrayOf(PropTypes.object), menu: PropTypes.arrayOf(PropTypes.object),
resultsPosition: PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
autoFocus: false, autoFocus: false,
autoSelect: true, autoSelect: true,
searchTokens: ImmutableList(['@', ':', '#']), searchTokens: ImmutableList(['@', ':', '#']),
resultsPosition: 'below',
}; };
getFirstIndex = () => { getFirstIndex = () => {
@ -255,7 +257,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
}; };
render() { render() {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props; const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, resultsPosition } = this.props;
const { suggestionsHidden } = this.state; const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' }; const style = { direction: 'ltr' };
@ -293,7 +295,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
/> />
<div className={classNames({ <div className={classNames({
'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true, 'absolute w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
'top-full': resultsPosition === 'below',
'bottom-full': resultsPosition === 'above',
hidden: !visible, hidden: !visible,
block: visible, block: visible,
})} })}

1
app/soapbox/features/chats/components/chat_panes.js
View File

@ -102,6 +102,7 @@ class ChatPanes extends ImmutablePureComponent {
<AccountSearch <AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={this.handleSuggestion} onSelected={this.handleSuggestion}
resultsPosition='above'
/> />
</> </>
)} )}