diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/compose')
3 files changed, 74 insertions, 19 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.js b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.js new file mode 100644 index 000000000..fb9bb5035 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.js @@ -0,0 +1,24 @@ +import React from 'react'; +import Avatar from 'flavours/glitch/components/avatar'; +import DisplayName from 'flavours/glitch/components/display_name'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +export default class AutosuggestAccount extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + }; + + render () { + const { account } = this.props; + + return ( + <div className='account small' title={account.get('acct')}> + <div className='account__avatar-wrapper'><Avatar account={account} size={24} /></div> + <DisplayName account={account} inline /> + </div> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index ecd1aed69..2ea137965 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -7,17 +7,20 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; // Components. import ComposerOptions from '../../composer/options'; import ComposerPublisher from '../../composer/publisher'; -import ComposerTextarea from '../../composer/textarea'; +import ComposerTextareaIcons from '../../composer/textarea/icons'; import UploadFormContainer from '../containers/upload_form_container'; import PollFormContainer from '../containers/poll_form_container'; import WarningContainer from '../containers/warning_container'; import ReplyIndicatorContainer from '../containers/reply_indicator_container'; +import EmojiPicker from 'flavours/glitch/features/emoji_picker'; +import AutosuggestTextarea from '../../../components/autosuggest_textarea'; // Utils. import { countableText } from 'flavours/glitch/util/counter'; import { isMobile } from 'flavours/glitch/util/is_mobile'; const messages = defineMessages({ + placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, missingDescriptionMessage: { id: 'confirmations.missing_media_description.message', defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.' }, missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', @@ -183,7 +186,7 @@ class ComposeForm extends ImmutablePureComponent { } // Sets a reference to the textarea. - handleRefTextarea = (textareaComponent) => { + setAutosuggestTextarea = (textareaComponent) => { if (textareaComponent) { this.textarea = textareaComponent.textarea; } @@ -269,6 +272,10 @@ class ComposeForm extends ImmutablePureComponent { } } + handleChange = (e) => { + this.props.onChangeText(e.target.value); + } + render () { const { handleEmoji, @@ -339,27 +346,35 @@ class ComposeForm extends ImmutablePureComponent { </label> </div> - <ComposerTextarea - advancedOptions={advancedOptions} - autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} - disabled={isSubmitting} - intl={intl} - onChange={onChangeText} - onPaste={onUpload} - onPickEmoji={handleEmoji} - onSubmit={handleSubmit} - onSecondarySubmit={handleSecondarySubmit} - onSuggestionsClearRequested={onClearSuggestions} - onSuggestionsFetchRequested={onFetchSuggestions} - onSuggestionSelected={handleSelect} - ref={handleRefTextarea} - suggestions={suggestions} - value={text} - /> + <div className='composer--textarea'> + <ComposerTextareaIcons + advancedOptions={advancedOptions} + intl={intl} + /> + + <AutosuggestTextarea + ref={this.setAutosuggestTextarea} + placeholder={intl.formatMessage(messages.placeholder)} + disabled={isSubmitting} + value={this.props.text} + onChange={this.handleChange} + suggestions={this.props.suggestions} + onKeyDown={this.handleKeyDown} + onSuggestionsFetchRequested={onFetchSuggestions} + onSuggestionsClearRequested={onClearSuggestions} + onSuggestionSelected={this.handleSelect} + onPaste={onUpload} + autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} + /> + + <EmojiPicker onPickEmoji={handleEmoji} /> + </div> + <div className='compose-form__modifiers'> <UploadFormContainer /> <PollFormContainer /> </div> + <ComposerOptions acceptContentTypes={acceptContentTypes} advancedOptions={advancedOptions} @@ -385,6 +400,7 @@ class ComposeForm extends ImmutablePureComponent { sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)} spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} /> + <ComposerPublisher countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`} disabled={disabledButton} diff --git a/app/javascript/flavours/glitch/features/compose/containers/autosuggest_account_container.js b/app/javascript/flavours/glitch/features/compose/containers/autosuggest_account_container.js new file mode 100644 index 000000000..0e1c328fe --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/containers/autosuggest_account_container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import AutosuggestAccount from '../components/autosuggest_account'; +import { makeGetAccount } from 'flavours/glitch/selectors'; + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, { id }) => ({ + account: getAccount(state, id), + }); + + return mapStateToProps; +}; + +export default connect(makeMapStateToProps)(AutosuggestAccount); |