1aa06bc041
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
63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<a id={elementId}
|
|
class="status-relative-date {isStatusInNotification ? 'status-in-notification' : '' }"
|
|
href="/statuses/{originalStatusId}"
|
|
rel="prefetch"
|
|
{tabindex}
|
|
>
|
|
<time datetime={createdAtDate} title={formattedDateTitle}
|
|
aria-label={createdAtLabel}>
|
|
{formattedDate}
|
|
</time>
|
|
</a>
|
|
<style>
|
|
.status-relative-date {
|
|
grid-area: relative-date;
|
|
align-self: center;
|
|
margin-left: 5px;
|
|
margin-right: 10px;
|
|
font-size: 1.1em;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
.status-relative-date, .status-relative-date:hover, .status-relative-date:visited {
|
|
color: var(--deemphasized-text-color);
|
|
}
|
|
|
|
.status-relative-date.status-in-notification,
|
|
.status-relative-date.status-in-notification:hover,
|
|
.status-relative-date.status-in-notification:visited {
|
|
color: var(--very-deemphasized-text-color);
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import { formatIntl } from '../../_utils/formatIntl'
|
|
|
|
export default {
|
|
computed: {
|
|
elementId: ({ uuid }) => `status-relative-date-${uuid}`,
|
|
tabindex: ({ $disableTapOnStatus }) => (
|
|
// If you can't tap on the entire status, then you need some way to click on it. Otherwise it's
|
|
// just a duplicate link in the focus order.
|
|
$disableTapOnStatus ? '0' : '-1'
|
|
),
|
|
formattedDateTitle: ({ $disableRelativeTimestamps, absoluteFormattedDate }) => {
|
|
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>
|