From 67f82775268f57be5506031e65e3155a2618bef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sat, 23 Sep 2017 23:11:02 +0200 Subject: [PATCH] Add secondary toot button (opt-in) (#153) Add secondary toot button + other toot button enhancements. Squashing so it's easy to revert if needed. --- .../components/local_settings/page/index.js | 19 ++++++ .../glitch/reducers/local_settings.js | 1 + .../compose/components/compose_form.js | 66 +++++++++++++++++-- .../containers/compose_form_container.js | 7 +- app/javascript/styles/components.scss | 18 +++++ 5 files changed, 104 insertions(+), 7 deletions(-) diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js index cb041c0b8..338d86333 100644 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -16,6 +16,7 @@ const messages = defineMessages({ layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, + side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' }, }); @injectIntl @@ -61,6 +62,24 @@ export default class LocalSettingsPage extends React.PureComponent { > +
+

+ + + +
), ({ onChange, settings }) => ( diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js index 386d59ceb..813e130ca 100644 --- a/app/javascript/glitch/reducers/local_settings.js +++ b/app/javascript/glitch/reducers/local_settings.js @@ -52,6 +52,7 @@ const initialState = ImmutableMap({ layout : 'auto', stretch : true, navbar_under : false, + side_arm : 'none', collapsed : ImmutableMap({ enabled : true, auto : ImmutableMap({ diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index f6b5cf0be..1d60ffe83 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -51,11 +51,13 @@ export default class ComposeForm extends ImmutablePureComponent { onSubmit: PropTypes.func.isRequired, onClearSuggestions: PropTypes.func.isRequired, onFetchSuggestions: PropTypes.func.isRequired, + onPrivacyChange: PropTypes.func.isRequired, onSuggestionSelected: PropTypes.func.isRequired, onChangeSpoilerText: PropTypes.func.isRequired, onPaste: PropTypes.func.isRequired, onPickEmoji: PropTypes.func.isRequired, showSearch: PropTypes.bool, + settings : ImmutablePropTypes.map.isRequired, }; static defaultProps = { @@ -72,6 +74,11 @@ export default class ComposeForm extends ImmutablePureComponent { } } + handleSubmit2 = () => { + this.props.onPrivacyChange(this.props.settings.get('side_arm')); + this.handleSubmit(); + } + handleSubmit = () => { if (this.props.text !== this.autosuggestTextarea.textarea.value) { // Something changed the text inside the textarea (e.g. browser extensions like Grammarly) @@ -157,13 +164,42 @@ export default class ComposeForm extends ImmutablePureComponent { 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 sideArmVisibility = this.props.settings.get('side_arm'); + let showSideArm = sideArmVisibility !== 'none'; + let publishText = ''; - if (this.props.privacy === 'private' || this.props.privacy === 'direct') { - publishText = {intl.formatMessage(messages.publish)}; - } else { - publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); - } + const privacyIcons = { + none: '', + public: 'globe', + unlisted: 'unlock-alt', + private: 'lock', + direct: 'envelope', + }; + + publishText = ( + + { + (this.props.settings.get('stretch') || !showSideArm) ? + : + '' + } + {intl.formatMessage(messages.publish)} + + ); + + // side-arm + let publishText2 = ( + + ); + + const submitDisabled = disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0); return (
@@ -215,7 +251,25 @@ export default class ComposeForm extends ImmutablePureComponent {
-
+
+ { + showSideArm ? +
diff --git a/app/javascript/mastodon/features/compose/containers/compose_form_container.js b/app/javascript/mastodon/features/compose/containers/compose_form_container.js index 1911edbf9..4e8cd2279 100644 --- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js +++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import ComposeForm from '../components/compose_form'; -import { uploadCompose } from '../../../actions/compose'; +import { changeComposeVisibility, uploadCompose } from '../../../actions/compose'; import { changeCompose, submitCompose, @@ -25,6 +25,7 @@ const mapStateToProps = state => ({ is_uploading: state.getIn(['compose', 'is_uploading']), me: state.getIn(['compose', 'me']), showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + settings: state.get('local_settings'), }); const mapDispatchToProps = (dispatch) => ({ @@ -33,6 +34,10 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(changeCompose(text)); }, + onPrivacyChange (value) { + dispatch(changeComposeVisibility(value)); + }, + onSubmit () { dispatch(submitCompose()); }, diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index f087adf9c..2639fd41e 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -421,6 +421,24 @@ .compose-form__publish-button-wrapper { overflow: hidden; padding-top: 10px; + white-space: nowrap; + display: flex; + + button { + text-overflow: unset; + } +} + +.compose-form__publish__side-arm { + padding: 0 !important; + width: 4em; + text-align: center; + opacity: .8; + margin-right: 2px; +} + +.compose-form__publish__primary { + padding: 0 10px !important; } .emojione {