ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-21 23:47:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

profileOverlay: new profile style

Browse Source
This commit is contained in:
Matilde Park 2021-01-27 17:22:38 -05:00
parent 4268a3c22d
commit ca9f2e48dd
1 changed files with 28 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
pkg/interface/src/views/components/ProfileOverlay.tsx
View File

@ -4,7 +4,7 @@ import { Contact, Group } from '~/types';
import { cite, useShowNickname } from '~/logic/lib/util'; import { cite, useShowNickname } from '~/logic/lib/util';
import { Sigil } from '~/logic/lib/sigil'; import { Sigil } from '~/logic/lib/sigil';
import { Box, Col, Button, Text, BaseImage, ColProps } from '@tlon/indigo-react'; import { Box, Col, Row, Button, Text, BaseImage, ColProps, Icon } from '@tlon/indigo-react';
import { withLocalState } from '~/logic/state/local'; import { withLocalState } from '~/logic/state/local';
export const OVERLAY_HEIGHT = 250; export const OVERLAY_HEIGHT = 250;
@ -60,7 +60,6 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
color, color,
topSpace, topSpace,
bottomSpace, bottomSpace,
group = false,
hideAvatars, hideAvatars,
hideNicknames, hideNicknames,
history, history,
@ -78,75 +77,68 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
if (!(top || bottom)) { if (!(top || bottom)) {
bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`; bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`;
} }
const containerStyle = { top, bottom, left: '100%', maxWidth: '160px' }; const containerStyle = { top, bottom, left: '100%' };
const isOwn = window.ship === ship; const isOwn = window.ship === ship;
const img = contact?.avatar && !hideAvatars const img = contact?.avatar && !hideAvatars
? <BaseImage display='inline-block' src={contact.avatar} height={160} width={160} className="brt2" /> ? <BaseImage display='inline-block' src={contact.avatar} height={72} width={72} className="brt2" />
: <Sigil : <Sigil
ship={ship} ship={ship}
size={160} size={72}
color={color} color={color}
classes="brt2" classes="brt2"
svgClass="brt2" svgClass="brt2"
/>; />;
const showNickname = useShowNickname(contact, hideNicknames); const showNickname = useShowNickname(contact, hideNicknames);
// TODO: we need to rethink this "top-level profile view" of other ships
/* if (!group.hidden) {
}*/
const isHidden = group ? group.hidden : false;
const rootSettings = history.location.pathname.slice(0, history.location.pathname.indexOf("/resource")); const rootSettings = history.location.pathname.slice(0, history.location.pathname.indexOf("/resource"));
return ( return (
<Col <Col
ref={this.popoverRef} ref={this.popoverRef}
boxShadow="2px 4px 20px rgba(0, 0, 0, 0.25)" backgroundColor="white"
color="washedGray"
border={1}
borderRadius={2}
borderColor="lightGray"
boxShadow="0px 0px 0px 3px"
position='absolute' position='absolute'
backgroundColor='white'
zIndex='3' zIndex='3'
fontSize='0' fontSize='0'
height="250px"
width="250px"
padding={3}
justifyContent="space-between"
style={containerStyle} style={containerStyle}
{...rest} {...rest}
> >
<Box height='160px' width='160px'> <Row color='black' width='100%' height="3rem">
<Icon icon="Menu"/>
{(!isOwn) && (
<Icon icon="Chat" size={16} onClick={() => history.push(`/~landscape/dm/${ship}`)}/>
)}
</Row>
<Box alignSelf="center" height="72px">
{img} {img}
</Box> </Box>
<Box p='3'> <Col height="3rem" alignItems="end" justifyContent="flex-end">
{showNickname && (
<Text <Text
fontWeight='600' fontWeight='600'
mono={!showNickname}
display='block' display='block'
textOverflow='ellipsis' textOverflow='ellipsis'
overflow='hidden' overflow='hidden'
whiteSpace='pre' whiteSpace='pre'
lineHeight="tall"
> >
{contact.nickname} {showNickname ? contact.nickname : cite(ship)}
</Text> </Text>
)} {contact?.status && (<Text>{contact.status}</Text>)}
<Text mono gray>{cite(`~${ship}`)}</Text> </Col>
{!isOwn && (
<Button mt={2} fontSize='0' width="100%" style={{ cursor: 'pointer' }} onClick={() => history.push(`/~landscape/dm/${ship}`)}>
Send Message
</Button>
)}
{(isOwn) ? (
<Button
mt='2'
width='100%'
style={{ cursor: 'pointer ' }}
onClick={() => (isHidden) ? history.push('/~profile/identity') : history.push(`${rootSettings}/popover/profile`)}
>
Edit Identity
</Button>
) : <div />}
</Box>
</Col> </Col>
); );
} }
} }
export default withLocalState(ProfileOverlay, ['hideAvatars', 'hideNicknames']); export default withLocalState(ProfileOverlay, ['hideAvatars', 'hideNicknames']);