From e53fbb4a09ef0b53236840352f3a800b76b2f961 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Wed, 12 Jul 2017 00:50:50 -0500 Subject: [PATCH] local-only/compose advanced options tweaks. Squashed commit of the following: commit b9877e37f72fdd8134936e1014033b07cb6c3671 Author: Surinna Curtis Date: Wed Jul 12 00:50:10 2017 -0500 account for the eye in the chars left count for local-only toots commit 56ebfa96542e16daa1986cc45e07974801ee12dc Author: Surinna Curtis Date: Wed Jul 12 00:21:02 2017 -0500 factor out an AdvancedOptionsToggle to avoid unnecessary re-renders commit 04cec44ab8744e4e0f52da488c9ec24b1b1422ef Author: Surinna Curtis Date: Wed Jul 12 00:20:24 2017 -0500 s/changeComposeAdvancedOption/toggleComposeAdvancedOption/g commit af5815dee750d1aa8b797a9305e5ab3ce6774e3f Author: Surinna Curtis Date: Tue Jul 11 23:55:19 2017 -0500 clicking anywhere on the whole advanced option toggles --- .../components/compose/advanced_options.js | 51 +++++--- .../containers/compose/advanced_options.js | 4 +- app/javascript/mastodon/actions/compose.js | 2 +- .../compose/components/compose_form.js | 3 +- .../features/ui/util/async-components.js | 118 ++++++++++++++++++ 5 files changed, 160 insertions(+), 18 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/util/async-components.js diff --git a/app/javascript/glitch/components/compose/advanced_options.js b/app/javascript/glitch/components/compose/advanced_options.js index 0e72bd053d..0d22f25467 100644 --- a/app/javascript/glitch/components/compose/advanced_options.js +++ b/app/javascript/glitch/components/compose/advanced_options.js @@ -19,6 +19,35 @@ const iconStyle = { lineHeight: '27px', }; +class AdvancedOptionToggle extends React.PureComponent { + static PropTypes = { + onChange: PropTypes.func.isRequired, + active: PropTypes.bool.isRequired, + key: PropTypes.string.isRequired, + shortText: PropTypes.string.isRequired, + longText: PropTypes.string.isRequired, + } + + onToggle = () => { + this.props.onChange(this.props.name); + } + + render() { + const { active, shortText, longText } = this.props; + return ( +
+
+ +
+
+ {shortText} + {longText} +
+
+ ); + } +} + @injectIntl export default class ComposeAdvancedOptions extends React.PureComponent { @@ -60,10 +89,6 @@ export default class ComposeAdvancedOptions extends React.PureComponent { this.props.onChange(option); } - toggleHandler(option) { - return () => this.props.onChange(option); - } - setRef = (c) => { this.node = c; } @@ -78,17 +103,15 @@ export default class ComposeAdvancedOptions extends React.PureComponent { const anyEnabled = values.some((enabled) => enabled); const optionElems = options.map((option) => { - const active = values.get(option.key); return ( -
-
- -
-
- {intl.formatMessage(option.shortText)} - {intl.formatMessage(option.longText)} -
-
+ ); }); diff --git a/app/javascript/glitch/containers/compose/advanced_options.js b/app/javascript/glitch/containers/compose/advanced_options.js index f8b7354ff0..92b989052d 100644 --- a/app/javascript/glitch/containers/compose/advanced_options.js +++ b/app/javascript/glitch/containers/compose/advanced_options.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; // Mastodon imports // -import { changeComposeAdvancedOption } from '../../../mastodon/actions/compose'; +import { toggleComposeAdvancedOption } from '../../../mastodon/actions/compose'; // Our imports // import ComposeAdvancedOptions from '../../components/compose/advanced_options'; @@ -14,7 +14,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ onChange (option) { - dispatch(changeComposeAdvancedOption(option)); + dispatch(toggleComposeAdvancedOption(option)); }, }); diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index f00b213f0b..bce836b455 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -248,7 +248,7 @@ export function unmountCompose() { }; }; -export function changeComposeAdvancedOption(option) { +export function toggleComposeAdvancedOption(option) { return { type: COMPOSE_ADVANCED_OPTIONS_CHANGE, option: option, diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 3136354431..4b14f8c813 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -147,7 +147,8 @@ export default class ComposeForm extends ImmutablePureComponent { render () { const { intl, onPaste, showSearch } = this.props; const disabled = this.props.is_submitting; - const text = [this.props.spoiler_text, this.props.text].join(''); + const maybeEye = this.props.advanced_options.get('do_not_federate') ? ' 👁️' : ''; + const text = [this.props.spoiler_text, this.props.text, maybeEye].join(''); let publishText = ''; diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js new file mode 100644 index 0000000000..8c9b1bd974 --- /dev/null +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -0,0 +1,118 @@ +export function EmojiPicker () { + return import(/* webpackChunkName: "emojione_picker" */'emojione-picker'); +} + +export function Compose () { + return import(/* webpackChunkName: "features/compose" */'../../compose'); +} + +export function Notifications () { + return import(/* webpackChunkName: "features/notifications" */'../../notifications'); +} + +export function HomeTimeline () { + return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline'); +} + +export function PublicTimeline () { + return import(/* webpackChunkName: "features/public_timeline" */'../../public_timeline'); +} + +export function CommunityTimeline () { + return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline'); +} + +export function HashtagTimeline () { + return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline'); +} + +export function Status () { + return import(/* webpackChunkName: "features/status" */'../../status'); +} + +export function GettingStarted () { + return import(/* webpackChunkName: "features/getting_started" */'../../getting_started'); +} + +export function AccountTimeline () { + return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline'); +} + +export function AccountGallery () { + return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery'); +} + +export function Followers () { + return import(/* webpackChunkName: "features/followers" */'../../followers'); +} + +export function Following () { + return import(/* webpackChunkName: "features/following" */'../../following'); +} + +export function Reblogs () { + return import(/* webpackChunkName: "features/reblogs" */'../../reblogs'); +} + +export function Favourites () { + return import(/* webpackChunkName: "features/favourites" */'../../favourites'); +} + +export function FollowRequests () { + return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests'); +} + +export function GenericNotFound () { + return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found'); +} + +export function FavouritedStatuses () { + return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses'); +} + +export function Blocks () { + return import(/* webpackChunkName: "features/blocks" */'../../blocks'); +} + +export function Mutes () { + return import(/* webpackChunkName: "features/mutes" */'../../mutes'); +} + +export function MediaModal () { + return import(/* webpackChunkName: "modals/media_modal" */'../components/media_modal'); +} + +export function OnboardingModal () { + return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal'); +} + +export function VideoModal () { + return import(/* webpackChunkName: "modals/video_modal" */'../components/video_modal'); +} + +export function BoostModal () { + return import(/* webpackChunkName: "modals/boost_modal" */'../components/boost_modal'); +} + +export function ConfirmationModal () { + return import(/* webpackChunkName: "modals/confirmation_modal" */'../components/confirmation_modal'); +} + +export function ReportModal () { + return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal'); +} + +export function SettingsModal () { + return import(/* webpackChunkName: "modals/settings_modal" */'../../../../glitch/containers/settings'); +} + +// THESE AREN'T USED BY US; SEE `glitch/components/status` AND `mastodon/features/status`. // +// HOWEVER, IF MASTODON EVER CHANGES DETAILED STATUSES SO THAT THEY NEED THEM, WE'LL NEED TO UPDATE THE URLS OR SOMETHING LOL. // + +export function MediaGallery () { + return import(/* webpackChunkName: "status/MediaGallery" */'../../../components/media_gallery'); +} + +export function VideoPlayer () { + return import(/* webpackChunkName: "status/VideoPlayer" */'../../../components/video_player'); +}