bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'improve-mobile-for-edit-profile' into 'develop'

Browse source 
Stack avatar/header file picker on mobile

See merge request soapbox-pub/soapbox-fe!1313
This commit is contained in:
Justin 2022-05-05 13:56:21 +00:00
commit c752909d8f
3 changed files with 48 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
app/soapbox/features/edit_profile/components/profile-preview.tsx Normal file
View file

@ -0,0 +1,46 @@
import React from 'react';
import StillImage from 'soapbox/components/still_image';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useSoapboxConfig } from 'soapbox/hooks';
import type { Account } from 'soapbox/types/entities';
interface IProfilePreview {
account: Account,
}
/** Displays a preview of the user's account, including avatar, banner, etc. */
const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
const { displayFqn } = useSoapboxConfig();
return (
<div className='bg-white dark:bg-slate-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
<div>
<div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-slate-900/50'>
<StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
</div>
</div>
<HStack space={3} alignItems='center' className='p-3'>
<div className='relative'>
<div className='h-12 w-12 bg-gray-400 rounded-full'>
<StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
</div>
{!account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>}
</div>
<Stack className='truncate'>
<Text weight='medium' size='sm' truncate>
{account.display_name}
</Text>
<Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
</Stack>
</HStack>
</div>
);
};
export default ProfilePreview;

44
app/soapbox/features/edit_profile/components/profile_preview.tsx
View file

@ -1,44 +0,0 @@
import React from 'react';
import { Link } from 'react-router-dom';
import StillImage from 'soapbox/components/still_image';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useSoapboxConfig } from 'soapbox/hooks';
import type { Account } from 'soapbox/types/entities';
interface IProfilePreview {
account: Account,
}
/** Displays a preview of the user's account, including avatar, banner, etc. */
const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
const { displayFqn } = useSoapboxConfig();
return (
<div className='card h-card'>
<Link to={`/@${account.acct}`}>
<div className='card__img'>
<StillImage alt='' src={account.header} />
</div>
<div className='card__bar'>
<div className='avatar'>
<StillImage alt='' className='u-photo' src={account.avatar} width='48' height='48' />
</div>
<div className='display-name'>
<span style={{ display: 'none' }}>{account.username}</span>
<bdi>
<strong className='emojify p-name'>
{account.display_name}
{account.verified && <VerificationBadge />}
</strong>
</bdi>
<span>@{displayFqn ? account.fqn : account.acct}</span>
</div>
</div>
</Link>
</div>
);
};
export default ProfilePreview;

4
app/soapbox/features/edit_profile/index.tsx
View file

@ -14,7 +14,7 @@ import resizeImage from 'soapbox/utils/resize_image';
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
import Streamfield from '../../components/ui/streamfield/streamfield';
import ProfilePreview from './components/profile_preview';
import ProfilePreview from './components/profile-preview';
import type { Account } from 'soapbox/types/entities';
@ -377,7 +377,7 @@ const EditProfile: React.FC = () => {
/>
</FormGroup>
<div className='grid grid-cols-2 gap-4'>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
<ProfilePreview account={previewAccount} />
<div className='space-y-4'>