From f326555b67787a28bd6302b432c065e8e90adf02 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Tue, 13 Jul 2021 15:11:40 -0500 Subject: [PATCH 01/12] CommentItem: prevent actions until confirmed --- .../src/views/components/CommentItem.tsx | 88 ++++++++++--------- 1 file changed, 45 insertions(+), 43 deletions(-) diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx index 1b3488a853..6b3fd0042b 100644 --- a/pkg/interface/src/views/components/CommentItem.tsx +++ b/pkg/interface/src/views/components/CommentItem.tsx @@ -110,50 +110,52 @@ return false; group={group} isRelativeTime > - - - - {copyDisplay} - - {(window.ship == post?.author && !disabled) ? ( - - Update - - ) : null} - {(window.ship == post?.author || ourRole == 'admin') && - !disabled ? ( - - Delete + {!post.pending && + + + + {copyDisplay} - ) : null} - - } - > - - - + {(window.ship == post?.author && !disabled) ? ( + + Update + + ) : null} + {(window.ship == post?.author || ourRole == 'admin') && + !disabled ? ( + + Delete + + ) : null} + + } + > + + + + } Date: Wed, 14 Jul 2021 11:16:46 -0500 Subject: [PATCH 02/12] ChatEditor: removing unused code preventing slashes --- pkg/interface/src/views/apps/chat/components/ChatEditor.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx b/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx index 7f3e4a4c1a..1149735ae1 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx @@ -177,9 +177,6 @@ const ChatEditor = React.forwardRef(({ inCodeMo }, [inCodeMode, placeholder]); function messageChange(editor, data, value) { - if(value.endsWith('/')) { - editor.showHint(['test', 'foo']); - } if (message !== '' && value == '') { setMessage(value); } From c88e673ef2e40a476a7317386a422e28c7c00eb3 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Wed, 14 Jul 2021 14:15:34 -0500 Subject: [PATCH 03/12] PostContent: height detect and fade for truncation --- .../Home/Post/PostItem/PostContent.tsx | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx index 84a61d8618..30485a44f8 100644 --- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx +++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx @@ -1,17 +1,20 @@ import { Col, ColProps } from '@tlon/indigo-react'; import { Post } from '@urbit/api'; -import React, { ReactElement } from 'react'; -import styled from 'styled-components'; +import React, { ReactElement, useCallback, useState } from 'react'; +import styled, { css } from 'styled-components'; import { GraphContent } from '~/views/landscape/components/Graph/GraphContent'; type TruncateProps = ColProps & { - truncate?: number; + truncate: boolean; } const TruncatedBox = styled(Col)` display: -webkit-box; - -webkit-line-clamp: ${p => p.truncate ?? 'unset'}; -webkit-box-orient: vertical; + ${p => p.truncate && css` + max-height: 300px; + mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%); + `} `; interface PostContentProps { @@ -20,16 +23,24 @@ interface PostContentProps { isReply: boolean; } -const PostContent = (props: PostContentProps): ReactElement => { - const { post, isParent } = props; +const PostContent = ({ post, isParent }: PostContentProps): ReactElement => { + const [height, setHeight] = useState(0); + const showFade = !isParent && height >= 300; + + const measuredRef = useCallback((node) => { + if (node !== null) { + setHeight(node.getBoundingClientRect().height); + } + }, []); return ( From ce3f4378323ad180eaa498c52da657d068292715 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Wed, 14 Jul 2021 14:25:24 -0500 Subject: [PATCH 04/12] ChatWindow: only dismiss if tab has focus --- pkg/interface/src/views/apps/chat/components/ChatWindow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx index 8a5180eb71..5b10257ef7 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx @@ -138,7 +138,8 @@ class ChatWindow extends Component< } if(this.unreadSet && this.dismissedInitialUnread() && - this.virtualList!.startOffset() < 5) { + this.virtualList!.startOffset() < 5 && + document.hasFocus()) { this.props.dismissUnread(); } } From 286c6c28e5e3f0a40e7ac89bd14c4aa0b7f500cc Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Fri, 16 Jul 2021 10:55:41 -0500 Subject: [PATCH 05/12] embeds: converted to links for better usability --- .../src/views/apps/permalinks/app.tsx | 2 +- .../src/views/apps/permalinks/embed.tsx | 17 ++---- .../src/views/components/GroupLink.tsx | 59 +++++++++++-------- 3 files changed, 38 insertions(+), 40 deletions(-) diff --git a/pkg/interface/src/views/apps/permalinks/app.tsx b/pkg/interface/src/views/apps/permalinks/app.tsx index 8e8d22f04a..30763b6545 100644 --- a/pkg/interface/src/views/apps/permalinks/app.tsx +++ b/pkg/interface/src/views/apps/permalinks/app.tsx @@ -77,7 +77,7 @@ function GroupRoutes(props: { group: string; url: string }) { return null; } if(!graphKeys.has(`${ship.slice(1)}/${name}`)) { - if(graphKeys.size > 0) { + if(graphKeys.size > 1) { // TODO: Better loading logic see https://github.com/urbit/landscape/issues/1063 return { - e.stopPropagation(); - history.push(`/perma${permalink.slice(16)}`); - }; - const [nodeGroupHost, nodeGroupName] = association?.group.split('/').slice(-2) ?? ['Unknown', 'Unknown']; const [nodeChannelHost, nodeChannelName] = association?.resource .split('/') @@ -141,15 +135,16 @@ function GraphPermalink( return ( { - navigate(e); + e.stopPropagation(); }} > {loading && association && !errored && Placeholder((association.metadata.config as GraphConfig).graph)} @@ -167,7 +162,6 @@ function GraphPermalink( showTransclusion={showTransclusion} icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)} title={association.metadata.title} - permalink={permalink} /> )} {association && isInSameResource && transcluded === 2 && !loading && ( @@ -176,7 +170,6 @@ function GraphPermalink( showTransclusion={showTransclusion} icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)} title={association.metadata.title} - permalink={permalink} /> )} {isInSameResource && transcluded !== 2 && !loading && } @@ -185,7 +178,6 @@ function GraphPermalink( icon="Groups" showDetails={false} title={graph.slice(5)} - permalink={permalink} /> )} @@ -195,7 +187,6 @@ function GraphPermalink( function PermalinkDetails(props: { title: string; icon: any; - permalink: string; showTransclusion?: boolean; showDetails?: boolean; known?: boolean; diff --git a/pkg/interface/src/views/components/GroupLink.tsx b/pkg/interface/src/views/components/GroupLink.tsx index 998a525eed..88b96e2729 100644 --- a/pkg/interface/src/views/components/GroupLink.tsx +++ b/pkg/interface/src/views/components/GroupLink.tsx @@ -1,56 +1,63 @@ import { Box, Col, Icon, Row, Text } from '@tlon/indigo-react'; import React, { ReactElement, useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { useModal } from '~/logic/lib/useModal'; import useMetadataState, { usePreview } from '~/logic/state/metadata'; import { PropFunc } from '~/types'; import { JoinGroup } from '../landscape/components/JoinGroup'; import { MetadataIcon } from '../landscape/components/MetadataIcon'; -export function GroupLink( - props: { - resource: string; - detailed?: boolean; - } & PropFunc -): ReactElement { - const { resource, ...rest } = props; +type GroupLinkProps = { + resource: string; + detailed?: boolean; +} & PropFunc + +export function GroupLink({ + resource, + borderColor, + ...rest +}: GroupLinkProps): ReactElement { const name = resource.slice(6); const joined = useMetadataState( useCallback(s => resource in s.associations.groups, [resource]) ); - const history = useHistory(); const { modal, showModal } = useModal({ modal: - }); + }); const { preview } = usePreview(resource); return ( - { - e.stopPropagation(); - }} - backgroundColor='white' - borderColor={props.borderColor} - > + <> {modal} ) => { + e.stopPropagation(); + + if (e.metaKey || e.ctrlKey) { + return; + } + + e.preventDefault(); + showModal(); + }} flexShrink={1} alignItems="center" + width="100%" + maxWidth="500px" py={2} pr={2} - onClick={ - joined ? () => history.push(`/~landscape/ship/${name}`) : showModal - } + cursor='pointer' + backgroundColor='white' + borderColor={borderColor} opacity={preview ? '1' : '0.6'} > - + {preview ? preview.metadata.title : name} @@ -70,6 +77,6 @@ export function GroupLink( - + ); } From 35e01deed4cc6ac3da4407fa9dd0bbc5ab666987 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Fri, 16 Jul 2021 15:42:04 -0500 Subject: [PATCH 06/12] StatusBar: converting more things to links Fixes urbit/landscape#509 and also adds same functionality to the rest of the StatusBar items --- pkg/interface/src/views/components/StatusBar.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/pkg/interface/src/views/components/StatusBar.tsx b/pkg/interface/src/views/components/StatusBar.tsx index 03bb009a61..ad72ff0c66 100644 --- a/pkg/interface/src/views/components/StatusBar.tsx +++ b/pkg/interface/src/views/components/StatusBar.tsx @@ -8,7 +8,7 @@ import { Text } from '@tlon/indigo-react'; import React, { useRef } from 'react'; -import { useHistory } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { Sigil } from '~/logic/lib/sigil'; import { uxToHex } from '~/logic/lib/util'; import useContactState from '~/logic/state/contact'; @@ -75,11 +75,12 @@ const StatusBar = (props) => { >