diff options
3 files changed, 70 insertions, 109 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 83c5d82b0..6dc786c8b 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -16,10 +16,11 @@ import DrawerAccount from './account'; import DrawerHeader from './header'; import DrawerResults from './results'; import SearchContainer from './containers/search_container'; +import spring from 'react-motion/lib/spring'; // Utils. import { me, mascot } from 'flavours/glitch/util/initial_state'; -import { wrap } from 'flavours/glitch/util/redux_helpers'; +import Motion from 'flavours/glitch/util/optional_motion'; // Messages. const messages = defineMessages({ @@ -27,13 +28,14 @@ const messages = defineMessages({ }); // State mapping. -const mapStateToProps = state => ({ +const mapStateToProps = (state, ownProps) => ({ account: state.getIn(['accounts', me]), columns: state.getIn(['settings', 'columns']), elefriend: state.getIn(['compose', 'elefriend']), results: state.getIn(['search', 'results']), searchHidden: state.getIn(['search', 'hidden']), submitted: state.getIn(['search', 'submitted']), + showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage, unreadNotifications: state.getIn(['notifications', 'unread']), showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), }); @@ -58,6 +60,7 @@ class Compose extends React.PureComponent { intl: PropTypes.object.isRequired, isSearchPage: PropTypes.bool, multiColumn: PropTypes.bool, + showSearch: PropTypes.bool, // State props. account: ImmutablePropTypes.map, @@ -90,6 +93,7 @@ class Compose extends React.PureComponent { isSearchPage, unreadNotifications, showNotificationsBadge, + showSearch, } = this.props; const computedClass = classNames('drawer', `mbstobon-${elefriend}`); @@ -117,11 +121,13 @@ class Compose extends React.PureComponent { )} </div>} - {(multiColumn || isSearchPage) && - <DrawerResults - results={results} - visible={submitted && !searchHidden} - />} + <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}> + {({ x }) => ( + <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}> + <DrawerResults results={results} visible={submitted && !searchHidden} /> + </div> + )} + </Motion> </div> </div> ); diff --git a/app/javascript/flavours/glitch/features/compose/results/index.js b/app/javascript/flavours/glitch/features/compose/results/index.js index 4574c0e1e..162d14913 100644 --- a/app/javascript/flavours/glitch/features/compose/results/index.js +++ b/app/javascript/flavours/glitch/features/compose/results/index.js @@ -1,12 +1,9 @@ // Package imports. import PropTypes from 'prop-types'; import React from 'react'; +import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; -import spring from 'react-motion/lib/spring'; +import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; // Components. @@ -15,103 +12,67 @@ import AccountContainer from 'flavours/glitch/containers/account_container'; import StatusContainer from 'flavours/glitch/containers/status_container'; import Hashtag from 'flavours/glitch/components/hashtag'; -// Utils. -import Motion from 'flavours/glitch/util/optional_motion'; - // Messages. -const messages = defineMessages({ - total: { - defaultMessage: '{count, number} {count, plural, one {result} other {results}}', - id: 'search_results.total', - }, -}); - // The component. -export default function DrawerResults ({ - results, - visible, -}) { - const accounts = results ? results.get('accounts') : null; - const statuses = results ? results.get('statuses') : null; - const hashtags = results ? results.get('hashtags') : null; +export default @injectIntl +class DrawerResults extends ImmutablePureComponent { + + static propTypes = { + results: ImmutablePropTypes.map.isRequired, + intl: PropTypes.object.isRequired, + }; + + render() { + const { intl, results } = this.props; + + let accounts, statuses, hashtags; + let count = 0; + + if (results.get('accounts') && results.get('accounts').size > 0) { + count += results.get('accounts').size; + accounts = ( + <section> + <h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> - // This gets the total number of items. - const count = [accounts, statuses, hashtags].reduce(function (size, item) { - if (item && item.size) { - return size + item.size; + {results.get('accounts').map(accountId => <AccountContainer id={accountId} key={accountId} />)} + </section> + ); } - return size; - }, 0); - // The result. - return ( - <Motion - defaultStyle={{ x: -100 }} - style={{ - x: spring(visible ? 0 : -100, { - stiffness: 210, - damping: 20, - }), - }} - > - {({ x }) => ( - <div - className='drawer--results' - style={{ - transform: `translateX(${x}%)`, - visibility: x === -100 ? 'hidden' : 'visible', - }} - > - <header> - <Icon icon='search' fixedWidth /> - <FormattedMessage - {...messages.total} - values={{ count }} - /> - </header> - {accounts && accounts.size ? ( - <section> - <h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> + if (results.get('statuses') && results.get('statuses').size > 0) { + count += results.get('statuses').size; + statuses = ( + <section> + <h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> - {accounts.map( - accountId => ( - <AccountContainer - id={accountId} - key={accountId} - /> - ) - )} - </section> - ) : null} - {statuses && statuses.size ? ( - <section> - <h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> + {results.get('statuses').map(statusId => <StatusContainer id={statusId} key={statusId}/>)} + </section> + ); + } - {statuses.map( - statusId => ( - <StatusContainer - id={statusId} - key={statusId} - /> - ) - )} - </section> - ) : null} - {hashtags && hashtags.size ? ( - <section> - <h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> + if (results.get('hashtags') && results.get('hashtags').size > 0) { + count += results.get('hashtags').size; + hashtags = ( + <section> + <h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> - {hashtags.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} - </section> - ) : null} - </div> - )} - </Motion> - ); -} + {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} + </section> + ); + } -// Props. -DrawerResults.propTypes = { - results: ImmutablePropTypes.map, - visible: PropTypes.bool, -}; + // The result. + return ( + <div className='drawer--results'> + <header className='search-results__header'> + <Icon icon='search' fixedWidth /> + <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> + </header> + + {accounts} + {statuses} + {hashtags} + </div> + ); + }; +} diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index d22783b94..41c794790 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -185,12 +185,6 @@ } .drawer--results { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 0; background: $ui-base-color; overflow-x: hidden; overflow-y: auto; |