Merge branch 'icon-improvements'

This commit is contained in:
Jeremy Kauffman 2017-09-22 17:48:52 -04:00
commit 861241ca3a
13 changed files with 125 additions and 44 deletions

View file

@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
*
### Fixed
*
* Improve layout (and implementation) of the icon panel in file tiles and cards
*
### Deprecated

View file

@ -2,12 +2,13 @@ import React from "react";
import lbryuri from "lbryuri.js";
import CardMedia from "component/cardMedia";
import Link from "component/link";
import { TruncatedText, Icon } from "component/common";
import IconFeatured from "component/iconFeatured";
import { TruncatedText } from "component/common";
import Icon from "component/icon";
import FilePrice from "component/filePrice";
import UriIndicator from "component/uriIndicator";
import NsfwOverlay from "component/nsfwOverlay";
import TruncatedMarkdown from "component/truncatedMarkdown";
import * as icons from "constants/icons";
class FileCard extends React.PureComponent {
constructor(props) {
@ -94,11 +95,12 @@ class FileCard extends React.PureComponent {
<TruncatedText lines={1}>{title}</TruncatedText>
</div>
<div className="card__subtitle">
<span style={{ float: "right" }}>
<span className="card__indicators">
<FilePrice uri={uri} />
{isRewardContent && <span>{" "}<IconFeatured /></span>}
{fileInfo &&
<span>{" "}<Icon fixed icon="icon-folder" /></span>}
{" "}
{isRewardContent && <Icon icon={icons.FEATURED} />}
{" "}
{fileInfo && <Icon icon={icons.LOCAL} />}
</span>
<UriIndicator uri={uri} />
</div>

View file

@ -87,7 +87,8 @@ class FileList extends React.PureComponent {
<FileTile
key={fileInfo.outpoint || fileInfo.claim_id}
uri={uri}
hidePrice={true}
showPrice={false}
showLocal={false}
showActions={true}
showEmpty={this.props.fileTileShowEmpty}
/>

View file

@ -1,4 +1,5 @@
import React from "react";
import * as icons from "constants/icons";
import lbryuri from "lbryuri.js";
import CardMedia from "component/cardMedia";
import FileActions from "component/fileActions";
@ -6,12 +7,17 @@ import Link from "component/link";
import { TruncatedText } from "component/common.js";
import FilePrice from "component/filePrice";
import NsfwOverlay from "component/nsfwOverlay";
import IconFeatured from "component/iconFeatured";
import Icon from "component/icon";
class FileTile extends React.PureComponent {
static SHOW_EMPTY_PUBLISH = "publish";
static SHOW_EMPTY_PENDING = "pending";
static defaultProps = {
showPrice: true,
showLocal: true,
};
constructor(props) {
super(props);
this.state = {
@ -59,8 +65,10 @@ class FileTile extends React.PureComponent {
isResolvingUri,
showEmpty,
navigate,
hidePrice,
showPrice,
showLocal,
rewardedContentClaimIds,
fileInfo,
} = this.props;
const uri = lbryuri.normalize(this.props.uri);
@ -111,8 +119,13 @@ class FileTile extends React.PureComponent {
<CardMedia title={title} thumbnail={thumbnail} />
<div className="file-tile__content">
<div className="card__title-primary">
{!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
{isRewardContent && <IconFeatured />}
<span className="card__indicators">
{showPrice && <FilePrice uri={this.props.uri} />}
{" "}
{isRewardContent && <Icon icon={icons.FEATURED} />}
{" "}
{showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
</span>
<div className="meta">{uri}</div>
<h3>
<TruncatedText lines={1}>{title}</TruncatedText>

View file

@ -0,0 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import Icon from "./view";
export default connect(null, null)(Icon);

View file

@ -0,0 +1,40 @@
import React from "react";
import * as icons from "constants/icons";
export default class Icon extends React.PureComponent {
static propTypes = {
icon: React.PropTypes.string.isRequired,
fixed: React.PropTypes.bool,
};
static defaultProps = {
fixed: false,
};
getIconClass() {
const { icon } = this.props;
return icon.startsWith("icon-") ? icon : "icon-" + icon;
}
getIconTitle() {
switch (this.props.icon) {
case icons.FEATURED:
return __("Watch this and earn rewards.");
case icons.LOCAL:
return __("You have a copy of this file.");
default:
return "";
}
}
render() {
const className = this.getIconClass(),
title = this.getIconTitle();
const spanClassName =
"icon " + className + (this.props.fixed ? " icon-fixed-width " : "");
return <span className={spanClassName} title={title} />;
}
}

View file

@ -1,5 +0,0 @@
import React from "react";
import { connect } from "react-redux";
import IconFeatured from "./view";
export default connect(null, null)(IconFeatured);

View file

@ -1,15 +0,0 @@
import React from "react";
import { Icon } from "component/common.js";
const IconFeatured = props => {
return (
<span
className="icon-featured"
title={__("Watch content with this icon to earn weekly rewards.")}
>
<Icon icon="icon-rocket" fixed className="card__icon-featured-content" />
</span>
);
};
export default IconFeatured;

2
ui/js/constants/icons.js Normal file
View file

@ -0,0 +1,2 @@
export const FEATURED = "rocket";
export const LOCAL = "folder";

View file

@ -6,8 +6,40 @@ import { Thumbnail } from "component/common";
import FilePrice from "component/filePrice";
import FileDetails from "component/fileDetails";
import UriIndicator from "component/uriIndicator";
import IconFeatured from "component/iconFeatured";
import Icon from "component/icon";
import WalletSendTip from "component/walletSendTip";
import DateTime from "component/dateTime";
import * as icons from "constants/icons";
const FormatItem = props => {
const {
publishedDate,
contentType,
claim: { height },
metadata: { language, license },
} = props;
const mediaType = lbry.getMediaType(contentType);
return (
<table className="table-standard">
<tbody>
<tr>
<td>{__("Published on")}</td><td><DateTime block={height} /></td>
</tr>
<tr>
<td>{__("Content-Type")}</td><td>{mediaType}</td>
</tr>
<tr>
<td>{__("Language")}</td><td>{language}</td>
</tr>
<tr>
<td>{__("License")}</td><td>{license}</td>
</tr>
</tbody>
</table>
);
};
class FilePage extends React.PureComponent {
componentDidMount() {
@ -77,7 +109,7 @@ class FilePage extends React.PureComponent {
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent && <span>{" "}<IconFeatured /></span>}
{isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
</span>
: null}
<h1>{title}</h1>

View file

@ -23,6 +23,17 @@
transform: translate(0, 0);
}
/* Adjustments for icon size and alignment */
.icon-rocket {
color: orangered;
font-size: 0.95em;
position: relative;
top: -0.04em;
margin-left: 0.025em;
margin-right: 0.025em;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before {

View file

@ -167,6 +167,11 @@ $font-size-subtext-multiple: 0.82;
position: absolute;
top: 36%
}
.card__indicators {
float: right;
}
.card--small {
width: var(--card-small-width);
overflow-x: hidden;
@ -269,10 +274,6 @@ $padding-right-card-hover-hack: 30px;
right: 0;
}
.card__icon-featured-content {
color: orangered;
}
/*
if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
*/

View file

@ -3,12 +3,6 @@ $height-file-tile: $spacing-vertical * 6;
.file-tile__row {
overflow: hidden;
height: $height-file-tile;
.credit-amount {
float: right;
}
.icon-featured {
float: right;
}
//also a hack
.card__media {
height: $height-file-tile;