From bbfb0fea674a4cc192d596c601c49191eb0d9cd1 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Tue, 12 Sep 2017 00:24:04 -0400 Subject: [PATCH 1/2] Add component This is a presentational component for horizontal banks of icons (and sometimes other stuff). Convert and to use Factor out "downloaded/published" icon into its own component Add Featured Content icon to file tiles Add alignment style for Featured Content icon Update CHANGELOG.md Handle featured content icon adjustment in _icons.scss Remove IconSet component Converted back to a presentational span and move positioning styles into card SCSS Fix spacing between price and icons in file tiles and cards Before, it would be missing the space if there was a "local file" icon but no featured content icon. Rewrite Icon component to use semantic icons Now you can pass in a constant that indicates the meaning of the icon within the interface, e.g. icons.FEATURED instead of "icon-rocket". Also adds the appropriate title. All icons should eventually be updated to use this. Remove IconFeatured and IconLocal in favor of new Icon component Add space between Featured and Local icons In the conversion to a generic Icon component, we lost the styles that added padding on the left for FeaturedIcon and LocalIcon. Fix how rocket icon position is adjusted Before, it was using a negative margin, which altered the shape of the bounding box. Changed to use relative positioning. Add support for styling LBRY icons Move style for Featured icon into icons.js Uses new class name format for LBRY icon styles --- CHANGELOG.md | 2 +- ui/js/component/fileCard/view.jsx | 14 ++++---- ui/js/component/fileList/view.jsx | 3 +- ui/js/component/fileTile/view.jsx | 21 +++++++++--- ui/js/component/icon/index.js | 5 +++ ui/js/component/icon/view.jsx | 47 +++++++++++++++++++++++++++ ui/js/component/iconFeatured/index.js | 5 --- ui/js/component/iconFeatured/view.jsx | 15 --------- ui/js/constants/icons.js | 2 ++ ui/js/page/file/view.jsx | 36 ++++++++++++++++++-- ui/scss/_icons.scss | 15 +++++++++ ui/scss/component/_card.scss | 9 ++--- ui/scss/component/_file-tile.scss | 6 ---- 13 files changed, 136 insertions(+), 44 deletions(-) create mode 100644 ui/js/component/icon/index.js create mode 100644 ui/js/component/icon/view.jsx delete mode 100644 ui/js/component/iconFeatured/index.js delete mode 100644 ui/js/component/iconFeatured/view.jsx create mode 100644 ui/js/constants/icons.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e4786a85..a03a2f2df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx index eb29a1b2e..3ff093ef0 100644 --- a/ui/js/component/fileCard/view.jsx +++ b/ui/js/component/fileCard/view.jsx @@ -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 { {title}
- + - {isRewardContent && {" "}} - {fileInfo && - {" "}} + {" "} + {isRewardContent && } + {" "} + {fileInfo && }
diff --git a/ui/js/component/fileList/view.jsx b/ui/js/component/fileList/view.jsx index 8fad10cdc..97010a104 100644 --- a/ui/js/component/fileList/view.jsx +++ b/ui/js/component/fileList/view.jsx @@ -87,7 +87,8 @@ class FileList extends React.PureComponent { diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index 1abd44952..b243ea1d6 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -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 {
- {!hidePrice ? : null} - {isRewardContent && } + + {showPrice && } + {" "} + {isRewardContent && } + {" "} + {showLocal && fileInfo && } +
{uri}

{title} diff --git a/ui/js/component/icon/index.js b/ui/js/component/icon/index.js new file mode 100644 index 000000000..72b01f640 --- /dev/null +++ b/ui/js/component/icon/index.js @@ -0,0 +1,5 @@ +import React from "react"; +import { connect } from "react-redux"; +import Icon from "./view"; + +export default connect(null, null)(Icon); diff --git a/ui/js/component/icon/view.jsx b/ui/js/component/icon/view.jsx new file mode 100644 index 000000000..a27db9acc --- /dev/null +++ b/ui/js/component/icon/view.jsx @@ -0,0 +1,47 @@ +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, + }; + + getIconInfo() { + if (this.props.icon.startsWith("icon-")) { + // Old style where FA icon class is passed in directly + return { className: this.props.icon, title: "" }; + } + + switch (this.props.icon) { + case icons.FEATURED: + return { + className: "icon-rocket", + title: "Watch content with this icon to earn weekly rewards.", + }; + case icons.LOCAL: + return { + className: "icon-folder", + title: "You have a copy of this file.", + }; + default: + throw new Error(`Unknown icon type "${this.props.icon}"`); + } + } + + render() { + const { className, title } = this.getIconInfo(); + + const spanClassName = + "icon " + + ("lbry-icon-" + this.props.icon + " ") + + className + + (this.props.fixed ? " icon-fixed-width " : ""); + + return ; + } +} diff --git a/ui/js/component/iconFeatured/index.js b/ui/js/component/iconFeatured/index.js deleted file mode 100644 index 02ce8fc38..000000000 --- a/ui/js/component/iconFeatured/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import IconFeatured from "./view"; - -export default connect(null, null)(IconFeatured); diff --git a/ui/js/component/iconFeatured/view.jsx b/ui/js/component/iconFeatured/view.jsx deleted file mode 100644 index 651d82338..000000000 --- a/ui/js/component/iconFeatured/view.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { Icon } from "component/common.js"; - -const IconFeatured = props => { - return ( - - - - ); -}; - -export default IconFeatured; diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js new file mode 100644 index 000000000..0b8b70348 --- /dev/null +++ b/ui/js/constants/icons.js @@ -0,0 +1,2 @@ +export const FEATURED = "featured"; +export const LOCAL = "local"; diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index 35209ae18..8f3bb8168 100644 --- a/ui/js/page/file/view.jsx +++ b/ui/js/page/file/view.jsx @@ -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 ( + + + + + + + + + + + + + + + +
{__("Published on")}
{__("Content-Type")}{mediaType}
{__("Language")}{language}
{__("License")}{license}
+ ); +}; class FilePage extends React.PureComponent { componentDidMount() { @@ -77,7 +109,7 @@ class FilePage extends React.PureComponent { {!fileInfo || fileInfo.written_bytes <= 0 ? - {isRewardContent && {" "}} + {isRewardContent && {" "}} : null}

{title}

diff --git a/ui/scss/_icons.scss b/ui/scss/_icons.scss index 537531e19..43321a287 100644 --- a/ui/scss/_icons.scss +++ b/ui/scss/_icons.scss @@ -23,6 +23,21 @@ transform: translate(0, 0); } +/* Custom styles for LBRY icons */ + +.lbry-icon-featured { + color: orangered; +} + +/* Adjustments for icon size and alignment */ +.icon-rocket { + 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 { diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 0562b4040..03b515a4b 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -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 */ diff --git a/ui/scss/component/_file-tile.scss b/ui/scss/component/_file-tile.scss index 7341cc606..c35be3f9b 100644 --- a/ui/scss/component/_file-tile.scss +++ b/ui/scss/component/_file-tile.scss @@ -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; From 0a4e17af5426420c5db94a334dfa5d57f1ff2e58 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Fri, 22 Sep 2017 17:46:11 -0400 Subject: [PATCH 2/2] minor design changes --- ui/js/component/icon/view.jsx | 31 ++++++++++++------------------- ui/js/constants/icons.js | 4 ++-- ui/scss/_icons.scss | 6 +----- 3 files changed, 15 insertions(+), 26 deletions(-) diff --git a/ui/js/component/icon/view.jsx b/ui/js/component/icon/view.jsx index a27db9acc..5c23af877 100644 --- a/ui/js/component/icon/view.jsx +++ b/ui/js/component/icon/view.jsx @@ -11,36 +11,29 @@ export default class Icon extends React.PureComponent { fixed: false, }; - getIconInfo() { - if (this.props.icon.startsWith("icon-")) { - // Old style where FA icon class is passed in directly - return { className: this.props.icon, title: "" }; - } + getIconClass() { + const { icon } = this.props; + return icon.startsWith("icon-") ? icon : "icon-" + icon; + } + + getIconTitle() { switch (this.props.icon) { case icons.FEATURED: - return { - className: "icon-rocket", - title: "Watch content with this icon to earn weekly rewards.", - }; + return __("Watch this and earn rewards."); case icons.LOCAL: - return { - className: "icon-folder", - title: "You have a copy of this file.", - }; + return __("You have a copy of this file."); default: - throw new Error(`Unknown icon type "${this.props.icon}"`); + return ""; } } render() { - const { className, title } = this.getIconInfo(); + const className = this.getIconClass(), + title = this.getIconTitle(); const spanClassName = - "icon " + - ("lbry-icon-" + this.props.icon + " ") + - className + - (this.props.fixed ? " icon-fixed-width " : ""); + "icon " + className + (this.props.fixed ? " icon-fixed-width " : ""); return ; } diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js index 0b8b70348..6de5babcb 100644 --- a/ui/js/constants/icons.js +++ b/ui/js/constants/icons.js @@ -1,2 +1,2 @@ -export const FEATURED = "featured"; -export const LOCAL = "local"; +export const FEATURED = "rocket"; +export const LOCAL = "folder"; diff --git a/ui/scss/_icons.scss b/ui/scss/_icons.scss index 43321a287..8fbf846b3 100644 --- a/ui/scss/_icons.scss +++ b/ui/scss/_icons.scss @@ -23,14 +23,10 @@ transform: translate(0, 0); } -/* Custom styles for LBRY icons */ - -.lbry-icon-featured { - color: orangered; -} /* Adjustments for icon size and alignment */ .icon-rocket { + color: orangered; font-size: 0.95em; position: relative; top: -0.04em;