ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-16 10:49:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

profile: design tweaks

Browse Source
This commit is contained in:
James Acklin 2021-02-24 21:32:08 -05:00
parent cc6adb3ffd
commit a3052004f2
2 changed files with 114 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
pkg/interface/src/views/apps/profile/components/Profile.tsx
View File

@ -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';
@ -37,44 +31,58 @@ export function Profile(props: any): ReactElement {
}, [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,20 +92,34 @@ 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>

71
pkg/interface/src/views/components/SetStatusBarModal.js
View File

@ -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>
</>
);
}
};