mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +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 React from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
import {Link} from "@reach/router";
|
import {Link} from "@reach/router";
|
||||||
import styled from 'react-emotion';
|
import styled from 'react-emotion';
|
||||||
import Icon from '../../components/Icon';
|
import Icon from '../../components/Icon';
|
||||||
@ -13,6 +14,28 @@ import '../../styles/gradient.css';
|
|||||||
|
|
||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
/* 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')({
|
const FixedContainer = styled('div')({
|
||||||
position: 'fixed'
|
position: 'fixed'
|
||||||
});
|
});
|
||||||
@ -263,7 +286,6 @@ const EnhancedSearchInput = withOnEnter(SearchInput);
|
|||||||
const NotificationRow = styled('tr')({
|
const NotificationRow = styled('tr')({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
// borderBottom: '1px solid #f2f2f2',
|
|
||||||
display: 'block',
|
display: 'block',
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -284,12 +306,21 @@ const NotificationTab = styled(Tab)({
|
|||||||
margin: 0,
|
margin: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const Timestamp = styled('span')({
|
||||||
|
position: 'relative',
|
||||||
|
margin: 0,
|
||||||
|
marginLeft: 10,
|
||||||
|
fontSize: 11,
|
||||||
|
opacity: 0.5,
|
||||||
|
});
|
||||||
|
|
||||||
const NotificationTitle = styled('span')({
|
const NotificationTitle = styled('span')({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
display: 'block'
|
||||||
}, ({img}) => img && ({
|
}, ({img}) => img && ({
|
||||||
paddingLeft: 20,
|
paddingLeft: 20,
|
||||||
'::before': {
|
'::before': {
|
||||||
content: "''",
|
content: '""',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
background: `url(${img}) center center no-repeat`,
|
background: `url(${img}) center center no-repeat`,
|
||||||
@ -590,13 +621,14 @@ export default function Scene ({
|
|||||||
{getPRIssueIcon(n.type, n.reasons)}
|
{getPRIssueIcon(n.type, n.reasons)}
|
||||||
</div>
|
</div>
|
||||||
</TableItem>
|
</TableItem>
|
||||||
<TableItem width={400} onClick={() => {
|
<TableItem style={{height: 36}} width={400} onClick={() => {
|
||||||
window.open(n.url);
|
window.open(n.url);
|
||||||
onStageThread(n.id)
|
onStageThread(n.id)
|
||||||
}}>
|
}}>
|
||||||
<NotificationTitle>
|
<NotificationTitle>
|
||||||
<PRIssue>{n.name}</PRIssue>
|
<PRIssue>{n.name}</PRIssue>
|
||||||
</NotificationTitle>
|
</NotificationTitle>
|
||||||
|
<Timestamp>{getRelativeTime(n.updated_at)}</Timestamp>
|
||||||
</TableItem>
|
</TableItem>
|
||||||
{/* <TableItem width={200}>
|
{/* <TableItem width={200}>
|
||||||
<Repository>{n.reasons.map(r => r.reason).join(', ')}</Repository>
|
<Repository>{n.reasons.map(r => r.reason).join(', ')}</Repository>
|
||||||
|
Loading…
Reference in New Issue
Block a user