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:
parent
b1ab4d5ebe
commit
f59973cc85
@ -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'>
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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'])) {
|
||||||
|
@ -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));
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user