diff options
author | Peter Simonsson <peter@simonsson.com> | 2023-01-11 21:58:46 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-01-11 21:58:46 +0100 |
commit | fd33bcb3b25d3eaf593ade0aa8709a1184fc254e (patch) | |
tree | befcd9012ee2a79a514d33b17ecec9b2bcac9410 /app/javascript/mastodon/features/compose/components/search.js | |
parent | ae62e5fa533831c936b7bbeb12f5b7605125ce54 (diff) |
Fix dropdown menu positions when scrolling (#22916)
* Update react-overlays to latest version * Fix breaking changes in dropdown menus * Use react-overlays built-in arrow positioning feature * Re-implemented `.dropdown-menu__arrow` to have a defined width and height to improve positioning * Moved wrapping div (`.dropdown-menu` from `DropdownMenu` to `Dropdown`) * Wrap button in a span to solve issue with ref * Temporarily remove animations * Fix breaking changes in emoji picker * Wrap EmojiPickerMenu in a div where react-overlays’ ref is added * Fix breaking changes in language dropdown * Fix breaking changes in privacy dropdown * Fix breaking changes in search form * Add animations back using `@keyframes` * Fix arrow color in light theme * Fix linting issue * Remove unused `mounted` state * Remove `placement` state from components and redux And remove the placement state from props of the menu components. * Remove abolution position to fix flip issue * Remove z-index to fix modals and overlay positions * Fix lint issues * Set placement in privacy and language components Copy the placement state into the `PrivacyDropdown` and `LanguageDropdown` components, to apply correct styling to the buttons depending on which placement the Overlay has. * Move `placement` state to correct component
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/search.js')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/search.js | 51 |
1 files changed, 24 insertions, 27 deletions
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js index 8254fb607..5820f8ca2 100644 --- a/app/javascript/mastodon/features/compose/components/search.js +++ b/app/javascript/mastodon/features/compose/components/search.js @@ -1,9 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import Overlay from 'react-overlays/lib/Overlay'; -import Motion from '../../ui/util/optional_motion'; -import spring from 'react-motion/lib/spring'; +import Overlay from 'react-overlays/Overlay'; import { searchEnabled } from '../../../initial_state'; import Icon from 'mastodon/components/icon'; @@ -14,31 +12,20 @@ const messages = defineMessages({ class SearchPopout extends React.PureComponent { - static propTypes = { - style: PropTypes.object, - }; - render () { - const { style } = this.props; const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />; return ( - <div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}> - <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}> - {({ opacity, scaleX, scaleY }) => ( - <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> - <h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4> - - <ul> - <li><em>#example</em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' /></li> - <li><em>@username@domain</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li> - <li><em>URL</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li> - <li><em>URL</em> <FormattedMessage id='search_popout.tips.status' defaultMessage='status' /></li> - </ul> - - {extraInformation} - </div> - )} - </Motion> + <div className='search-popout'> + <h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4> + + <ul> + <li><em>#example</em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' /></li> + <li><em>@username@domain</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li> + <li><em>URL</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li> + <li><em>URL</em> <FormattedMessage id='search_popout.tips.status' defaultMessage='status' /></li> + </ul> + + {extraInformation} </div> ); } @@ -115,6 +102,10 @@ class Search extends React.PureComponent { this.setState({ expanded: false }); } + findTarget = () => { + return this.searchForm; + } + render () { const { intl, value, submitted } = this.props; const { expanded } = this.state; @@ -140,8 +131,14 @@ class Search extends React.PureComponent { <Icon id='search' className={hasValue ? '' : 'active'} /> <Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} /> </div> - <Overlay show={expanded && !hasValue} placement='bottom' target={this} container={this}> - <SearchPopout /> + <Overlay show={expanded && !hasValue} placement='bottom' target={this.findTarget} popperConfig={{ strategy: 'fixed' }}> + {({ props, placement }) => ( + <div {...props} style={{ ...props.style, width: 285, zIndex: 2 }}> + <div className={`dropdown-animation ${placement}`}> + <SearchPopout /> + </div> + </div> + )} </Overlay> </div> ); |