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

winning claim style pass

Browse source
This commit is contained in:
Sean Yesmunt 2020-12-16 13:31:07 -05:00
parent 1aefdba5ab
commit 047e84ac8c
8 changed files with 130 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -211,7 +211,9 @@ function CommentList(props: Props) {
<>
<CommentCreate uri={uri} />
{!isFetchingComments && hasNoComments && <Empty text={__('That was pretty deep. What do you think?')} />}
{!isFetchingComments && hasNoComments && (
<Empty padded text={__('That was pretty deep. What do you think?')} />
)}
<ul className="comments" ref={commentRef}>
{comments &&

34
ui/component/common/empty.jsx
View file

@ -1,30 +1,24 @@
// @flow
import React from 'react';
import classnames from 'classnames';
type Props = {
text: ?string,
padded?: boolean,
};
class Empty extends React.PureComponent<Props> {
static defaultProps = {
text: '',
};
export default function Empty(props: Props) {
const { text = '', padded = false } = props;
render() {
const { text } = this.props;
return (
<div className="empty__wrap">
<div>
{text && (
<div className="empty__content">
<p className="empty__text">{text}</p>
</div>
)}
</div>
return (
<div className={classnames('empty__wrap', { 'empty__wrap--padded': padded })}>
<div>
{text && (
<div className="empty__content">
<p className="empty__text">{text}</p>
</div>
)}
</div>
);
}
</div>
);
}
export default Empty;

18
ui/component/searchTopClaim/index.js
View file

@ -1,14 +1,20 @@
import { connect } from 'react-redux';
import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds } from 'lbry-redux';
import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds, makeSelectClaimForUri } from 'lbry-redux';
import { makeSelectWinningUriForQuery, makeSelectIsResolvingWinningUri } from 'redux/selectors/search';
import SearchTopClaim from './view';
import { push } from 'connected-react-router';
import * as PAGES from 'constants/pages';
const select = (state, props) => ({
winningUri: makeSelectWinningUriForQuery(props.query)(state),
pendingIds: selectPendingIds(state),
});
const select = (state, props) => {
const winningUri = makeSelectWinningUriForQuery(props.query)(state);
return {
winningUri,
winningClaim: winningUri ? makeSelectClaimForUri(winningUri)(state) : undefined,
isResolvingWinningUri: props.query ? makeSelectIsResolvingWinningUri(props.query)(state) : false,
pendingIds: selectPendingIds(state),
};
};
const perform = dispatch => ({
beginPublish: name => {

153
ui/component/searchTopClaim/view.jsx
View file

@ -10,20 +10,30 @@ import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router';
import LbcSymbol from 'component/common/lbc-symbol';
import { DOMAIN } from 'config';
import Yrbl from 'component/yrbl';
type Props = {
query: string,
winningUri: ?Claim,
winningUri: ?string,
doResolveUris: (Array<string>) => void,
hideLink?: boolean,
setChannelActive: boolean => void,
beginPublish: string => void,
pendingIds: Array<string>,
isResolvingWinningUri: boolean,
winningClaim: ?Claim,
};
export default function SearchTopClaim(props: Props) {
const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive, beginPublish } = props;
const {
doResolveUris,
query = '',
winningUri,
winningClaim,
hideLink = false,
setChannelActive,
beginPublish,
isResolvingWinningUri,
} = props;
const uriFromQuery = `lbry://${query}`;
const { push } = useHistory();
let name;
@ -60,82 +70,69 @@ export default function SearchTopClaim(props: Props) {
}
}, [doResolveUris, uriFromQuery, channelUriFromQuery]);
if (winningUri && !winningClaim && isResolvingWinningUri) {
return null;
}
return (
<section className="search">
<header className="search__header">
{winningUri && (
<div className="claim-preview__actions--header">
<a
className="media__uri"
href="https://lbry.com/faq/trending"
title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage
tokens={{
lbc: <LbcSymbol />,
}}
>
Most supported %lbc%
</I18nMessage>
</a>
</div>
)}
{winningUri && (
<div className="card">
<ClaimPreview
hideRepostLabel
uri={winningUri}
type="large"
placeholder="publish"
properties={claim => (
<span className="claim-preview__custom-properties">
<ClaimEffectiveAmount uri={winningUri} />
<div className="search__header">
{winningUri && (
<div className="claim-preview__actions--header">
<a
className="media__uri"
href="https://lbry.com/faq/trending"
title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
>
<LbcSymbol prefix={__('Most supported')} />
</a>
</div>
)}
{winningUri && (
<div className="card">
<ClaimPreview
hideRepostLabel
uri={winningUri}
type="large"
properties={claim => (
<span className="claim-preview__custom-properties">
<ClaimEffectiveAmount uri={winningUri} />
</span>
)}
/>
</div>
)}
{!winningUri && uriFromQuery && (
<div className="card card--section help--inline">
<I18nMessage
tokens={{
repost: (
<Button button="link" onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)} label={__('Repost')} />
),
publish: (
<span>
<Button button="link" onClick={() => beginPublish(name)} label={'publish'} />
</span>
)}
/>
</div>
)}
{!winningUri && uriFromQuery && (
<div className="empty empty--centered">
<Yrbl
type="happy"
title={__('Whoa!')}
small
subtitle={
<I18nMessage
tokens={{
repost: (
<Button
button="link"
onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)}
label={__('Repost')}
/>
),
publish: <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />,
name: <strong>name</strong>,
}}
>
You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
</I18nMessage>
}
/>
</div>
)}
{!hideLink && winningUri && (
<div className="section__actions--between section__actions--no-margin">
<span />
<Button
button="link"
className="search__top-link"
label={
<I18nMessage tokens={{ name: <strong>{query}</strong> }}>View competing uploads for %name%</I18nMessage>
}
navigate={`/$/${PAGES.TOP}?name=${query}`}
iconRight={ICONS.ARROW_RIGHT}
/>
</div>
)}
</header>
</section>
),
}}
>
You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
</I18nMessage>
</div>
)}
{!hideLink && winningUri && (
<div className="section__actions--between section__actions--no-margin">
<span />
<Button
button="link"
className="search__top-link"
label={
<I18nMessage tokens={{ name: <strong>{query}</strong> }}>View competing uploads for %name%</I18nMessage>
}
navigate={`/$/${PAGES.TOP}?name=${query}`}
iconRight={ICONS.ARROW_RIGHT}
/>
</div>
)}
</div>
);
}

