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

add helplbrysavecrypto prompt and fix file page UI bugs

Browse source
This commit is contained in:
Sean Yesmunt 2021-03-30 12:00:30 -04:00
parent 3cdeb98ea8
commit 21ad5077f7
5 changed files with 93 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -197,7 +197,7 @@ function Comment(props: Props) {
{!author ? (
<span className="comment__author">{__('Anonymous')}</span>
) : (
<UriIndicator link external={livestream} uri={authorUri} />
<UriIndicator className="comment__author" link external={livestream} uri={authorUri} />
)}
{!livestream && (
<Button

113
ui/component/fileTitleSection/view.jsx
View file

@ -12,6 +12,7 @@ import I18nMessage from 'component/i18nMessage';
import Button from 'component/button';
import * as PAGES from 'constants/pages';
import FileDescription from 'component/fileDescription';
import usePersistedState from 'effects/use-persisted-state';
type Props = {
uri: string,
@ -25,55 +26,75 @@ type Props = {
function FileTitleSection(props: Props) {
const { title, uri, nsfw, isNsfwBlocked, livestream = false, activeViewers, stateOfViewers } = props;
const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
return (
<Card
isPageTitle
noTitleWrap
title={
<React.Fragment>
{title}
{nsfw && (
<span className="media__title-badge">
<span className="badge badge--tag-mature">{__('Mature')}</span>
</span>
)}
</React.Fragment>
}
titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
body={
<React.Fragment>
<ClaimInsufficientCredits uri={uri} />
<FileSubtitle uri={uri} livestream={livestream} activeViewers={activeViewers} stateOfViewers={stateOfViewers} />
</React.Fragment>
}
actions={
isNsfwBlocked ? (
<div className="main--empty">
<h2>
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
{__('Mature content blocked.')}
</h2>
<div>
<I18nMessage
tokens={{
content_settings: (
<Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
),
}}
>
Change this in your %content_settings%.
</I18nMessage>
<>
{!hasAcknowledgedSec && (
<div className="notice-message">
<Button button="close" icon={ICONS.REMOVE} onClick={() => setHasAcknowledgedSec(true)} />
<h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
<p className="section__subtitle">
{__(
'The SEC doesn’t understand blockchain. The claims made in SEC vs. LBRY would destroy the United States cryptocurrency industry.'
)}{' '}
<Button label={__('Learn more')} button="link" href="https://helplbrysavecrypto.com" />
</p>
</div>
)}
<Card
isPageTitle
noTitleWrap
title={
<React.Fragment>
{title}
{nsfw && (
<span className="media__title-badge">
<span className="badge badge--tag-mature">{__('Mature')}</span>
</span>
)}
</React.Fragment>
}
titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
body={
<React.Fragment>
<ClaimInsufficientCredits uri={uri} />
<FileSubtitle
uri={uri}
livestream={livestream}
activeViewers={activeViewers}
stateOfViewers={stateOfViewers}
/>
</React.Fragment>
}
actions={
isNsfwBlocked ? (
<div className="main--empty">
<h2>
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
{__('Mature content blocked.')}
</h2>
<div>
<I18nMessage
tokens={{
content_settings: (
<Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
),
}}
>
Change this in your %content_settings%.
</I18nMessage>
</div>
</div>
</div>
) : (
<div className="section">
<FileAuthor uri={uri} />
<FileDescription uri={uri} />
</div>
)
}
/>
) : (
<div className="section">
<FileAuthor uri={uri} />
<FileDescription uri={uri} />
</div>
)
}
/>
</>
);
}

22
ui/component/uriIndicator/view.jsx
View file

@ -18,6 +18,7 @@ type Props = {
children: ?Node,
inline: boolean,
external?: boolean,
className?: string,
};
class UriIndicator extends React.PureComponent<Props> {
@ -38,7 +39,16 @@ class UriIndicator extends React.PureComponent<Props> {
};
render() {
const { link, isResolvingUri, claim, children, inline, hideAnonymous = false, external = false } = this.props;
const {
link,
isResolvingUri,
claim,
children,
inline,
hideAnonymous = false,
external = false,
className,
} = this.props;
if (!claim) {
return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
@ -52,7 +62,7 @@ class UriIndicator extends React.PureComponent<Props> {
}
return (
<span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
<span dir="auto" className={classnames('channel-name', className, { 'channel-name--inline': inline })}>
Anonymous
</span>
);
@ -76,13 +86,17 @@ class UriIndicator extends React.PureComponent<Props> {
if (children) {
return (
<Button target={external ? '_blank' : undefined} navigate={channelLink}>
<Button className={className} target={external ? '_blank' : undefined} navigate={channelLink}>
{children}
</Button>
);
} else {
return (
<Button className="button--uri-indicator" navigate={channelLink} target={external ? '_blank' : undefined}>
<Button
className={classnames(className, 'button--uri-indicator')}
navigate={channelLink}
target={external ? '_blank' : undefined}
>
{inner}
</Button>
);

6
ui/scss/component/_main.scss
View file

@ -111,17 +111,15 @@
width: 35rem;
margin-left: var(--spacing-m);
@media (max-width: $breakpoint-small) {
margin-left: 0;
}
@media (max-width: $breakpoint-medium) {
width: 100%;
margin-left: 0;
margin-top: var(--spacing-l);
}
}
@media (max-width: $breakpoint-medium) {
flex-direction: column;
> :first-child {
margin-right: 0;
}

5
ui/scss/init/_gui.scss
View file

@ -366,9 +366,14 @@ textarea {
}
.notice-message {
position: relative;
border-radius: var(--border-radius);
padding: var(--spacing-l);
background-color: var(--color-primary-alt);
~ .card {
margin-top: var(--spacing-m);
}
}
.notice-message--loud {