ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-21 07:28:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release/next-js' into la/release-2021-03-04

Browse Source
This commit is contained in:
Matilde Park 2021-03-04 12:34:01 -05:00
commit f1356ed96d
57 changed files with 340 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pkg/arvo/app/settings-store.hoon
View File

@ -1,5 +1,5 @@
/- *settings
/+ verb, dbug, default-agent
/+ verb, dbug, default-agent, agentio
|%
+$ card card:agent:gall
+$ versioned-state
@ -20,10 +20,14 @@
+* this .
do ~(. +> bol)
def ~(. (default-agent this %|) bol)
io ~(. agentio bol)
::
++ on-init
^- (quip card _this)
`this
=^ cards state
(put-entry:do %tutorial %seen b+|)
[cards this]
::
++ on-save !>(state)
::

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

@ -127,11 +127,11 @@ module.exports = {
plugins: [
new UrbitShipPlugin(urbitrc),
new webpack.DefinePlugin({
'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
'process.env.TUTORIAL_HOST': JSON.stringify('~difmex-passed'),
'process.env.TUTORIAL_GROUP': JSON.stringify('beginner-island'),
'process.env.TUTORIAL_CHAT': JSON.stringify('chat-1704'),
'process.env.TUTORIAL_BOOK': JSON.stringify('book-9695'),
'process.env.TUTORIAL_LINKS': JSON.stringify('link-2827'),
'process.env.TUTORIAL_CHAT': JSON.stringify('introduce-yourself-7010'),
'process.env.TUTORIAL_BOOK': JSON.stringify('guides-9684'),
'process.env.TUTORIAL_LINKS': JSON.stringify('community-articles-2143'),
})
// new CleanWebpackPlugin(),

10
pkg/interface/config/webpack.prod.js
View File

@ -61,12 +61,12 @@ module.exports = {
new webpack.DefinePlugin({
'process.env.LANDSCAPE_STREAM': JSON.stringify(process.env.LANDSCAPE_STREAM),
'process.env.LANDSCAPE_SHORTHASH': JSON.stringify(GIT_DESC),
'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
'process.env.TUTORIAL_HOST': JSON.stringify('~difmex-passed'),
'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('links-4353'),
})
'process.env.TUTORIAL_CHAT': JSON.stringify('introduce-yourself-7010'),
'process.env.TUTORIAL_BOOK': JSON.stringify('guides-9684'),
'process.env.TUTORIAL_LINKS': JSON.stringify('community-articles-2143'),
}),
// new HtmlWebpackPlugin({
// title: 'Hot Module Replacement',
// template: './public/index.html',

BIN
pkg/interface/package-lock.json generated
View File

Binary file not shown.

2
pkg/interface/package.json
View File

@ -10,7 +10,7 @@
"@reach/tabs": "^0.10.5",
"@tlon/indigo-dark": "^1.0.6",
"@tlon/indigo-light": "^1.0.6",
"@tlon/indigo-react": "1.2.17",
"@tlon/indigo-react": "^1.2.19",
"@tlon/sigil-js": "^1.4.3",
"@urbit/api": "file:../npm/api",
"aws-sdk": "^2.830.0",

23
pkg/interface/src/logic/lib/idling.ts Normal file
View File

@ -0,0 +1,23 @@
import { useState, useEffect } from 'react';
export function useIdlingState() {
const [idling, setIdling] = useState(false);
useEffect(() => {
function blur() {
setIdling(true);
}
function focus() {
setIdling(false);
}
window.addEventListener('blur', blur);
window.addEventListener('focus', focus);
return () => {
window.removeEventListener('blur', blur);
window.removeEventListener('focus', focus);
}
}, []);
return idling;
}

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

@ -79,7 +79,7 @@ const otherIndex = function(config) {
messages: result('Messages', '/~landscape/messages', 'messages', null),
logout: result('Log Out', '/~/logout', 'logout', null)
};
other.push(result('Tutorial', '/?tutorial=true', 'tutorial', null));
for(let cat of config.categories) {
if(idx[cat]) {
other.push(idx[cat]);

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

@ -12,6 +12,7 @@ export const TUTORIAL_GROUP = process.env.TUTORIAL_GROUP!;
export const TUTORIAL_CHAT = process.env.TUTORIAL_CHAT!;
export const TUTORIAL_BOOK = process.env.TUTORIAL_BOOK!;
export const TUTORIAL_LINKS = process.env.TUTORIAL_LINKS!;
export const TUTORIAL_GROUP_RESOURCE = `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}` ;
interface StepDetail {
title: string;
@ -26,7 +27,7 @@ interface StepDetail {
export function hasTutorialGroup(props: { associations: Associations }) {
return (
`/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}` in props.associations.groups
TUTORIAL_GROUP_RESOURCE in props.associations.groups
);
}
@ -90,7 +91,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
alignY: 'top',
arrow: 'East',
offsetX: MODAL_WIDTH + 24,
offsetY: MODAL_HEIGHT / 2 - 8
offsetY: 80,
},
channels: {
title: 'Channels',
@ -143,7 +144,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
alignY: 'top',
alignX: 'left',
arrow: 'North',
offsetX: (MODAL_WIDTH / 2) - 16,
offsetX: 0,
offsetY: -48
},
profile: {
@ -155,17 +156,17 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
alignX: 'right',
arrow: 'South',
offsetX: -300 + MODAL_WIDTH / 2,
offsetY: -120 + MODAL_HEIGHT / 2
offsetY: -60,
},
leap: {
title: 'Leap',
description:
'Leap allows you to go to a specific channel, message, collection, profile or group simply by typing in a command or selecting a shortcut from the dropdown menu.',
url: `/~profile/~${window.ship}`,
alignY: 'top',
alignX: 'left',
arrow: 'North',
offsetX: 0.3 *MODAL_HEIGHT,
offsetY: -48
}
alignY: "top",
alignX: "left",
arrow: "North",
offsetX: 76,
offsetY: -48,
},
};

2
pkg/interface/src/logic/state/local.tsx
View File

@ -7,6 +7,7 @@ import { BackgroundConfig, RemoteContentPolicy, TutorialProgress, tutorialProgre
export interface LocalState {
theme: "light" | "dark" | "auto";
hideAvatars: boolean;
hideNicknames: boolean;
remoteContentPolicy: RemoteContentPolicy;
@ -35,6 +36,7 @@ export const selectLocalState =
const useLocalState = create<LocalStateZus>(persist((set, get) => ({
dark: false,
background: undefined,
theme: "auto",
hideAvatars: false,
hideNicknames: false,
hideLeapCats: [],

14
pkg/interface/src/logic/state/settings.tsx
View File

@ -11,6 +11,7 @@ export interface SettingsState {
backgroundType: 'none' | 'url' | 'color';
background?: string;
dark: boolean;
theme: "light" | "dark" | "auto";
};
calm: {
hideNicknames: boolean;
@ -22,7 +23,11 @@ export interface SettingsState {
remoteContentPolicy: RemoteContentPolicy;
leap: {
categories: LeapCategories[];
}
};
tutorial: {
seen: boolean;
joined?: number;
};
set: (fn: (state: SettingsState) => void) => void
};
@ -33,11 +38,14 @@ export const selectSettingsState =
export const selectCalmState = (s: SettingsState) => s.calm;
export const selectDisplayState = (s: SettingsState) => s.display;
const useSettingsState = create<SettingsStateZus>((set) => ({
display: {
backgroundType: 'none',
background: undefined,
dark: false,
theme: "auto"
},
calm: {
hideNicknames: false,
@ -55,6 +63,10 @@ const useSettingsState = create<SettingsStateZus>((set) => ({
leap: {
categories: leapCategories,
},
tutorial: {
seen: false,
joined: undefined
},
set: (fn: (state: SettingsState) => void) => set(produce(fn))
}));

11
pkg/interface/src/views/App.js
View File

@ -68,7 +68,6 @@ const Root = withSettingsState(styled.div`
`, ['display']);
const StatusBarWithRouter = withRouter(StatusBar);
class App extends React.Component {
constructor(props) {
super(props);
@ -135,13 +134,14 @@ class App extends React.Component {
const { state, props } = this;
const associations = state.associations ?
state.associations : { contacts: {} };
const theme = props.dark ? dark : light;
const background = this.props.background;
const theme =
((props.dark && props?.display?.theme == "auto") ||
props?.display?.theme == "dark"
) ? dark : light;
const notificationsCount = state.notificationsCount || 0;
const doNotDisturb = state.doNotDisturb || false;
const ourContact = this.state.contacts[`~${this.ship}`] || null;
return (
<ThemeProvider theme={theme}>
<Helmet>
@ -196,5 +196,4 @@ class App extends React.Component {
}
}
export default withLocalState(process.env.NODE_ENV === 'production' ? App : hot(App));
export default withSettingsState(withLocalState(process.env.NODE_ENV === 'production' ? App : hot(App)), ['display']);

8
pkg/interface/src/views/apps/chat/components/ChatInput.tsx
View File

@ -130,7 +130,13 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
props.ourContact &&
((props.ourContact.avatar !== null) && !props.hideAvatars)
)
? <BaseImage src={props.ourContact.avatar} height={16} width={16} className="dib" />
? <BaseImage
src={props.ourContact.avatar}
height={16}
width={16}
style={{ objectFit: 'cover' }}
display='inline-block'
/>
: <Sigil
ship={window.ship}
size={16}

8
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -37,6 +37,7 @@ import styled from 'styled-components';
import useLocalState from '~/logic/state/local';
import useSettingsState, {selectCalmState} from "~/logic/state/settings";
import Timestamp from '~/views/components/Timestamp';
import {useIdlingState} from '~/logic/lib/idling';
export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
@ -64,16 +65,16 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
export const UnreadMarker = React.forwardRef(({ dayBreak, when, api, association }, ref) => {
const [visible, setVisible] = useState(false);
const idling = useIdlingState();
const dismiss = useCallback(() => {
api.hark.markCountAsRead(association, '/', 'message');
}, [api, association]);
useEffect(() => {
if(visible) {
console.log('dismissing');
if(visible && !idling) {
dismiss();
}
}, [visible]);
}, [visible, idling]);
return (
<Row
@ -293,6 +294,7 @@ export const MessageAuthor = ({
contact?.avatar && !hideAvatars ? (
<BaseImage
display='inline-block'
style={{ objectFit: 'cover' }}
src={contact.avatar}
height={16}
width={16}

9
pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
View File

@ -88,8 +88,6 @@ export default class ChatWindow extends Component<
componentDidMount() {
this.calculateUnreadIndex();
window.addEventListener('blur', this.handleWindowBlur);
window.addEventListener('focus', this.handleWindowFocus);
setTimeout(() => {
if (this.props.scrollTo) {
this.scrollToUnread();
@ -99,11 +97,6 @@ export default class ChatWindow extends Component<
}, this.INITIALIZATION_MAX_TIME);
}
componentWillUnmount() {
window.removeEventListener('blur', this.handleWindowBlur);
window.removeEventListener('focus', this.handleWindowFocus);
}
calculateUnreadIndex() {
const { graph, unreadCount } = this.props;
const unreadIndex = graph.keys()[unreadCount];
@ -113,7 +106,6 @@ export default class ChatWindow extends Component<
});
return;
}
console.log(`found unread: ${unreadIndex}`);
this.setState({
unreadIndex
});
@ -201,7 +193,6 @@ export default class ChatWindow extends Component<
this.calculateUnreadIndex();
}
this.fetchPending = false;
console.log(currSize, graph.size);
return currSize === graph.size;
}

12
pkg/interface/src/views/apps/chat/components/content/text.js
View File

@ -40,6 +40,18 @@ const renderers = {
</Text>
);
},
blockquote: ({ children }) => {
return (
<Text
lineHeight="20px"
display="block"
borderLeft="1px solid"
color="black"
paddingLeft={2}>
{children}
</Text>
)
},
paragraph: ({ children }) => {
return (
<Text fontSize='1' lineHeight={'20px'}>

109
pkg/interface/src/views/apps/chat/css/custom.css
View File

@ -50,12 +50,6 @@ button {
background-color: #fff;
}
a {
color: #000;
font-weight: 400;
text-decoration: none;
}
h2 {
font-weight: 400;
}
@ -80,10 +74,6 @@ h2 {
font-family: 'Source Code Pro', monospace;
}
.bg-welcome-green {
background-color: #ecf6f2;
}
.c-default {
cursor: default;
}
@ -158,38 +148,11 @@ h2 {
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-full-s {
flex-basis: 100%;
}
.h-100-minus-96-s {
height: calc(100% - 96px);
}
.unread-notice {
top: 96px;
}
}
@media all and (min-width: 34.375em) and (max-width: 46.875em) {
.flex-basis-250-m {
flex-basis: 250px;
}
}
@media all and (min-width: 46.875em) and (max-width: 60em) {
.flex-basis-250-l {
flex-basis: 250px;
}
}
@media all and (min-width: 60em) {
.flex-basis-250-xl {
flex-basis: 250px;
}
}
blockquote {
padding: 0 0 0 16px;
margin: 0;
@ -345,79 +308,13 @@ pre.CodeMirror-placeholder.CodeMirror-line-like {
/* dark */
@media (prefers-color-scheme: dark) {
.bg-black-d {
background-color: black;
}
.white-d {
color: white;
}
.gray1-d {
color: #4d4d4d;
}
.gray2-d {
color: #7f7f7f;
}
.gray3-d {
color: #b1b2b3;
}
.gray4-d {
color: #e6e6e6;
}
.bg-gray0-d {
background-color: #333;
}
.bg-gray1-d {
background-color: #4d4d4d;
}
.b--gray0-d {
border-color: #333;
}
.b--gray1-d {
border-color: #4d4d4d;
}
.b--gray2-d {
border-color: #7f7f7f;
}
.b--white-d {
border-color: #fff;
}
.b--green2-d {
border-color: #2aa779;
}
.bb-d {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.invert-d {
filter: invert(1);
}
.o-80-d {
opacity: 0.8;
}
.focus-b--white-d:focus {
border-color: #fff;
}
a {
color: #fff;
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
blockquote {
border-left: 1px solid white;
}
.contrast-10-d {
filter: contrast(0.1);
}
.bg-none-d {
background: none;
border-left: 1px solid inherit;
}
/* codemirror */
.chat .cm-s-tlon.CodeMirror {
color: #fff;
color: inherit;
}
.chat .cm-s-tlon span.cm-def {
@ -468,7 +365,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like {
/* set rules w/ both color & bg-color last to preserve legibility */
.chat .CodeMirror-selected {
background: var(--medium-gray) !important;
color: white;
color: inherit;
}
.chat .cm-s-tlon span.cm-comment {

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

@ -13,6 +13,7 @@ import Tile from './components/tiles/tile';
import Groups from './components/Groups';
import ModalButton from './components/ModalButton';
import { StatelessAsyncButton } from '~/views/components/StatelessAsyncButton';
import { StarIcon } from '~/views/components/StarIcon';
import { writeText } from '~/logic/lib/util';
import { useModal } from "~/logic/lib/useModal";
import { NewGroup } from "~/views/landscape/components/NewGroup";
@ -45,6 +46,7 @@ const tutSelector = f.pick(['tutorialProgress', 'nextTutStep', 'hideGroups']);
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"]}
@ -103,10 +105,11 @@ export default function LaunchApp(props) {
e.stopPropagation();
if(!hasTutorialGroup(props)) {
await props.api.groups.join(TUTORIAL_HOST, TUTORIAL_GROUP);
await props.api.settings.putEntry('tutorial', 'joined', Date.now());
await waiter(hasTutorialGroup);
await Promise.all(
[TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph =>
props.api.graph.join(TUTORIAL_HOST, graph)));
props.api.graph.joinGraph(TUTORIAL_HOST, graph)));
await waiter(p => {
return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph &&
@ -117,20 +120,33 @@ export default function LaunchApp(props) {
nextTutStep();
dismiss();
}
return (
<Col maxWidth="350px" gapY="2" p="3">
return exitingTut ? (
<Col maxWidth="350px" p="3">
<Icon icon="Info" fill="black"></Icon>
<Text my="3" lineHeight="tall">
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">
<Icon width="32px" height="32px" color="blue" display="block" icon="LargeBullet" />
<StarIcon width="32px" height="32px" color="blue" display="block" />
</Box>
<Text lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text lineHeight="tall">
<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>
<Button
backgroundColor="washedGray"
onClick={() => setExitingTut(true)}
>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}>
Yes
</StatelessAsyncButton>

18
pkg/interface/src/views/apps/launch/components/Groups.tsx
View File

@ -2,21 +2,26 @@ import React, { useRef } from 'react';
import { Box, Text, Col } from '@tlon/indigo-react';
import f from 'lodash/fp';
import _ from 'lodash';
import moment from 'moment';
import { Associations, Association, Unreads, UnreadStats } from '@urbit/api';
import { alphabeticalOrder } from '~/logic/lib/util';
import { getUnreadCount, getNotificationCount } from '~/logic/lib/hark';
import Tile from '../components/tiles/tile';
import { useTutorialModal } from '~/views/components/useTutorialModal';
import { TUTORIAL_HOST, TUTORIAL_GROUP } from '~/logic/lib/tutorialModal';
import useSettingsState, { selectCalmState } from '~/logic/state/settings';
import { TUTORIAL_HOST, TUTORIAL_GROUP, TUTORIAL_GROUP_RESOURCE } from '~/logic/lib/tutorialModal';
import useSettingsState, { selectCalmState, SettingsState } from '~/logic/state/settings';
interface GroupsProps {
associations: Associations;
}
const sortGroupsAlph = (a: Association, b: Association) =>
alphabeticalOrder(a.metadata.title, b.metadata.title);
a.group === TUTORIAL_GROUP_RESOURCE
? -1
: b.group === TUTORIAL_GROUP_RESOURCE
? 1
: alphabeticalOrder(a.metadata.title, b.metadata.title);
const getGraphUnreads = (associations: Associations, unreads: Unreads) => (path: string) =>
f.flow(
@ -72,6 +77,7 @@ interface GroupProps {
unreads: number;
first: boolean;
}
const selectJoined = (s: SettingsState) => s.tutorial.joined;
function Group(props: GroupProps) {
const { path, title, unreads, updates, first = false } = props;
const anchorRef = useRef<HTMLElement>(null);
@ -79,14 +85,18 @@ function Group(props: GroupProps) {
useTutorialModal(
'start',
isTutorialGroup,
anchorRef.current
anchorRef
);
const { hideUnreads } = useSettingsState(selectCalmState)
const joined = useSettingsState(selectJoined);
return (
<Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? '1' : null}>
<Col height="100%" justifyContent="space-between">
<Text>{title}</Text>
{!hideUnreads && (<Col>
{isTutorialGroup && joined &&
(<Text>{Math.floor(moment.duration(moment(joined).add(14, 'days').diff(moment())).as('days'))} days remaining</Text>)
}
{updates > 0 &&
(<Text mt="1" color="blue">{updates} update{updates !== 1 && 's'} </Text>)
}

1
pkg/interface/src/views/apps/launch/components/tiles/custom.js
View File

@ -17,7 +17,6 @@ export default class CustomTile extends React.PureComponent {
>
<BaseImage
position='absolute'
className="invert-d"
style={{ left: 38, top: 38 }}
src='/~launch/img/UnknownCustomTile.png'
width='48px'

15
pkg/interface/src/views/apps/launch/css/custom.css
View File

@ -53,25 +53,10 @@ button {
/* dark */
@media all and (prefers-color-scheme: dark) {
.bg-gray0-d {
background-color: #333;
}
.bg-gray1-d {
background-color: #4d4d4d;
}
.bg-gray2-d {
background-color: #7f7f7f;
}
.b--gray1-d {
border-color: #4d4d4d;
}
.white-d {
color: #fff;
}
.invert-d {
filter: invert(1);
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
}

1
pkg/interface/src/views/apps/links/LinkResource.tsx
View File

@ -69,6 +69,7 @@ export function LinkResource(props: LinkResourceProps) {
render={(props) => {
return (
<LinkWindow
key={rid}
s3={s3}
association={resource}
contacts={contacts}

19
pkg/interface/src/views/apps/links/css/custom.css
View File

@ -17,22 +17,3 @@
width: 100%;
height: 100%;
}
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s, .flex-basis-full-s {
flex-basis: 100%;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-30-ns {
flex-basis: 30vw;
}
}

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

@ -51,7 +51,7 @@ export default function NotificationsScreen(props: any): ReactElement {
.map(g => props.associations?.groups?.[g]?.metadata?.title)
.join(', ');
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('notifications', true, anchorRef.current);
useTutorialModal('notifications', true, anchorRef);
return (
<Switch>
<Route
@ -74,7 +74,8 @@ export default function NotificationsScreen(props: any): ReactElement {
borderBottom="1"
borderBottomColor="washedGray"
>
<Text>Updates</Text>
<Text ref={anchorRef}>Notifications</Text>
<Row
justifyContent="space-between"
>

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

@ -47,7 +47,7 @@ export function Profile(props: any): ReactElement {
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef.current);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
return (
<Center

9
pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
View File

@ -3,7 +3,7 @@ import moment from 'moment';
import { Link } from 'react-router-dom';
import { BigInteger } from 'big-integer';
import { Box } from '@tlon/indigo-react';
import { Box, Text } from '@tlon/indigo-react';
import { Graph } from '@urbit/api';
import { getLatestRevision } from '~/logic/lib/publish';
@ -24,13 +24,14 @@ function NavigationItem(props: {
textAlign={props.prev ? 'left' : 'right'}
>
<Link to={props.url}>
<Box color="gray" mb={2}>
<Text display='block' color="gray">
{props.prev ? 'Previous' : 'Next'}
</Box>
<Box mb={1}>{props.title}</Box>
</Text>
<Text display='block' lineHeight="tall">{props.title}</Text>
<Timestamp
stamp={moment(props.date)}
time={false}
fontSize="1"
justifyContent={props.prev ? 'flex-start' : 'flex-end'}
/>
</Link>

10
pkg/interface/src/views/apps/publish/components/NotePreview.tsx
View File

@ -68,7 +68,15 @@ export function NotePreview(props: NotePreviewProps) {
unwrapDisallowed
allowedTypes={['text', 'root', 'break', 'paragraph', 'image']}
renderers={{
image: props => <Image src={props.src} maxHeight='300px' style={{ objectFit: 'cover' }} />
image: props => (
<Box
backgroundImage={`url(${props.src})`}
style={{ backgroundSize: 'cover',
backgroundPosition: "center" }}
>
<Image src={props.src} opacity="0" maxHeight="300px"/>
</Box>
)
}}
source={snippet}
/>

102
pkg/interface/src/views/apps/publish/css/custom.css
View File

@ -5,41 +5,6 @@
--light-gray: rgba(0,0,0,0.08);
}
.bg-welcome-green {
background-color: #ECF6F2;
}
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s, .flex-basis-full-s {
flex-basis: 100%;
}
.h-100-m-40-s {
height: calc(100% - 40px);
}
.black-s {
color: #000;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-250-ns {
flex-basis: 250px;
}
.h-100-m-40-ns {
height: calc(100% - 40px);
}
}
.bg-light-green {
background: rgba(42, 167, 121, 0.1);
}
.NotebookButton {
border-radius:2px;
cursor: pointer;
@ -207,57 +172,6 @@
}
@media all and (prefers-color-scheme: dark) {
.bg-black-d {
background-color: black;
}
.white-d {
color: white;
}
.gray1-d {
color: #4d4d4d;
}
.gray2-d {
color: #7f7f7f;
}
.gray3-d {
color: #b1b2b3;
}
.gray4-d {
color: #e6e6e6;
}
.bg-gray0-d {
background-color: #333;
}
.bg-gray1-d {
background-color: #4d4d4d;
}
.b--gray0-d {
border-color: #333;
}
.b--gray1-d {
border-color: #4d4d4d;
}
.b--gray2-d {
border-color: #7f7f7f;
}
.b--white-d {
border-color: #fff;
}
.invert-d {
filter: invert(1);
}
.o-60-d {
opacity: .6;
}
a {
color: #fff;
}
.focus-b--white-d:focus {
border-color: #fff;
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
.options.open {
background-color: #4d4d4d;
}
@ -266,32 +180,32 @@
}
.publish .cm-s-tlon.CodeMirror {
background: unset;
color: #fff;
color: inherit;
}
.publish .cm-s-tlon span.cm-def {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable-2 {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable-3,
.publish .cm-s-tlon span.cm-type {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-property {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-operator {
color: white;
color: inherit;
}
@ -325,7 +239,7 @@
color: black;
display: inline-block;
padding: 0;
background-color: rgba(255,255,255, 0.3);
background-color: rgba(0,255,255, 0.3);
border-radius: 2px;
}
}

4
pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
View File

@ -78,9 +78,9 @@ export function CalmPrefs(props: {
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
<BackButton/>
<Col gapY="1">
<Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
<Col gapY="1" mt="0">
<Text color="black" fontSize={2} fontWeight="medium">
CalmEngine
</Text>

21
pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
View File

@ -3,6 +3,8 @@ import React from "react";
import {
Col,
Text,
Label,
ManagedRadioButtonField as Radio
} from "@tlon/indigo-react";
import { Formik, Form } from "formik";
import * as Yup from "yup";
@ -20,13 +22,16 @@ const formSchema = Yup.object().shape({
.oneOf(["none", "color", "url"], "invalid")
.required("Required"),
background: Yup.string(),
theme: Yup.string()
.oneOf(["light", "dark", "auto"])
.required("Required")
});
interface FormSchema {
bgType: BgType;
bgColor: string | undefined;
bgUrl: string | undefined;
theme: string;
}
interface DisplayFormProps {
@ -43,6 +48,7 @@ export default function DisplayForm(props: DisplayFormProps) {
display: {
background,
backgroundType,
theme
}
} = useSettingsState(settingsSel);
@ -63,13 +69,13 @@ export default function DisplayForm(props: DisplayFormProps) {
{
bgType: backgroundType,
bgColor: bgColor || "",
bgUrl
bgUrl,
theme
} as FormSchema
}
onSubmit={async (values, actions) => {
let promises = [] as Promise<any>[];
promises.push(api.settings.putEntry('display', 'backgroundType', values.bgType));
promises.push(
api.settings.putEntry('display', 'background',
values.bgType === "color"
@ -79,6 +85,7 @@ export default function DisplayForm(props: DisplayFormProps) {
: false
));
promises.push(api.settings.putEntry('display', 'theme', values.theme));
await Promise.all(promises);
actions.setStatus({ success: null });
@ -87,9 +94,9 @@ export default function DisplayForm(props: DisplayFormProps) {
>
{(props) => (
<Form>
<Col p="5" pt="4" gapY="5">
<BackButton/>
<Col gapY="2">
<Col p="5" pt="4" gapY="5">
<Col gapY="1" mt="0">
<Text color="black" fontSize={2} fontWeight="medium">
Display Preferences
</Text>
@ -103,6 +110,10 @@ export default function DisplayForm(props: DisplayFormProps) {
api={api}
s3={s3}
/>
<Label>Theme</Label>
<Radio name="theme" id="light" label="Light"/>
<Radio name="theme" id="dark" label="Dark" />
<Radio name="theme" id="auto" label="Auto" />
<AsyncButton primary width="fit-content" type="submit">
Save
</AsyncButton>

6
pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
View File

@ -74,9 +74,10 @@ export function LeapSettings(props: { api: GlobalApi; }) {
};
return (
<Col p="5" pt="4" gapY="5">
<>
<BackButton/>
<Col gapY="1">
<Col p="5" pt="4" gapY="5">
<Col gapY="1" mt="0">
<Text fontSize="2" fontWeight="medium">
Leap
</Text>
@ -97,5 +98,6 @@ export function LeapSettings(props: { api: GlobalApi; }) {
</Form>
</FormikOnBlur>
</Col>
</>
);
}

6
pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
View File

@ -51,9 +51,10 @@ export function NotificationPreferences(props: {
}, [api]);
return (
<Col p="5" pt="4" gapY="5">
<>
<BackButton/>
<Col gapY="1">
<Col p="5" pt="4" gapY="5">
<Col gapY="1" mt="0">
<Text fontSize="2" fontWeight="medium">
Notification Preferences
</Text>
@ -84,5 +85,6 @@ export function NotificationPreferences(props: {
</Form>
</FormikOnBlur>
</Col>
</>
);
}

4
pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
View File

@ -64,9 +64,9 @@ export default function S3Form(props: S3FormProps): ReactElement {
onSubmit={onSubmit}
>
<Form>
<Col maxWidth="600px" gapY="5">
<BackButton/>
<Col gapY="1">
<Col maxWidth="600px" gapY="5">
<Col gapY="1" mt="0">
<Text color="black" fontSize={2} fontWeight="medium">
S3 Storage Setup
</Text>

6
pkg/interface/src/views/apps/settings/components/lib/Security.tsx
View File

@ -17,9 +17,10 @@ interface SecuritySettingsProps {
export default function SecuritySettings({ api }: SecuritySettingsProps) {
const [allSessions, setAllSessions] = useState(false);
return (
<Col gapY="5" p="5" pt="4">
<>
<BackButton/>
<Col gapY="1">
<Col gapY="5" p="5" pt="4">
<Col gapY="1" mt="0">
<Text fontSize={2} fontWeight="medium">
Security Preferences
</Text>
@ -56,5 +57,6 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
</form>
</Col>
</Col>
</>
);
}

1
pkg/interface/src/views/components/Author.tsx
View File

@ -47,6 +47,7 @@ export default function Author(props: AuthorProps): ReactElement {
<BaseImage
display='inline-block'
src={contact.avatar}
style={{ objectFit: 'cover' }}
height={16}
width={16}
/>

2
pkg/interface/src/views/components/DropdownSearch.tsx
View File

@ -114,7 +114,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>): ReactElement {
search(e.target.value);
setQuery(e.target.value);
},
[setQuery]
[search, onChange]
);
const dropdown = useMemo(() => {

1
pkg/interface/src/views/components/ProfileOverlay.tsx
View File

@ -98,6 +98,7 @@ class ProfileOverlay extends PureComponent<
contact?.avatar && !hideAvatars ? (
<BaseImage
display='inline-block'
style={{ objectFit: 'cover' }}
src={contact.avatar}
height={72}
width={72}

16
pkg/interface/src/views/components/RichText.js
View File

@ -3,7 +3,7 @@ import RemoteContent from '~/views/components/RemoteContent';
import { hasProvider } from 'oembed-parser';
import ReactMarkdown from 'react-markdown';
import RemarkDisableTokenizers from 'remark-disable-tokenizers';
import { BaseAnchor, Text } from '@tlon/indigo-react';
import { Anchor, Text } from '@tlon/indigo-react';
import { isValidPatp } from 'urbit-ob';
import { deSig } from '~/logic/lib/util';
@ -37,7 +37,7 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
return <RemoteContent className="mw-100" url={linkProps.href} />;
}
return <BaseAnchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' remoteContentPolicy={remoteContentPolicy} {...linkProps}>{linkProps.children}</BaseAnchor>;
return <Anchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' remoteContentPolicy={remoteContentPolicy} {...linkProps}>{linkProps.children}</Anchor>;
},
linkReference: (linkProps) => {
const linkText = String(linkProps.children[0].props.children);
@ -46,6 +46,18 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
}
return linkText;
},
blockquote: (blockquoteProps) => {
return (
<Text
lineHeight="20px"
display="block"
borderLeft="1px solid"
color="black"
paddingLeft={2} {...props}>
{blockquoteProps.children}
</Text>
)
},
paragraph: (paraProps) => {
return <Text display={props.inline ? 'inline' : 'block'} mb='2' {...props}>{paraProps.children}</Text>;
}

10
pkg/interface/src/views/components/ShipSearch.tsx
View File

@ -37,16 +37,18 @@ interface InviteSearchProps<I extends string> {
maxLength?: number;
}
const getNicknameForShips = (groups: Groups, contacts: Rolodex): readonly [string[], Map<string, string[]>] => {
const getNicknameForShips = (groups: Groups, contacts: Rolodex, selected: string[]): readonly [string[], Map<string, string[]>] => {
const peerSet = new Set<string>();
const nicknames = new Map<string, string[]>();
_.forEach(groups, (group, path) => {
if (group.members.size > 0) {
const groupEntries = group.members.values();
for (const member of groupEntries) {
if(!selected.includes(member)) {
peerSet.add(member);
}
}
}
const groupContacts = contacts;
@ -116,15 +118,15 @@ export function ShipSearch<I extends string, V extends Value<I>>(
const inputIdx = useRef(initialValues[id].length);
const selected: string[] = values[id] ?? [];
const selected: string[] = useMemo(() => values[id] ?? [], [values, id]);
const name = () => `${props.id}[${inputIdx.current}]`;
const pills = selected.slice(0, inputIdx.current);
const [peers, nicknames] = useMemo(
() => getNicknameForShips(props.groups, props.contacts),
[props.contacts, props.groups]
() => getNicknameForShips(props.groups, props.contacts, selected),
[props.contacts, props.groups, selected]
);
const renderCandidate = useCallback(

27
pkg/interface/src/views/components/StarIcon.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import css, { SystemStyleObject } from "@styled-system/css";
import styled from "styled-components";
import { BaseSVG } from "@tlon/indigo-react";
import { PropFunc } from "~/types";
type StarIconProps = PropFunc<typeof BaseSVG> & SvgProps;
interface SvgProps {
color?: string;
}
const Svg = styled(BaseSVG)(({ color }: SvgProps) =>
css({
"& > *": {
fill: typeof color === "undefined" ? "inherit" : color || "black",
},
flexShrink: 0,
} as SystemStyleObject)
);
export function StarIcon(props: StarIconProps) {
return (
<Svg {...props}>
<path d="M9.72024 1.7095c.043-.97631 1.31686-1.317634 1.84226-.49363l1.595 2.50165c.3931.61651 1.2933.61651 1.6864 0l1.595-2.50164c.5254-.824012 1.7993-.482689 1.8423.49362l.1305 2.96401c.0322.73046.8118 1.18056 1.4604.84319l2.6322-1.36896c.867-.45092 1.7995.48159 1.3486 1.3486L22.484 8.12852c-.3374.64867.1127 1.42827.8431 1.46044l2.9641.13054c.9763.04299 1.3176 1.3168.4936 1.8422l-2.5017 1.5951c-.6165.3931-.6165 1.2933 0 1.6863l2.5017 1.5951c.824.5254.4827 1.7992-.4936 1.8422l-2.9641.1306c-.7304.0321-1.1805.8117-.8431 1.4604l1.3689 2.6322c.4509.867-.4816 1.7995-1.3486 1.3486l-2.6322-1.369c-.6486-.3374-1.4282.1127-1.4604.8432l-.1305 2.964c-.043.9763-1.3169 1.3176-1.8423.4936l-1.595-2.5016c-.3931-.6165-1.2933-.6165-1.6864 0l-1.595 2.5016c-.5254.824-1.79926.4827-1.84226-.4936l-.13053-2.964c-.03217-.7305-.81177-1.1806-1.46045-.8432l-2.63218 1.369c-.867.4509-1.79951-.4816-1.3486-1.3486l1.36897-2.6322c.33736-.6487-.11274-1.4283-.84319-1.4604l-2.96402-.1306c-.976304-.043-1.317628-1.3168-.49362-1.8422l2.50165-1.5951c.6165-.393.6165-1.2932 0-1.6863l-2.50165-1.5951c-.824006-.5254-.482684-1.79921.49362-1.8422l2.96402-.13054c.73045-.03217 1.18056-.81177.84319-1.46044L4.14848 5.49634c-.45091-.86701.4816-1.79952 1.3486-1.3486L8.12926 5.5167c.64868.33737 1.42828-.11273 1.46045-.84319l.13053-2.96401z" />
</Svg>
);
}

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

@ -48,7 +48,7 @@ const StatusBar = (props) => {
const anchorRef = useRef(null);
const leapHighlight = useTutorialModal('leap', true, anchorRef.current);
const leapHighlight = useTutorialModal('leap', true, anchorRef);
const floatLeap = leapHighlight && window.matchMedia('(max-width: 550px)').matches;

19
pkg/interface/src/views/components/VirtualScroller.tsx
View File

@ -111,12 +111,10 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
scrollbar: 0
};
this.updateVisible = IS_IOS
? _.debounce(this.updateVisible.bind(this), 100)
: this.updateVisible.bind(this);
this.updateVisible = this.updateVisible.bind(this);
this.invertedKeyHandler = this.invertedKeyHandler.bind(this);
this.onScroll = IS_IOS ? _.debounce(this.onScroll.bind(this), 150) : this.onScroll.bind(this);
this.onScroll = IS_IOS ? _.debounce(this.onScroll.bind(this), 400) : this.onScroll.bind(this);
this.scrollKeyMap = this.scrollKeyMap.bind(this);
this.setWindow = this.setWindow.bind(this);
}
@ -155,10 +153,6 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
if(size !== prevProps.size || pendingSize !== prevProps.pendingSize) {
if(this.scrollLocked) {
this.updateVisible(0);
if(IS_IOS) {
(this.updateVisible as any).flush();
}
this.resetScroll();
}
@ -375,9 +369,6 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
return;
}
this.updateVisible(Math.max(offset - this.pageDelta, 0));
if(IS_IOS) {
(this.updateVisible as any).flush();
}
requestAnimationFrame(() => {
ref = this.childRefs.get(index);
this.savedIndex = null;
@ -462,8 +453,10 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
const transform = isTop ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';
const atStart = this.props.data.peekLargest()?.[0].eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
const atEnd = false;
const loaded = this.props.data.size > 0;
const atStart = loaded && this.props.data.peekLargest()?.[0].eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
const atEnd = this.loaded.top;
return (
<>

3
pkg/interface/src/views/components/leap/Omnibox.tsx
View File

@ -100,7 +100,7 @@ export function Omnibox(props: OmniboxProps) {
const initialResults = useMemo(() => {
return new Map(SEARCHED_CATEGORIES.map((category) => {
if (category === 'other') {
return ['other', index.get('other')];
return ['other', index.get('other').filter(({ app }) => app !== 'tutorial')];
}
return [category, []];
}));
@ -133,6 +133,7 @@ export function Omnibox(props: OmniboxProps) {
if (defaultApps.includes(app.toLowerCase())
|| app === 'profile'
|| app === 'messages'
|| app === 'tutorial'
|| app === 'Links'
|| app === 'Terminal'
|| app === 'home'

5
pkg/interface/src/views/components/leap/OmniboxResult.js
View File

@ -58,7 +58,10 @@ export class OmniboxResult extends Component {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='18px' color={iconFill} />;
} else if (icon === 'messages') {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Users' mr='2' size='18px' color={iconFill} />;
} else {
} else if (icon === 'tutorial') {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Tutorial' mr='2' size='18px' color={iconFill} />;
}
else {
graphic = <Icon display='inline-block' icon='NullIcon' verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
}

18
pkg/interface/src/views/components/useTutorialModal.tsx
View File

@ -1,21 +1,25 @@
import { useEffect } from 'react';
import { TutorialProgress } from '@urbit/api';
import useLocalState, { selectLocalState } from '~/logic/state/local';
import { useEffect, MutableRefObject } from "react";
import { TutorialProgress } from "@urbit/api";
import useLocalState, { selectLocalState } from "~/logic/state/local";
const localSelector = selectLocalState(['tutorialProgress', 'setTutorialRef']);
export function useTutorialModal(
onProgress: TutorialProgress,
show: boolean,
anchorRef: HTMLElement | null
anchorRef: MutableRefObject<HTMLElement | null>
) {
const { tutorialProgress, setTutorialRef } = useLocalState(localSelector);
useEffect(() => {
if (show && onProgress === tutorialProgress && anchorRef) {
setTutorialRef(anchorRef);
if (show && (onProgress === tutorialProgress) && anchorRef?.current) {
setTutorialRef(anchorRef.current);
}
}, [onProgress, tutorialProgress, show, anchorRef]);
return () => {
console.log(tutorialProgress);
}
}, [tutorialProgress, show, anchorRef]);
return show && onProgress === tutorialProgress;
}

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

@ -161,7 +161,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
>
<Form style={{ display: 'contents' }}>
<Col mt="4" flexShrink={0} gapY="5">
<Col gapY="1">
<Col gapY="1" mt="0">
<Text id="permissions" fontWeight="bold" fontSize="2">
Permissions
</Text>

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

@ -6,7 +6,8 @@ import {
Box,
ManagedTextInputField as Input,
ManagedToggleSwitchField as Checkbox,
Col
Col,
Text
} from '@tlon/indigo-react';
import { Enc } from '@urbit/api';
import { Group, GroupPolicy } from '@urbit/api/groups';
@ -104,7 +105,7 @@ return null;
onSubmit={onSubmit}
>
<Form>
<Box p="4" fontWeight="600" fontSize="2" id="group-details">Group Details</Box>
<Box p="4" id="group-details"><Text fontWeight="600" fontSize="2">Group Details</Text></Box>
<Col pb="4" px="4" maxWidth="384px" gapY={4}>
<Input
id="title"

4
pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
View File

@ -4,7 +4,7 @@ import {
Col,
Label,
BaseLabel,
BaseAnchor
Text
} from '@tlon/indigo-react';
import { GroupNotificationsConfig } from '@urbit/api';
import { Association } from '@urbit/api/metadata';
@ -28,7 +28,7 @@ export function GroupPersonalSettings(props: {
return (
<Col px="4" pb="4" gapY="4">
<BaseAnchor pt="4" fontWeight="600" id="notifications" fontSize="2">Group Notifications</BaseAnchor>
<Text pt="4" fontWeight="600" id="notifications" fontSize="2">Group Notifications</Text>
<BaseLabel
htmlFor="asyncToggle"
display="flex"

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

@ -20,15 +20,12 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
useTutorialModal(
'group-desc',
resource === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
anchorRef
);
return (
<Col {...rest} ref={anchorRef} gapY="4">
<Row gapX="2" width="100%">
<MetadataIcon
borderRadius="1"
border="1"
borderColor="lightGray"
width="40px"
height="40px"
metadata={metadata}

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

@ -178,7 +178,7 @@ export function GroupSwitcher(props: {
}
>
<Row flexGrow={1} alignItems="center" width='100%' minWidth='0' flexShrink={0}>
{ metadata && <MetadataIcon flexShrink={0} mr="2" border="1" borderColor="lightGray" borderRadius="1" metadata={metadata} height="24px" width="24px" /> }
{ metadata && <MetadataIcon flexShrink={0} mr="2" metadata={metadata} height="24px" width="24px" /> }
<Text flexShrink={1} lineHeight="1.1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
</Row>
</Dropdown>

4
pkg/interface/src/views/landscape/components/JoinGroup.tsx
View File

@ -22,6 +22,7 @@ import { StatelessAsyncButton } from '~/views/components/StatelessAsyncButton';
import { getModuleIcon } from '~/logic/lib/util';
import { FormError } from '~/views/components/FormError';
import { GroupSummary } from './GroupSummary';
import {TUTORIAL_GROUP_RESOURCE} from '~/logic/lib/tutorialModal';
const formSchema = Yup.object({
group: Yup.string()
@ -72,6 +73,9 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
const onConfirm = useCallback(async (group: string) => {
const [,,ship,name] = group.split('/');
if(group === TUTORIAL_GROUP_RESOURCE) {
await api.settings.putEntry('tutorial', 'joined', Date.now());
}
await api.groups.join(ship, name);
try {
await waiter((p: JoinGroupProps) => {

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

@ -15,7 +15,7 @@ export function MetadataIcon(props: MetadataIconProps) {
const bgColor = metadata.picture ? {} : { bg: `#${uxToHex(metadata.color)}` };
return (
<Box {...bgColor} {...rest} borderRadius={2} overflow="hidden">
<Box {...bgColor} {...rest} borderRadius={2} boxShadow="inset 0 0 0 -1px" color="lightGray" overflow="hidden">
{metadata.picture && <Image height="100%" src={metadata.picture} />}
</Box>
);

