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;