feat: add a Wellness option to show absolute timestamps instead of relative (#2014)

Relative timestamps can cause you to feel that things are especially
interesting because they are happening "right now"; the effect is
lessened if you see absolute timestamps instead.

This fixes #2011
This commit is contained in:
Calvin Walton 2021-03-21 18:06:45 -04:00 committed by GitHub
parent d044e12aee
commit 1aa06bc041
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 6 deletions

View File

@ -392,6 +392,9 @@ export default {
hideReblogCount: 'Hide boost counts', hideReblogCount: 'Hide boost counts',
hideFavoriteCount: 'Hide favorite counts', hideFavoriteCount: 'Hide favorite counts',
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
immediacy: 'Immediacy',
showAbsoluteTimestamps: 'Show absolute timestamps instead of relative timestamps',
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

View File

@ -4,9 +4,9 @@
rel="prefetch" rel="prefetch"
{tabindex} {tabindex}
> >
<time datetime={createdAtDate} title={absoluteFormattedDate} <time datetime={createdAtDate} title={formattedDateTitle}
aria-label={createdAtLabel}> aria-label={createdAtLabel}>
{timeagoFormattedDate} {formattedDate}
</time> </time>
</a> </a>
<style> <style>
@ -41,9 +41,23 @@
// just a duplicate link in the focus order. // just a duplicate link in the focus order.
$disableTapOnStatus ? '0' : '-1' $disableTapOnStatus ? '0' : '-1'
), ),
createdAtLabel: ({ timeagoFormattedDate }) => ( formattedDateTitle: ({ $disableRelativeTimestamps, absoluteFormattedDate }) => {
formatIntl('intl.clickToShowThread', { time: timeagoFormattedDate }) if ($disableRelativeTimestamps) {
) return ''
} else {
return absoluteFormattedDate
}
},
createdAtLabel: ({ formattedDate }) => (
formatIntl('intl.clickToShowThread', { time: formattedDate })
),
formattedDate: ({ $disableRelativeTimestamps, timeagoFormattedDate, absoluteFormattedDate }) => {
if ($disableRelativeTimestamps) {
return absoluteFormattedDate
} else {
return timeagoFormattedDate
}
}
} }
} }
</script> </script>

View File

@ -33,7 +33,7 @@
</label> </label>
</form> </form>
<h2>{intl.notifications}</h2> <h2>{intl.immediacy}</h2>
<form class="ui-settings"> <form class="ui-settings">
<label class="setting-group"> <label class="setting-group">
@ -41,6 +41,11 @@
bind:checked="$disableNotificationBadge" on:change="onChange(event)"> bind:checked="$disableNotificationBadge" on:change="onChange(event)">
{intl.hideUnread} {intl.hideUnread}
</label> </label>
<label class="settings-group">
<input type="checkbox" id="choice-disable-relative-timestamps"
bind:checked="$disableRelativeTimestamps" on:change="onChange(event)">
{intl.showAbsoluteTimestamps}
</label>
</form> </form>
<InfoAside className="wellness-aside"> <InfoAside className="wellness-aside">
@ -90,12 +95,14 @@
disableReblogCounts, disableReblogCounts,
disableFavCounts, disableFavCounts,
disableNotificationBadge, disableNotificationBadge,
disableRelativeTimestamps,
enableGrayscale enableGrayscale
} = this.store.get() } = this.store.get()
document.querySelector('#choice-check-all').checked = disableFollowerCounts && document.querySelector('#choice-check-all').checked = disableFollowerCounts &&
disableReblogCounts && disableReblogCounts &&
disableFavCounts && disableFavCounts &&
disableNotificationBadge && disableNotificationBadge &&
disableRelativeTimestamps &&
enableGrayscale enableGrayscale
}, },
onCheckAllChange (e) { onCheckAllChange (e) {
@ -105,6 +112,7 @@
disableReblogCounts: checked, disableReblogCounts: checked,
disableFavCounts: checked, disableFavCounts: checked,
disableNotificationBadge: checked, disableNotificationBadge: checked,
disableRelativeTimestamps: checked,
enableGrayscale: checked enableGrayscale: checked
}) })
this.store.save() this.store.save()

View File

@ -21,6 +21,7 @@ const persistedState = {
disableLongAriaLabels: false, disableLongAriaLabels: false,
disableNotificationBadge: false, disableNotificationBadge: false,
disableReblogCounts: false, disableReblogCounts: false,
disableRelativeTimestamps: false,
disableTapOnStatus: false, disableTapOnStatus: false,
enableGrayscale: false, enableGrayscale: false,
hideCards: false, hideCards: false,