diff --git a/src/routes/_actions/contentWarnings.js b/src/routes/_actions/contentWarnings.js index 6cca8008..f8463597 100644 --- a/src/routes/_actions/contentWarnings.js +++ b/src/routes/_actions/contentWarnings.js @@ -6,6 +6,7 @@ export function toggleContentWarningShown (realm) { const newShown = !shown store.setComposeData(realm, { contentWarning: newShown ? contentWarning : '', - contentWarningShown: newShown + contentWarningShown: newShown, + sensitive: contentWarning && newShown // toggling content warning automatically toggles sensitive media }) } diff --git a/src/routes/_components/compose/ComposeBox.html b/src/routes/_components/compose/ComposeBox.html index d1622c76..a8197166 100644 --- a/src/routes/_components/compose/ComposeBox.html +++ b/src/routes/_components/compose/ComposeBox.html @@ -22,6 +22,7 @@ + ({ size: undefined, @@ -173,7 +177,8 @@ ), overLimit: ({ length, $maxStatusChars }) => length > $maxStatusChars, contentWarningShown: ({ composeData }) => composeData.contentWarningShown, - contentWarning: ({ composeData }) => composeData.contentWarning || '' + contentWarning: ({ composeData }) => composeData.contentWarning || '', + sensitive: ({ composeData }) => !!composeData.sensitive }, transitions: { slide @@ -196,9 +201,9 @@ overLimit, inReplyToUuid, // typical replies, using Pinafore-specific uuid inReplyToId, // delete-and-redraft replies, using standard id - poll + poll, + sensitive } = this.get() - const sensitive = media.length && !!contentWarning const mediaIds = media.map(_ => _.data.id) const mediaDescriptions = media.map(_ => _.description) const mediaFocalPoints = media.map(_ => [_.focusX, _.focusY]) diff --git a/src/routes/_components/compose/ComposeContentWarning.html b/src/routes/_components/compose/ComposeContentWarning.html index 04565f97..ba6499f6 100644 --- a/src/routes/_components/compose/ComposeContentWarning.html +++ b/src/routes/_components/compose/ComposeContentWarning.html @@ -41,7 +41,10 @@ const { realm } = this.get() this.observe('rawText', rawText => { updateContentWarningInStore(() => { - this.store.setComposeData(realm, { contentWarning: rawText }) + this.store.setComposeData(realm, { + sensitive: !!rawText, // toggling the content warning automatically toggles sensitive media + contentWarning: rawText + }) this.store.save() }) }, { init: false }) diff --git a/src/routes/_components/compose/ComposeMediaItem.html b/src/routes/_components/compose/ComposeMediaItem.html index aa5cf719..eed33f4b 100644 --- a/src/routes/_components/compose/ComposeMediaItem.html +++ b/src/routes/_components/compose/ComposeMediaItem.html @@ -113,6 +113,12 @@ max-height: 7vh; } } + + @media (max-width: 320px) { + .compose-media-realm-dialog .compose-media-alt-input { + display: none; /* too small to show this - use the edit button instead */ + } + } diff --git a/tests/spec/109-compose-media.js b/tests/spec/109-compose-media.js index 7ecd4702..f88fe2fa 100644 --- a/tests/spec/109-compose-media.js +++ b/tests/spec/109-compose-media.js @@ -10,7 +10,8 @@ import { homeNavButton, mediaButton, notificationsNavButton, - uploadKittenImage + uploadKittenImage, + composeMediaSensitiveCheckbox, getNthStatusAndSensitiveImage, getNthStatusAndSensitiveButton, getNthStatusContent } from '../utils' import { loginAsFoobar } from '../roles' @@ -97,3 +98,20 @@ test('can post a status with empty content if there is media', async t => { await t.click(composeButton) .expect(getNthStatusAndImage(1, 1).getAttribute('alt')).eql('just an image!') }) + +test('can make an image sensitive without adding a CW', async t => { + await loginAsFoobar(t) + await t + .typeText(composeInput, 'this is just a kitteh') + await (uploadKittenImage(2)()) + await t + .typeText(getNthMediaAltInput(1), 'sensitive kitteh') + .expect(composeMediaSensitiveCheckbox.checked).notOk() + .click(composeMediaSensitiveCheckbox) + .expect(composeMediaSensitiveCheckbox.checked).ok() + .click(composeButton) + .expect(getNthStatusContent(1).innerText).contains('this is just a kitteh') + .expect(getNthStatusAndSensitiveImage(1, 1).getAttribute('src')).match(/^blob:http:\/\/localhost/) + .click(getNthStatusAndSensitiveButton(1, 1)) + .expect(getNthStatusAndImage(1, 1).getAttribute('alt')).eql('sensitive kitteh') +}) diff --git a/tests/utils.js b/tests/utils.js index eebf13ac..8e06f0aa 100644 --- a/tests/utils.js +++ b/tests/utils.js @@ -71,6 +71,8 @@ export const composePollExpiryOption = $('.compose-poll select option') export const composePollExpiryInDialog = $('.modal-dialog .compose-poll select') export const composePollAddButton = $('.compose-poll button:last-of-type') +export const composeMediaSensitiveCheckbox = $('.compose-media-sensitive input') + export const postPrivacyDialogButtonUnlisted = $('[aria-label="Post privacy dialog"] li:nth-child(2) button') export const accountProfileFilterStatuses = $('.account-profile-filters li:nth-child(1)') @@ -352,6 +354,14 @@ export function getNthStatusAndImage (nStatus, nImage) { return $(`${getNthStatusSelector(nStatus)} .status-media .show-image-button:nth-child(${nImage}) img`) } +export function getNthStatusAndSensitiveButton (nStatus, nImage) { + return $(`${getNthStatusSelector(nStatus)} .status-sensitive-media-button:nth-child(${nImage})`) +} + +export function getNthStatusAndSensitiveImage (nStatus, nImage) { + return $(`${getNthStatusSelector(nStatus)} .status-media button:nth-child(${nImage}) img`) +} + export function getFirstVisibleStatus () { return $('.list-item > article[aria-posinset]').nth(0) }