From 380f4fc95cb63fa374644c7ca09b939df9181321 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 22 Feb 2024 23:24:23 +0100 Subject: [PATCH] Reimplement sensitive checkbox --- .../compose/components/sensitive_button.jsx | 57 +++++++++++++++++++ .../compose/components/upload_form.jsx | 4 ++ .../compose/containers/upload_container.js | 2 +- .../flavours/glitch/locales/en.json | 3 + .../flavours/glitch/styles/components.scss | 42 ++++++++++++++ 5 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx diff --git a/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx new file mode 100644 index 0000000000..37debf9dd7 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx @@ -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 ( +
+ +
+ ); +}; diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx index 46bac7823b..5c6406c3ba 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx @@ -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 { ))} )} + + {!mediaIds.isEmpty() && } ); } diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js index a17a691444..5afe6eaa1a 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js @@ -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 => ({ diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 7321f5ac3d..b513e837b9 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -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:", diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 5be0e85606..ffbf0c2aa8 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -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;