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

Merge pull request #4415 from urbit/lf/tutorial-fixes

Browse Source 
Tutorial: bugfixes
This commit is contained in:
matildepark 2021-02-11 13:02:30 -05:00 committed by GitHub
commit 16d83d97ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 357 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/interface/config/webpack.dev.js
View File

@ -122,9 +122,9 @@ module.exports = {
new webpack.DefinePlugin({
'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
'process.env.TUTORIAL_GROUP': JSON.stringify('beginner-island'),
'process.env.TUTORIAL_CHAT': JSON.stringify('chat-8401'),
'process.env.TUTORIAL_BOOK': JSON.stringify('notebook-9148'),
'process.env.TUTORIAL_LINKS': JSON.stringify('link-4353'),
'process.env.TUTORIAL_CHAT': JSON.stringify('chat-1704'),
'process.env.TUTORIAL_BOOK': JSON.stringify('book-9695'),
'process.env.TUTORIAL_LINKS': JSON.stringify('link-2827'),
})
// new CleanWebpackPlugin(),

2
pkg/interface/src/logic/api/settings.ts
View File

@ -32,7 +32,7 @@ export default class SettingsApi extends BaseApi<StoreState> {
}
putEntry(buc: Key, key: Key, val: Value) {
this.storeAction({
return this.storeAction({
"put-entry": {
"bucket-key": buc,
"entry-key": key,

9
pkg/interface/src/logic/lib/omnibox.js
View File

@ -33,16 +33,17 @@ const commandIndex = function (currentGroup, groups, associations) {
const commands = [];
const group = currentGroup ? groups[currentGroup] : null;
const association = currentGroup ? associations?.groups?.[currentGroup] : null;
const canAdd =
(group && association)
const canAdd =
(group && association)
? (association.metadata.vip === 'member-metadata' || isChannelAdmin(group, currentGroup))
: !currentGroup; // home workspace or hasn't loaded
const workspace = currentGroup || '/home';
commands.push(result(`Groups: Create`, `/~landscape/new`, 'Groups', null));
commands.push(result(`Groups: Join`, `/~landscape/join`, 'Groups', null));
if(canAdd) {
if (canAdd) {
commands.push(result(`Channel: Create`, `/~landscape${workspace}/new`, 'Groups', null));
}
commands.push(result(`Groups: Join`, `/~landscape/join`, 'Groups', null));
commands.push(result(`Tutorial`, '/?tutorial=true', 'Null', null));
return commands;
};

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

@ -1,8 +1,9 @@
import { TutorialProgress, Associations } from "~/types";
import { AlignX, AlignY } from "~/logic/lib/relativePosition";
import { Direction } from "~/views/components/Triangle";
export const MODAL_WIDTH = 256;
export const MODAL_HEIGHT = 180;
export const MODAL_HEIGHT = 256;
export const MODAL_WIDTH_PX = `${MODAL_WIDTH}px`;
export const MODAL_HEIGHT_PX = `${MODAL_HEIGHT}px`;
@ -20,6 +21,7 @@ interface StepDetail {
alignY: AlignY | AlignY[];
offsetX: number;
offsetY: number;
arrow: Direction;
}
export function hasTutorialGroup(props: { associations: Associations }) {
@ -28,8 +30,36 @@ export function hasTutorialGroup(props: { associations: Associations }) {
);
}
export const getTrianglePosition = (dir: Direction) => {
const midY = `${MODAL_HEIGHT / 2 - 8}px`;
const midX = `${MODAL_WIDTH / 2 - 8}px`;
switch(dir) {
case 'East':
return {
top: midY,
right: '-32px'
};
case 'West':
return {
top: midY,
left: '-32px'
}
case 'North':
return {
top: '-32px',
left: midX
};
case 'South':
return {
bottom: '-32px',
left: midX
};
}
}
export const progressDetails: Record<TutorialProgress, StepDetail> = {
hidden: {} as any,
exit: {} as any,
done: {
title: "End",
description:
@ -41,14 +71,15 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
offsetY: 0,
},
start: {
title: "New group added",
title: "New Group added",
description:
"We just added you to the Beginner island group to show you around. This group is public, but other groups can be private",
url: "/",
alignX: "right",
alignY: "top",
offsetX: MODAL_WIDTH + 8,
offsetY: 0,
arrow: "West",
offsetX: MODAL_WIDTH + 24,
offsetY: 64,
},
"group-desc": {
title: "What's a group",
@ -57,7 +88,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
alignX: "left",
alignY: "top",
offsetX: MODAL_WIDTH + 8,
arrow: "East",
offsetX: MODAL_WIDTH + 24,
offsetY: MODAL_HEIGHT / 2 - 8,
},
channels: {
@ -67,7 +99,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
alignY: "top",
alignX: "right",
offsetX: MODAL_WIDTH + 8,
arrow: "West",
offsetX: MODAL_WIDTH + 24,
offsetY: -8,
},
chat: {
@ -76,9 +109,10 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
"Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/chat/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}`,
alignY: "top",
arrow: "North",
alignX: "right",
offsetX: 0,
offsetY: -32,
offsetY: -56,
offsetX: -8,
},
link: {
title: "Collection",
@ -87,8 +121,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/link/ship/${TUTORIAL_HOST}/${TUTORIAL_LINKS}`,
alignY: "top",
alignX: "right",
offsetX: 0,
offsetY: -32,
arrow: "North",
offsetX: -8,
offsetY: -56,
},
publish: {
title: "Notebook",
@ -97,18 +132,19 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}`,
alignY: "top",
alignX: "right",
offsetX: 0,
offsetY: -32,
arrow: "North",
offsetX: -8,
offsetY: -56,
},
notifications: {
title: "Notifications",
description:
"Subscribing to a channel will send you notifications when there are new updates. You will also receive a notification when someone mentions your name in a channel.",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}/settings#notifications`,
description: "You will get updates from subscribed channels and mentions here. You can access Notifications through Leap.",
url: '/~notifications',
alignY: "top",
alignX: "right",
offsetX: 0,
offsetY: -32,
alignX: "left",
arrow: "North",
offsetX: (MODAL_WIDTH / 2) - 16,
offsetY: -48,
},
profile: {
title: "Profile",
@ -117,6 +153,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~profile/~${window.ship}`,
alignY: "top",
alignX: "right",
arrow: "South",
offsetX: -300 + MODAL_WIDTH / 2,
offsetY: -120 + MODAL_HEIGHT / 2,
},
@ -127,7 +164,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
url: `/~profile/~${window.ship}`,
alignY: "top",
alignX: "left",
offsetX: 0,
offsetY: -32,
arrow: "North",
offsetX: 0.3 *MODAL_HEIGHT,
offsetY: -48,
},
};

22
pkg/interface/src/logic/lib/useModal.tsx
View File

@ -12,6 +12,8 @@ import { Box } from "@tlon/indigo-react";
import { useOutsideClick } from "./useOutsideClick";
import { ModalOverlay } from "~/views/components/ModalOverlay";
import {Portal} from "~/views/components/Portal";
import {ModalPortal} from "~/views/components/ModalPortal";
import {PropFunc} from "~/types";
type ModalFunc = (dismiss: () => void) => JSX.Element;
interface UseModalProps {
@ -23,7 +25,8 @@ interface UseModalResult {
showModal: () => void;
}
export function useModal(props: UseModalProps): UseModalResult {
export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalResult {
const { modal, ...rest } = props;
const innerRef = useRef<HTMLElement>();
const [modalShown, setModalShown] = useState(false);
@ -39,15 +42,13 @@ export function useModal(props: UseModalProps): UseModalResult {
() =>
!modalShown
? null
: typeof props.modal === "function"
? props.modal(dismiss)
: props.modal,
[modalShown, props.modal, dismiss]
: typeof modal === "function"
? modal(dismiss)
: modal,
[modalShown, modal, dismiss]
);
useOutsideClick(innerRef, dismiss);
const modal = useMemo(
const modalComponent = useMemo(
() =>
!inner ? null : (
<Portal>
@ -63,7 +64,8 @@ export function useModal(props: UseModalProps): UseModalResult {
alignItems="stretch"
flexDirection="column"
spacing="2"
dismiss={dismiss}
{...rest}
>
{inner}
</ModalOverlay>
@ -74,6 +76,6 @@ export function useModal(props: UseModalProps): UseModalResult {
return {
showModal,
modal,
modal: modalComponent,
};
}

3
pkg/interface/src/logic/lib/useOutsideClick.ts
View File

@ -9,8 +9,7 @@ export function useOutsideClick(
const portalRoot = document.querySelector('#portal-root')!;
if (
ref.current &&
!ref.current.contains(event.target as any) &&
(!portalRoot.contains(ref.current) || portalRoot.contains(event.target as any))
!ref.current.contains(event.target as any)
) {
onClick();
}

1
pkg/interface/src/logic/reducers/group-update.ts
View File

@ -41,7 +41,6 @@ function decodePolicy(policy: Enc<GroupPolicy>): GroupPolicy {
}
function decodeTags(tags: Enc<Tags>): Tags {
console.log(tags);
return _.reduce(
tags,
(acc, ships, key): Tags => {

2
pkg/interface/src/types/local-update.ts
View File

@ -1,4 +1,4 @@
export const tutorialProgress = ['hidden', 'start', 'group-desc', 'channels', 'chat', 'link', 'publish', 'notifications', 'profile', 'leap', 'done'] as const;
export const tutorialProgress = ['hidden', 'start', 'group-desc', 'channels', 'chat', 'link', 'publish', 'profile', 'leap', 'notifications', 'done', 'exit'] as const;
export type TutorialProgress = typeof tutorialProgress[number];
interface LocalUpdateSetDark {

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

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useMemo, useEffect } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
import f from 'lodash/fp';
@ -20,6 +20,7 @@ import { JoinGroup } from "~/views/landscape/components/JoinGroup";
import { Helmet } from 'react-helmet';
import useLocalState from "~/logic/state/local";
import { useWaitForProps } from '~/logic/lib/useWaitForProps';
import { useQuery } from "~/logic/lib/useQuery";
import {
hasTutorialGroup,
TUTORIAL_GROUP,
@ -69,11 +70,25 @@ export default function LaunchApp(props) {
</Box>
);
const { query } = useQuery();
useEffect(() => {
if(query.get('tutorial')) {
if(hasTutorialGroup(props)) {
nextTutStep();
} else {
showModal();
}
}
}, [query]);
const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
const waiter = useWaitForProps(props);
const { modal, showModal } = useModal({
position: 'relative',
maxWidth: '350px',
modal: (dismiss) => {
const onDismiss = (e) => {
e.stopPropagation();
@ -87,7 +102,7 @@ export default function LaunchApp(props) {
await waiter(hasTutorialGroup);
await Promise.all(
[TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph =>
api.graph.join(TUTORIAL_HOST, graph)));
props.api.graph.join(TUTORIAL_HOST, graph)));
await waiter(p => {
return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph &&
@ -99,7 +114,10 @@ export default function LaunchApp(props) {
dismiss();
}
return (
<Col gapY="2" p="3">
<Col maxWidth="350px" gapY="2" p="3">
<Box position="absolute" left="-16px" top="-16px">
<Icon width="32px" height="32px" color="blue" display="block" icon="LargeBullet" />
</Box>
<Text lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text lineHeight="tall">
You have been invited to use Landscape, an interface to chat
@ -108,7 +126,7 @@ export default function LaunchApp(props) {
Would you like a tour of Landscape?
</Text>
<Row gapX="2" justifyContent="flex-end">
<Button onClick={onDismiss}>Skip</Button>
<Button backgroundColor="washedGray" onClick={onDismiss}>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}>
Yes
</StatelessAsyncButton>
@ -116,12 +134,14 @@ export default function LaunchApp(props) {
</Col>
)}
});
const hasLoaded = useMemo(() => Object.keys(props.contacts).length > 0, [props.contacts]);
useEffect(() => {
const seenTutorial = _.get(props.settings, ['tutorial', 'seen'], true);
if(!seenTutorial && tutorialProgress === 'hidden') {
if(hasLoaded && !seenTutorial && tutorialProgress === 'hidden') {
showModal();
}
}, [props.settings]);
}, [props.settings, hasLoaded]);
return (
<>

22
pkg/interface/src/views/apps/notifications/notifications.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useState } from "react";
import React, { useCallback, useState, useRef } from "react";
import _ from 'lodash';
import { Box, Col, Text, Row } from "@tlon/indigo-react";
import { Link, Switch, Route } from "react-router-dom";
@ -12,11 +12,13 @@ import { Dropdown } from "~/views/components/Dropdown";
import { Formik } from "formik";
import { FormikOnBlur } from "~/views/components/FormikOnBlur";
import GroupSearch from "~/views/components/GroupSearch";
import {useTutorialModal} from "~/views/components/useTutorialModal";
const baseUrl = "/~notifications";
const HeaderLink = (
props: PropFunc<typeof Text> & { view?: string; current: string }
const HeaderLink = React.forwardRef((
props: PropFunc<typeof Text> & { view?: string; current: string },
ref
) => {
const { current, view, ...textProps } = props;
const to = view ? `${baseUrl}/${view}` : baseUrl;
@ -24,10 +26,10 @@ const HeaderLink = (
return (
<Link to={to}>
<Text px="2" {...textProps} gray={!active} />
<Text ref={ref} px="2" {...textProps} gray={!active} />
</Link>
);
};
});
interface NotificationFilter {
groups: string[];
@ -37,8 +39,8 @@ export default function NotificationsScreen(props: any) {
const relativePath = (p: string) => baseUrl + p;
const [filter, setFilter] = useState<NotificationFilter>({ groups: [] });
const onSubmit = async (values: { groups: string }) => {
setFilter({ groups: values.groups ? [values.groups] : [] });
const onSubmit = async ({ groups } : NotificationFilter) => {
setFilter({ groups });
};
const onReadAll = useCallback(() => {
props.api.hark.readAll()
@ -48,7 +50,9 @@ export default function NotificationsScreen(props: any) {
? "All"
: filter.groups
.map((g) => props.associations?.groups?.[g]?.metadata?.title)
.join(", ");
.join(", ");
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('notifications', true, anchorRef.current);
return (
<Switch>
<Route
@ -74,7 +78,7 @@ export default function NotificationsScreen(props: any) {
<Text>Updates</Text>
<Row>
<Box>
<HeaderLink current={view} view="">
<HeaderLink ref={anchorRef} current={view} view="">
Inbox
</HeaderLink>
</Box>

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

@ -54,13 +54,14 @@ export function Profile(props: any) {
height="100%"
width="100%">
<Box
ref={anchorRef}
maxWidth="600px"
width="100%">
{ ship === `~${window.ship}` ? (
<SetStatus ship={ship} contact={contact} api={props.api} />
) : null
}
<Row ref={anchorRef} width="100%" height="300px">
<Row width="100%" height="300px">
{cover}
</Row>
<Row

6
pkg/interface/src/views/components/GroupSearch.tsx
View File

@ -75,7 +75,8 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
touched: touchedFields,
errors,
initialValues,
setFieldValue
setFieldValue,
setFieldTouched,
} = useFormikContext<V>();
const [inputIdx, setInputIdx] = useState(initialValues[id].length);
const name = `${id}[${inputIdx}]`;
@ -118,10 +119,12 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
render={(arrayHelpers) => {
const onSelect = (a: Association) => {
setFieldValue(name, a.group);
setFieldTouched(name, true, false);
setInputIdx(s => s+1);
};
const onRemove = (idx: number) => {
setFieldTouched(name, true, false);
setInputIdx(s => s - 1);
arrayHelpers.remove(idx);
};
@ -145,6 +148,7 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
}
getKey={(a: Association) => a.group}
onSelect={onSelect}
onBlur={() => {}}
/>
{value?.length > 0 && (
value.map((e, idx: number) => {

69
pkg/interface/src/views/components/ModalOverlay.tsx
View File

@ -1,29 +1,52 @@
import React from "react";
import React, { useCallback, UIEvent, MouseEvent, useRef } from "react";
import { Box } from "@tlon/indigo-react";
import { PropFunc } from "~/types/util";
interface ModalOverlayProps {
spacing: PropFunc<typeof Box>["m"];
dismiss: () => void;
}
type Props = ModalOverlayProps & PropFunc<typeof Box>;
export const ModalOverlay = (props: Props) => {
const { spacing, ...rest } = props;
const ref = useRef<HTMLElement | null>(null);
const onClick = useCallback(
(e: any) => {
if (!(ref as any).current.contains(e.target)) {
props.dismiss();
}
e.stopPropagation();
},
[props.dismiss, ref]
);
const onKeyDown = useCallback(
(e: any) => {
if (e.key === "Escape") {
props.dismiss();
e.stopPropagation();
}
},
[props.dismiss, ref]
);
return (
<Box
backgroundColor="scales.black20"
left="0px"
top="0px"
width="100%"
height="100%"
position="fixed"
display="flex"
zIndex={10}
justifyContent="center"
alignItems="center"
p={spacing}
onClick={onClick}
onKeyDown={onKeyDown}
>
<Box ref={ref} {...rest} />
</Box>
);
}
export const ModalOverlay = React.forwardRef(
(props: ModalOverlayProps & PropFunc<typeof Box>, ref) => {
const { spacing, ...rest } = props;
return (
<Box
backgroundColor="scales.black20"
left="0px"
top="0px"
width="100%"
height="100%"
zIndex={10}
position="fixed"
display="flex"
justifyContent="center"
alignItems="center"
p={spacing}
>
<Box ref={ref} {...rest} />
</Box>
);
}
);

6
pkg/interface/src/views/components/StatusBar.js
View File

@ -47,7 +47,9 @@ const StatusBar = (props) => {
const anchorRef = useRef(null);
useTutorialModal('leap', true, anchorRef.current);
const leapHighlight = useTutorialModal('leap', true, anchorRef.current);
const floatLeap = leapHighlight && window.matchMedia('(max-width: 550px)').matches;
return (
<Box
@ -63,7 +65,7 @@ const StatusBar = (props) => {
<Button width="32px" borderColor='washedGray' mr='2' px='2' onClick={() => props.history.push('/')} {...props}>
<Icon icon='Spaces' color='black'/>
</Button>
<StatusBarItem mr={2} onClick={() => toggleOmnibox()}>
<StatusBarItem float={floatLeap} mr={2} onClick={() => toggleOmnibox()}>
{ !props.doNotDisturb && (props.notificationsCount > 0 || invites.length > 0) &&
(<Box display="block" right="-8px" top="-8px" position="absolute" >
<Icon color="blue" icon="Bullet" />

8
pkg/interface/src/views/components/StatusBarItem.tsx
View File

@ -6,21 +6,25 @@ const Row = styled(_Row)`
cursor: pointer;
`;
type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean };
type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean; float?: boolean; };
export function StatusBarItem({
badge,
children,
float,
...props
}: StatusBarItemProps) {
const floatPos = float ? { zIndex: 10, boxShadow: 'rgba(0,0,0,0.2) 0px 0px 0px 999px' } : {};
return (
<Button
style={{ position: 'relative' }}
style={{ position: 'relative', ...floatPos }}
border={1}
color="washedGray"
bg="white"
px={2}
overflow='visible'
zIndex={10}
boxShadow="1px 1px black"
{...props}
>
{children}

46
pkg/interface/src/views/components/Triangle.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
import _ from "lodash";
import { Box } from "@tlon/indigo-react";
import { PropFunc } from "~/types";
export type Direction = "East" | "South" | "West" | "North";
type TriangleProps = PropFunc<typeof Box> & {
direction: Direction;
color: string;
size: number;
};
const borders = ["Top", "Bottom", "Left", "Right"] as const;
const directionToBorder = (dir: Direction): typeof borders[number] => {
switch (dir) {
case "East":
return "Left";
case "West":
return "Right";
case "North":
return "Bottom";
case "South":
return "Top";
}
};
const getBorders = (dir: Direction, height: number, color: string) => {
const solidBorder = directionToBorder(dir);
const transparent = borders.filter((x) => x !== solidBorder);
return {
[`border${solidBorder}`]: `${height}px solid`,
[`border${solidBorder}Color`]: color,
..._.mapValues(
_.keyBy(transparent, (border) => `border${border}`),
() => "16px solid transparent"
),
};
};
export function Triangle({ direction, color, size, ...rest }: TriangleProps) {
const borders = getBorders(direction, size, color);
return <Box width="0px" height="0px" {...borders} {...rest} />;
}

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

@ -3,7 +3,6 @@ import { Col, Text, BaseLabel, Label } from "@tlon/indigo-react";
import GlobalApi from "~/logic/api/global";
import { Association, NotificationGraphConfig } from "~/types";
import { StatelessAsyncToggle } from "~/views/components/StatelessAsyncToggle";
import {useTutorialModal} from "~/views/components/useTutorialModal";
interface ChannelNotificationsProps {
api: GlobalApi;
@ -27,7 +26,6 @@ export function ChannelNotifications(props: ChannelNotificationsProps) {
const anchorRef = useRef<HTMLElement | null>(null)
useTutorialModal('notifications', true, anchorRef.current);
return (
<Col mb="6" gapY="4" flexShrink={0}>

7
pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useRef, useCallback } from "react";
import { ModalOverlay } from "~/views/components/ModalOverlay";
import { Col, Box, Text, Row } from "@tlon/indigo-react";
import { ChannelPopoverRoutesSidebar } from "./Sidebar";
@ -36,9 +36,9 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
const overlayRef = useRef<HTMLElement>();
const history = useHistory();
useOutsideClick(overlayRef, () => {
const onDismiss = useCallback(() => {
history.push(props.baseUrl);
});
}, [history, props.baseUrl]);
const handleUnsubscribe = async () => {
const [,,ship,name] = association.resource.split('/');
@ -62,6 +62,7 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
width="100%"
spacing={[3, 5, 7]}
ref={overlayRef}
dismiss={onDismiss}
>
<Row
flexDirection={["column", "row"]}

1
pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
View File

@ -89,7 +89,6 @@ export function GroupSwitcher(props: {
flexShrink={0}
height='48px'
backgroundColor="white"
zIndex="2"
position="sticky"
top="0px"
pl='3'

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

@ -1,7 +1,6 @@
import React, { useRef, useCallback } from "react";
import { Route, Switch, RouteComponentProps, Link } from "react-router-dom";
import { Box, Row, Col, Icon, Text } from "@tlon/indigo-react";
import { useOutsideClick } from "~/logic/lib/useOutsideClick";
import { HoverBoxLink } from "~/views/components/HoverBox";
import { Contacts, Contact } from "~/types/contact-update";
import { Group } from "~/types/group-update";
@ -33,10 +32,9 @@ export function PopoverRoutes(
const relativeUrl = (url: string) => `${props.baseUrl}/popover${url}`;
const innerRef = useRef(null);
const onOutsideClick = useCallback(() => {
const onDismiss = useCallback(() => {
props.history.push(props.baseUrl);
}, [props.history.push, props.baseUrl]);
useOutsideClick(innerRef, onOutsideClick);
useHashLink();
@ -62,6 +60,7 @@ export function PopoverRoutes(
width="100%"
height="100%"
bg="white"
dismiss={onDismiss}
>
<Box
display="grid"

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

@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
import _ from 'lodash';
import { Box, Col, Row, Button, Text, Icon, Action } from "@tlon/indigo-react";
import { useHistory } from "react-router-dom";
import { TutorialProgress, tutorialProgress as progress } from "~/types";
@ -13,10 +14,13 @@ import {
MODAL_HEIGHT,
TUTORIAL_HOST,
TUTORIAL_GROUP,
getTrianglePosition,
} from "~/logic/lib/tutorialModal";
import { getRelativePosition } from "~/logic/lib/relativePosition";
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
import GlobalApi from "~/logic/api/global";
import {Triangle} from "~/views/components/Triangle";
import {ModalOverlay} from "~/views/components/ModalOverlay";
const localSelector = selectLocalState([
"tutorialProgress",
@ -24,6 +28,7 @@ const localSelector = selectLocalState([
"prevTutStep",
"tutorialRef",
"hideTutorial",
"set"
]);
export function TutorialModal(props: { api: GlobalApi }) {
@ -33,10 +38,12 @@ export function TutorialModal(props: { api: GlobalApi }) {
nextTutStep,
prevTutStep,
hideTutorial,
set: setLocalState
} = useLocalState(localSelector);
const {
title,
description,
arrow,
alignX,
alignY,
offsetX,
@ -44,23 +51,22 @@ export function TutorialModal(props: { api: GlobalApi }) {
} = progressDetails[tutorialProgress];
const [coords, setCoords] = useState({});
const [paused, setPaused] = useState(false);
const history = useHistory();
const next = useCallback(
(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.stopPropagation();
const next = useCallback( () => {
const idx = progress.findIndex((p) => p === tutorialProgress);
const { url } = progressDetails[progress[idx + 1]];
history.push(url);
nextTutStep();
history.push(url);
},
[nextTutStep, history, tutorialProgress, setCoords]
);
const prev = useCallback(() => {
const idx = progress.findIndex((p) => p === tutorialProgress);
history.push(progressDetails[progress[idx - 1]].url);
prevTutStep();
history.push(progressDetails[progress[idx - 1]].url);
}, [prevTutStep, history, tutorialProgress]);
const updatePos = useCallback(() => {
@ -75,25 +81,36 @@ export function TutorialModal(props: { api: GlobalApi }) {
if(key === 'bottom' || key === 'left') {
return ['0px', ...value];
}
return [null, ...value];
return ['unset', ...value];
});
if(!('bottom' in withMobile)) {
withMobile.bottom = ['0px', null];
withMobile.bottom = ['0px', 'unset'];
}
if(!('left' in withMobile)) {
withMobile.left = ['0px', null];
withMobile.left = ['0px', 'unset'];
}
if (newCoords) {
setCoords(withMobile);
} else {
setCoords({});
}
}, [tutorialRef]);
const dismiss = useCallback(() => {
const dismiss = useCallback(async () => {
hideTutorial();
props.api.settings.putEntry("tutorial", "seen", true);
await props.api.settings.putEntry('tutorial', 'seen', true);
}, [hideTutorial, props.api]);
const bailExit = useCallback(() => {
setPaused(false);
}, []);
const tryExit = useCallback(() => {
setPaused(true);
}, []);
const leaveGroup = useCallback(async () => {
await props.api.groups.leaveGroup(TUTORIAL_HOST, TUTORIAL_GROUP);
}, [props.api]);
@ -108,27 +125,81 @@ export function TutorialModal(props: { api: GlobalApi }) {
) {
const interval = setInterval(updatePos, 100);
return () => {
setCoords({});
clearInterval(interval);
};
}
return () => {};
}, [tutorialRef, tutorialProgress, updatePos]);
// manually center final window
useEffect(() => {
if (tutorialProgress === "done") {
const { innerWidth, innerHeight } = window;
const left = ["0px", `${(innerWidth - MODAL_WIDTH) / 2}px`];
const top = [null, `${(innerHeight - MODAL_HEIGHT) / 2}px`];
const bottom = ["0px", null];
setCoords({ top, left, bottom });
}
}, [tutorialProgress]);
const triPos = getTrianglePosition(arrow);
if (tutorialProgress === 'done') {
return (
<Portal>
<ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white">
<Col p="2" bg="lightBlue">
<Col mb="1">
<Text lineHeight="tall" fontWeight="bold">
Tutorial Finished
</Text>
<Text fontSize="0" gray>
{progressIdx} of {progress.length - 1}
</Text>
</Col>
<Text lineHeight="tall">
This tutorial is finished. Would you like to leave Beginner Island?
</Text>
<Row mt="2" gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={dismiss}>
Later
</Button>
<StatelessAsyncButton primary destructive onClick={leaveGroup}>
Leave Group
</StatelessAsyncButton>
</Row>
</Col>
</ModalOverlay>
</Portal>
);
}
if (tutorialProgress === "hidden") {
return null;
}
if(paused) {
return (
<ModalOverlay dismiss={bailExit} borderRadius="2" maxWidth="270px" backgroundColor="white">
<Col p="2">
<Col mb="1">
<Text lineHeight="tall" fontWeight="bold">
End Tutorial Now?
</Text>
</Col>
<Text lineHeight="tall">
You can always restart the tutorial by typing "tutorial" in Leap.
</Text>
<Row mt="4" gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={bailExit}>
Cancel
</Button>
<StatelessAsyncButton primary destructive onClick={dismiss}>
End Tutorial
</StatelessAsyncButton>
</Row>
</Col>
</ModalOverlay>
)
}
if(Object.keys(coords).length === 0) {
return null;
}
return (
<Portal>
<Box
@ -148,40 +219,47 @@ export function TutorialModal(props: { api: GlobalApi }) {
borderRadius="2"
p="2"
bg="lightBlue"
>
<Triangle
{...triPos}
position="absolute"
size={16}
color="lightBlue"
direction={arrow}
height="0px"
width="0px"
/>
<Box
right="8px"
top="8px"
position="absolute"
cursor="pointer"
onClick={dismiss}
onClick={tryExit}
>
<Icon icon="X" />
</Box>
<Text lineHeight="tall" fontWeight="medium">
{title}
</Text>
<Col mb="1">
<Text lineHeight="tall" fontWeight="bold">
{title}
</Text>
<Text fontSize="0" gray>
{progressIdx} of {progress.length - 2}
</Text>
</Col>
<Text lineHeight="tall">{description}</Text>
{tutorialProgress !== "done" ? (
<Row justifyContent="space-between">
<Action bg="transparent" onClick={prev}>
<Icon icon="ArrowWest" />
</Action>
<Text>
{progressIdx}/{progress.length - 1}
</Text>
<Action bg="transparent" onClick={next}>
<Icon icon="ArrowEast" />
</Action>
</Row>
) : (
<Row justifyContent="space-between">
<StatelessAsyncButton primary onClick={leaveGroup}>
Leave Group
</StatelessAsyncButton>
<Button onClick={dismiss}>Later</Button>
</Row>
)}
<Row gapX="2" mt="2" justifyContent="flex-end">
{ progressIdx > 1 && (
<Button bg="washedGray" onClick={prev}>
Back
</Button>
)}
<Button primary onClick={next}>
Next
</Button>
</Row>
</Col>
</Box>
</Portal>