urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-30 22:15:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4568 from urbit/lf/tutorial-polish

Browse Source 
Tutorial: polish for release
This commit is contained in:
matildepark 2021-03-09 12:41:57 -05:00 committed by GitHub
commit c3d7c6eaa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/logic/lib/tutorialModal.ts
View File

@ -156,7 +156,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
alignX: 'right',
arrow: 'South',
offsetX: -300 + MODAL_WIDTH / 2,
offsetY: -60,
offsetY: -4,
},
leap: {
title: 'Leap',

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

@ -29,6 +29,10 @@ export function ProfileImages(props: any): ReactElement {
const { contact, hideCover, ship } = { ...props };
const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
const anchorRef = useRef<HTMLElement | null>(null)
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
const cover =
contact?.cover && !hideCover ? (
<BaseImage
@ -60,7 +64,7 @@ export function ProfileImages(props: any): ReactElement {
return (
<>
<Row width='100%' height='300px' position='relative'>
<Row ref={anchorRef} width='100%' height='300px' position='relative'>
{cover}
<Center position='absolute' width='100%' height='100%'>
{props.children}
@ -156,9 +160,6 @@ export function ProfileActions(props: any): ReactElement {
export function Profile(props: any): ReactElement {
const history = useHistory();
if (!props.ship) {
return null;
}
const { contact, nackedContacts, hasLoaded, isPublic, isEdit, ship } = props;
const nacked = nackedContacts.has(ship);
const formRef = useRef(null);
@ -171,30 +172,14 @@ export function Profile(props: any): ReactElement {
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
if (!props.ship) {
return null;
}
const ViewInterface = () => {
return (
<Center p={[0, 4]} height='100%' width='100%'>
<Box ref={anchorRef} maxWidth='600px' width='100%' position='relative'>
<ViewProfile
nacked={nacked}
ship={ship}
contact={contact}
isPublic={isPublic}
api={props.api}
groups={props.groups}
associations={props.associations}
/>
</Box>
</Center>
);
};
const EditInterface = () => {
return (
<Center p={[0, 4]} height='100%' width='100%'>
<Box ref={anchorRef} maxWidth='600px' width='100%' position='relative'>
return (
<Center p={[0, 4]} height='100%' width='100%'>
<Box maxWidth='600px' width='100%' position='relative'>
{ isEdit ? (
<EditProfile
ship={ship}
contact={contact}
@ -204,10 +189,18 @@ export function Profile(props: any): ReactElement {
associations={props.associations}
isPublic={isPublic}
/>
</Box>
</Center>
);
};
return isEdit ? <EditInterface /> : <ViewInterface />;
) : (
<ViewProfile
nacked={nacked}
ship={ship}
contact={contact}
isPublic={isPublic}
api={props.api}
groups={props.groups}
associations={props.associations}
/>
)}
</Box>
</Center>
);
}

2
pkg/interface/src/views/landscape/components/TutorialModal.tsx
View File

@ -98,6 +98,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
}, [tutorialRef]);
const dismiss = useCallback(async () => {
setPaused(false);
hideTutorial();
await props.api.settings.putEntry('tutorial', 'seen', true);
}, [hideTutorial, props.api]);
@ -228,6 +229,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
direction={arrow}
height="0px"
width="0px"
display={["none", "block"]}
/>
<Box