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', alignX: 'right',
arrow: 'South', arrow: 'South',
offsetX: -300 + MODAL_WIDTH / 2, offsetX: -300 + MODAL_WIDTH / 2,
offsetY: -60, offsetY: -4,
}, },
leap: { leap: {
title: '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 { contact, hideCover, ship } = { ...props };
const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000'; const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
const anchorRef = useRef<HTMLElement | null>(null)
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
const cover = const cover =
contact?.cover && !hideCover ? ( contact?.cover && !hideCover ? (
<BaseImage <BaseImage
@ -60,7 +64,7 @@ export function ProfileImages(props: any): ReactElement {
return ( return (
<> <>
<Row width='100%' height='300px' position='relative'> <Row ref={anchorRef} width='100%' height='300px' position='relative'>
{cover} {cover}
<Center position='absolute' width='100%' height='100%'> <Center position='absolute' width='100%' height='100%'>
{props.children} {props.children}
@ -156,9 +160,6 @@ export function ProfileActions(props: any): ReactElement {
export function Profile(props: any): ReactElement { export function Profile(props: any): ReactElement {
const history = useHistory(); const history = useHistory();
if (!props.ship) {
return null;
}
const { contact, nackedContacts, hasLoaded, isPublic, isEdit, ship } = props; const { contact, nackedContacts, hasLoaded, isPublic, isEdit, ship } = props;
const nacked = nackedContacts.has(ship); const nacked = nackedContacts.has(ship);
const formRef = useRef(null); const formRef = useRef(null);
@ -171,30 +172,14 @@ export function Profile(props: any): ReactElement {
const anchorRef = useRef<HTMLElement | null>(null); const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef); if (!props.ship) {
return null;
}
const ViewInterface = () => { return (
return ( <Center p={[0, 4]} height='100%' width='100%'>
<Center p={[0, 4]} height='100%' width='100%'> <Box maxWidth='600px' width='100%' position='relative'>
<Box ref={anchorRef} maxWidth='600px' width='100%' position='relative'> { isEdit ? (
<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'>
<EditProfile <EditProfile
ship={ship} ship={ship}
contact={contact} contact={contact}
@ -204,10 +189,18 @@ export function Profile(props: any): ReactElement {
associations={props.associations} associations={props.associations}
isPublic={isPublic} isPublic={isPublic}
/> />
</Box> ) : (
</Center> <ViewProfile
); nacked={nacked}
}; ship={ship}
contact={contact}
return isEdit ? <EditInterface /> : <ViewInterface />; 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]); }, [tutorialRef]);
const dismiss = useCallback(async () => { const dismiss = useCallback(async () => {
setPaused(false);
hideTutorial(); hideTutorial();
await props.api.settings.putEntry('tutorial', 'seen', true); await props.api.settings.putEntry('tutorial', 'seen', true);
}, [hideTutorial, props.api]); }, [hideTutorial, props.api]);
@ -228,6 +229,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
direction={arrow} direction={arrow}
height="0px" height="0px"
width="0px" width="0px"
display={["none", "block"]}
/> />
<Box <Box