urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-26 05:23:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: do not mark unread on navigate

Browse Source
This commit is contained in:
Liam Fitzgerald 2020-11-16 14:20:41 +10:00
parent fd1e75d913
commit 0b72f3ed45
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
pkg/interface/src/views/apps/notifications/graph.tsx
View File

@ -1,7 +1,7 @@
import React, { ReactNode, useCallback } from "react"; import React, { ReactNode, useCallback } from "react";
import moment from "moment"; import moment from "moment";
import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react"; import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react";
import { Link } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import _ from "lodash"; import _ from "lodash";
import { import {
Post, Post,
@ -83,10 +83,10 @@ const GraphNodeContent = ({ contents, mod, description, index }) => {
return ( return (
<Col> <Col>
<Box mb="2" fontWeight="500"> <Box mb="2" fontWeight="500">
{header} <Text>{header}</Text>
</Box> </Box>
<Box overflow="hidden" maxHeight="400px"> <Box overflow="hidden" maxHeight="400px">
{snippet} <Text lineHeight="tall">{snippet}</Text>
<FilterBox <FilterBox
width="100%" width="100%"
zIndex="1" zIndex="1"
@ -123,8 +123,11 @@ const GraphNode = ({
index, index,
graph, graph,
group, group,
read,
onRead
}) => { }) => {
author = deSig(author); author = deSig(author);
const history = useHistory();
const img = ( const img = (
<Sigil <Sigil
@ -138,36 +141,41 @@ const GraphNode = ({
const nodeUrl = getNodeUrl(mod, group, graph, index); const nodeUrl = getNodeUrl(mod, group, graph, index);
const onClick = useCallback(() => {
if(!read) {
onRead();
}
history.push(nodeUrl);
}, [read, onRead]);
return ( return (
<Link to={nodeUrl}> <Row onClick={onClick} gapX="2" pt="2">
<Row gapX="2" pt="2"> <Col>{img}</Col>
<Col>{img}</Col> <Col alignItems="flex-start">
<Col alignItems="flex-start"> <Row
<Row mb="2"
mb="2" height="16px"
height="16px" alignItems="center"
alignItems="center" p="1"
p="1" backgroundColor="white"
backgroundColor="white" >
> <Text mono title={author}>
<Text mono title={author}> {cite(author)}
{cite(author)} </Text>
</Text> <Text ml="2" gray>
<Text ml="2" gray> {moment(time).format("HH:mm")}
{moment(time).format("HH:mm")} </Text>
</Text> </Row>
</Row> <Row p="1">
<Row p="1"> <GraphNodeContent
<GraphNodeContent contents={contents}
contents={contents} mod={mod}
mod={mod} description={description}
description={description} index={index}
index={index} />
/> </Row>
</Row> </Col>
</Col> </Row>
</Row>
</Link>
); );
}; };
@ -199,8 +207,9 @@ export function GraphNotification(props: {
}, [api, timebox, index, read]); }, [api, timebox, index, read]);
return ( return (
<Col onClick={onClick} p="2"> <Col p="2">
<Header <Header
onClick={onClick}
archived={props.archived} archived={props.archived}
time={time} time={time}
read={read} read={read}
@ -223,6 +232,8 @@ export function GraphNotification(props: {
index={content.index} index={content.index}
graph={graph} graph={graph}
group={group} group={group}
read={read}
onRead={onClick}
/> />
))} ))}
</Col> </Col>

4
pkg/interface/src/views/apps/notifications/header.tsx
View File

@ -37,7 +37,7 @@ export function Header(props: {
read: boolean; read: boolean;
associations: Associations; associations: Associations;
chat?: boolean; chat?: boolean;
}) { } & PropFunc<typeof Row> ) {
const { description, channel, group, moduleIcon, read } = props; const { description, channel, group, moduleIcon, read } = props;
const contacts = props.contacts[group] || {}; const contacts = props.contacts[group] || {};
@ -71,7 +71,7 @@ export function Header(props: {
channel; channel;
return ( return (
<Row p="2" flexWrap="wrap" gapX="1" alignItems="center"> <Row onClick={props.onClick} p="2" flexWrap="wrap" gapX="1" alignItems="center">
{!props.archived && ( {!props.archived && (
<Icon <Icon
display="block" display="block"