Merge branch 'icon-improvements'
This commit is contained in:
commit
861241ca3a
13 changed files with 125 additions and 44 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
5
ui/js/component/icon/index.js
Normal file
5
ui/js/component/icon/index.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import Icon from "./view";
|
||||
|
||||
export default connect(null, null)(Icon);
|
40
ui/js/component/icon/view.jsx
Normal file
40
ui/js/component/icon/view.jsx
Normal 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} />;
|
||||
}
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import IconFeatured from "./view";
|
||||
|
||||
export default connect(null, null)(IconFeatured);
|
|
@ -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
2
ui/js/constants/icons.js
Normal file
|
@ -0,0 +1,2 @@
|
|||
export const FEATURED = "rocket";
|
||||
export const LOCAL = "folder";
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue