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

Merge pull request #1980 from lbryio/title

Browse source 
Add proper html title to card/tile components for long titles
This commit is contained in:
Sean Yesmunt 2018-09-26 13:37:47 -04:00 committed by GitHub
parent a0d122afc5 f3e4f2bf70
commit f14d2c6859
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/component/channelTile/view.jsx
View file

@ -79,7 +79,7 @@ class ChannelTile extends React.PureComponent<Props> {
'card__title--large': size === 'large', 'card__title--large': size === 'large',
})} })}
> >
<TruncatedText lines={1}>{channelName || uri}</TruncatedText> <TruncatedText text={channelName || uri} lines={1} />
</div> </div>
<div <div
className={classnames('card__subtitle', { className={classnames('card__subtitle', {

8
src/renderer/component/common/truncated-text.jsx
View file

@ -2,13 +2,13 @@
import * as React from 'react'; import * as React from 'react';
type Props = { type Props = {
lines: ?number, text: string,
children: React.Node, lines: number,
}; };
const TruncatedText = (props: Props) => ( const TruncatedText = (props: Props) => (
<span className="truncated-text" style={{ WebkitLineClamp: props.lines }}> <span title={props.text} className="truncated-text" style={{ WebkitLineClamp: props.lines }}>
{props.children} {props.text}
</span> </span>
); );

2
src/renderer/component/fileCard/view.jsx
View file

@ -93,7 +93,7 @@ class FileCard extends React.PureComponent<Props> {
<CardMedia thumbnail={thumbnail} /> <CardMedia thumbnail={thumbnail} />
<div className="card__title-identity"> <div className="card__title-identity">
<div className="card__title--small card__title--file-card"> <div className="card__title--small card__title--file-card">
<TruncatedText lines={2}>{title}</TruncatedText> <TruncatedText text={title} lines={2} />
</div> </div>
<div className="card__subtitle"> <div className="card__subtitle">
{pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />} {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}

4
src/renderer/component/fileTile/view.jsx
View file

@ -127,7 +127,7 @@ class FileTile extends React.PureComponent<Props> {
'card__title--large': size === 'large', 'card__title--large': size === 'large',
})} })}
> >
<TruncatedText lines={size === 'small' ? 2 : 3}>{title || name}</TruncatedText> <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
</div> </div>
<div <div
className={classnames('card__subtitle', { className={classnames('card__subtitle', {
@ -151,7 +151,7 @@ class FileTile extends React.PureComponent<Props> {
'card__subtext--large': size === 'large', 'card__subtext--large': size === 'large',
})} })}
> >
<TruncatedText lines={size === 'large' ? 4 : 3}>{description}</TruncatedText> <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
</div> </div>
)} )}
{!name && ( {!name && (