nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-09-11 11:36:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Nicholas Zuber 2019-04-02 23:11:38 -04:00
parent e4fc9dddaa
commit e88b61e9f8
5 changed files with 101 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Notifications/index.js
View File

@ -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',

7
src/pages/NotificationsRedesign/index.js
View File

@ -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}
/>
);
}

87
src/pages/NotificationsRedesign/redesign/Scene.js
View File

@ -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)}

28
src/providers/Storage.js
View File

@ -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,
});
}

4
src/styles/index.css
View File

@ -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;