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

View File

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

View File

@ -2,7 +2,7 @@
href="/statuses/{originalStatusId}" href="/statuses/{originalStatusId}"
focus-key={focusKey} focus-key={focusKey}
> >
<time datetime={createdAtDate} title={timeagoFormattedDate} <time datetime={createdAtDate} title={absoluteFormattedDate}
aria-label="{timeagoFormattedDate} click to show thread"> aria-label="{timeagoFormattedDate} click to show thread">
{timeagoFormattedDate} {timeagoFormattedDate}
</time> </time>
@ -34,4 +34,4 @@
focusKey: ({ uuid }) => `status-relative-date-${uuid}` 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 () { export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
if (!dateFormatter) { year: 'numeric',
dateFormatter = new Intl.DateTimeFormat('en-US', { month: 'short',
year: 'numeric', day: 'numeric',
month: 'long', hour: '2-digit',
day: 'numeric', minute: '2-digit'
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
}