urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-27 22:21:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3663 from tylershuster/new-layout-fixes

Browse Source 
chat: fix and standardize font size
This commit is contained in:
matildepark 2020-10-07 17:00:59 -04:00 committed by GitHub
commit def755cbee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 99 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React, { Component, PureComponent } from "react";
import moment from "moment";
import _ from "lodash";
import { Box } from "@tlon/indigo-react";
import { Box, Row, Text } from "@tlon/indigo-react";
import { OverlaySigil } from './overlay-sigil';
import { uxToHex, cite, writeText } from '~/logic/lib/util';
@ -96,8 +96,8 @@ export default class ChatMessage extends Component<ChatMessageProps> {
const dayBreak = nextMsg && new Date(msg.when).getDate() !== new Date(nextMsg.when).getDate();
const containerClass = `${renderSigil
? `f9 w-100 flex flex-wrap cf pr3 pt4 pl3 lh-copy`
: `f9 w-100 flex flex-wrap items-center cf pr3 hide-child`} ${isPending ? 'o-40' : ''} ${isLastMessage ? 'pb3' : ''} ${className}`
? `cf pt2 pl3 lh-copy`
: `items-center cf hide-child`} ${isPending ? 'o-40' : ''} ${className}`
const timestamp = moment.unix(msg.when / 1000).format(renderSigil ? 'hh:mm a' : 'hh:mm');
@ -129,15 +129,26 @@ export default class ChatMessage extends Component<ChatMessageProps> {
};
return (
<div ref={this.divRef} className={containerClass} style={style} data-number={msg.number}>
<Box
width='100%'
display='flex'
flexWrap='wrap'
pr={3}
pb={isLastMessage ? 3 : 0}
ref={this.divRef}
className={containerClass}
style={style}
data-number={msg.number}
mb={1}
>
{dayBreak && !isLastRead ? <DayBreak when={msg.when} /> : null}
{renderSigil
? <MessageWithSigil {...messageProps} />
: <MessageWithoutSigil {...messageProps} />}
<Box fontSize='0' position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
<Box fontSize={0} position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
? <UnreadMarker dayBreak={dayBreak} when={msg.when} ref={unreadMarkerRef} />
: null}</Box>
</div>
</Box>
);
}
}
@ -210,25 +221,32 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
allStations={allStations}
history={history}
api={api}
className="fl pr3 v-top bg-white bg-gray0-d"
className="fl pr3 v-top bg-white bg-gray0-d pt1"
/>
<div className="fr f8 clamp-message white-d" style={{ flexGrow: 1, marginTop: -12 }}>
<div className="hide-child" style={{ paddingTop: '8px' }}>
<p className="v-mid f9 black white-d dib mr3 c-default">
<span
className={`mw5 db truncate pointer ${showNickname ? '' : 'mono'}`}
ref={e => nameSpan = e}
onClick={() => {
writeText(msg.author);
copyNotice(name);
}}
title={`~${msg.author}`}
>{name}</span>
</p>
<p className="v-mid mono f9 gray2 dib">{timestamp}</p>
<p className="v-mid mono f9 gray2 dib ml2 child dn-s">{datestamp}</p>
</div>
<MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure} />
<div className="clamp-message" style={{ flexGrow: 1 }}>
<Box
className="hide-child"
pt={1}
pb={1}
display='flex'
alignItems='center'
>
<Text
fontSize={0}
mr={3}
mono={!showNickname}
className={`mw5 db truncate pointer`}
ref={e => nameSpan = e}
onClick={() => {
writeText(msg.author);
copyNotice(name);
}}
title={`~${msg.author}`}
>{name}</Text>
<Text gray mono className="v-mid">{timestamp}</Text>
<Text gray mono ml={2} className="v-mid child dn-s">{datestamp}</Text>
</Box>
<Box fontSize={0}><MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure} /></Box>
</div>
</>
);
@ -238,9 +256,9 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
export const MessageWithoutSigil = ({ timestamp, msg, remoteContentPolicy, measure }) => (
<>
<p className="child pr1 mono f9 gray2 dib">{timestamp}</p>
<div className="fr f8 clamp-message white-d pr3 lh-copy" style={{ flexGrow: 1 }}>
<Box fontSize={0} className="clamp-message" style={{ flexGrow: 1 }}>
<MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure}/>
</div>
</Box>
</>
);
@ -249,17 +267,19 @@ export const MessageContent = ({ content, remoteContentPolicy, measure }) => {
return <CodeContent content={content} />;
} else if ('url' in content) {
return (
<RemoteContent
url={content.url}
remoteContentPolicy={remoteContentPolicy}
onLoad={measure}
imageProps={{style: {
<Text fontSize={0} lineHeight="tall" color='gray'>
<RemoteContent
url={content.url}
remoteContentPolicy={remoteContentPolicy}
onLoad={measure}
imageProps={{style: {
maxWidth: '18rem'
}}}
videoProps={{style: {
maxWidth: '18rem'
}}}
videoProps={{style: {
maxWidth: '18rem'
}}}
/>
}}}
/>
</Text>
);
} else if ('me' in content) {
return (

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

@ -75,7 +75,6 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
this.handleWindowFocus = this.handleWindowFocus.bind(this);
this.stayLockedIfActive = this.stayLockedIfActive.bind(this);
this.dismissIfLineVisible = this.dismissIfLineVisible.bind(this);
this.lastRead = this.lastRead.bind(this);
this.virtualList = null;
this.unreadMarkerRef = React.createRef();
@ -125,7 +124,7 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
}
componentDidUpdate(prevProps: ChatWindowProps, prevState) {
const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages, unreadCount } = this.props;
const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages, unreadCount, station } = this.props;
if (isChatMissing) {
history.push("/~404");
@ -151,6 +150,14 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
if (!this.state.fetchPending && prevState.fetchPending) {
this.virtualList?.calculateVisibleItems();
}
if (station !== prevProps.station) {
this.virtualList?.resetScroll();
this.scrollToUnread();
this.setState({
lastRead: unreadCount ? mailboxSize - unreadCount : Infinity,
});
}
}
stayLockedIfActive() {
@ -196,11 +203,6 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
});
}
lastRead() {
const { mailboxSize, unreadCount } = this.props;
return mailboxSize - unreadCount;
}
onScroll({ scrollTop, scrollHeight, windowHeight }) {
if (!this.state.idle && scrollTop > IDLE_THRESHOLD) {
this.setState({ idle: true });

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

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';
import RemarkDisableTokenizers from 'remark-disable-tokenizers';
import urbitOb from 'urbit-ob';
import { Box } from '@tlon/indigo-react';
import { Box, Text } from '@tlon/indigo-react';
const DISABLED_BLOCK_TOKENS = [
'indentedCode',
@ -63,17 +63,19 @@ export default class TextContent extends Component {
&& (urbitOb.isValidPatp(group[2]) // valid patp?
&& (group[0] === content.text))) { // entire message is room name?
return (
<Link
className="bb b--black b--white-d f8 mono lh-copy v-top"
to={'/~landscape/join/' + group.input}>
{content.text}
</Link>
<Text fontSize={0} color='gray' lineHeight="tall">
<Link
className="bb b--black b--white-d mono"
to={'/~landscape/join/' + group.input}>
{content.text}
</Link>
</Text>
);
} else {
return (
<Box fontSize='1' color='darkGray' style={{ overflowWrap: 'break-word' }}>
<Text color='gray' fontSize={0} lineHeight="tall" style={{ overflowWrap: 'break-word' }}>
<MessageMarkdown source={content.text} />
</Box>
</Text>
);
}
}

1
pkg/interface/src/views/apps/chat/components/overlay-sigil.js
View File

@ -71,7 +71,6 @@ export class OverlaySigil extends PureComponent {
onClick={this.profileShow}
className={props.className + ' pointer relative'}
ref={this.containerRef}
style={{ height: '16px' }}
>
{state.profileClicked && (
<ProfileOverlay

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

@ -236,7 +236,7 @@ blockquote {
}
.chat .cm-s-tlon.CodeMirror {
font-size: 16px;
font-size: 12px;
}
pre, code {

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

@ -72,7 +72,8 @@ export default class RemoteContent extends PureComponent<RemoteContentProps, Rem
wrapInLink(contents) {
return (<a
href={this.props.url}
className={`word-break-all ${(typeof contents === 'string') ? 'bb b--white-d b--black' : ''}`}
style={{ color: 'inherit' }}
className={`word-break-all ${(typeof contents === 'string') ? 'bb' : ''}`}
target="_blank"
rel="noopener noreferrer"
>
@ -147,8 +148,9 @@ export default class RemoteContent extends PureComponent<RemoteContentProps, Rem
<Fragment>
{renderUrl ? this.wrapInLink(this.state.embed && this.state.embed.title ? this.state.embed.title : url) : null}
{this.state.embed !== 'error' && this.state.embed?.html && !unfold ? <Button
display='inline-flex'
border={1}
style={{ display: 'inline-flex', height: '1.66em' }} // Height is hacked to line-height until Button supports proper size
height={3}
ml={1}
onClick={this.unfoldEmbed}
style={{ cursor: 'pointer' }}

19
pkg/interface/src/views/components/withPropsChecker.js Normal file
View File

@ -0,0 +1,19 @@
import React, { useRef, useEffect} from 'react';
import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
return props => {
const prevProps = useRef(props);
useEffect(() => {
const diff = deep_diff.diff(prevProps.current, props);
if (diff) {
console.log(diff);
}
prevProps.current = props;
});
return <WrappedComponent {...props} />;
};
};
export default withPropsChecker;