import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { countableText } from '../util/counter';
+import ComposeAttachOptions from '../../../../glitch/components/compose/attach_options/index';
+ import initialState from '../../../initial_state';
+
+ const maxChars = initialState.max_toot_chars;
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
render () {
const { intl, onPaste, showSearch } = this.props;
const disabled = this.props.is_submitting;
- const text = [this.props.spoiler_text, countableText(this.props.text)].join('');
+ const maybeEye = (this.props.advanced_options && this.props.advanced_options.do_not_federate) ? ' 👁️' : '';
+ const text = [this.props.spoiler_text, countableText(this.props.text), maybeEye].join('');
+
+ const secondaryVisibility = this.props.settings.get('side_arm');
+ let showSideArm = secondaryVisibility !== 'none';
let publishText = '';
+ let publishText2 = '';
+ let title = '';
+ let title2 = '';
+
+ const privacyIcons = {
+ none: '',
+ public: 'globe',
+ unlisted: 'unlock-alt',
+ private: 'lock',
+ direct: 'envelope',
+ };
+
+ title = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${this.props.privacy}.short` })}`;
+
+ if (showSideArm) {
+ // Enhanced behavior with dual toot buttons
+ publishText = (
+ <span>
+ {
+ <i
+ className={`fa fa-${privacyIcons[this.props.privacy]}`}
+ style={{ paddingRight: '5px' }}
+ />
+ }{intl.formatMessage(messages.publish)}
+ </span>
+ );
- if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
- publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+ title2 = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`;
+ publishText2 = (
+ <i
+ className={`fa fa-${privacyIcons[secondaryVisibility]}`}
+ aria-label={title2}
+ />
+ );
} else {
- publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
+ // Original vanilla behavior - no icon if public or unlisted
+ if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
+ publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+ } else {
+ publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
+ }
}
- const submitDisabled = disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0);
++ const submitDisabled = disabled || this.props.is_uploading || length(text) > maxChars || (text.length !== 0 && text.trim().length === 0);
+
return (
<div className='compose-form'>
<Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<UploadFormContainer />
</div>
- <div className='compose-form__buttons-wrapper'>
- <div className='compose-form__buttons'>
- <UploadButtonContainer />
- <PrivacyDropdownContainer />
- <SensitiveButtonContainer />
- <SpoilerButtonContainer />
- </div>
+ <div className='compose-form__buttons'>
+ <ComposeAttachOptions />
+ <SensitiveButtonContainer />
+ <div className='compose-form__buttons-separator' />
+ <PrivacyDropdownContainer />
+ <SpoilerButtonContainer />
+ <ComposeAdvancedOptionsContainer />
+ </div>
- <div className='compose-form__publish'>
- <div className='character-counter__wrapper'><CharacterCounter max={maxChars} text={text} /></div>
- <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || this.props.is_uploading || length(text) > maxChars || (text.length !== 0 && text.trim().length === 0)} block /></div>
+ <div className='compose-form__publish'>
- <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
++ <div className='character-counter__wrapper'><CharacterCounter max={maxChars} text={text} /></div>
+ <div className='compose-form__publish-button-wrapper'>
+ {
+ showSideArm ?
+ <Button
+ className='compose-form__publish__side-arm'
+ text={publishText2}
+ title={title2}
+ onClick={this.handleSubmit2}
+ disabled={submitDisabled}
+ /> : ''
+ }
+ <Button
+ className='compose-form__publish__primary'
+ text={publishText}
+ title={title}
+ onClick={this.handleSubmit}
+ disabled={submitDisabled}
+ />
</div>
</div>
</div>