local-only/compose advanced options tweaks.

Squashed commit of the following:

commit b9877e37f72fdd8134936e1014033b07cb6c3671
Author: Surinna Curtis <ekiru.0@gmail.com>
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 <ekiru.0@gmail.com>
Date:   Wed Jul 12 00:21:02 2017 -0500

    factor out an AdvancedOptionsToggle to avoid unnecessary re-renders

commit 04cec44ab8744e4e0f52da488c9ec24b1b1422ef
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Wed Jul 12 00:20:24 2017 -0500

    s/changeComposeAdvancedOption/toggleComposeAdvancedOption/g

commit af5815dee750d1aa8b797a9305e5ab3ce6774e3f
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Tue Jul 11 23:55:19 2017 -0500

    clicking anywhere on the whole advanced option toggles
This commit is contained in:
Surinna Curtis 2017-07-12 00:50:50 -05:00 committed by kibigo!
parent 79d898ae0a
commit e53fbb4a09
5 changed files with 160 additions and 18 deletions

View File

@ -19,6 +19,35 @@ const iconStyle = {
lineHeight: '27px', 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 (
<div role='button' className='advanced-options-dropdown__option' onClick={this.onToggle}>
<div className='advanced-options-dropdown__option__toggle'>
<Toggle checked={active} onChange={this.onToggle} />
</div>
<div className='advanced-options-dropdown__option__content'>
<strong>{shortText}</strong>
{longText}
</div>
</div>
);
}
}
@injectIntl @injectIntl
export default class ComposeAdvancedOptions extends React.PureComponent { export default class ComposeAdvancedOptions extends React.PureComponent {
@ -60,10 +89,6 @@ export default class ComposeAdvancedOptions extends React.PureComponent {
this.props.onChange(option); this.props.onChange(option);
} }
toggleHandler(option) {
return () => this.props.onChange(option);
}
setRef = (c) => { setRef = (c) => {
this.node = c; this.node = c;
} }
@ -78,17 +103,15 @@ export default class ComposeAdvancedOptions extends React.PureComponent {
const anyEnabled = values.some((enabled) => enabled); const anyEnabled = values.some((enabled) => enabled);
const optionElems = options.map((option) => { const optionElems = options.map((option) => {
const active = values.get(option.key);
return ( return (
<div role='button' className='advanced-options-dropdown__option' key={option.key} > <AdvancedOptionToggle
<div className='advanced-options-dropdown__option__toggle'> onChange={this.props.onChange}
<Toggle checked={active} onChange={this.toggleHandler(option.key)} /> active={values.get(option.key)}
</div> key={option.key}
<div className='advanced-options-dropdown__option__content'> name={option.key}
<strong>{intl.formatMessage(option.shortText)}</strong> shortText={intl.formatMessage(option.shortText)}
{intl.formatMessage(option.longText)} longText={intl.formatMessage(option.longText)}
</div> />
</div>
); );
}); });

View File

@ -2,7 +2,7 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
// Mastodon imports // // Mastodon imports //
import { changeComposeAdvancedOption } from '../../../mastodon/actions/compose'; import { toggleComposeAdvancedOption } from '../../../mastodon/actions/compose';
// Our imports // // Our imports //
import ComposeAdvancedOptions from '../../components/compose/advanced_options'; import ComposeAdvancedOptions from '../../components/compose/advanced_options';
@ -14,7 +14,7 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onChange (option) { onChange (option) {
dispatch(changeComposeAdvancedOption(option)); dispatch(toggleComposeAdvancedOption(option));
}, },
}); });

View File

@ -248,7 +248,7 @@ export function unmountCompose() {
}; };
}; };
export function changeComposeAdvancedOption(option) { export function toggleComposeAdvancedOption(option) {
return { return {
type: COMPOSE_ADVANCED_OPTIONS_CHANGE, type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
option: option, option: option,

View File

@ -147,7 +147,8 @@ export default class ComposeForm extends ImmutablePureComponent {
render () { render () {
const { intl, onPaste, showSearch } = this.props; const { intl, onPaste, showSearch } = this.props;
const disabled = this.props.is_submitting; 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 = ''; let publishText = '';

View File

@ -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');
}