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:
parent
79d898ae0a
commit
e53fbb4a09
5 changed files with 160 additions and 18 deletions
|
@ -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 (
|
||||
<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
|
||||
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 (
|
||||
<div role='button' className='advanced-options-dropdown__option' key={option.key} >
|
||||
<div className='advanced-options-dropdown__option__toggle'>
|
||||
<Toggle checked={active} onChange={this.toggleHandler(option.key)} />
|
||||
</div>
|
||||
<div className='advanced-options-dropdown__option__content'>
|
||||
<strong>{intl.formatMessage(option.shortText)}</strong>
|
||||
{intl.formatMessage(option.longText)}
|
||||
</div>
|
||||
</div>
|
||||
<AdvancedOptionToggle
|
||||
onChange={this.props.onChange}
|
||||
active={values.get(option.key)}
|
||||
key={option.key}
|
||||
name={option.key}
|
||||
shortText={intl.formatMessage(option.shortText)}
|
||||
longText={intl.formatMessage(option.longText)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -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));
|
||||
},
|
||||
|
||||
});
|
||||
|
|
|
@ -248,7 +248,7 @@ export function unmountCompose() {
|
|||
};
|
||||
};
|
||||
|
||||
export function changeComposeAdvancedOption(option) {
|
||||
export function toggleComposeAdvancedOption(option) {
|
||||
return {
|
||||
type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
|
||||
option: option,
|
||||
|
|
|
@ -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 = '';
|
||||
|
||||
|
|
118
app/javascript/mastodon/features/ui/util/async-components.js
Normal file
118
app/javascript/mastodon/features/ui/util/async-components.js
Normal 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');
|
||||
}
|
Loading…
Reference in a new issue