From cb50d95c067fc82b788ad6a762ad339de7d1c3fa Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 28 Aug 2023 13:18:39 +0200 Subject: [PATCH] [Glitch] Add search options to search popout in web UI Port bceb8931591b4b9df6e8dcfb47864c230884262c to glitch-soc Signed-off-by: Claire --- .../features/compose/components/search.jsx | 50 ++++++++++++++++--- .../glitch/styles/components/search.scss | 6 +++ 2 files changed, 48 insertions(+), 8 deletions(-) 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;