mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-16 10:49:26 +03:00
profile: design tweaks
This commit is contained in:
James Acklin
parent
cc6adb3ffd
commit
a3052004f2
@ -1,16 +1,10 @@
|
||||
import React, { ReactElement, useEffect, useRef, useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Center,
|
||||
Box,
|
||||
Row,
|
||||
BaseImage,
|
||||
Text
|
||||
} from "@tlon/indigo-react";
|
||||
import { Center, Box, Row, BaseImage, Text } from '@tlon/indigo-react';
|
||||
|
||||
import RichText from '~/views/components/RichText'
|
||||
import useLocalState from "~/logic/state/local";
|
||||
import RichText from '~/views/components/RichText';
|
||||
import useLocalState from '~/logic/state/local';
|
||||
import { Sigil } from '~/logic/lib/sigil';
|
||||
import { ViewProfile } from './ViewProfile';
|
||||
import { EditProfile } from './EditProfile';
|
||||
@ -31,50 +25,64 @@ export function Profile(props: any): ReactElement {
|
||||
const nacked = nackedContacts.has(ship);
|
||||
|
||||
useEffect(() => {
|
||||
if(hasLoaded && !contact && !nacked) {
|
||||
if (hasLoaded && !contact && !nacked) {
|
||||
props.api.contacts.retrieve(ship);
|
||||
}
|
||||
}, [hasLoaded, contact]);
|
||||
|
||||
const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
|
||||
const cover = (contact?.cover)
|
||||
? <BaseImage src={contact.cover} width='100%' height='100%' style={{ objectFit: 'cover' }} />
|
||||
: <Box display="block" width='100%' height='100%' backgroundColor='washedGray' />;
|
||||
const cover = contact?.cover ? (
|
||||
<BaseImage
|
||||
src={contact.cover}
|
||||
width='100%'
|
||||
height='100%'
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
display='block'
|
||||
width='100%'
|
||||
height='100%'
|
||||
backgroundColor='washedGray'
|
||||
/>
|
||||
);
|
||||
|
||||
const image = (!hideAvatars && contact?.avatar)
|
||||
? <BaseImage src={contact.avatar} width='100%' height='100%' style={{ objectFit: 'cover' }} />
|
||||
: <Sigil padding={24} ship={ship} size={128} color={hexColor} />;
|
||||
const image =
|
||||
!hideAvatars && contact?.avatar ? (
|
||||
<BaseImage
|
||||
src={contact.avatar}
|
||||
width='100%'
|
||||
height='100%'
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<Sigil padding={24} ship={ship} size={128} color={hexColor} />
|
||||
);
|
||||
|
||||
const anchorRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef.current);
|
||||
|
||||
return (
|
||||
<Center
|
||||
p={[0,4]}
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
|
||||
<Box
|
||||
ref={anchorRef}
|
||||
maxWidth="600px"
|
||||
width="100%"
|
||||
>
|
||||
<Row alignItems="center" justifyContent="space-between">
|
||||
<Center p={[0, 4]} height='100%' width='100%'>
|
||||
<Box ref={anchorRef} maxWidth='600px' width='100%'>
|
||||
<Box border='1px solid' borderColor='lightGray' borderRadius='2'>
|
||||
<Row alignItems='center' justifyContent='space-between' px='3'>
|
||||
<Row>
|
||||
{ship === `~${window.ship}` ? (
|
||||
<>
|
||||
<Text
|
||||
py='2'
|
||||
cursor='pointer'
|
||||
fontWeight='500'
|
||||
onClick={() => {
|
||||
history.push(`/~profile/${ship}/edit`);
|
||||
}}
|
||||
}}
|
||||
>
|
||||
Edit Profile
|
||||
Edit {isPublic ? 'Public' : 'Private'} Profile
|
||||
</Text>
|
||||
<SetStatusBarModal
|
||||
isControl
|
||||
py='2'
|
||||
ml='3'
|
||||
api={props.api}
|
||||
@ -84,25 +92,39 @@ export function Profile(props: any): ReactElement {
|
||||
</>
|
||||
) : null}
|
||||
</Row>
|
||||
<RichText mb='0' py='2' disableRemoteContent maxWidth='18rem' overflowX='hidden' textOverflow="ellipsis"
|
||||
whiteSpace="nowrap"
|
||||
overflow="hidden" display="inline-block" verticalAlign="middle">{contact?.status ?? ""}</RichText>
|
||||
<RichText
|
||||
mb='0'
|
||||
py='2'
|
||||
disableRemoteContent
|
||||
maxWidth='18rem'
|
||||
overflowX='hidden'
|
||||
textOverflow='ellipsis'
|
||||
whiteSpace='nowrap'
|
||||
overflow='hidden'
|
||||
display='inline-block'
|
||||
verticalAlign='middle'
|
||||
color='gray'
|
||||
>
|
||||
{contact?.status ?? ''}
|
||||
</RichText>
|
||||
</Row>
|
||||
<Row width="100%" height="300px">
|
||||
<Row width='100%' height='300px'>
|
||||
{cover}
|
||||
</Row>
|
||||
<Row
|
||||
pb={2}
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
</Box>
|
||||
<Row pb={2} alignItems='center' width='100%'>
|
||||
<Center width='100%' marginTop='-64px'>
|
||||
<Box
|
||||
height='128px'
|
||||
width='128px'
|
||||
borderRadius='2'
|
||||
overflow='hidden'
|
||||
>
|
||||
<Center width="100%" marginTop="-48px">
|
||||
<Box height='128px' width='128px' borderRadius="2" overflow="hidden">
|
||||
{image}
|
||||
</Box>
|
||||
</Center>
|
||||
</Row>
|
||||
{ isEdit ? (
|
||||
{isEdit ? (
|
||||
<EditProfile
|
||||
ship={ship}
|
||||
contact={contact}
|
||||
@ -122,7 +144,7 @@ export function Profile(props: any): ReactElement {
|
||||
groups={props.groups}
|
||||
associations={props.associations}
|
||||
/>
|
||||
) }
|
||||
)}
|
||||
</Box>
|
||||
</Center>
|
||||
);
|
||||
|
||||
@ -1,31 +1,18 @@
|
||||
import React, {
|
||||
useState,
|
||||
useEffect
|
||||
} from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import {
|
||||
Row,
|
||||
Box,
|
||||
Text
|
||||
} from '@tlon/indigo-react';
|
||||
import { Row, Box, Text } from '@tlon/indigo-react';
|
||||
|
||||
import { SetStatus } from '~/views/apps/profile/components/SetStatus';
|
||||
|
||||
|
||||
export const SetStatusBarModal = (props) => {
|
||||
const {
|
||||
ship,
|
||||
contact,
|
||||
api,
|
||||
...rest
|
||||
} = props;
|
||||
const { ship, contact, api, isControl, ...rest } = props;
|
||||
const [modalShown, setModalShown] = useState(false);
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
setModalShown(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
@ -40,28 +27,28 @@ export const SetStatusBarModal = (props) => {
|
||||
{modalShown && (
|
||||
<Box
|
||||
backgroundColor='scales.black30'
|
||||
left="0px"
|
||||
top="0px"
|
||||
width="100%"
|
||||
height="100%"
|
||||
left='0px'
|
||||
top='0px'
|
||||
width='100%'
|
||||
height='100%'
|
||||
zIndex={4}
|
||||
position="fixed"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
position='fixed'
|
||||
display='flex'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
onClick={() => setModalShown(false)}
|
||||
>
|
||||
<Box
|
||||
maxWidth="500px"
|
||||
width="100%"
|
||||
bg="white"
|
||||
maxWidth='500px'
|
||||
width='100%'
|
||||
bg='white'
|
||||
borderRadius={2}
|
||||
border={[0, 1]}
|
||||
borderColor={["washedGray", "washedGray"]}
|
||||
onClick={e => e.stopPropagation()}
|
||||
display="flex"
|
||||
alignItems="stretch"
|
||||
flexDirection="column"
|
||||
borderColor={['washedGray', 'washedGray']}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
display='flex'
|
||||
alignItems='stretch'
|
||||
flexDirection='column'
|
||||
>
|
||||
<Box m={3}>
|
||||
<SetStatus
|
||||
@ -70,23 +57,23 @@ export const SetStatusBarModal = (props) => {
|
||||
api={api}
|
||||
callback={() => {
|
||||
setModalShown(false);
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<Row
|
||||
{...rest}
|
||||
flexShrink={0}
|
||||
onClick={() => setModalShown(true)}>
|
||||
<Text color='black'
|
||||
<Row {...rest} flexShrink={0} onClick={() => setModalShown(true)}>
|
||||
<Text
|
||||
color='black'
|
||||
cursor='pointer'
|
||||
fontWeight={isControl ? '500' : '400'}
|
||||
flexShrink={0}
|
||||
fontSize={1}>
|
||||
fontSize={1}
|
||||
>
|
||||
Set Status
|
||||
</Text>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user