interface: styling fixes for permalinks

This commit is contained in:
Liam Fitzgerald 2021-03-19 09:46:31 +10:00
parent 986fa02ccd
commit e49446f85e
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
8 changed files with 73 additions and 68 deletions

View File

@ -17,7 +17,7 @@ function TranscludedLinkNode(props: {
transcluded: number;
api: GlobalApi;
}) {
const { node, assoc, transcluded } = props;
const { node, api, assoc, transcluded } = props;
const idx = node.post.index.slice(1).split("/");
switch (idx.length) {

View File

@ -3,7 +3,15 @@ import {
parsePermalink,
GraphPermalink as IGraphPermalink,
} from "~/logic/lib/permalinks";
import { Box, Text, BaseAnchor, Row, Icon, Col } from "@tlon/indigo-react";
import {
Action,
Box,
Text,
BaseAnchor,
Row,
Icon,
Col,
} from "@tlon/indigo-react";
import { GroupLink } from "~/views/components/GroupLink";
import GlobalApi from "~/logic/api/global";
import { getModuleIcon } from "~/logic/lib/util";
@ -29,9 +37,13 @@ function GroupPermalink(props: { group: string; api: GlobalApi }) {
}
function GraphPermalink(
props: IGraphPermalink & { api: GlobalApi; transcluded: number }
props: IGraphPermalink & {
api: GlobalApi;
transcluded: number;
pending?: boolean;
}
) {
const { link, graph, group, index, api, transcluded } = props;
const { pending, link, graph, group, index, api, transcluded } = props;
const { ship, name } = resourceFromPath(graph);
const node = useGraphState(
useCallback((s) => s.looseNodes?.[`${ship.slice(1)}/${name}`]?.[index], [
@ -47,6 +59,9 @@ function GraphPermalink(
);
useEffect(() => {
(async () => {
if (pending) {
return;
}
try {
await api.graph.getNode(ship, name, index);
} catch (e) {
@ -54,7 +69,7 @@ function GraphPermalink(
setErrored(true);
}
})();
}, [graph, index]);
}, [pending, graph, index]);
const showTransclusion = !!(association && node && transcluded < 1);
const rowTransclusionStyle = showTransclusion
@ -66,14 +81,7 @@ function GraphPermalink(
: {};
return (
<Link to={`/perma${link}`}>
<Col
my="1"
bg="white"
border="1"
borderColor="lightGray"
borderRadius="2"
>
<Col my="1" bg="white" border="1" borderColor="lightGray" borderRadius="2">
{showTransclusion && (
<Box p="2">
<TranscludedNode
@ -86,11 +94,12 @@ function GraphPermalink(
<Row
{...rowTransclusionStyle}
alignItems="center"
height="32px"
gapX="2"
justifyContent="space-between"
width="100%"
px="2"
py="1"
>
<Row gapX="2" alignItems="center">
<Icon
icon={
association
@ -102,13 +111,15 @@ function GraphPermalink(
{association?.metadata.title ?? graph.slice(6)}
</Text>
</Row>
<Action onClick={() => {}}>Go to link</Action>
</Row>
</Col>
</Link>
);
}
export function PermalinkEmbed(props: {
link: string;
association?: Association;
api: GlobalApi;
transcluded: number;
}) {

View File

@ -10,7 +10,7 @@ export function getGraphPermalink(
) {
const mod = assoc.metadata.module;
const groupPath = group.hidden
? "/~/landscape/home"
? "/~landscape/home"
: `/~landscape${assoc.group}`;
if (mod === "chat") {
return getChatPermalink(

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Box, Text, Col, Anchor, Row } from '@tlon/indigo-react';
import { Box, Text, Col, Anchor, Row, Action } from '@tlon/indigo-react';
import ReactMarkdown from 'react-markdown';
import bigInt from 'big-integer';
@ -12,6 +12,8 @@ import { getLatestRevision, getComments } from '~/logic/lib/publish';
import { roleForShip } from '~/logic/lib/group';
import Author from '~/views/components/Author';
import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
import {useCopy} from '~/logic/lib/useCopy';
import {usePermalinkForGraph} from '~/logic/lib/permalinks';
interface NoteProps {
ship: string;
@ -69,34 +71,24 @@ export function Note(props: NoteProps & RouteComponentProps) {
const ourRole = roleForShip(group, window.ship);
if (window.ship === note?.post?.author) {
adminLinks.push(
<Link
style={{ 'display': 'inline-block' }}
to={`${baseUrl}/edit`}
>
<Text
color="blue"
ml={2}
>
Update
</Text>
<Link to={`${baseUrl}/edit`}>
<Action>Update</Action>
</Link>
)
};
if (window.ship === note?.post?.author || ourRole === "admin") {
adminLinks.push(
<Text
color="red"
display='inline-block'
ml={2}
onClick={deletePost}
style={{ cursor: 'pointer' }}
>
<Action destructive onClick={deletePost}>
Delete
</Text>
</Action>
)
};
const permalink = usePermalinkForGraph(props.association, `/${noteId.toString()}`)
const { doCopy, copyDisplay } = useCopy(permalink, 'Copy Link');
const windowRef = React.useRef(null);
useEffect(() => {
if (windowRef.current) {
@ -128,8 +120,12 @@ export function Note(props: NoteProps & RouteComponentProps) {
ship={post?.author}
date={post?.['time-sent']}
group={group}
/>
<Text ml={1}>{adminLinks}</Text>
>
<Row px="2" gapX="2" alignItems="flex-end">
<Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
{adminLinks}
</Row>
</Author>
</Row>
</Col>
<NoteContent body={body} />

View File

@ -66,7 +66,7 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
);
return (
<Row {...rest} alignItems='center' width='auto'>
<Row height="20px" {...rest} alignItems='center' width='auto'>
<Box
onClick={() => toggleOverlay()}
height={16}

View File

@ -54,21 +54,18 @@ export function CommentItem(props: CommentItemProps): ReactElement {
if (window.ship == post?.author && !disabled) {
adminLinks.push(
<Link to={{ pathname: props.baseUrl, search: `?edit=${commentIndex}`}}>
<Text
color="blue"
ml={2}
>
<Action>
Update
</Text>
</Action>
</Link>
)
};
if ((window.ship == post?.author || ourRole == "admin") && !disabled) {
adminLinks.push(
<ClickBox display="inline-block" color="red" onClick={onDelete}>
<Text color='red'>Delete</Text>
</ClickBox>
<Action onClick={onDelete} destructive>
Delete
</Action>
)
};
@ -95,9 +92,9 @@ export function CommentItem(props: CommentItemProps): ReactElement {
unread={props.unread}
group={group}
>
<Row alignItems="center">
<Row px="2" gapX="2" alignItems="center">
<Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
{adminLinks}
<Action ml="2" bg="white" onClick={doCopy}>{copyDisplay}</Action>
</Row>
</Author>
</Row>
@ -105,7 +102,7 @@ export function CommentItem(props: CommentItemProps): ReactElement {
borderRadius="1"
p="1"
mb="1"
backgroundColor={props.highlighted ? 'lightGray' : 'white'}
backgroundColor={props.highlighted ? 'lightBlue' : 'white'}
>
<MentionText
transcluded={0}

View File

@ -45,7 +45,7 @@ const RichText = React.memo(({ disableRemoteContent, api, ...props }) => (
if (isValidPatp(linkText)) {
return <Mention contact={props.contact || {}} group={props.group} ship={deSig(linkText)} />;
} else if(linkText.startsWith('web+urbit://')) {
return <PermalinkEmbed link={linkText} transcluded={props.transcluded} api={api}/>;
return <PermalinkEmbed pending={props.pending} link={linkText} transcluded={props.transcluded} api={api}/>;
}
return linkText;

View File

@ -6,6 +6,7 @@
margin: 0 auto;
}
a, a:any-link {
a, a:any-link, a:-webkit-any-link {
text-decoration: none;
color: unset;
}