ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-14 04:19:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

permalinks; conditional addtional rows, dependent on graph type

Browse Source
This commit is contained in:
James Acklin 2021-05-18 14:42:59 -04:00
parent 8f074592f2
commit fed10bc07c
1 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
pkg/interface/src/views/apps/permalinks/embed.tsx
View File

@ -1,6 +1,7 @@
import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from "@tlon/indigo-react"; import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from "@tlon/indigo-react";
import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api'; import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import _ from 'lodash';
import { useHistory, useLocation } from 'react-router-dom'; import { useHistory, useLocation } from 'react-router-dom';
import GlobalApi from '~/logic/api/global'; import GlobalApi from '~/logic/api/global';
import { import {
@ -13,22 +14,44 @@ import useMetadataState from "~/logic/state/metadata";
import { GroupLink } from "~/views/components/GroupLink"; import { GroupLink } from "~/views/components/GroupLink";
import { TranscludedNode } from "./TranscludedNode"; import { TranscludedNode } from "./TranscludedNode";
function Placeholder() { function Placeholder(type) {
const lines = (type) => {
switch (type) {
case 'publish':
return 5;
case 'post':
return 3;
default:
return 1;
}
}
return ( return (
<Row margin="12px" marginBottom="0" height="4"> <>
<Box <Row mt='12px' ml='12px' mb='6px' height="4">
backgroundColor="washedGray" <Box
size="4" backgroundColor="washedGray"
marginRight="2" size="4"
borderRadius="2" marginRight="2"
/> borderRadius="2"
<Box />
backgroundColor="washedGray" <Box
height="4" backgroundColor="washedGray"
width="75%" height="4"
borderRadius="2" width="25%"
/> borderRadius="2"
</Row> />
</Row>
{_.times(lines(type), () => (
<Row margin="6px" ml='44px' mr='12px' height="4">
<Box
backgroundColor="washedGray"
height="4"
width="100%"
borderRadius="2"
/>
</Row>
))}
</>
); );
} }
@ -131,8 +154,8 @@ function GraphPermalink(
navigate(e); navigate(e);
}} }}
> >
{loading && Placeholder()} {loading && association && Placeholder(association.metadata.config.graph)}
{showTransclusion && index && ( {showTransclusion && index && !loading && (
<TranscludedNode <TranscludedNode
api={api} api={api}
transcluded={transcluded + 1} transcluded={transcluded + 1}
@ -141,7 +164,7 @@ function GraphPermalink(
showOurContact={showOurContact} showOurContact={showOurContact}
/> />
)} )}
{association && !isInSameResource && ( {association && !isInSameResource && !loading && (
<PermalinkDetails <PermalinkDetails
known known
showTransclusion={showTransclusion} showTransclusion={showTransclusion}
@ -150,7 +173,7 @@ function GraphPermalink(
permalink={permalink} permalink={permalink}
/> />
)} )}
{association && isInSameResource && transcluded === 2 && ( {association && isInSameResource && transcluded === 2 && !loading && (
<PermalinkDetails <PermalinkDetails
known known
showTransclusion={showTransclusion} showTransclusion={showTransclusion}
@ -159,8 +182,8 @@ function GraphPermalink(
permalink={permalink} permalink={permalink}
/> />
)} )}
{isInSameResource && transcluded !== 2 && <Row height="12px" />} {isInSameResource && transcluded !== 2 && <Row height='2' />}
{!association && ( {!association && !loading && (
<PermalinkDetails <PermalinkDetails
icon="Groups" icon="Groups"
showDetails={false} showDetails={false}