1
0
mirror of https://github.com/funamitech/mastodon synced 2024-12-11 21:29:17 +09:00

[Glitch] Make the "mark media as sensitive" button more obvious in web UI

Port 05ef3462ba to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-05-03 04:34:55 +02:00 committed by Thibaut Girka
parent b1ab4d5ebe
commit f59973cc85
7 changed files with 64 additions and 48 deletions

View File

@ -345,7 +345,7 @@ export default class MediaGallery extends React.PureComponent {
} }
if (visible) { 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 { } else {
spoilerButton = ( spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'> <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>

View File

@ -65,10 +65,6 @@ const messages = defineMessages({
defaultMessage: 'Public', defaultMessage: 'Public',
id: 'privacy.public.short', id: 'privacy.public.short',
}, },
sensitive: {
defaultMessage: 'Mark media as sensitive',
id: 'compose_form.sensitive',
},
spoiler: { spoiler: {
defaultMessage: 'Hide text behind warning', defaultMessage: 'Hide text behind warning',
id: 'compose_form.spoiler', id: 'compose_form.spoiler',
@ -116,7 +112,6 @@ class ComposerOptions extends ImmutablePureComponent {
hasPoll: PropTypes.bool, hasPoll: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
onChangeAdvancedOption: PropTypes.func, onChangeAdvancedOption: PropTypes.func,
onChangeSensitivity: PropTypes.func,
onChangeVisibility: PropTypes.func, onChangeVisibility: PropTypes.func,
onTogglePoll: PropTypes.func, onTogglePoll: PropTypes.func,
onDoodleOpen: PropTypes.func, onDoodleOpen: PropTypes.func,
@ -126,7 +121,6 @@ class ComposerOptions extends ImmutablePureComponent {
onUpload: PropTypes.func, onUpload: PropTypes.func,
privacy: PropTypes.string, privacy: PropTypes.string,
resetFileKey: PropTypes.number, resetFileKey: PropTypes.number,
sensitive: PropTypes.bool,
spoiler: PropTypes.bool, spoiler: PropTypes.bool,
}; };
@ -175,7 +169,6 @@ class ComposerOptions extends ImmutablePureComponent {
hasPoll, hasPoll,
intl, intl,
onChangeAdvancedOption, onChangeAdvancedOption,
onChangeSensitivity,
onChangeVisibility, onChangeVisibility,
onTogglePoll, onTogglePoll,
onModalClose, onModalClose,
@ -183,7 +176,6 @@ class ComposerOptions extends ImmutablePureComponent {
onToggleSpoiler, onToggleSpoiler,
privacy, privacy,
resetFileKey, resetFileKey,
sensitive,
spoiler, spoiler,
} = this.props; } = this.props;
@ -264,39 +256,6 @@ class ComposerOptions extends ImmutablePureComponent {
title={intl.formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)} 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 /> <hr />
<Dropdown <Dropdown
disabled={disabled} disabled={disabled}

View File

@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import UploadProgressContainer from '../containers/upload_progress_container'; import UploadProgressContainer from '../containers/upload_progress_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import UploadContainer from '../containers/upload_container'; import UploadContainer from '../containers/upload_container';
import SensitiveButtonContainer from '../containers/sensitive_button_container';
export default class UploadForm extends ImmutablePureComponent { export default class UploadForm extends ImmutablePureComponent {
static propTypes = { static propTypes = {
@ -23,6 +24,8 @@ export default class UploadForm extends ImmutablePureComponent {
))} ))}
</div> </div>
)} )}
{!mediaIds.isEmpty() && <SensitiveButtonContainer />}
</div> </div>
); );
} }

View File

@ -2,7 +2,6 @@ import { connect } from 'react-redux';
import Options from '../components/options'; import Options from '../components/options';
import { import {
changeComposeAdvancedOption, changeComposeAdvancedOption,
changeComposeSensitivity,
} from 'flavours/glitch/actions/compose'; } from 'flavours/glitch/actions/compose';
import { addPoll, removePoll } from 'flavours/glitch/actions/compose'; import { addPoll, removePoll } from 'flavours/glitch/actions/compose';
import { closeModal, openModal } from 'flavours/glitch/actions/modal'; import { closeModal, openModal } from 'flavours/glitch/actions/modal';
@ -27,10 +26,6 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(changeComposeAdvancedOption(option, value)); dispatch(changeComposeAdvancedOption(option, value));
}, },
onChangeSensitivity() {
dispatch(changeComposeSensitivity());
},
onTogglePoll() { onTogglePoll() {
dispatch((_, getState) => { dispatch((_, getState) => {
if (getState().getIn(['compose', 'poll'])) { if (getState().getIn(['compose', 'poll'])) {

View File

@ -0,0 +1,54 @@
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));

View File

@ -500,7 +500,7 @@ export default class Video extends React.PureComponent {
</div> </div>
<div className='video-player__buttons right'> <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>} {(!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>} {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> <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>

View File

@ -57,6 +57,11 @@
} }
} }
.compose-form__sensitive-button {
padding: 10px;
padding-top: 0;
}
.composer--reply { .composer--reply {
margin: 0 0 10px; margin: 0 0 10px;
border-radius: 4px; border-radius: 4px;