MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Inline DrawerSearchPopout in DrawerSearch

Browse Source
master
Thibaut Girka 6 years ago committed by ThibG
parent c19b983986
commit c92ab35b19
2 changed files with 40 additions and 117 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 48
      app/javascript/flavours/glitch/features/compose/search/index.js
  2. 109
      app/javascript/flavours/glitch/features/compose/search/popout/index.js

48
app/javascript/flavours/glitch/features/compose/search/index.js
Unescape View File

@ -3,27 +3,59 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import spring from 'react-motion/lib/spring';
import {
injectIntl,
FormattedMessage,
defineMessages,
} from 'react-intl';
import Overlay from 'react-overlays/lib/Overlay';
// Components.
import Icon from 'flavours/glitch/components/icon';
import DrawerSearchPopout from './popout';
// Utils.
import { focusRoot } from 'flavours/glitch/util/dom_helpers';
import { searchEnabled } from 'flavours/glitch/util/initial_state';
import Motion from 'flavours/glitch/util/optional_motion';
// Messages.
const messages = defineMessages({
placeholder: {
defaultMessage: 'Search',
id: 'search.placeholder',
},
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
});
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 }}>
<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='drawer--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>
);
}
}
// The component.
export default @injectIntl
class DrawerSearch extends React.PureComponent {
@ -61,7 +93,7 @@ class DrawerSearch extends React.PureComponent {
}
}
handleBlur () {
handleBlur = () => {
this.setState({ expanded: false });
}
@ -117,7 +149,7 @@ class DrawerSearch extends React.PureComponent {
<Icon icon='times-circle' />
</div>
<Overlay show={expanded && !active} placement='bottom' target={this}>
<DrawerSearchPopout />
<SearchPopout />
</Overlay>
</div>
);

109
app/javascript/flavours/glitch/features/compose/search/popout/index.js
Unescape View File

@ -1,109 +0,0 @@
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import {
FormattedMessage,
defineMessages,
} from 'react-intl';
import spring from 'react-motion/lib/spring';
// Utils.
import Motion from 'flavours/glitch/util/optional_motion';
import { searchEnabled } from 'flavours/glitch/util/initial_state';
// Messages.
const messages = defineMessages({
format: {
defaultMessage: 'Advanced search format',
id: 'search_popout.search_format',
},
hashtag: {
defaultMessage: 'hashtag',
id: 'search_popout.tips.hashtag',
},
status: {
defaultMessage: 'status',
id: 'search_popout.tips.status',
},
text: {
defaultMessage: 'Simple text returns matching display names, usernames and hashtags',
id: 'search_popout.tips.text',
},
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.',
id: 'search_popout.tips.full_text',
},
user: {
defaultMessage: 'user',
id: 'search_popout.tips.user',
},
});
// The spring used by our motion.
const motionSpring = spring(1, { damping: 35, stiffness: 400 });
// The component.
export default function DrawerSearchPopout ({ style }) {
// The result.
return (
<div
className='drawer--search--popout'
style={{
...style,
position: 'absolute',
width: 285,
}}
>
<Motion
defaultStyle={{
opacity: 0,
scaleX: 0.85,
scaleY: 0.75,
}}
style={{
opacity: motionSpring,
scaleX: motionSpring,
scaleY: motionSpring,
}}
>
{({ opacity, scaleX, scaleY }) => (
<div
style={{
opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`,
}}
>
<h4><FormattedMessage {...messages.format} /></h4>
<ul>
<li>
<em>#example</em>
{' '}
<FormattedMessage {...messages.hashtag} />
</li>
<li>
<em>@username@domain</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<em>URL</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<em>URL</em>
{' '}
<FormattedMessage {...messages.status} />
</li>
</ul>
{ searchEnabled ? <FormattedMessage {...messages.full_text} /> : <FormattedMessage {...messages.text} /> }
</div>
)}
</Motion>
</div>
);
}
// Props.
DrawerSearchPopout.propTypes = { style: PropTypes.object };
Write Preview
Loading…
Cancel
Save