mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +03:00
s
This commit is contained in:
parent
e4fc9dddaa
commit
e88b61e9f8
@ -474,7 +474,6 @@ class NotificationsPage extends React.Component {
|
||||
}
|
||||
|
||||
const todayLastWeek = this.state.currentTime.clone().subtract(1, 'week');
|
||||
|
||||
const stagedTodayCount = this.props.storageApi.getStat('stagedCount')[0];
|
||||
const stagedTodayLastWeekCount = this.props.storageApi.getStat(
|
||||
'stagedCount',
|
||||
|
@ -237,13 +237,13 @@ class NotificationsPage extends React.Component {
|
||||
|
||||
enhancedOnStageThread = (thread_id, repository) => {
|
||||
this.props.storageApi.incrStat('stagedCount');
|
||||
this.props.storageApi.incrStat(repository + '-stagedCount');
|
||||
this.props.storageApi.incrStat(repository + '-stagedCount', '__REPO__');
|
||||
this.props.notificationsApi.stageThread(thread_id);
|
||||
}
|
||||
|
||||
enhancedOnMarkAsRead = (thread_id, repository) => {
|
||||
this.props.storageApi.incrStat('stagedCount');
|
||||
this.props.storageApi.incrStat(repository + '-stagedCount');
|
||||
this.props.storageApi.incrStat(repository + '-stagedCount', '__REPO__');
|
||||
this.props.notificationsApi.markAsRead(thread_id);
|
||||
}
|
||||
|
||||
@ -474,6 +474,8 @@ class NotificationsPage extends React.Component {
|
||||
lastNumbered = 0;
|
||||
}
|
||||
|
||||
|
||||
const reposReadCounts = this.props.storageApi.getAllRepoStagedCounts();
|
||||
const todayLastWeek = this.state.currentTime.clone().subtract(1, 'week');
|
||||
|
||||
const stagedTodayCount = this.props.storageApi.getStat('stagedCount')[0];
|
||||
@ -535,6 +537,7 @@ class NotificationsPage extends React.Component {
|
||||
view={this.state.activeStatus}
|
||||
setView={this.onSetActiveStatus}
|
||||
user={this.state.user}
|
||||
reposReadCounts={reposReadCounts}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -21,6 +21,7 @@ import {Reasons, Badges} from '../../../constants/reasons';
|
||||
import {withOnEnter} from '../../../enhance';
|
||||
import {Sort, View} from '../index';
|
||||
|
||||
const BLUE = '#457cff';
|
||||
const WHITE = 'rgb(255, 254, 252)';
|
||||
const COLLAPSED_WIDTH = '72px';
|
||||
const EXPANDED_WIDTH = '286px';
|
||||
@ -210,6 +211,7 @@ const ContentItem = styled(Item)`
|
||||
min-height: calc(100vh - ${COLLAPSED_WIDTH});
|
||||
width: calc(100% - ${COLLAPSED_WIDTH});
|
||||
background: #f7f6f3;
|
||||
padding-bottom: 48px;
|
||||
border-left: 1px solid #E5E6EB;
|
||||
`;
|
||||
|
||||
@ -247,9 +249,9 @@ const ScoreDiff = styled(CardTitle)`
|
||||
top: 30px;
|
||||
right: 24px;
|
||||
opacity: ${props => props.show ? '1' : '0'};
|
||||
// color: ${props => props.under ? '#ef055f' : '#457cff'};
|
||||
// color: ${props => props.under ? '#457cff' : '#47af4c'};
|
||||
color: ${props => props.under ? '#bfc5d1' : '#457cff'};
|
||||
// color: ${props => props.under ? '#ef055f' : BLUE};
|
||||
// color: ${props => props.under ? BLUE : '#47af4c'};
|
||||
color: ${props => props.under ? '#bfc5d1' : BLUE};
|
||||
transition: all 0ms ease;
|
||||
`;
|
||||
|
||||
@ -354,7 +356,7 @@ const SearchField = styled('div')`
|
||||
border: 1px solid #bfc5d1aa;
|
||||
}
|
||||
&:focus-within {
|
||||
border: 1px solid #457cff;
|
||||
border: 1px solid ${BLUE};
|
||||
box-shadow: rgba(84,70,35,0.01) 0px 2px 19px 8px, rgba(84, 70, 35, 0.11) 0px 2px 12px;
|
||||
}
|
||||
i {
|
||||
@ -712,6 +714,40 @@ const Divider = styled('div')`
|
||||
margin: 0 8px;
|
||||
`;
|
||||
|
||||
const RepoBarContainer = styled('div')`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 22px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 10px 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Bar = styled('div')`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 8px;
|
||||
background: #e5e7ea;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: ${props => Math.max(Math.min((props.value * 100), 100), 0)}%;
|
||||
border-radius: 8px;
|
||||
background: ${props => props.color};
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
function PageItem ({children, onChange, ...props}) {
|
||||
return (
|
||||
<PageItemComponent
|
||||
@ -781,6 +817,19 @@ function CustomTick ({x, y, payload}) {
|
||||
);
|
||||
}
|
||||
|
||||
function RepoBar ({name, value, max, colorOfValue}) {
|
||||
return (
|
||||
<RepoBarContainer>
|
||||
<p>@{name}</p>
|
||||
<Bar
|
||||
color={BLUE}
|
||||
// color={colorOfValue(value)}
|
||||
value={value / max}
|
||||
/>
|
||||
</RepoBarContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function ReadCountGraph ({data, onHover, onExit}) {
|
||||
return (
|
||||
<LineChart
|
||||
@ -896,6 +945,7 @@ export default function Scene ({
|
||||
onArchiveThread,
|
||||
readStatistics,
|
||||
readTodayCount,
|
||||
reposReadCounts,
|
||||
readTodayLastWeekCount,
|
||||
onRestoreThread,
|
||||
}) {
|
||||
@ -913,6 +963,10 @@ export default function Scene ({
|
||||
const thisWeekStats = readStatistics.slice(7).map(n => n || null);
|
||||
|
||||
const percentageDeltaToday = getPercentageDelta(counts.cur, counts.prev);
|
||||
const highestRepoReadCount = Object.values(reposReadCounts).reduce((h, c) => Math.max(h, c), 0);
|
||||
const colorOfRepoCount = createColorOfScore(0, highestRepoReadCount);
|
||||
|
||||
// order repo count by highest
|
||||
|
||||
const data = [
|
||||
{name: 'Sunday', cur: thisWeekStats[0], prev: lastWeekStats[0]},
|
||||
@ -940,14 +994,6 @@ export default function Scene ({
|
||||
});
|
||||
}, [readTodayCount, readTodayLastWeekCount]);
|
||||
|
||||
const props = useSpring({
|
||||
from: {opacity: 0},
|
||||
to: {opacity: 1},
|
||||
config: {
|
||||
duration: 200,
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Row css={css`
|
||||
@ -1076,7 +1122,18 @@ export default function Scene ({
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card />
|
||||
<Card>
|
||||
<CardTitle>{'Activity'}</CardTitle>
|
||||
<CardSubTitle css={css`margin-bottom: 22px;`}>{'Your interactions'}</CardSubTitle>
|
||||
{Object.keys(reposReadCounts).sort((a, b) => a.localeCompare(b)).map(repo => (
|
||||
<RepoBar
|
||||
name={repo}
|
||||
value={reposReadCounts[repo]}
|
||||
max={highestRepoReadCount}
|
||||
colorOfValue={colorOfRepoCount}
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
</CardSection>
|
||||
<NotificationsSection>
|
||||
<TitleSection>
|
||||
@ -1387,8 +1444,8 @@ function NotificationCollection ({
|
||||
|
||||
return (
|
||||
<AnimatedNotificationsBlock style={props} page={page}>
|
||||
{notifications.map(item => (
|
||||
<AnimatedNotificationRow key={notifications.id}>
|
||||
{notifications.map((item, xid) => (
|
||||
<AnimatedNotificationRow key={notifications.id || xid}>
|
||||
{/* Type */}
|
||||
<NotificationCell width={80}>
|
||||
{getPRIssueIcon(item.type, item.reasons)}
|
||||
|
@ -97,16 +97,33 @@ class StorageProvider extends React.Component {
|
||||
* increment. This is a pretty bold assumption that makes things simpler for now,
|
||||
* so we're going to go with it for the time being.
|
||||
*/
|
||||
incrStat = (stat, time = moment()) => {
|
||||
const key = time.format('YYYY-MM-DD');
|
||||
const oldValue = window.localStorage.getItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}-${stat}`);
|
||||
incrStat = (stat, additionalPrefix = moment().format('YYYY-MM-DD')) => {
|
||||
const key = additionalPrefix ? `${additionalPrefix}-` : '';
|
||||
const oldValue = window.localStorage.getItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}${stat}`);
|
||||
if (oldValue !== null) {
|
||||
window.localStorage.setItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}-${stat}`, parseInt(oldValue, 10) + 1);
|
||||
window.localStorage.setItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}${stat}`, parseInt(oldValue, 10) + 1);
|
||||
} else {
|
||||
window.localStorage.setItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}-${stat}`, 1);
|
||||
window.localStorage.setItem(`${LOCAL_STORAGE_STATISTIC_PREFIX}${key}${stat}`, 1);
|
||||
}
|
||||
}
|
||||
|
||||
getAllRepoStagedCounts = () => {
|
||||
return Object.keys(window.localStorage)
|
||||
.filter(key => key.includes('__REPO__'))
|
||||
.reduce((repos, key) => {
|
||||
const value = JSON.parse(window.localStorage.getItem(key));
|
||||
if (!value) {
|
||||
return repos;
|
||||
}
|
||||
|
||||
// Janky but will work.
|
||||
const repo = key.split('__REPO__-').pop().split('-stagedCount')[0];
|
||||
|
||||
repos[repo] = value;
|
||||
return repos;
|
||||
}, {});
|
||||
}
|
||||
|
||||
// val value : Object
|
||||
setItem = (id, value) => {
|
||||
window.localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${id}`, JSON.stringify(value));
|
||||
@ -161,6 +178,7 @@ class StorageProvider extends React.Component {
|
||||
clearCache: this.clearCache,
|
||||
refreshNotifications: this.refreshNotifications,
|
||||
getStat: this.getStat,
|
||||
getAllRepoStagedCounts: this.getAllRepoStagedCounts,
|
||||
incrStat: this.incrStat,
|
||||
});
|
||||
}
|
||||
|
@ -67,9 +67,7 @@ h3 {
|
||||
|
||||
p {
|
||||
font: 15px/22px 'Inter UI', system-ui, sans-serif;
|
||||
color: #24292e;
|
||||
font: 15px/22px 'Inter UI', system-ui, sans-serif;
|
||||
font-size: 15px;
|
||||
color: #37352f;;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.002em;
|
||||
font-weight: 400;
|
||||
|
Loading…
Reference in New Issue
Block a user