fix: use day-only time format for wellness setting (#2021)
* fix: use day-only time format for wellness setting * fix: tweak intl strings [skip ci] * test: add test
This commit is contained in:
parent
1aa06bc041
commit
081df2bf82
|
@ -394,7 +394,7 @@ export default {
|
||||||
hideUnread: 'Hide unread notifications count (i.e. the red dot)',
|
hideUnread: 'Hide unread notifications count (i.e. the red dot)',
|
||||||
// The quality that makes something seem important or interesting because it seems to be happening now
|
// The quality that makes something seem important or interesting because it seems to be happening now
|
||||||
immediacy: 'Immediacy',
|
immediacy: 'Immediacy',
|
||||||
showAbsoluteTimestamps: 'Show absolute timestamps instead of relative timestamps',
|
showAbsoluteTimestamps: 'Show absolute timestamps (e.g. "March 3rd") instead of relative timestamps (e.g. "5 minutes ago")',
|
||||||
ui: 'UI',
|
ui: 'UI',
|
||||||
grayscaleMode: 'Grayscale mode',
|
grayscaleMode: 'Grayscale mode',
|
||||||
wellnessFooter: `These settings are partly based on guidelines from the
|
wellnessFooter: `These settings are partly based on guidelines from the
|
||||||
|
|
|
@ -35,7 +35,7 @@ function cleanupText (text) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent,
|
export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent,
|
||||||
timeagoFormattedDate, spoilerText, showContent,
|
shortInlineFormattedDate, spoilerText, showContent,
|
||||||
reblog, notification, visibility, omitEmojiInDisplayNames,
|
reblog, notification, visibility, omitEmojiInDisplayNames,
|
||||||
disableLongAriaLabels, showMedia, showPoll) {
|
disableLongAriaLabels, showMedia, showPoll) {
|
||||||
const originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames)
|
const originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames)
|
||||||
|
@ -58,7 +58,7 @@ export function getAccessibleLabelForStatus (originalAccount, account, plainText
|
||||||
contentTextToShow,
|
contentTextToShow,
|
||||||
mediaTextToShow,
|
mediaTextToShow,
|
||||||
pollTextToShow,
|
pollTextToShow,
|
||||||
timeagoFormattedDate,
|
shortInlineFormattedDate,
|
||||||
`@${originalAccount.acct}`,
|
`@${originalAccount.acct}`,
|
||||||
privacyText,
|
privacyText,
|
||||||
getReblogText(reblog, account, omitEmojiInDisplayNames)
|
getReblogText(reblog, account, omitEmojiInDisplayNames)
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
|
import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
|
||||||
import { measureText } from '../../_utils/measureText'
|
import { measureText } from '../../_utils/measureText'
|
||||||
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
|
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
|
||||||
import { absoluteDateFormatter } from '../../_utils/formatters'
|
import { absoluteDateFormatter, dayOnlyAbsoluteDateFormatter } from '../../_utils/formatters'
|
||||||
import { composeNewStatusMentioning } from '../../_actions/mention'
|
import { composeNewStatusMentioning } from '../../_actions/mention'
|
||||||
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
|
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
|
||||||
import { addEmojiTooltips } from '../../_utils/addEmojiTooltips'
|
import { addEmojiTooltips } from '../../_utils/addEmojiTooltips'
|
||||||
|
@ -277,15 +277,19 @@
|
||||||
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
|
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
|
||||||
createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
|
createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
|
||||||
absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter.format(createdAtDateTS),
|
absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter.format(createdAtDateTS),
|
||||||
timeagoFormattedDate: ({ createdAtDateTS, $now }) => formatTimeagoDate(createdAtDateTS, $now),
|
shortInlineFormattedDate: ({ createdAtDateTS, $now, $disableRelativeTimestamps }) => (
|
||||||
|
$disableRelativeTimestamps
|
||||||
|
? dayOnlyAbsoluteDateFormatter.format(createdAtDateTS)
|
||||||
|
: formatTimeagoDate(createdAtDateTS, $now)
|
||||||
|
),
|
||||||
reblog: ({ status }) => status.reblog,
|
reblog: ({ status }) => status.reblog,
|
||||||
ariaLabel: ({
|
ariaLabel: ({
|
||||||
originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
|
originalAccount, account, plainTextContent, shortInlineFormattedDate, spoilerText,
|
||||||
showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
||||||
showMedia, showPoll
|
showMedia, showPoll
|
||||||
}) => (
|
}) => (
|
||||||
getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
|
getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
|
||||||
timeagoFormattedDate, spoilerText, showContent,
|
shortInlineFormattedDate, spoilerText, showContent,
|
||||||
reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
||||||
showMedia, showPoll
|
showMedia, showPoll
|
||||||
)
|
)
|
||||||
|
@ -309,10 +313,10 @@
|
||||||
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
||||||
// These timestamp params may change every 10 seconds due to now() polling, so keep them
|
// These timestamp params may change every 10 seconds due to now() polling, so keep them
|
||||||
// separate from the generic `params` list to avoid costly recomputes.
|
// separate from the generic `params` list to avoid costly recomputes.
|
||||||
timestampParams: ({ createdAtDate, createdAtDateTS, timeagoFormattedDate, absoluteFormattedDate }) => ({
|
timestampParams: ({ createdAtDate, createdAtDateTS, shortInlineFormattedDate, absoluteFormattedDate }) => ({
|
||||||
createdAtDate,
|
createdAtDate,
|
||||||
createdAtDateTS,
|
createdAtDateTS,
|
||||||
timeagoFormattedDate,
|
shortInlineFormattedDate,
|
||||||
absoluteFormattedDate
|
absoluteFormattedDate
|
||||||
}),
|
}),
|
||||||
// This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these
|
// This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these
|
||||||
|
|
|
@ -4,9 +4,9 @@
|
||||||
rel="prefetch"
|
rel="prefetch"
|
||||||
{tabindex}
|
{tabindex}
|
||||||
>
|
>
|
||||||
<time datetime={createdAtDate} title={formattedDateTitle}
|
<time datetime={createdAtDate} title={absoluteFormattedDate}
|
||||||
aria-label={createdAtLabel}>
|
aria-label={createdAtLabel}>
|
||||||
{formattedDate}
|
{shortInlineFormattedDate}
|
||||||
</time>
|
</time>
|
||||||
</a>
|
</a>
|
||||||
<style>
|
<style>
|
||||||
|
@ -41,23 +41,9 @@
|
||||||
// just a duplicate link in the focus order.
|
// just a duplicate link in the focus order.
|
||||||
$disableTapOnStatus ? '0' : '-1'
|
$disableTapOnStatus ? '0' : '-1'
|
||||||
),
|
),
|
||||||
formattedDateTitle: ({ $disableRelativeTimestamps, absoluteFormattedDate }) => {
|
|
||||||
if ($disableRelativeTimestamps) {
|
|
||||||
return ''
|
|
||||||
} else {
|
|
||||||
return absoluteFormattedDate
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createdAtLabel: ({ formattedDate }) => (
|
createdAtLabel: ({ formattedDate }) => (
|
||||||
formatIntl('intl.clickToShowThread', { time: formattedDate })
|
formatIntl('intl.clickToShowThread', { time: formattedDate })
|
||||||
),
|
)
|
||||||
formattedDate: ({ $disableRelativeTimestamps, timeagoFormattedDate, absoluteFormattedDate }) => {
|
|
||||||
if ($disableRelativeTimestamps) {
|
|
||||||
return absoluteFormattedDate
|
|
||||||
} else {
|
|
||||||
return timeagoFormattedDate
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,3 +15,9 @@ export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
minute: '2-digit'
|
minute: '2-digit'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const dayOnlyAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
|
28
tests/spec/041-wellness.js
Normal file
28
tests/spec/041-wellness.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import {
|
||||||
|
settingsNavButton,
|
||||||
|
homeNavButton,
|
||||||
|
getFirstVisibleStatus,
|
||||||
|
getUrl,
|
||||||
|
disableRelativeTimestamps, getNthStatus, getNthStatusRelativeDate
|
||||||
|
} from '../utils'
|
||||||
|
import { loginAsFoobar } from '../roles'
|
||||||
|
import { Selector as $ } from 'testcafe'
|
||||||
|
|
||||||
|
fixture`041-wellness.js`
|
||||||
|
.page`http://localhost:4002`
|
||||||
|
|
||||||
|
test('Can disable relative time stamps', async t => {
|
||||||
|
await loginAsFoobar(t)
|
||||||
|
await t
|
||||||
|
.expect(getFirstVisibleStatus().exists).ok()
|
||||||
|
.expect(getNthStatusRelativeDate(1).innerText).match(/\bago\b/i)
|
||||||
|
.click(settingsNavButton)
|
||||||
|
.click($('a').withText('Wellness'))
|
||||||
|
.click(disableRelativeTimestamps)
|
||||||
|
.expect(disableRelativeTimestamps.checked).ok()
|
||||||
|
.click(homeNavButton)
|
||||||
|
.expect(getUrl()).eql('http://localhost:4002/')
|
||||||
|
.expect(getFirstVisibleStatus().exists).ok()
|
||||||
|
.expect(getNthStatusRelativeDate(1).innerText).notMatch(/\bago\b/i)
|
||||||
|
.expect(getNthStatus(1).getAttribute('aria-label')).notMatch(/\bago\b/i)
|
||||||
|
})
|
|
@ -55,6 +55,7 @@ export const neverMarkMediaSensitiveInput = $('#choice-never-mark-media-sensitiv
|
||||||
export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
|
export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
|
||||||
export const disableInfiniteScroll = $('#choice-disable-infinite-scroll')
|
export const disableInfiniteScroll = $('#choice-disable-infinite-scroll')
|
||||||
export const disableUnreadNotifications = $('#choice-disable-unread-notification-counts')
|
export const disableUnreadNotifications = $('#choice-disable-unread-notification-counts')
|
||||||
|
export const disableRelativeTimestamps = $('#choice-disable-relative-timestamps')
|
||||||
export const leftRightChangesFocus = $('#choice-left-right-focus')
|
export const leftRightChangesFocus = $('#choice-left-right-focus')
|
||||||
export const disableHotkeys = $('#choice-disable-hotkeys')
|
export const disableHotkeys = $('#choice-disable-hotkeys')
|
||||||
export const dialogOptionsOption = $('.modal-dialog button')
|
export const dialogOptionsOption = $('.modal-dialog button')
|
||||||
|
|
Loading…
Reference in a new issue