mirror of
https://github.com/urbit/shrub.git
synced 2024-12-24 03:14:30 +03:00
Merge pull request #4415 from urbit/lf/tutorial-fixes
Tutorial: bugfixes
This commit is contained in:
commit
16d83d97ab
@ -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(),
|
||||
|
@ -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,
|
||||
|
@ -39,10 +39,11 @@ const commandIndex = function (currentGroup, groups, associations) {
|
||||
: !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;
|
||||
};
|
||||
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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 => {
|
||||
|
@ -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 {
|
||||
|
@ -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 (
|
||||
<>
|
||||
|
@ -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()
|
||||
@ -49,6 +51,8 @@ export default function NotificationsScreen(props: any) {
|
||||
: filter.groups
|
||||
.map((g) => props.associations?.groups?.[g]?.metadata?.title)
|
||||
.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>
|
||||
|
@ -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
|
||||
|
@ -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) => {
|
||||
|
@ -1,13 +1,35 @@
|
||||
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;
|
||||
}
|
||||
export const ModalOverlay = React.forwardRef(
|
||||
(props: ModalOverlayProps & PropFunc<typeof Box>, ref) => {
|
||||
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"
|
||||
@ -15,15 +37,16 @@ export const ModalOverlay = React.forwardRef(
|
||||
top="0px"
|
||||
width="100%"
|
||||
height="100%"
|
||||
zIndex={10}
|
||||
position="fixed"
|
||||
display="flex"
|
||||
zIndex={10}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
p={spacing}
|
||||
onClick={onClick}
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
<Box ref={ref} {...rest} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -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" />
|
||||
|
@ -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
46
pkg/interface/src/views/components/Triangle.tsx
Normal 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} />;
|
||||
}
|
@ -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}>
|
||||
|
@ -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"]}
|
||||
|
@ -89,7 +89,6 @@ export function GroupSwitcher(props: {
|
||||
flexShrink={0}
|
||||
height='48px'
|
||||
backgroundColor="white"
|
||||
zIndex="2"
|
||||
position="sticky"
|
||||
top="0px"
|
||||
pl='3'
|
||||
|
@ -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"
|
||||
|
@ -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 });
|
||||
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>
|
||||
);
|
||||
}
|
||||
}, [tutorialProgress]);
|
||||
|
||||
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">
|
||||
<Col mb="1">
|
||||
<Text lineHeight="tall" fontWeight="bold">
|
||||
{title}
|
||||
</Text>
|
||||
<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 fontSize="0" gray>
|
||||
{progressIdx} of {progress.length - 2}
|
||||
</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>
|
||||
</Col>
|
||||
|
||||
<Text lineHeight="tall">{description}</Text>
|
||||
<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>
|
||||
|
Loading…
Reference in New Issue
Block a user