}
if (visible) {
- spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />;
+ spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='eye-slash' overlay onClick={this.handleOpen} />;
} else {
spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
defaultMessage: 'Public',
id: 'privacy.public.short',
},
- sensitive: {
- defaultMessage: 'Mark media as sensitive',
- id: 'compose_form.sensitive',
- },
spoiler: {
defaultMessage: 'Hide text behind warning',
id: 'compose_form.spoiler',
hasPoll: PropTypes.bool,
intl: PropTypes.object.isRequired,
onChangeAdvancedOption: PropTypes.func,
- onChangeSensitivity: PropTypes.func,
onChangeVisibility: PropTypes.func,
onTogglePoll: PropTypes.func,
onDoodleOpen: PropTypes.func,
onUpload: PropTypes.func,
privacy: PropTypes.string,
resetFileKey: PropTypes.number,
- sensitive: PropTypes.bool,
spoiler: PropTypes.bool,
};
hasPoll,
intl,
onChangeAdvancedOption,
- onChangeSensitivity,
onChangeVisibility,
onTogglePoll,
onModalClose,
onToggleSpoiler,
privacy,
resetFileKey,
- sensitive,
spoiler,
} = this.props;
title={intl.formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
/>
)}
- <Motion
- defaultStyle={{ scale: 0.87 }}
- style={{
- scale: spring(hasMedia ? 1 : 0.87, {
- stiffness: 200,
- damping: 3,
- }),
- }}
- >
- {({ scale }) => (
- <div
- style={{
- display: hasMedia ? null : 'none',
- transform: `scale(${scale})`,
- }}
- >
- <IconButton
- active={sensitive}
- className='sensitive'
- disabled={spoiler}
- icon={sensitive ? 'eye-slash' : 'eye'}
- inverted
- onClick={onChangeSensitivity}
- size={18}
- style={{
- height: null,
- lineHeight: null,
- }}
- title={intl.formatMessage(messages.sensitive)}
- />
- </div>
- )}
- </Motion>
<hr />
<Dropdown
disabled={disabled}
import UploadProgressContainer from '../containers/upload_progress_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import UploadContainer from '../containers/upload_container';
+import SensitiveButtonContainer from '../containers/sensitive_button_container';
export default class UploadForm extends ImmutablePureComponent {
static propTypes = {
))}
</div>
)}
+
+ {!mediaIds.isEmpty() && <SensitiveButtonContainer />}
</div>
);
}
import Options from '../components/options';
import {
changeComposeAdvancedOption,
- changeComposeSensitivity,
} from 'flavours/glitch/actions/compose';
import { addPoll, removePoll } from 'flavours/glitch/actions/compose';
import { closeModal, openModal } from 'flavours/glitch/actions/modal';
dispatch(changeComposeAdvancedOption(option, value));
},
- onChangeSensitivity() {
- dispatch(changeComposeSensitivity());
- },
-
onTogglePoll() {
dispatch((_, getState) => {
if (getState().getIn(['compose', 'poll'])) {
--- /dev/null
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
+
+const messages = defineMessages({
+ marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
+ unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
+});
+
+const mapStateToProps = state => {
+ const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
+ const spoilerText = state.getIn(['compose', 'spoiler_text']);
+ return {
+ active: state.getIn(['compose', 'sensitive']) || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0),
+ disabled: state.getIn(['compose', 'spoiler']),
+ };
+};
+
+const mapDispatchToProps = dispatch => ({
+
+ onClick () {
+ dispatch(changeComposeSensitivity());
+ },
+
+});
+
+class SensitiveButton extends React.PureComponent {
+
+ static propTypes = {
+ active: PropTypes.bool,
+ disabled: PropTypes.bool,
+ onClick: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ render () {
+ const { active, disabled, onClick, intl } = this.props;
+
+ return (
+ <div className='compose-form__sensitive-button'>
+ <button className={classNames('icon-button', { active })} onClick={onClick} disabled={disabled} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
+ <Icon icon='eye-slash' /> <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
+ </button>
+ </div>
+ );
+ }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));
</div>
<div className='video-player__buttons right'>
- {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>}
+ {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye-slash' /></button>}
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>}
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>}
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
}
}
+.compose-form__sensitive-button {
+ padding: 10px;
+ padding-top: 0;
+}
+
.composer--reply {
margin: 0 0 10px;
border-radius: 4px;
cat aescling's git repositories / mastodon.git / commitdiff