Reimplement sensitive checkbox

main-rebase-security-fix
Claire 2024-02-22 23:24:23 +01:00
parent 5fd50756b4
commit 380f4fc95c
5 changed files with 107 additions and 1 deletions

View File

@ -0,0 +1,57 @@
import { useCallback } from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
const messages = defineMessages({
marked: {
id: 'compose_form.sensitive.marked',
defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
},
unmarked: {
id: 'compose_form.sensitive.unmarked',
defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
},
});
export const SensitiveButton = () => {
const intl = useIntl();
const spoilersAlwaysOn = useAppSelector((state) => state.getIn(['local_settings', 'always_show_spoilers_field']));
const spoilerText = useAppSelector((state) => state.getIn(['compose', 'spoiler_text']));
const sensitive = useAppSelector((state) => state.getIn(['compose', 'sensitive']));
const disabled = useAppSelector((state) => state.getIn(['compose', 'spoiler']));
const mediaCount = useAppSelector((state) => state.getIn(['compose', 'media_attachments']).size);
const active = sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0);
const dispatch = useAppDispatch();
const handleClick = useCallback(() => {
dispatch(changeComposeSensitivity());
}, [dispatch]);
return (
<div className='compose-form__sensitive-button'>
<label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
<input
name='mark-sensitive'
type='checkbox'
checked={active}
onChange={handleClick}
disabled={disabled}
/>
<FormattedMessage
id='compose_form.sensitive.hide'
defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
values={{ count: mediaCount }}
/>
</label>
</div>
);
};

View File

@ -4,6 +4,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import UploadContainer from '../containers/upload_container';
import UploadProgressContainer from '../containers/upload_progress_container';
import { SensitiveButton } from './sensitive_button';
export default class UploadForm extends ImmutablePureComponent {
static propTypes = {
@ -24,6 +26,8 @@ export default class UploadForm extends ImmutablePureComponent {
))}
</div>
)}
{!mediaIds.isEmpty() && <SensitiveButton />}
</>
);
}

View File

@ -5,7 +5,7 @@ import Upload from '../components/upload';
const mapStateToProps = (state, { id }) => ({
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
sensitive: state.getIn(['compose', 'spoiler']),
sensitive: state.getIn(['compose', 'sensitive']),
});
const mapDispatchToProps = dispatch => ({

View File

@ -14,6 +14,9 @@
"column_subheading.lists": "Lists",
"column_subheading.navigation": "Navigation",
"community.column_settings.allow_local_only": "Show local-only toots",
"compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",
"compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}",
"compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
"confirmation_modal.do_not_ask_again": "Do not ask for confirmation again",
"confirmations.deprecated_settings.confirm": "Use Mastodon preferences",
"confirmations.deprecated_settings.message": "Some of the glitch-soc device-specific {app_settings} you are using have been replaced by Mastodon {preferences} and will be overriden:",

View File

@ -698,6 +698,48 @@ body > [data-popper-placement] {
}
}
// glitch: reintroduce sensitive button
&__sensitive-button {
padding: 0 12px;
input[type='checkbox'] {
appearance: none;
display: block;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
width: 17px;
height: 17px;
border-radius: 4px;
flex: 0 0 auto;
&:active,
&:focus,
&:hover {
border-color: $highlight-text-color;
border-width: 4px;
}
&:checked {
background-color: $highlight-text-color;
border-color: $highlight-text-color;
}
&::-moz-focus-inner {
outline: 0 !important;
border: 0;
}
&:focus,
&:active {
outline: 0 !important;
}
&:disabled {
opacity: 0.5;
}
}
}
&__footer {
display: flex;
flex-direction: column;