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
|
### Fixed
|
||||||
*
|
* Improve layout (and implementation) of the icon panel in file tiles and cards
|
||||||
*
|
*
|
||||||
|
|
||||||
### Deprecated
|
### Deprecated
|
||||||
|
|
|
@ -2,12 +2,13 @@ import React from "react";
|
||||||
import lbryuri from "lbryuri.js";
|
import lbryuri from "lbryuri.js";
|
||||||
import CardMedia from "component/cardMedia";
|
import CardMedia from "component/cardMedia";
|
||||||
import Link from "component/link";
|
import Link from "component/link";
|
||||||
import { TruncatedText, Icon } from "component/common";
|
import { TruncatedText } from "component/common";
|
||||||
import IconFeatured from "component/iconFeatured";
|
import Icon from "component/icon";
|
||||||
import FilePrice from "component/filePrice";
|
import FilePrice from "component/filePrice";
|
||||||
import UriIndicator from "component/uriIndicator";
|
import UriIndicator from "component/uriIndicator";
|
||||||
import NsfwOverlay from "component/nsfwOverlay";
|
import NsfwOverlay from "component/nsfwOverlay";
|
||||||
import TruncatedMarkdown from "component/truncatedMarkdown";
|
import TruncatedMarkdown from "component/truncatedMarkdown";
|
||||||
|
import * as icons from "constants/icons";
|
||||||
|
|
||||||
class FileCard extends React.PureComponent {
|
class FileCard extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -94,11 +95,12 @@ class FileCard extends React.PureComponent {
|
||||||
<TruncatedText lines={1}>{title}</TruncatedText>
|
<TruncatedText lines={1}>{title}</TruncatedText>
|
||||||
</div>
|
</div>
|
||||||
<div className="card__subtitle">
|
<div className="card__subtitle">
|
||||||
<span style={{ float: "right" }}>
|
<span className="card__indicators">
|
||||||
<FilePrice uri={uri} />
|
<FilePrice uri={uri} />
|
||||||
{isRewardContent && <span>{" "}<IconFeatured /></span>}
|
{" "}
|
||||||
{fileInfo &&
|
{isRewardContent && <Icon icon={icons.FEATURED} />}
|
||||||
<span>{" "}<Icon fixed icon="icon-folder" /></span>}
|
{" "}
|
||||||
|
{fileInfo && <Icon icon={icons.LOCAL} />}
|
||||||
</span>
|
</span>
|
||||||
<UriIndicator uri={uri} />
|
<UriIndicator uri={uri} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -87,7 +87,8 @@ class FileList extends React.PureComponent {
|
||||||
<FileTile
|
<FileTile
|
||||||
key={fileInfo.outpoint || fileInfo.claim_id}
|
key={fileInfo.outpoint || fileInfo.claim_id}
|
||||||
uri={uri}
|
uri={uri}
|
||||||
hidePrice={true}
|
showPrice={false}
|
||||||
|
showLocal={false}
|
||||||
showActions={true}
|
showActions={true}
|
||||||
showEmpty={this.props.fileTileShowEmpty}
|
showEmpty={this.props.fileTileShowEmpty}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import * as icons from "constants/icons";
|
||||||
import lbryuri from "lbryuri.js";
|
import lbryuri from "lbryuri.js";
|
||||||
import CardMedia from "component/cardMedia";
|
import CardMedia from "component/cardMedia";
|
||||||
import FileActions from "component/fileActions";
|
import FileActions from "component/fileActions";
|
||||||
|
@ -6,12 +7,17 @@ import Link from "component/link";
|
||||||
import { TruncatedText } from "component/common.js";
|
import { TruncatedText } from "component/common.js";
|
||||||
import FilePrice from "component/filePrice";
|
import FilePrice from "component/filePrice";
|
||||||
import NsfwOverlay from "component/nsfwOverlay";
|
import NsfwOverlay from "component/nsfwOverlay";
|
||||||
import IconFeatured from "component/iconFeatured";
|
import Icon from "component/icon";
|
||||||
|
|
||||||
class FileTile extends React.PureComponent {
|
class FileTile extends React.PureComponent {
|
||||||
static SHOW_EMPTY_PUBLISH = "publish";
|
static SHOW_EMPTY_PUBLISH = "publish";
|
||||||
static SHOW_EMPTY_PENDING = "pending";
|
static SHOW_EMPTY_PENDING = "pending";
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
showPrice: true,
|
||||||
|
showLocal: true,
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
|
@ -59,8 +65,10 @@ class FileTile extends React.PureComponent {
|
||||||
isResolvingUri,
|
isResolvingUri,
|
||||||
showEmpty,
|
showEmpty,
|
||||||
navigate,
|
navigate,
|
||||||
hidePrice,
|
showPrice,
|
||||||
|
showLocal,
|
||||||
rewardedContentClaimIds,
|
rewardedContentClaimIds,
|
||||||
|
fileInfo,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const uri = lbryuri.normalize(this.props.uri);
|
const uri = lbryuri.normalize(this.props.uri);
|
||||||
|
@ -111,8 +119,13 @@ class FileTile extends React.PureComponent {
|
||||||
<CardMedia title={title} thumbnail={thumbnail} />
|
<CardMedia title={title} thumbnail={thumbnail} />
|
||||||
<div className="file-tile__content">
|
<div className="file-tile__content">
|
||||||
<div className="card__title-primary">
|
<div className="card__title-primary">
|
||||||
{!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
|
<span className="card__indicators">
|
||||||
{isRewardContent && <IconFeatured />}
|
{showPrice && <FilePrice uri={this.props.uri} />}
|
||||||
|
{" "}
|
||||||
|
{isRewardContent && <Icon icon={icons.FEATURED} />}
|
||||||
|
{" "}
|
||||||
|
{showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
|
||||||
|
</span>
|
||||||
<div className="meta">{uri}</div>
|
<div className="meta">{uri}</div>
|
||||||
<h3>
|
<h3>
|
||||||
<TruncatedText lines={1}>{title}</TruncatedText>
|
<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 FilePrice from "component/filePrice";
|
||||||
import FileDetails from "component/fileDetails";
|
import FileDetails from "component/fileDetails";
|
||||||
import UriIndicator from "component/uriIndicator";
|
import UriIndicator from "component/uriIndicator";
|
||||||
import IconFeatured from "component/iconFeatured";
|
import Icon from "component/icon";
|
||||||
import WalletSendTip from "component/walletSendTip";
|
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 {
|
class FilePage extends React.PureComponent {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -77,7 +109,7 @@ class FilePage extends React.PureComponent {
|
||||||
{!fileInfo || fileInfo.written_bytes <= 0
|
{!fileInfo || fileInfo.written_bytes <= 0
|
||||||
? <span style={{ float: "right" }}>
|
? <span style={{ float: "right" }}>
|
||||||
<FilePrice uri={lbryuri.normalize(uri)} />
|
<FilePrice uri={lbryuri.normalize(uri)} />
|
||||||
{isRewardContent && <span>{" "}<IconFeatured /></span>}
|
{isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
|
||||||
</span>
|
</span>
|
||||||
: null}
|
: null}
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
|
|
|
@ -23,6 +23,17 @@
|
||||||
transform: translate(0, 0);
|
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
|
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||||
readers do not read off random characters that represent icons */
|
readers do not read off random characters that represent icons */
|
||||||
.icon-glass:before {
|
.icon-glass:before {
|
||||||
|
|
|
@ -167,6 +167,11 @@ $font-size-subtext-multiple: 0.82;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 36%
|
top: 36%
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card__indicators {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
.card--small {
|
.card--small {
|
||||||
width: var(--card-small-width);
|
width: var(--card-small-width);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
@ -269,10 +274,6 @@ $padding-right-card-hover-hack: 30px;
|
||||||
right: 0;
|
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
|
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 {
|
.file-tile__row {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: $height-file-tile;
|
height: $height-file-tile;
|
||||||
.credit-amount {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.icon-featured {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
//also a hack
|
//also a hack
|
||||||
.card__media {
|
.card__media {
|
||||||
height: $height-file-tile;
|
height: $height-file-tile;
|
||||||
|
|
Loading…
Add table
Reference in a new issue