LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

re-enable lbry:// link styles in comments

Browse source 
will add support for odysee/lbry.tv once the style is finalized
This commit is contained in:
Sean Yesmunt 2020-10-08 13:36:57 -04:00
parent 480d8a8786
commit b1bca7982a
4 changed files with 26 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/component/claimLink/view.jsx
View file

@ -1,15 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import Button from 'component/button';
import PreviewLink from 'component/previewLink'; import PreviewLink from 'component/previewLink';
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
type Props = { type Props = {
uri: string, uri: string,
title: ?string,
claim: StreamClaim, claim: StreamClaim,
children: React.Node, children: React.Node,
className: ?string,
autoEmbed: ?boolean, autoEmbed: ?boolean,
description: ?string, description: ?string,
isResolvingUri: boolean, isResolvingUri: boolean,
@ -24,7 +21,6 @@ class ClaimLink extends React.Component<Props> {
static defaultProps = { static defaultProps = {
href: null, href: null,
link: false, link: false,
title: null,
thumbnail: null, thumbnail: null,
autoEmbed: false, autoEmbed: false,
description: null, description: null,
@ -63,7 +59,7 @@ class ClaimLink extends React.Component<Props> {
}; };
render() { render() {
const { uri, claim, title, className, autoEmbed, children, isResolvingUri } = this.props; const { uri, claim, autoEmbed, children, isResolvingUri } = this.props;
const isUnresolved = (!isResolvingUri && !claim) || !claim; const isUnresolved = (!isResolvingUri && !claim) || !claim;
const isBlacklisted = this.isClaimBlackListed(); const isBlacklisted = this.isClaimBlackListed();
@ -71,20 +67,15 @@ class ClaimLink extends React.Component<Props> {
return <span>{children}</span>; return <span>{children}</span>;
} }
const { name: claimName, value_type: valueType } = claim; const { value_type: valueType } = claim;
const isChannel = valueType === 'channel'; const isChannel = valueType === 'channel';
const showPreview = autoEmbed === true && !isUnresolved; const showPreview = autoEmbed === true && !isUnresolved;
if(isChannel){ if (isChannel) {
return <UriIndicator uri={uri} link addTooltip /> return <UriIndicator uri={uri} link addTooltip />;
} }
return ( return <React.Fragment>{showPreview && <PreviewLink uri={uri} />}</React.Fragment>;
<React.Fragment>
<Button label={children} title={title || claimName} button={'link'} navigate={uri} className={className} />
{showPreview && <PreviewLink uri={uri} />}
</React.Fragment>
);
} }
} }

4
ui/component/comment/view.jsx
View file

@ -255,10 +255,10 @@ function Comment(props: Props) {
<div className="comment__message"> <div className="comment__message">
{editedMessage.length >= LENGTH_TO_COLLAPSE ? ( {editedMessage.length >= LENGTH_TO_COLLAPSE ? (
<Expandable> <Expandable>
<MarkdownPreview content={message} /> <MarkdownPreview content={message} promptLinks />
</Expandable> </Expandable>
) : ( ) : (
<MarkdownPreview content={message} /> <MarkdownPreview content={message} promptLinks />
)} )}
</div> </div>

18
ui/component/previewLink/view.jsx
View file

@ -29,20 +29,20 @@ class PreviewLink extends React.PureComponent<Props> {
}; };
return ( return (
<span className={'preview-link'} role="button" onClick={this.handleClick}> <span className="preview-link" role="button" onClick={this.handleClick}>
<span className={'claim-preview'}> <span className="claim-preview">
<span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} /> <span style={thumbnailStyle} className="preview-link__thumbnail media__thumb" />
<span className={'claim-preview-metadata'}> <span className="claim-preview-metadata">
<span className={'claim-preview-info'}> <span className="claim-preview-info">
<span className={'claim-preview__title'}> <span className="claim-preview__title">
<TruncatedText text={title} lines={1} /> <TruncatedText text={title} lines={1} />
</span> </span>
</span> </span>
<span className={'media__subtitle'}> <span className="media__subtitle">
<UriIndicator uri={uri} link /> <UriIndicator uri={uri} link />
</span> </span>
<span className={'claim-preview-properties'}> <span className="claim-preview-properties">
<span className={'preview-link__description media__subtitle'}> <span className="preview-link__description media__subtitle">
<TruncatedText lines={2} showTooltip={false}> <TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} strip /> <MarkdownPreview content={description} strip />
</TruncatedText> </TruncatedText>

11
ui/scss/component/_markdown-preview.scss
View file

@ -180,13 +180,14 @@
.preview-link { .preview-link {
padding: 0; padding: 0;
margin: 1rem 0; margin: var(--spacing-s) 0;
padding-right: var(--spacing-s);
background-color: var(--color-primary-alt); background-color: var(--color-primary-alt);
border-left: 0.5rem solid var(--color-primary);
display: block; display: block;
align-items: center; align-items: center;
word-break: break-all; word-break: break-all;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius);
.claim-preview { .claim-preview {
border: 0; border: 0;
@ -198,8 +199,14 @@
} }
} }
.claim-preview-metadata {
padding: var(--spacing-s) 0;
}
.preview-link__thumbnail { .preview-link__thumbnail {
width: 12rem; width: 12rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
.preview-link__description { .preview-link__description {