better naming of things
This commit is contained in:
parent
8cf66e24e9
commit
0f3239284f
11 changed files with 20 additions and 20 deletions
|
@ -15,8 +15,8 @@ import SubscribeButton from 'component/subscribeButton';
|
||||||
import ChannelThumbnail from 'component/channelThumbnail';
|
import ChannelThumbnail from 'component/channelThumbnail';
|
||||||
import BlockButton from 'component/blockButton';
|
import BlockButton from 'component/blockButton';
|
||||||
import useGetThumbnail from 'effects/use-get-thumbnail';
|
import useGetThumbnail from 'effects/use-get-thumbnail';
|
||||||
import ClaimTitle from 'component/claimTitle';
|
import ClaimPreviewTitle from 'component/claimPreviewTitle';
|
||||||
import ClaimSubtitle from 'component/claimSubtitle';
|
import ClaimPreviewSubtitle from 'component/ClaimPreviewSubtitle';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -180,7 +180,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
<li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
|
<li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
|
||||||
<div className="placeholder media__thumb" />
|
<div className="placeholder media__thumb" />
|
||||||
<div className="placeholder__wrapper">
|
<div className="placeholder__wrapper">
|
||||||
<div className="placeholder claim-preview-title" />
|
<div className="placeholder claim-preview__title" />
|
||||||
<div className="placeholder media__subtitle" />
|
<div className="placeholder media__subtitle" />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -217,11 +217,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
<div className="claim-preview__text">
|
<div className="claim-preview__text">
|
||||||
<div className="claim-preview-metadata">
|
<div className="claim-preview-metadata">
|
||||||
<div className="claim-preview-info">
|
<div className="claim-preview-info">
|
||||||
<ClaimTitle uri={uri} />
|
<ClaimPreviewTitle uri={uri} />
|
||||||
{!isChannel && <FileProperties uri={uri} />}
|
{!isChannel && <FileProperties uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ClaimSubtitle uri={uri} type={type} />
|
<ClaimPreviewSubtitle uri={uri} type={type} />
|
||||||
</div>
|
</div>
|
||||||
<div className="claim-preview__actions">
|
<div className="claim-preview__actions">
|
||||||
{!pending && (
|
{!pending && (
|
||||||
|
|
|
@ -2,7 +2,7 @@ import * as PAGES from 'constants/pages';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { makeSelectClaimForUri, makeSelectClaimIsPending, doClearPublish, doPrepareEdit } from 'lbry-redux';
|
import { makeSelectClaimForUri, makeSelectClaimIsPending, doClearPublish, doPrepareEdit } from 'lbry-redux';
|
||||||
import { push } from 'connected-react-router';
|
import { push } from 'connected-react-router';
|
||||||
import ClaimSubtitle from './view';
|
import ClaimPreviewSubtitle from './view';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
claim: makeSelectClaimForUri(props.uri)(state),
|
claim: makeSelectClaimForUri(props.uri)(state),
|
||||||
|
@ -20,4 +20,4 @@ const perform = dispatch => ({
|
||||||
export default connect(
|
export default connect(
|
||||||
select,
|
select,
|
||||||
perform
|
perform
|
||||||
)(ClaimSubtitle);
|
)(ClaimPreviewSubtitle);
|
|
@ -13,7 +13,7 @@ type Props = {
|
||||||
beginPublish: string => void,
|
beginPublish: string => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
function ClaimSubtitle(props: Props) {
|
function ClaimPreviewSubtitle(props: Props) {
|
||||||
const { pending, uri, claim, type, beginPublish } = props;
|
const { pending, uri, claim, type, beginPublish } = props;
|
||||||
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
|
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
|
||||||
|
|
||||||
|
@ -49,4 +49,4 @@ function ClaimSubtitle(props: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ClaimSubtitle;
|
export default ClaimPreviewSubtitle;
|
|
@ -1,10 +1,10 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux';
|
import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux';
|
||||||
import ClaimPreview from './view';
|
import ClaimPreviewTitle from './view';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
claim: makeSelectClaimForUri(props.uri)(state),
|
claim: makeSelectClaimForUri(props.uri)(state),
|
||||||
title: makeSelectTitleForUri(props.uri)(state),
|
title: makeSelectTitleForUri(props.uri)(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select)(ClaimPreview);
|
export default connect(select)(ClaimPreviewTitle);
|
|
@ -8,14 +8,14 @@ type Props = {
|
||||||
title: string,
|
title: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
function ClaimTitle(props: Props) {
|
function ClaimPreviewTitle(props: Props) {
|
||||||
const { title, claim } = props;
|
const { title, claim } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="claim-preview-title">
|
<div className="claim-preview__title">
|
||||||
{claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
|
{claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ClaimTitle;
|
export default ClaimPreviewTitle;
|
|
@ -12,7 +12,7 @@ function FileAuthor(props: Props) {
|
||||||
return channelUri ? (
|
return channelUri ? (
|
||||||
<ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
|
<ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
|
||||||
) : (
|
) : (
|
||||||
<div className="claim-preview--inline claim-preview-title">{__('Anonymous')}</div>
|
<div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -182,7 +182,7 @@ export default function FileViewer(props: Props) {
|
||||||
)}
|
)}
|
||||||
{!inline && (
|
{!inline && (
|
||||||
<div className="draggable content__info">
|
<div className="draggable content__info">
|
||||||
<div className="claim-preview-title" title={title || uri}>
|
<div className="claim-preview__title" title={title || uri}>
|
||||||
{title || uri}
|
{title || uri}
|
||||||
</div>
|
</div>
|
||||||
<UriIndicator link addTooltip={false} uri={uri} />
|
<UriIndicator link addTooltip={false} uri={uri} />
|
||||||
|
|
|
@ -34,7 +34,7 @@ class PreviewLink extends React.PureComponent<Props> {
|
||||||
<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>
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default function WebUploadItem(props: Props) {
|
||||||
<FileThumbnail thumbnail={params.thumbnail_url} />
|
<FileThumbnail thumbnail={params.thumbnail_url} />
|
||||||
<div className={'claim-preview-metadata'}>
|
<div className={'claim-preview-metadata'}>
|
||||||
<div className="claim-preview-info">
|
<div className="claim-preview-info">
|
||||||
<div className="claim-preview-title">{params.title}</div>
|
<div className="claim-preview__title">{params.title}</div>
|
||||||
{xhr && (
|
{xhr && (
|
||||||
<div className="card__actions--inline">
|
<div className="card__actions--inline">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -173,7 +173,7 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-preview-title {
|
.claim-preview__title {
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
font-size: var(--font-body);
|
font-size: var(--font-body);
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
.placeholder {
|
.placeholder {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
&.claim-preview-title {
|
&.claim-preview__title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue