mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-09-21 15:38:59 +03:00
ResourceSkeleton: dynamically truncate description
This commit is contained in:
parent
cc6adb3ffd
commit
be88d60329
@ -1,5 +1,5 @@
|
||||
import React, { ReactElement, ReactNode } from 'react';
|
||||
import { Icon, Box, Col, Text } from '@tlon/indigo-react';
|
||||
import { Icon, Box, Col, Row, Text } from '@tlon/indigo-react';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import urbitOb from 'urbit-ob';
|
||||
@ -12,7 +12,7 @@ import GlobalApi from '~/logic/api/global';
|
||||
import { isWriter } from '~/logic/lib/group';
|
||||
import { getItemTitle } from '~/logic/lib/util';
|
||||
|
||||
const TruncatedBox = styled(Box)`
|
||||
const TruncatedText = styled(RichText)`
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -88,7 +88,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
|
||||
>
|
||||
<Link to={`/~landscape${workspace}`}> {'<- Back'}</Link>
|
||||
</Box>
|
||||
<Box px={1} mr={2} minWidth={0} display="flex">
|
||||
<Box px={1} mr={2} minWidth={0} display="flex" flexShrink={0}>
|
||||
<Text
|
||||
mono={urbitOb.isValidPatp(title)}
|
||||
fontSize='2'
|
||||
@ -99,28 +99,30 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
|
||||
overflow="hidden"
|
||||
whiteSpace="pre"
|
||||
minWidth={0}
|
||||
flexShrink={0}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</Box>
|
||||
<TruncatedBox
|
||||
display={['none', 'block']}
|
||||
<Row
|
||||
display={['none', 'flex']}
|
||||
verticalAlign="middle"
|
||||
maxWidth='60%'
|
||||
flexShrink={1}
|
||||
minWidth={0}
|
||||
title={association?.metadata?.description}
|
||||
color="gray"
|
||||
>
|
||||
<RichText
|
||||
<TruncatedText
|
||||
display={(workspace === '/messages' && (urbitOb.isValidPatp(title))) ? 'none' : 'inline-block'}
|
||||
mono={(workspace === '/messages' && !(urbitOb.isValidPatp(title)))}
|
||||
color="gray"
|
||||
minWidth={0}
|
||||
width="100%"
|
||||
mb="0"
|
||||
disableRemoteContent
|
||||
>
|
||||
{(workspace === '/messages') ? recipient : association?.metadata?.description}
|
||||
</RichText>
|
||||
</TruncatedBox>
|
||||
</TruncatedText>
|
||||
</Row>
|
||||
<Box flexGrow={1} />
|
||||
{canWrite && (
|
||||
<Link to={resourcePath('/new')} style={{ flexShrink: '0' }}>
|
||||
|
Loading…
Reference in New Issue
Block a user