mirror of
https://github.com/lunaisnotaboy/mastodon.git
synced 2024-09-02 08:23:30 +00: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) {
|
||||
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'>
|
||||
|
|
|
@ -65,10 +65,6 @@ const messages = defineMessages({
|
|||
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',
|
||||
|
@ -116,7 +112,6 @@ class ComposerOptions extends ImmutablePureComponent {
|
|||
hasPoll: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onChangeAdvancedOption: PropTypes.func,
|
||||
onChangeSensitivity: PropTypes.func,
|
||||
onChangeVisibility: PropTypes.func,
|
||||
onTogglePoll: PropTypes.func,
|
||||
onDoodleOpen: PropTypes.func,
|
||||
|
@ -126,7 +121,6 @@ class ComposerOptions extends ImmutablePureComponent {
|
|||
onUpload: PropTypes.func,
|
||||
privacy: PropTypes.string,
|
||||
resetFileKey: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
spoiler: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
@ -175,7 +169,6 @@ class ComposerOptions extends ImmutablePureComponent {
|
|||
hasPoll,
|
||||
intl,
|
||||
onChangeAdvancedOption,
|
||||
onChangeSensitivity,
|
||||
onChangeVisibility,
|
||||
onTogglePoll,
|
||||
onModalClose,
|
||||
|
@ -183,7 +176,6 @@ class ComposerOptions extends ImmutablePureComponent {
|
|||
onToggleSpoiler,
|
||||
privacy,
|
||||
resetFileKey,
|
||||
sensitive,
|
||||
spoiler,
|
||||
} = this.props;
|
||||
|
||||
|
@ -264,39 +256,6 @@ class ComposerOptions extends ImmutablePureComponent {
|
|||
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}
|
||||
|
|
|
@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
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 = {
|
||||
|
@ -23,6 +24,8 @@ export default class UploadForm extends ImmutablePureComponent {
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!mediaIds.isEmpty() && <SensitiveButtonContainer />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,7 +2,6 @@ import { connect } from 'react-redux';
|
|||
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';
|
||||
|
@ -27,10 +26,6 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
dispatch(changeComposeAdvancedOption(option, value));
|
||||
},
|
||||
|
||||
onChangeSensitivity() {
|
||||
dispatch(changeComposeSensitivity());
|
||||
},
|
||||
|
||||
onTogglePoll() {
|
||||
dispatch((_, getState) => {
|
||||
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 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>
|
||||
|
|
|
@ -57,6 +57,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.compose-form__sensitive-button {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.composer--reply {
|
||||
margin: 0 0 10px;
|
||||
border-radius: 4px;
|
||||
|
|
Loading…
Reference in a new issue