-
- );
- }
-
-
-
- return (
-
- {header}
-
-
-
-
-
-
-
-
- {({ x }) =>
-
-
- }
-
-
-
-
+ = 4 || media.some(
+ item => item.get('type') === 'video'
+ )}
+ hasMedia={!!media.size}
+ intl={intl}
+ onChangeSensitivity={changeSensitivity}
+ onChangeVisibility={changeVisibility}
+ onDoodleOpen={openDoodleModal}
+ onModalClose={closeModal}
+ onModalOpen={openActionsModal}
+ onToggleAdvancedOption={toggleAdvancedOption}
+ onUpload={upload}
+ privacy={privacy}
+ resetFileKey={resetFileKey}
+ sensitive={sensitive}
+ spoiler={spoiler}
+ />
+
+ );
+ }
+
+}
+
+// Context
+Composer.contextTypes = {
+ history: PropTypes.object,
+}
+
+// Props.
+Composer.propTypes = {
+ dispatch: PropTypes.objectOf(PropTypes.func).isRequired,
+ intl: PropTypes.object.isRequired,
+ state: PropTypes.shape({
+ acceptContentTypes: PropTypes.string,
+ amUnlocked: PropTypes.bool,
+ doNotFederate: PropTypes.bool,
+ focusDate: PropTypes.instanceOf(Date),
+ isSubmitting: PropTypes.bool,
+ isUploading: PropTypes.bool,
+ media: PropTypes.list,
+ preselectDate: PropTypes.instanceOf(Date),
+ privacy: PropTypes.string,
+ progress: PropTypes.number,
+ replyAccount: ImmutablePropTypes.map,
+ replyContent: PropTypes.string,
+ resetFileKey: PropTypes.string,
+ sideArm: PropTypes.string,
+ sensitive: PropTypes.bool,
+ showSearch: PropTypes.bool,
+ spoiler: PropTypes.bool,
+ spoilerText: PropTypes.string,
+ suggestionToken: PropTypes.string,
+ suggestions: ImmutablePropTypes.list,
+ text: PropTypes.string,
+ }).isRequired,
+};
diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js
new file mode 100644
index 00000000000..0f304bc88e1
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js
@@ -0,0 +1,243 @@
+// Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import spring from 'react-motion/lib/spring';
+import Overlay from 'react-overlays/lib/Overlay';
+
+// Components.
+import IconButton from 'flavours/glitch/components/icon_button';
+import ComposerOptionsDropdownItem from './item';
+
+// Utils.
+import { withPassive } from 'flavours/glitch/util/dom_helpers';
+import { isUserTouching } from 'flavours/glitch/util/is_mobile';
+import Motion from 'flavours/glitch/util/optional_motion';
+import { assignHandlers } from 'flavours/glitch/util/react_helpers';
+
+// We'll use this to define our various transitions.
+const springMotion = spring(1, {
+ damping: 35,
+ stiffness: 400,
+});
+
+// Handlers.
+const handlers = {
+
+ // Closes the dropdown.
+ close () {
+ this.setState({ open: false });
+ },
+
+ // When the document is clicked elsewhere, we close the dropdown.
+ documentClick ({ target }) {
+ const { node } = this;
+ const { onClose } = this.props;
+ if (onClose && node && !node.contains(target)) {
+ onClose();
+ }
+ },
+
+ // The enter key toggles the dropdown's open state, and the escape
+ // key closes it.
+ keyDown ({ key }) {
+ const {
+ close,
+ toggle,
+ } = this.handlers;
+ switch (key) {
+ case 'Enter':
+ toggle();
+ break;
+ case 'Escape':
+ close();
+ break;
+ }
+ },
+
+ // Toggles opening and closing the dropdown.
+ toggle () {
+ const {
+ items,
+ onChange,
+ onModalClose,
+ onModalOpen,
+ value,
+ } = this.props;
+ const { open } = this.state;
+
+ // If this is a touch device, we open a modal instead of the
+ // dropdown.
+ if (onModalClose && isUserTouching()) {
+ if (open) {
+ onModalClose()
+ } else if (onChange && onModalOpen) {
+ onModalOpen({
+ actions: items.map(
+ ({
+ name,
+ ...rest
+ }) => ({
+ ...rest,
+ active: value && name === value,
+ onClick (e) {
+ e.preventDefault(); // Prevents focus from changing
+ onModalClose();
+ onChange(name);
+ },
+ })
+ ),
+ });
+ }
+
+ // Otherwise, we just set our state to open.
+ } else {
+ this.setState({ open: !open });
+ }
+ },
+
+ // Stores our node in `this.node`.
+ ref (node) {
+ this.node = node;
+ },
+};
+
+// The component.
+export default class ComposerOptionsDropdown extends React.PureComponent {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(this, handlers);
+ this.state = { open: false };
+
+ // Instance variables.
+ this.node = null;
+ }
+
+ // On mounting, we add our listeners.
+ componentDidMount () {
+ const { documentClick } = this.handlers;
+ document.addEventListener('click', documentClick, false);
+ document.addEventListener('touchend', documentClick, withPassive);
+ }
+
+ // On unmounting, we remove our listeners.
+ componentWillUnmount () {
+ const { documentClick } = this.handlers;
+ document.removeEventListener('click', documentClick, false);
+ document.removeEventListener('touchend', documentClick, withPassive);
+ }
+
+ // Rendering.
+ render () {
+ const {
+ close,
+ keyDown,
+ ref,
+ toggle,
+ } = this.handlers;
+ const {
+ active,
+ disabled,
+ title,
+ icon,
+ items,
+ onChange,
+ value,
+ } = this.props;
+ const { open } = this.state;
+ const computedClass = classNames('composer--options--dropdown', {
+ active,
+ open: open || active,
+ });
+
+ // The result.
+ return (
+
+
+
+
+ {({ opacity, scaleX, scaleY }) => (
+
+ {items.map(
+ ({
+ name,
+ ...rest
+ }) => (
+
+ )}
+
+
+
+ {function () {
+
+ // We render a `
` if we were provided an `on`
+ // property, and otherwise show an `` if available.
+ switch (true) {
+ case on !== null && typeof on !== 'undefined':
+ return (
+
+ {text}
+ {meta}
+
+ ) : {text}
}
+
+
+
,
+ },
+ {
+ icon: 'paint-brush',
+ name: 'doodle',
+ text:
,
+ },
+ ]}
+ onChange={clickAttach}
+ onModalClose={onModalClose}
+ onModalOpen={onModalOpen}
+ title={messages.attach}
+ />
+
+ {({ scale }) => (
+
+
+ )}
+
+
+
+
+
,
+ name: 'do_not_federate',
+ on: doNotFederate,
+ text:
,
+ },
+ ]}
+ onChange={onToggleAdvancedOption}
+ onModalClose={onModalClose}
+ onModalOpen={onModalOpen}
+ title={intl.formatMessage(messages.advanced_options_icon_title)}
+ />
+
+ {diff}
+ {sideArm && sideArm !== 'none' ? (
+
+
+
+
+ );
+ default:
+ return
+ );
+}
+
+// Props.
+ComposerPublisher.propTypes = {
+ countText: PropTypes.string,
+ disabled: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ onSecondarySubmit: PropTypes.func,
+ onSubmit: PropTypes.func,
+ privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
+ sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
+};
diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js
new file mode 100644
index 00000000000..2823415d28b
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/reply/index.js
@@ -0,0 +1,106 @@
+// Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages } from 'react-intl';
+
+// Components.
+import Avatar from 'flavours/glitch/components/avatar';
+import DisplayName from 'flavours/glitch/components/display_name';
+import IconButton from 'flavours/glitch/components/icon_button';
+
+// Utils.
+import { assignHandlers } from 'flavours/glitch/util/react_helpers';
+import { isRtl } from 'flavours/glitch/util/rtl';
+
+// Messages.
+const messages = defineMessages({
+ cancel: {
+ defaultMessage: 'Cancel',
+ id: 'reply_indicator.cancel',
+ },
+});
+
+// Handlers.
+const handlers = {
+
+ // Handles a click on the "close" button.
+ click () {
+ const { onCancel } = this.props;
+ if (onCancel) {
+ onCancel();
+ }
+ },
+
+ // Handles a click on the status's account.
+ clickAccount () {
+ const {
+ account,
+ history,
+ } = this.props;
+ if (history) {
+ history.push(`/accounts/${account.get('id')}`);
+ }
+ },
+};
+
+// The component.
+export default class ComposerReply extends React.PureComponent {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(this, handlers);
+ }
+
+ // Rendering.
+ render () {
+ const {
+ click,
+ clickAccount,
+ } = this.handlers;
+ const {
+ account,
+ content,
+ intl,
+ } = this.props;
+
+ // The result.
+ return (
+
+
+
+
+ ) : null}
+
+
+
+ );
+ }
+
+}
+
+ComposerReply.propTypes = {
+ account: ImmutablePropTypes.map,
+ content: PropTypes.string,
+ history: PropTypes.object,
+ intl: PropTypes.object.isRequired,
+ onCancel: PropTypes.func,
+};
diff --git a/app/javascript/flavours/glitch/features/composer/spoiler/index.js b/app/javascript/flavours/glitch/features/composer/spoiler/index.js
new file mode 100644
index 00000000000..730ab2205a5
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/spoiler/index.js
@@ -0,0 +1,92 @@
+// Package imports.
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+// Components.
+import Collapsable from 'flavours/glitch/components/collapsable';
+
+// Utils.
+import {
+ assignHandlers,
+ hiddenComponent,
+} from 'flavours/glitch/util/react_helpers';
+
+// Messages.
+const messages = defineMessages({
+ placeholder: {
+ defaultMessage: 'Write your warning here',
+ id: 'compose_form.spoiler_placeholder',
+ },
+});
+
+// Handlers.
+const handlers = {
+
+ // Handles a keypress.
+ keyDown ({
+ ctrlKey,
+ keyCode,
+ metaKey,
+ }) {
+ const { onSubmit } = this.props;
+
+ // We submit the status on control/meta + enter.
+ if (onSubmit && keyCode === 13 && (ctrlKey || metaKey)) {
+ onSubmit();
+ }
+ },
+};
+
+// The component.
+export default class ComposerSpoiler extends React.PureComponent {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(this, handlers);
+ }
+
+ // Rendering.
+ render () {
+ const { keyDown } = this.handlers;
+ const {
+ hidden,
+ intl,
+ onChange,
+ text,
+ } = this.props;
+
+ // The result.
+ return (
+
+
+
+
+
+
+ );
+ }
+
+}
+
+// Props.
+ComposerSpoiler.propTypes = {
+ hidden: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ onChange: PropTypes.func,
+ onSubmit: PropTypes.func,
+ text: PropTypes.string,
+};
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/index.js b/app/javascript/flavours/glitch/features/composer/textarea/index.js
new file mode 100644
index 00000000000..ad0a35d7f2c
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/textarea/index.js
@@ -0,0 +1,297 @@
+// Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import {
+ defineMessages,
+ FormattedMessage,
+} from 'react-intl';
+import Textarea from 'react-textarea-autosize';
+
+// Components.
+import EmojiPicker from 'flavours/glitch/features/emoji_picker';
+import ComposerTextareaSuggestions from './suggestions';
+
+// Utils.
+import { isRtl } from 'flavours/glitch/util/rtl';
+import {
+ assignHandlers,
+ hiddenComponent,
+} from 'flavours/glitch/util/react_helpers';
+
+// Messages.
+const messages = defineMessages({
+ placeholder: {
+ defaultMessage: 'What is on your mind?',
+ id: 'compose_form.placeholder',
+ },
+});
+
+// Handlers.
+const handlers = {
+
+ // When blurring the textarea, suggestions are hidden.
+ blur () {
+ this.setState({ suggestionsHidden: true });
+ },
+
+ // When the contents of the textarea change, we have to pull up new
+ // autosuggest suggestions if applicable, and also change the value
+ // of the textarea in our store.
+ change ({
+ target: {
+ selectionStart,
+ value,
+ },
+ }) {
+ const {
+ onChange,
+ onSuggestionsFetchRequested,
+ onSuggestionsClearRequested,
+ } = this.props;
+ const { lastToken } = this.state;
+
+ // This gets the token at the caret location, if it begins with an
+ // `@` (mentions) or `:` (shortcodes).
+ const left = value.slice(0, selectionStart).search(/[^\s\u200B]+$/);
+ const right = value.slice(selectionStart).search(/[\s\u200B]/);
+ const token = function () {
+ switch (true) {
+ case left < 0 || /[@:]/.test(!value[left]):
+ return null;
+ case right < 0:
+ return value.slice(left);
+ default:
+ return value.slice(left, right + selectionStart).trim().toLowerCase();
+ }
+ }();
+
+ // We only request suggestions for tokens which are at least 3
+ // characters long.
+ if (onSuggestionsFetchRequested && token && token.length >= 3) {
+ if (lastToken !== token) {
+ this.setState({
+ lastToken: token,
+ selectedSuggestion: 0,
+ tokenStart: left,
+ });
+ onSuggestionsFetchRequested(token);
+ }
+ } else {
+ this.setState({ lastToken: null });
+ if (onSuggestionsClearRequested) {
+ onSuggestionsClearRequested();
+ }
+ }
+
+ // Updates the value of the textarea.
+ if (onChange) {
+ onChange(value);
+ }
+ },
+
+ // Handles a click on an autosuggestion.
+ clickSuggestion (index) {
+ const { textarea } = this;
+ const {
+ onSuggestionSelected,
+ suggestions,
+ } = this.props;
+ const {
+ lastToken,
+ tokenStart,
+ } = this.state;
+ onSuggestionSelected(tokenStart, lastToken, suggestions.get(index));
+ textarea.focus();
+ },
+
+ // Handles a keypress. If the autosuggestions are visible, we need
+ // to allow keypresses to navigate and sleect them.
+ keyDown (e) {
+ const {
+ disabled,
+ onSubmit,
+ onSuggestionSelected,
+ suggestions,
+ } = this.props;
+ const {
+ lastToken,
+ suggestionsHidden,
+ selectedSuggestion,
+ tokenStart,
+ } = this.state;
+
+ // Keypresses do nothing if the composer is disabled.
+ if (disabled) {
+ e.preventDefault();
+ return;
+ }
+
+ // Switches over the pressed key.
+ switch(e.key) {
+
+ // On arrow down, we pick the next suggestion.
+ case 'ArrowDown':
+ if (suggestions && suggestions.size > 0 && !suggestionsHidden) {
+ e.preventDefault();
+ this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
+ }
+ return;
+
+ // On arrow up, we pick the previous suggestion.
+ case 'ArrowUp':
+ if (suggestions && suggestions.size > 0 && !suggestionsHidden) {
+ e.preventDefault();
+ this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
+ }
+ return;
+
+ // On enter or tab, we select the suggestion.
+ case 'Enter':
+ case 'Tab':
+ if (onSuggestionSelected && lastToken !== null && suggestions && suggestions.size > 0 && !suggestionsHidden) {
+ e.preventDefault();
+ e.stopPropagation();
+ onSuggestionSelected(tokenStart, lastToken, suggestions.get(selectedSuggestion));
+ }
+ return;
+ }
+
+ // We submit the status on control/meta + enter.
+ if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+ onSubmit();
+ }
+ },
+
+ // When the escape key is released, we either close the suggestions
+ // window or focus the UI.
+ keyUp ({ key }) {
+ const { suggestionsHidden } = this.state;
+ if (key === 'Escape') {
+ if (!suggestionsHidden) {
+ this.setState({ suggestionsHidden: true });
+ } else {
+ document.querySelector('.ui').parentElement.focus();
+ }
+ }
+ },
+
+ // Handles the pasting of images into the composer.
+ paste (e) {
+ const { onPaste } = this.props;
+ let d;
+ if (onPaste && (d = e.clipboardData) && (d = d.files).length === 1) {
+ onPaste(d);
+ e.preventDefault();
+ }
+ },
+
+ // Saves a reference to the textarea.
+ refTextarea (textarea) {
+ this.textarea = textarea;
+ },
+};
+
+// The component.
+export default class ComposerTextarea extends React.Component {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(this, handlers);
+ this.state = {
+ suggestionsHidden: false,
+ selectedSuggestion: 0,
+ lastToken: null,
+ tokenStart: 0,
+ };
+
+ // Instance variables.
+ this.textarea = null;
+ }
+
+ // When we receive new suggestions, we unhide the suggestions window
+ // if we didn't have any suggestions before.
+ componentWillReceiveProps (nextProps) {
+ const { suggestions } = this.props;
+ const { suggestionsHidden } = this.state;
+ if (nextProps.suggestions && nextProps.suggestions !== suggestions && nextProps.suggestions.size > 0 && suggestionsHidden) {
+ this.setState({ suggestionsHidden: false });
+ }
+ }
+
+ // Rendering.
+ render () {
+ const {
+ blur,
+ change,
+ clickSuggestion,
+ keyDown,
+ keyUp,
+ paste,
+ refTextarea,
+ } = this.handlers;
+ const {
+ autoFocus,
+ disabled,
+ intl,
+ onPickEmoji,
+ suggestions,
+ value,
+ } = this.props;
+ const {
+ selectedSuggestion,
+ suggestionsHidden,
+ } = this.state;
+
+ // The result.
+ return (
+
+
+
+
+ );
+ }
+
+}
+
+// Props.
+ComposerTextarea.propTypes = {
+ autoFocus: PropTypes.bool,
+ disabled: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ onChange: PropTypes.func,
+ onPaste: PropTypes.func,
+ onPickEmoji: PropTypes.func,
+ onSubmit: PropTypes.func,
+ onSuggestionsClearRequested: PropTypes.func,
+ onSuggestionsFetchRequested: PropTypes.func,
+ onSuggestionSelected: PropTypes.func,
+ suggestions: ImmutablePropTypes.list,
+ value: PropTypes.string,
+};
+
+// Default props.
+ComposerTextarea.defaultProps = { autoFocus: true };
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js
new file mode 100644
index 00000000000..b9069691080
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js
@@ -0,0 +1,41 @@
+// Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+// Components.
+import ComposerTextareaSuggestionsItem from './item';
+
+// The component.
+export default function ComposerTextareaSuggestions ({
+ hidden,
+ onSuggestionClick,
+ suggestions,
+ value,
+}) {
+ const computedClass = classNames('comoser--textarea--suggestions', { hidden: hidden || suggestions.isEmpty() });
+
+ return (
+
+ {!hidden ? suggestions.map(
+ (suggestion, index) => (
+
+ );
+}
+
+ComposerTextareaSuggestions.propTypes = {
+ hidden: PropTypes.bool,
+ onSuggestionClick: PropTypes.func,
+ suggestions: ImmutablePropTypes.list,
+ value: PropTypes.string,
+};
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
new file mode 100644
index 00000000000..08c99ed0ef6
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
@@ -0,0 +1,101 @@
+// Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Components.
+import AccountContainer from 'flavours/glitch/containers/account_container';
+
+// Utils.
+import { unicodeMapping } from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light';
+import { assignHandlers } from 'flavours/glitch/util/react_helpers';
+
+// Gets our asset host from the environment, if available.
+const assetHost = ((process || {}).env || {}).CDN_HOST || '';
+
+// Handlers.
+const handlers = {
+
+ // Handles a click on a suggestion.
+ click (e) {
+ const {
+ index,
+ onClick,
+ } = this.props;
+ if (onClick) {
+ e.preventDefault();
+ onClick(index);
+ }
+ },
+};
+
+// The component.
+export default class ComposerTextareaSuggestionsItem extends React.Component {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(this, handlers);
+ }
+
+ // Rendering.
+ render () {
+ const { click } = this.handlers;
+ const {
+ selected,
+ suggestion,
+ } = this.props;
+ const computedClass = classNames('composer--textarea--suggestions--item', { selected });
+
+ // The result.
+ return (
+
+ { // If the suggestion is an object, then we render an emoji.
+ // Otherwise, we render an account.
+ typeof suggestion === 'object' ? function () {
+ const url = function () {
+ if (suggestion.custom) {
+ return suggestion.imageUrl;
+ } else {
+ const mapping = unicodeMapping[suggestion.native] || unicodeMapping[suggestion.native.replace(/\uFE0F$/, '')];
+ if (!mapping) {
+ return null;
+ }
+ return `${assetHost}/emoji/${mapping.filename}.svg`;
+ }
+ }();
+ return url ? (
+
+
+ {suggestion.colons}
+
+ ) : null;
+ }() : (
+
+ )
+ }
+
+ {active ?
+ );
+}
+
+// Props.
+ComposerUploadForm.propTypes = {
+ active: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ media: ImmutablePropTypes.list,
+ onChangeDescription: PropTypes.func,
+ onRemove: PropTypes.func,
+ progress: PropTypes.number,
+};
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
new file mode 100644
index 00000000000..bd67e722741
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
@@ -0,0 +1,176 @@
+// Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+ FormattedMessage,
+ defineMessages,
+} from 'react-intl';
+import spring from 'react-motion/lib/spring';
+
+// Components.
+import IconButton from 'flavours/glitch/components/icon_button';
+
+// Utils.
+import Motion from 'flavours/glitch/util/optional_motion';
+import { assignHandlers } from 'flavours/glitch/util/react_helpers';
+
+// Messages.
+const messages = defineMessages({
+ undo: {
+ defaultMessage: 'Undo',
+ id: 'upload_form.undo',
+ },
+ description: {
+ defaultMessage: 'Describe for the visually impaired',
+ id: 'upload_form.description',
+ },
+});
+
+// Handlers.
+const handlers = {
+
+ // On blur, we save the description for the media item.
+ blur () {
+ const {
+ id,
+ onChangeDescription,
+ } = this.props;
+ const { dirtyDescription } = this.state;
+ if (id && onChangeDescription && dirtyDescription !== null) {
+ this.setState({
+ dirtyDescription: null,
+ focused: false,
+ });
+ onChangeDescription(id, dirtyDescription);
+ }
+ },
+
+ // When the value of our description changes, we store it in the
+ // temp value `dirtyDescription` in our state.
+ change ({ target: { value } }) {
+ this.setState({ dirtyDescription: value });
+ },
+
+ // Records focus on the media item.
+ focus () {
+ this.setState({ focused: true });
+ },
+
+ // Records the start of a hover over the media item.
+ mouseEnter () {
+ this.setState({ hovered: true });
+ },
+
+ // Records the end of a hover over the media item.
+ mouseLeave () {
+ this.setState({ hovered: false });
+ },
+
+ // Removes the media item.
+ remove () {
+ const {
+ id,
+ onRemove,
+ } = this.props;
+ if (id && onRemove) {
+ onRemove(id);
+ }
+ },
+};
+
+// The component.
+export default class ComposerUploadFormItem extends React.PureComponent {
+
+ // Constructor.
+ constructor (props) {
+ super(props);
+ assignHandlers(handlers);
+ this.state = {
+ hovered: false,
+ focused: false,
+ dirtyDescription: null,
+ };
+ }
+
+ // Rendering.
+ render () {
+ const {
+ blur,
+ change,
+ focus,
+ mouseEnter,
+ mouseLeave,
+ remove,
+ } = this.handlers;
+ const {
+ description,
+ intl,
+ preview,
+ } = this.props;
+ const {
+ focused,
+ hovered,
+ dirtyDescription,
+ } = this.state;
+ const computedClass = classNames('composer--upload_form--item', { active: hovered || focused });
+
+ // The result.
+ return (
+
+
+ {({ scale }) => (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {({ width }) =>
+
+ }
+
+
+
+
+ {({ opacity, scaleX, scaleY }) => (
+
+ )}
+
+ );
+}
+
+ComposerWarning.propTypes = {};
diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js b/app/javascript/flavours/glitch/features/drawer/components/navigation_bar.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/components/navigation_bar.js
rename to app/javascript/flavours/glitch/features/drawer/components/navigation_bar.js
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/drawer/components/search.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/components/search.js
rename to app/javascript/flavours/glitch/features/drawer/components/search.js
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/drawer/components/search_results.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/components/search_results.js
rename to app/javascript/flavours/glitch/features/drawer/components/search_results.js
diff --git a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js b/app/javascript/flavours/glitch/features/drawer/containers/navigation_container.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
rename to app/javascript/flavours/glitch/features/drawer/containers/navigation_container.js
diff --git a/app/javascript/flavours/glitch/features/compose/containers/search_container.js b/app/javascript/flavours/glitch/features/drawer/containers/search_container.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/containers/search_container.js
rename to app/javascript/flavours/glitch/features/drawer/containers/search_container.js
diff --git a/app/javascript/flavours/glitch/features/compose/containers/search_results_container.js b/app/javascript/flavours/glitch/features/drawer/containers/search_results_container.js
similarity index 100%
rename from app/javascript/flavours/glitch/features/compose/containers/search_results_container.js
rename to app/javascript/flavours/glitch/features/drawer/containers/search_results_container.js
diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js
new file mode 100644
index 00000000000..8386ae47cfc
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/drawer/index.js
@@ -0,0 +1,198 @@
+// Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, defineMessages } from 'react-intl';
+import spring from 'react-motion/lib/spring';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+// Actions.
+import { changeComposing } from 'flavours/glitch/actions/compose';
+import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
+import { openModal } from 'flavours/glitch/actions/modal';
+
+// Components.
+import Icon from 'flavours/glitch/components/icon';
+import Compose from 'flavours/glitch/features/compose';
+import NavigationContainer from './containers/navigation_container';
+import SearchContainer from './containers/search_container';
+import SearchResultsContainer from './containers/search_results_container';
+
+// Utils.
+import Motion from 'flavours/glitch/util/optional_motion';
+import {
+ assignHandlers,
+ conditionalRender,
+} from 'flavours/glitch/util/react_helpers';
+
+// Messages.
+const messages = defineMessages({
+ community: {
+ defaultMessage: 'Local timeline',
+ id: 'navigation_bar.community_timeline',
+ },
+ home_timeline: {
+ defaultMessage: 'Home',
+ id: 'tabs_bar.home',
+ },
+ logout: {
+ defaultMessage: 'Logout',
+ id: 'navigation_bar.logout',
+ },
+ notifications: {
+ defaultMessage: 'Notifications',
+ id: 'tabs_bar.notifications',
+ },
+ public: {
+ defaultMessage: 'Federated timeline',
+ id: 'navigation_bar.public_timeline',
+ },
+ settings: {
+ defaultMessage: 'App settings',
+ id: 'navigation_bar.app_settings',
+ },
+ start: {
+ defaultMessage: 'Getting started',
+ id: 'getting_started.heading',
+ },
+});
+
+// State mapping.
+const mapStateToProps = state => ({
+ columns: state.getIn(['settings', 'columns']),
+ showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
+});
+
+// Dispatch mapping.
+const mapDispatchToProps = dispatch => ({
+ onBlur () {
+ dispatch(changeComposing(false));
+ },
+ onFocus () {
+ dispatch(changeComposing(true));
+ },
+ onSettingsOpen () {
+ dispatch(openModal('SETTINGS', {}));
+ },
+});
+
+// The component.
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+export default function Drawer ({
+ columns,
+ intl,
+ multiColumn,
+ onBlur,
+ onFocus,
+ onSettingsOpen,
+ showSearch,
+}) {
+
+ // Only renders the component if the column isn't being shown.
+ const renderForColumn = conditionalRender.bind(
+ columnId => !columns.some(column => column.get('id') === columnId)
+ );
+
+ // The result.
+ return (
+
+ {multiColumn ? (
+
+
+ ) : null}
+
+
+
+
+
+ {({ x }) => (
+
+ )}
+
+
+
-