feat: date title shows absolute date (#890)

fixes #759
This commit is contained in:
Nolan Lawson 2019-01-13 15:56:39 -08:00 committed by GitHub
parent 8f84ae5a51
commit ef44c19e8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 40 deletions

View file

@ -126,6 +126,7 @@
import { htmlToPlainText } from '../../_utils/htmlToPlainText'
import { measureText } from '../../_utils/measureText'
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
import { absoluteDateFormatter } from '../../_utils/formatters'
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@ -241,6 +242,7 @@
return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
},
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
absoluteFormattedDate: ({ createdAtDate }) => absoluteDateFormatter.format(new Date(createdAtDate)),
timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate),
reblog: ({ status }) => status.reblog,
ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
@ -267,7 +269,7 @@
account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
originalAccount, originalAccountId, spoilerShown, visibility, replyShown,
replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
createdAtDate, timeagoFormattedDate, shortcutScope }) => ({
createdAtDate, timeagoFormattedDate, shortcutScope, absoluteFormattedDate }) => ({
notification,
notificationId,
status,
@ -290,7 +292,8 @@
inReplyToId,
createdAtDate,
timeagoFormattedDate,
shortcutScope
shortcutScope,
absoluteFormattedDate
})
}
}

View file

@ -2,9 +2,11 @@
<ExternalLink className="status-absolute-date"
href={originalStatus.url}
showIcon={true}
ariaLabel="{formattedDate} (opens in new window)"
ariaLabel="{displayAbsoluteFormattedDate} (opens in new window)"
>
<time datetime={createdAtDate} title={formattedDate}>{formattedDate}</time>
<time datetime={createdAtDate} title={absoluteFormattedDate}>
{displayAbsoluteFormattedDate}
</time>
</ExternalLink>
{#if applicationName}
{#if applicationWebsite}
@ -132,7 +134,7 @@
<script>
import ExternalLink from '../ExternalLink.html'
import { store } from '../../_store/store'
import { getDateFormatter, getShortDateFormatter } from '../../_utils/formatters'
import { absoluteDateFormatter, shortAbsoluteDateFormatter } from '../../_utils/formatters'
import { on } from '../../_utils/eventBus'
export default {
@ -170,10 +172,9 @@
}
return originalStatus.favourites_count || 0
},
formattedDate: ({ createdAtDate, $isMobileSize }) => {
let formatter = $isMobileSize ? getShortDateFormatter() : getDateFormatter()
return formatter.format(new Date(createdAtDate))
},
displayAbsoluteFormattedDate: ({ createdAtDate, $isMobileSize }) => (
$isMobileSize ? shortAbsoluteDateFormatter : absoluteDateFormatter).format(new Date(createdAtDate)
),
reblogsLabel: ({ numReblogs }) => {
// TODO: intl
return numReblogs === 1
@ -191,4 +192,4 @@
ExternalLink
}
}
</script>
</script>

View file

@ -2,7 +2,7 @@
href="/statuses/{originalStatusId}"
focus-key={focusKey}
>
<time datetime={createdAtDate} title={timeagoFormattedDate}
<time datetime={createdAtDate} title={absoluteFormattedDate}
aria-label="{timeagoFormattedDate} click to show thread">
{timeagoFormattedDate}
</time>
@ -34,4 +34,4 @@
focusKey: ({ uuid }) => `status-relative-date-${uuid}`
}
}
</script>
</script>

View file

@ -1,29 +1,15 @@
let dateFormatter
export const absoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
export function getDateFormatter () {
if (!dateFormatter) {
dateFormatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
}
return dateFormatter
}
let shortDateFormatter
export function getShortDateFormatter () {
if (!shortDateFormatter) {
shortDateFormatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
}
return shortDateFormatter
}
export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})