urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 16:51:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

tutorial: show notification on skip

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-02-26 11:23:11 +10:00
parent 4964b44601
commit a323d0c3fc
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
pkg/interface/src/views/apps/launch/app.js
View File

@ -44,6 +44,7 @@ const tutSelector = f.pick(['tutorialProgress', 'nextTutStep']);
export default function LaunchApp(props) {
const history = useHistory();
const [hashText, setHashText] = useState(props.baseHash);
const [exitingTut, setExitingTut] = useState(false);
const hashBox = (
<Box
position={["relative", "absolute"]}
@ -114,26 +115,38 @@ export default function LaunchApp(props) {
nextTutStep();
dismiss();
}
return (
<Col maxWidth="350px" p="3">
<Box position="absolute" left="-16px" top="-16px">
<StarIcon width="32px" height="32px" color="blue" display="block" />
</Box>
<Text mb="3" lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text mb="3" lineHeight="tall">
You have been invited to use Landscape, an interface to chat
and interact with communities
<br />
Would you like a tour of Landscape?
</Text>
<Row gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={onDismiss}>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}>
Yes
</StatelessAsyncButton>
</Row>
</Col>
)}
return exitingTut ? (
<Col maxWidth="350px" p="3">
<Text>
You can always restart the tutorial by typing 'tutorial' in leap
</Text>
<Row gapX="2" justifyContent="flex-end">
<Button primary onClick={onDismiss}>OK</Button>
</Row>
</Col>
) : (
<Col maxWidth="350px" p="3">
<Box position="absolute" left="-16px" top="-16px">
<StarIcon width="32px" height="32px" color="blue" display="block" />
</Box>
<Text mb="3" lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text mb="3" lineHeight="tall">
You have been invited to use Landscape, an interface to chat
and interact with communities
<br />
Would you like a tour of Landscape?
</Text>
<Row gapX="2" justifyContent="flex-end">
<Button
backgroundColor="washedGray"
onClick={() => setExitingTut(true)}
>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}>
Yes
</StatelessAsyncButton>
</Row>
</Col>
)}
});
const hasLoaded = useMemo(() => Object.keys(props.contacts).length > 0, [props.contacts]);

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

@ -112,7 +112,8 @@ export function TutorialModal(props: { api: GlobalApi }) {
const leaveGroup = useCallback(async () => {
await props.api.groups.leaveGroup(TUTORIAL_HOST, TUTORIAL_GROUP);
}, [props.api]);
await dismiss();
}, [props.api, dismiss]);
const progressIdx = progress.findIndex(p => p === tutorialProgress);
@ -143,7 +144,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
Tutorial Finished
</Text>
<Text fontSize="0" gray>
{progressIdx} of {progress.length - 1}
{progressIdx} of {progress.length - 2}
</Text>
</Col>
<Text lineHeight="tall">