5
ui/component/yrbl/index.jsx
View file

@ -11,7 +11,6 @@ type Props = {
className?: string,
actions?: Node,
alwaysShow?: boolean,
small: boolean,
};
const yrblTypes = {
@ -25,7 +24,7 @@ export default class extends React.PureComponent<Props> {
};
render() {
const { title, subtitle, type, className, actions, small, alwaysShow = false } = this.props;
const { title, subtitle, type, className, actions, alwaysShow = false } = this.props;
const image = yrblTypes[type];
@ -33,7 +32,7 @@ export default class extends React.PureComponent<Props> {
<div className="yrbl__wrap">
<img
alt="Friendly gerbil"
className={classnames(small ? 'yrbl--small' : 'yrbl', className, {
className={classnames('yrbl', className, {
'yrbl--always-show': alwaysShow,
})}
src={`${image}`}

20
ui/redux/selectors/search.js
View file

@ -9,6 +9,7 @@ import {
SETTINGS,
isClaimNsfw,
makeSelectPendingClaimForUri,
makeSelectIsUriResolving,
} from 'lbry-redux';
import { createSelector } from 'reselect';
@ -143,3 +144,22 @@ export const makeSelectWinningUriForQuery = (query: string) => {
}
);
};
export const makeSelectIsResolvingWinningUri = (query: string = '') => {
const uriFromQuery = `lbry://${query}`;
let channelUriFromQuery;
try {
const { isChannel } = parseURI(uriFromQuery);
if (!isChannel) {
channelUriFromQuery = `lbry://@${query}`;
}
} catch (e) {}
return createSelector(
makeSelectIsUriResolving(uriFromQuery),
channelUriFromQuery ? makeSelectIsUriResolving(channelUriFromQuery) : () => {},
(claim1IsResolving, claim2IsResolving) => {
return claim1IsResolving || claim2IsResolving;
}
);
};

4
ui/scss/component/_empty.scss
View file

@ -11,6 +11,10 @@
}
}
.empty__wrap--padded {
padding: var(--spacing-xl) 0;
}
.empty__text {
color: var(--color-text-empty);
font-style: italic;

26
ui/scss/component/_media.scss
View file

@ -30,32 +30,6 @@
max-width: 100%;
white-space: nowrap;
}
// This is terrible and should not be removed
.icon {
margin-right: var(--spacing-xs) / 2;
margin-bottom: -0.08rem;
}
}
.media__uri--inline {
@extend .media__uri;
position: relative;
transform: none;
overflow: hidden;
text-overflow: ellipsis;
}
.media__uri--right {
@extend .media__uri;
right: 0;
}
.media__uri--right--yt-badge {
@extend .media__uri--right;
@media (max-width: $breakpoint-small) {
display: none;
}
}
// M E D I A