39
pkg/interface/src/views/landscape/components/Participants.tsx
View File

@ -10,6 +10,7 @@ import {
Row,
Text,
Icon,
Image,
Action,
StatelessTextInput as Input
} from '@tlon/indigo-react';
@ -210,13 +211,7 @@ export function Participants(props: {
onChange={onSearchChange}
/>
</Row>
<Box
display="grid"
gridAutoRows={['48px 48px 1px', '48px 1px']}
gridTemplateColumns={['48px 1fr', '48px 2fr 1fr', '48px 3fr 1fr']}
gridRowGap={2}
alignItems="center"
>
<Col alignItems="center" >
{filtered.map((cs, idx) => (
<VisibilitySensor
key={idx}
@ -242,7 +237,7 @@ export function Participants(props: {
}
</VisibilitySensor>
))}
</Box>
</Col>
</Col>
</Col>
);
@ -296,7 +291,13 @@ function Participant(props: {
const avatar =
contact?.avatar !== null && !hideAvatars ? (
<img src={contact.avatar} height={32} width={32} className="dib" />
<Image
src={contact.avatar}
height={32}
width={32}
display='inline-block'
style={{ objectFit: 'cover' }}
/>
) : (
<Sigil ship={contact.patp} size={32} color={`#${color}`} />
);
@ -305,10 +306,12 @@ function Participant(props: {
return (
<>
<Row flexDirection={["column", "row"]} gapX="2" alignItems={["flex-start", "center"]} width="100%" justifyContent="space-between" height={["96px", "60px"]}>
<Row gapX="4" alignItems="center" height="100%">
<Box>{avatar}</Box>
<Col justifyContent="center" gapY="1" height="100%" minWidth='0'>
<Col alignItems="self-start" justifyContent="center" gapY="1" height="100%" minWidth='0'>
{hasNickname && (
<Row minWidth='0' flexShrink='1'>
<Row minWidth='0' flexShrink={1}>
<TruncText title={contact.nickname} color="black">
{contact.nickname}
</TruncText>
@ -318,10 +321,12 @@ function Participant(props: {
{cite(contact.patp)}
</Text>
</Col>
</Row>
<Row
justifyContent="space-between"
gridColumn={['1 / 3', 'auto']}
width={["100%", "128px"]}
alignItems="center"
gapX="4"
>
<Col>
<Text color="lightGray" mb="1">
@ -380,21 +385,19 @@ function Participant(props: {
<Icon display="block" icon="Ellipsis" />
</Dropdown>
</Row>
</Row>
<Box
borderBottom={1}
borderBottomColor="washedGray"
gridColumn={['1 / 3', '1 / 4']}
width="100%"
/>
</>
);
}
function BlankParticipant({ length }) {
const height = [`${length * 97}px`, `${length * 61}px`];
return (
<Box
gridRow={[`auto / span ${3 * length}`, `auto / span ${2 * length}`]}
gridColumn={['1 / 3', '1 / 4']}
height="100%"
/>
<Box width="100%" height={height} />
);
}

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

@ -88,7 +88,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
display={['block', 'none']}
flexShrink={0}
>
<Link to={`/~landscape${workspace}`}> {'<- Back'}</Link>
<Link to={`/~landscape${workspace}`}><Text>{'<- Back'}</Text></Link>
</Box>
<Box px={1} mr={2} minWidth={0} display="flex" flexShrink={[1, 0]}>
<Text

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

@ -66,7 +66,7 @@ export function Sidebar(props: SidebarProps): ReactElement {
const isAdmin = (role === 'admin') || (workspace?.type === 'home');
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('channels', true, anchorRef.current);
useTutorialModal('channels', true, anchorRef);
return (
<ScrollbarLessCol

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

@ -49,7 +49,7 @@ export function SidebarItem(props: {
useTutorialModal(
mod as any,
groupPath === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
anchorRef
);
const app = apps[appName];
const isUnmanaged = groups?.[groupPath]?.hidden || false;

32
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);
@ -137,19 +138,19 @@ export function TutorialModal(props: { api: GlobalApi }) {
return (
<Portal>
<ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white">
<Col p="2" bg="lightBlue">
<Col mb="1">
<Col p="3" bg="lightBlue">
<Col mb="3">
<Text lineHeight="tall" fontWeight="bold">
Tutorial Finished
</Text>
<Text fontSize="0" gray>
{progressIdx} of {progress.length - 1}
{progressIdx} of {progress.length - 2}
</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">
<Row mt="3" gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={dismiss}>
Later
</Button>
@ -170,8 +171,8 @@ export function TutorialModal(props: { api: GlobalApi }) {
if(paused) {
return (
<ModalOverlay dismiss={bailExit} borderRadius="2" maxWidth="270px" backgroundColor="white">
<Col p="2">
<Col mb="1">
<Col p="3">
<Col mb="3">
<Text lineHeight="tall" fontWeight="bold">
End Tutorial Now?
</Text>
@ -179,7 +180,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
<Text lineHeight="tall">
You can always restart the tutorial by typing "tutorial" in Leap.
</Text>
<Row mt="4" gapX="2" justifyContent="flex-end">
<Row mt="3" gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={bailExit}>
Cancel
</Button>
@ -204,8 +205,9 @@ export function TutorialModal(props: { api: GlobalApi }) {
{...coords}
bg="white"
zIndex={50}
height={MODAL_HEIGHT_PX}
width={['100%', MODAL_WIDTH_PX]}
display="flex"
flexDirection="column"
width={["100%", MODAL_WIDTH_PX]}
borderRadius="2"
>
<Col
@ -214,7 +216,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
height="100%"
width="100%"
borderRadius="2"
p="2"
p="3"
bg="lightBlue"
>
@ -229,15 +231,15 @@ export function TutorialModal(props: { api: GlobalApi }) {
/>
<Box
right="8px"
top="8px"
right="16px"
top="16px"
position="absolute"
cursor="pointer"
onClick={tryExit}
>
<Icon icon="X" />
</Box>
<Col mb="1">
<Col mb="3">
<Text lineHeight="tall" fontWeight="bold">
{title}
</Text>
@ -247,7 +249,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
</Col>
<Text lineHeight="tall">{description}</Text>
<Row gapX="2" mt="2" justifyContent="flex-end">
<Row gapX="2" mt="3" justifyContent="flex-end">
{ progressIdx > 1 && (
<Button bg="washedGray" onClick={prev}>
Back

25
pkg/interface/src/views/landscape/css/custom.css
View File

@ -6,27 +6,6 @@
margin: 0 auto;
}
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s {
flex-basis: 100%;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-30-ns {
flex-basis: 30vw;
}
}
@media all and (prefers-color-scheme: dark) {
.o-60-d {
opacity: .6;
}
a, a:any-link {
text-decoration: none;
}