mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-08-16 23:10:38 +03:00
relative times
This commit is contained in:
parent
8abe018acd
commit
e1a18b057e
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
Before Width: | Height: | Size: 194 B After Width: | Height: | Size: 184 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 183 B |
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import {Link} from "@reach/router";
|
||||
import styled from 'react-emotion';
|
||||
import Icon from '../../components/Icon';
|
||||
@ -13,6 +14,28 @@ import '../../styles/gradient.css';
|
||||
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
|
||||
function getRelativeTime (time) {
|
||||
const currentTime = moment();
|
||||
const targetTime = moment(time);
|
||||
const diffMinutes = currentTime.diff(targetTime, 'minutes');
|
||||
if (diffMinutes < 1)
|
||||
return 'Just now';
|
||||
if (diffMinutes < 5)
|
||||
return 'Few minutes ago';
|
||||
if (diffMinutes < 60)
|
||||
return diffMinutes + ' minutes ago';
|
||||
if (diffMinutes < 60 * 24)
|
||||
return Math.floor(diffMinutes / 60) + ' hours ago';
|
||||
|
||||
const diffDays = currentTime.diff(targetTime, 'days');
|
||||
if (diffDays === 1)
|
||||
return 'Yesterday';
|
||||
if (diffDays <= 7)
|
||||
return 'Last ' + targetTime.format('dddd');
|
||||
// @TODO implement longer diffs
|
||||
return 'Long time ago';
|
||||
}
|
||||
|
||||
const FixedContainer = styled('div')({
|
||||
position: 'fixed'
|
||||
});
|
||||
@ -263,7 +286,6 @@ const EnhancedSearchInput = withOnEnter(SearchInput);
|
||||
const NotificationRow = styled('tr')({
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
// borderBottom: '1px solid #f2f2f2',
|
||||
display: 'block',
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
@ -284,12 +306,21 @@ const NotificationTab = styled(Tab)({
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
const Timestamp = styled('span')({
|
||||
position: 'relative',
|
||||
margin: 0,
|
||||
marginLeft: 10,
|
||||
fontSize: 11,
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
const NotificationTitle = styled('span')({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
}, ({img}) => img && ({
|
||||
paddingLeft: 20,
|
||||
'::before': {
|
||||
content: "''",
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
background: `url(${img}) center center no-repeat`,
|
||||
@ -590,13 +621,14 @@ export default function Scene ({
|
||||
{getPRIssueIcon(n.type, n.reasons)}
|
||||
</div>
|
||||
</TableItem>
|
||||
<TableItem width={400} onClick={() => {
|
||||
<TableItem style={{height: 36}} width={400} onClick={() => {
|
||||
window.open(n.url);
|
||||
onStageThread(n.id)
|
||||
}}>
|
||||
<NotificationTitle>
|
||||
<PRIssue>{n.name}</PRIssue>
|
||||
</NotificationTitle>
|
||||
<Timestamp>{getRelativeTime(n.updated_at)}</Timestamp>
|
||||
</TableItem>
|
||||
{/* <TableItem width={200}>
|
||||
<Repository>{n.reasons.map(r => r.reason).join(', ')}</Repository>
|
||||
|
Loading…
Reference in New Issue
Block a user