diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx
index 2f1b46e5d9..218518a7b6 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@@ -1,11 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
-import {
- injectIntl,
- FormattedMessage,
- defineMessages,
-} from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedList } from 'react-intl';
import classNames from 'classnames';
@@ -52,6 +48,16 @@ class Search extends PureComponent {
options: [],
};
+ defaultOptions = [
+ { label: <>has: >, action: e => { e.preventDefault(); this._insertText('has:') } },
+ { label: <>is: >, action: e => { e.preventDefault(); this._insertText('is:') } },
+ { label: <>language: >, action: e => { e.preventDefault(); this._insertText('language:') } },
+ { label: <>from: >, action: e => { e.preventDefault(); this._insertText('from:') } },
+ { label: <>before: >, action: e => { e.preventDefault(); this._insertText('before:') } },
+ { label: <>during: >, action: e => { e.preventDefault(); this._insertText('during:') } },
+ { label: <>after: >, action: e => { e.preventDefault(); this._insertText('after:') } },
+ ];
+
setRef = c => {
this.searchForm = c;
};
@@ -100,7 +106,7 @@ class Search extends PureComponent {
handleKeyDown = (e) => {
const { selectedOption } = this.state;
- const options = this._getOptions();
+ const options = this._getOptions().concat(this.defaultOptions);
switch(e.key) {
case 'Escape':
@@ -131,10 +137,9 @@ class Search extends PureComponent {
if (selectedOption === -1) {
this._submit();
} else if (options.length > 0) {
- options[selectedOption].action();
+ options[selectedOption].action(e);
}
- this._unfocus();
break;
case 'Delete':
if (selectedOption > -1 && options.length > 0) {
@@ -161,6 +166,7 @@ class Search extends PureComponent {
router.history.push(`/tags/${query}`);
onClickSearchResult(query, 'hashtag');
+ this._unfocus();
};
handleAccountClick = () => {
@@ -171,6 +177,7 @@ class Search extends PureComponent {
router.history.push(`/@${query}`);
onClickSearchResult(query, 'account');
+ this._unfocus();
};
handleURLClick = () => {
@@ -178,6 +185,7 @@ class Search extends PureComponent {
const { onOpenURL } = this.props;
onOpenURL(router.history);
+ this._unfocus();
};
handleStatusSearch = () => {
@@ -196,6 +204,8 @@ class Search extends PureComponent {
} else if (search.get('type') === 'hashtag') {
router.history.push(`/tags/${search.get('q')}`);
}
+
+ this._unfocus();
};
handleForgetRecentSearchClick = search => {
@@ -208,6 +218,18 @@ class Search extends PureComponent {
document.querySelector('.ui').parentElement.focus();
}
+ _insertText (text) {
+ const { value, onChange } = this.props;
+
+ if (value === '') {
+ onChange(text);
+ } else if (value[value.length - 1] === ' ') {
+ onChange(`${value}${text}`);
+ } else {
+ onChange(`${value} ${text}`);
+ }
+ }
+
_submit (type) {
const { onSubmit, openInRoute } = this.props;
const { router } = this.context;
@@ -217,6 +239,8 @@ class Search extends PureComponent {
if (openInRoute) {
router.history.push('/search');
}
+
+ this._unfocus();
}
_getOptions () {
@@ -337,6 +361,16 @@ class Search extends PureComponent {
>
)}
+
+
+
+
+ {this.defaultOptions.map(({ key, label, action }, i) => (
+
+ ))}
+
);
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index 99ed697e37..be35077dcd 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -25,6 +25,12 @@
}
&__menu {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
&__message {
color: $dark-text-color;
padding: 0 10px;