From 8b90a8421cb7f7752cc8b3dd2fa008cf03d3e1a5 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 3 Aug 2018 14:28:11 -0400 Subject: [PATCH 1/7] add recommended content --- package.json | 2 +- src/renderer/component/fileCard/view.jsx | 16 ++-- src/renderer/component/fileTile/view.jsx | 2 +- .../component/recommendedContent/index.js | 8 +- .../component/recommendedContent/view.jsx | 84 ++++++++++++------- src/renderer/page/file/view.jsx | 2 +- src/renderer/scss/_gui.scss | 4 +- src/renderer/scss/_vars.scss | 6 +- src/renderer/scss/component/_card.scss | 15 ++-- src/renderer/scss/component/_nav.scss | 6 +- static/themes/dark.css | 1 + yarn.lock | 4 +- 12 files changed, 86 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index 5a6e0741a..dfae48926 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#83fec2a8419cbf0f1fafdc98a50dab3051191ef5", + "lbry-redux": "lbryio/lbry-redux#8794a775bf71e7b8b7d1ac44392196bb58a0042a", "localforage": "^1.7.1", "mammoth": "^1.4.6", "mime": "^2.3.1", diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index f63e23d13..07f896b11 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -97,17 +97,13 @@ class FileCard extends React.PureComponent { {title}
- {pending ? ( -
Pending...
- ) : ( - - - {isRewardContent && } - {fileInfo && } - - )} + {pending ?
Pending...
: } +
+
+ {showPrice && } + {isRewardContent && } + {fileInfo && }
- {showPrice && } ); diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index 2535eb886..557c1c678 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -116,7 +116,7 @@ class FileTile extends React.PureComponent { 'card__title--x-small': small, })} > - {title || name} + {title || name}
({ - claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state), + claim: makeSelectClaimForUri(props.uri)(state), + recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state), autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), }); const perform = dispatch => ({ - fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)), setAutoplay: value => dispatch(doSetClientSetting(settings.AUTOPLAY, value)), + search: query => dispatch(doSearch(query, 20)), }); export default connect( diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index df2ac55e6..12b7107a1 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -4,47 +4,65 @@ import FileTile from 'component/fileTile'; import { FormRow, FormField } from 'component/common/form'; import ToolTip from 'component/common/tooltip'; import type { Claim } from 'types/claim'; -import { buildURI, parseURI } from 'lbry-redux'; type Props = { uri: string, - channelUri: ?string, - claimsInChannel: ?Array, + claim: ?Claim, autoplay: boolean, + recommendedContent: Array, + search: string => void, setAutoplay: boolean => void, - fetchClaims: (string, number) => void, }; -export default class RecommendedContent extends React.PureComponent { +type State = { + didSearch: boolean, +}; + +export default class RecommendedContent extends React.PureComponent { + constructor() { + super(); + + this.state = { + didSearch: false, + }; + } + componentDidMount() { - const { channelUri, fetchClaims, claimsInChannel } = this.props; - if (channelUri && !claimsInChannel) { - fetchClaims(channelUri, 1); + this.getRecommendedContent(); + } + + componentDidUpdate(prevProps: Props) { + const { claim, uri } = this.props; + const { didSearch } = this.state; + + if (uri !== prevProps.uri) { + this.setState({ didSearch: false }); + } + + if (claim && !didSearch) { + this.getRecommendedContent(); + } + } + + getRecommendedContent() { + const { claim, search } = this.props; + + if (claim && claim.value && claim.value.stream && claim.value.stream.metadata) { + const { + value: { + stream: { + metadata: { title }, + }, + }, + } = claim; + // console.log("search", title) + search(title); + this.setState({ didSearch: true }); } } render() { - const { claimsInChannel, autoplay, uri, setAutoplay } = this.props; - - let recommendedContent; - if (claimsInChannel) { - recommendedContent = claimsInChannel.filter(claim => { - const { name, claim_id: claimId, channel_name: channelName, value } = claim; - const { isChannel } = parseURI(uri); - - // The uri may include the channel name - const recommendedUri = - isChannel && value && value.publisherSignature - ? buildURI({ - contentName: name, - claimName: channelName, - claimId: value.publisherSignature.certificateId, - }) - : buildURI({ claimName: name, claimId }); - - return recommendedUri !== uri; - }); - } + const { autoplay, setAutoplay, recommendedContent } = this.props; return (
@@ -62,12 +80,14 @@ export default class RecommendedContent extends React.PureComponent { {recommendedContent && - recommendedContent.map(({ permanent_url: permanentUrl }) => ( + recommendedContent.length && + recommendedContent.map(recommendedUri => ( ))}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index b70e69461..9dfab3fe2 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -218,7 +218,7 @@ class FilePage extends React.Component {
- + ); } diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index cae904513..226d547e0 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -274,7 +274,7 @@ p { } .credit-amount--free { - color: var(--color-secondary); + color: var(--color-credit-free); &.credit-amount--file-page { color: var(--color-dark-blue); @@ -283,7 +283,7 @@ p { } .credit-amount--cost { - color: var(--color-yellow); + color: var(--color-credit-price); &.credit-amount--file-page { color: var(--color-black); diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index ac80156c0..a9e8141cb 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -9,7 +9,7 @@ $large-breakpoint: 1921px; :root { /* Widths & spacings */ - --side-nav-width: 190px; + --side-nav-width: 160px; --side-nav-width-m: 240px; --side-nav-width-l: 320px; --font-size-subtext-multiple: 0.92; @@ -31,7 +31,7 @@ $large-breakpoint: 1921px; --color-dark-blue: #2f6f61; --color-light-blue: #49b2e2; --color-red: #e2495e; - --color-yellow: #fbd55e; + --color-yellow: #e8b414; --color-green: #399483; --color-green-light: #effbe4; --color-green-blue: #2ec1a8; @@ -49,6 +49,8 @@ $large-breakpoint: 1921px; --color-bg-alt: var(--color-grey-light); --color-placeholder: var(--color-grey); --color-search-placeholder: var(--color-placeholder); + --color-credit-free: var(--color-dark-blue); + --color-credit-price: var(--color-yellow); /* Shadows */ --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 40ba15923..e7e1be0f2 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -142,12 +142,6 @@ font-size: 14px; font-family: 'metropolis-medium'; color: var(--card-text-color); - display: flex; - align-items: center; - - .icon { - margin: 0 0 0 $spacing-vertical * 1/3; - } } .card__subtitle--x-small { @@ -170,6 +164,15 @@ padding-top: $spacing-vertical * 2/3; } +.card__file-properties { + display: flex; + align-items: center; + + .icon { + margin: 0 0 0 $spacing-vertical * 1/3; + } +} + // .card-media__internal__links should always be inside a card .card { .card-media__internal-links { diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss index fb1162c9a..ff282eea1 100644 --- a/src/renderer/scss/component/_nav.scss +++ b/src/renderer/scss/component/_nav.scss @@ -1,5 +1,5 @@ .nav { - width: var(--side-nav-width); + min-width: var(--side-nav-width); background-color: var(--nav-bg-color); padding: $spacing-width * 1/3; color: var(--nav-color); @@ -13,11 +13,11 @@ @media (min-width: $medium-breakpoint) { padding-left: $spacing-width; - width: calc(var(--side-nav-width) * 1.2); + width: calc(var(--side-nav-width) * 1.4); } @media (min-width: $large-breakpoint) { - width: calc(var(--side-nav-width) * 1.4); + width: calc(var(--side-nav-width) * 1.6); } } diff --git a/static/themes/dark.css b/static/themes/dark.css index 7343530d5..d3ca442c5 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -9,6 +9,7 @@ --color-bg: var(--color-blue-grey); --color-bg-alt: #2D3D56; --color-placeholder: var(--color-bg-alt); + --color-credit-free: var(--color-secondary); /* Text */ --text-color: var(--color-white); diff --git a/yarn.lock b/yarn.lock index 4e3f7c24d..13d1c7185 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5651,9 +5651,9 @@ lazy-val@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc" -lbry-redux@lbryio/lbry-redux#b4fffe863df316bc73183567ab978221ee623b8c: +lbry-redux@lbryio/lbry-redux#03c3354c12f7834e6ed63705ff19487669be32b9: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b4fffe863df316bc73183567ab978221ee623b8c" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/03c3354c12f7834e6ed63705ff19487669be32b9" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0" -- 2.45.3 From e1adc71f0a0205ce5ef4746592d7924ffb850e28 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 6 Aug 2018 13:58:33 -0400 Subject: [PATCH 2/7] hide filePrice if it's free --- src/renderer/component/fileCard/view.jsx | 2 +- src/renderer/component/filePrice/view.jsx | 7 ++++++- src/renderer/component/fileTile/view.jsx | 2 +- src/renderer/scss/component/_card.scss | 2 +- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index 07f896b11..1d602d72d 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -100,7 +100,7 @@ class FileCard extends React.PureComponent { {pending ?
Pending...
: }
- {showPrice && } + {showPrice && } {isRewardContent && } {fileInfo && }
diff --git a/src/renderer/component/filePrice/view.jsx b/src/renderer/component/filePrice/view.jsx index ebb0318f1..0dd645a2f 100644 --- a/src/renderer/component/filePrice/view.jsx +++ b/src/renderer/component/filePrice/view.jsx @@ -13,6 +13,7 @@ type Props = { filePage?: boolean, inheritStyle?: boolean, showLBC?: boolean, + hideFree?: boolean, // hide the file price if it's free }; class FilePrice extends React.PureComponent { @@ -37,7 +38,11 @@ class FilePrice extends React.PureComponent { }; render() { - const { costInfo, showFullPrice, filePage, inheritStyle, showLBC } = this.props; + const { costInfo, showFullPrice, filePage, inheritStyle, showLBC, hideFree } = this.props; + + if (costInfo && !costInfo.cost && hideFree) { + return null; + } return costInfo ? ( { {isRewardContent && } {showLocal && isDownloaded && } - + {displayDescription && (
{description} diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index e7e1be0f2..dd65a35c0 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -169,7 +169,7 @@ align-items: center; .icon { - margin: 0 0 0 $spacing-vertical * 1/3; + margin: $spacing-vertical * 1/3 $spacing-vertical * 1/3 0 0; } } -- 2.45.3 From 0d2eab88daf603d216a2e4deba6bb4192791d8ad Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 6 Aug 2018 14:26:20 -0400 Subject: [PATCH 3/7] add header to recommended content and decrease autoplay size --- .../component/common/form-components/form-row.jsx | 11 ++++++++++- src/renderer/component/recommendedContent/view.jsx | 5 +++-- src/renderer/scss/component/_form-field.scss | 9 +++++++++ src/renderer/scss/component/_toggle.scss | 13 +++++++------ 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx index f694c305e..3bd93252d 100644 --- a/src/renderer/component/common/form-components/form-row.jsx +++ b/src/renderer/component/common/form-components/form-row.jsx @@ -9,6 +9,7 @@ type Props = { verticallyCentered?: boolean, stretch?: boolean, alignRight?: boolean, + spaceBetween?: boolean, }; export class FormRow extends React.PureComponent { @@ -17,7 +18,14 @@ export class FormRow extends React.PureComponent { }; render() { - const { centered, children, padded, verticallyCentered, stretch, alignRight } = this.props; + const { + children, + padded, + verticallyCentered, + stretch, + alignRight, + spaceBetween, + } = this.props; return (
{ 'form-row--vertically-centered': verticallyCentered, 'form-row--stretch': stretch, 'form-row--right': alignRight, + 'form-row--space-between': spaceBetween, })} > {children} diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index 12b7107a1..6305b7861 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -66,11 +66,12 @@ export default class RecommendedContent extends React.PureComponent - + + Related Date: Mon, 6 Aug 2018 14:40:33 -0400 Subject: [PATCH 4/7] improve icon placement in FileTile --- src/renderer/component/fileTile/view.jsx | 6 ++++-- src/renderer/scss/component/_file-list.scss | 7 +++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index 8832636fb..c053ff305 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -123,8 +123,10 @@ class FileTile extends React.PureComponent { 'card__subtitle--x-small': small, })} > - {showUri ? uri : channel || __('Anonymous')} - {isRewardContent && } + + {showUri ? uri : channel || __('Anonymous')} + + {isRewardContent && } {showLocal && isDownloaded && }
diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index b4ed9e7ac..c5440a995 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -31,9 +31,16 @@ .card__subtitle { line-height: 1; + display: flex; + align-items: center; + // justify-content: space-between; } } +.file-tile__channel { + padding-right: $spacing-width * 1/4; +} + .file-tile.file-tile--small { padding-top: $spacing-vertical * 2/3; -- 2.45.3 From c5e6db73f0efa606b58ff30d04b36bd65b629366 Mon Sep 17 00:00:00 2001 From: seanyesmunt Date: Mon, 6 Aug 2018 23:31:42 -0400 Subject: [PATCH 5/7] move autoplay back to below file actions --- .../common/form-components/form-field.jsx | 2 -- .../common/form-components/form-row.jsx | 11 +------- .../component/recommendedContent/index.js | 5 ---- .../component/recommendedContent/view.jsx | 21 ++------------- src/renderer/page/file/view.jsx | 27 +++++++++++++++++++ src/renderer/scss/component/_form-field.scss | 11 +------- src/renderer/scss/component/_tooltip.scss | 4 +-- 7 files changed, 33 insertions(+), 48 deletions(-) diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx index 140c7d6af..a38722d94 100644 --- a/src/renderer/component/common/form-components/form-field.jsx +++ b/src/renderer/component/common/form-components/form-field.jsx @@ -40,7 +40,6 @@ export class FormField extends React.PureComponent { children, stretch, affixClass, - firstInList, ...inputProps } = this.props; @@ -103,7 +102,6 @@ export class FormField extends React.PureComponent {
{prefix && ( diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx index 3bd93252d..79f1b5cd0 100644 --- a/src/renderer/component/common/form-components/form-row.jsx +++ b/src/renderer/component/common/form-components/form-row.jsx @@ -9,7 +9,6 @@ type Props = { verticallyCentered?: boolean, stretch?: boolean, alignRight?: boolean, - spaceBetween?: boolean, }; export class FormRow extends React.PureComponent { @@ -18,14 +17,7 @@ export class FormRow extends React.PureComponent { }; render() { - const { - children, - padded, - verticallyCentered, - stretch, - alignRight, - spaceBetween, - } = this.props; + const { children, padded, verticallyCentered, stretch, alignRight } = this.props; return (
{ 'form-row--vertically-centered': verticallyCentered, 'form-row--stretch': stretch, 'form-row--right': alignRight, - 'form-row--space-between': spaceBetween, })} > {children} diff --git a/src/renderer/component/recommendedContent/index.js b/src/renderer/component/recommendedContent/index.js index 06885d139..1cc5c2f51 100644 --- a/src/renderer/component/recommendedContent/index.js +++ b/src/renderer/component/recommendedContent/index.js @@ -1,18 +1,13 @@ -import * as settings from 'constants/settings'; import { connect } from 'react-redux'; import { makeSelectClaimForUri, doSearch, makeSelectRecommendedContentForUri } from 'lbry-redux'; -import { doSetClientSetting } from 'redux/actions/settings'; -import { makeSelectClientSetting } from 'redux/selectors/settings'; import RecommendedVideos from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state), - autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), }); const perform = dispatch => ({ - setAutoplay: value => dispatch(doSetClientSetting(settings.AUTOPLAY, value)), search: query => dispatch(doSearch(query, 20)), }); diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index 6305b7861..7fedc5420 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -1,17 +1,13 @@ // @flow import React from 'react'; import FileTile from 'component/fileTile'; -import { FormRow, FormField } from 'component/common/form'; -import ToolTip from 'component/common/tooltip'; import type { Claim } from 'types/claim'; type Props = { uri: string, claim: ?Claim, - autoplay: boolean, recommendedContent: Array, search: string => void, - setAutoplay: boolean => void, }; type State = { @@ -62,24 +58,11 @@ export default class RecommendedContent extends React.PureComponent - - Related - - setAutoplay(e.target.checked)} - /> - - + Related {recommendedContent && recommendedContent.length && recommendedContent.map(recommendedUri => ( diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index 9dfab3fe2..8eba0ed2d 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -1,5 +1,6 @@ // @flow import * as React from 'react'; +import * as settings from 'constants/settings'; import { buildURI, normalizeURI, MODALS } from 'lbry-redux'; import FileViewer from 'component/fileViewer'; import Thumbnail from 'component/common/thumbnail'; @@ -20,6 +21,8 @@ import FileDownloadLink from 'component/fileDownloadLink'; import classnames from 'classnames'; import getMediaType from 'util/getMediaType'; import RecommendedContent from 'component/recommendedContent'; +import { FormField, FormRow } from 'component/common/form'; +import ToolTip from 'component/common/tooltip'; type Props = { claim: Claim, @@ -43,6 +46,8 @@ type Props = { prepareEdit: ({}, string) => void, checkSubscription: ({ channelName: string, uri: string }) => void, subscriptions: Array, + setClientSetting: (string, boolean | string) => void, + autoplay: boolean, }; class FilePage extends React.Component { @@ -59,6 +64,12 @@ class FilePage extends React.Component { 'application', ]; + constructor(props: Props) { + super(props); + + (this: any).onAutoplayChange = this.onAutoplayChange.bind(this); + } + componentDidMount() { const { uri, fileInfo, fetchFileInfo, fetchCostInfo } = this.props; @@ -79,6 +90,10 @@ class FilePage extends React.Component { } } + onAutoplayChange(event: SyntheticInputEvent<*>) { + this.props.setClientSetting(settings.AUTOPLAY, event.target.checked); + } + checkSubscription = (props: Props) => { if (props.subscriptions.find(sub => sub.channelName === props.claim.channel_name)) { props.checkSubscription({ @@ -108,6 +123,7 @@ class FilePage extends React.Component { navigate, costInfo, fileInfo, + autoplay, } = this.props; // File info @@ -213,6 +229,17 @@ class FilePage extends React.Component {
+ + + + +
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index f1a0b4f37..15fbe14e5 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -12,7 +12,7 @@ } &.form-row--padded { - padding-top: $spacing-vertical * 2/3; + padding-top: $spacing-vertical * 1/3; } &.form-row--vertically-centered { @@ -27,10 +27,6 @@ justify-content: flex-end; } - &.form-row--space-between { - justify-content: space-between; - } - .form-field.form-field--stretch { width: 100%; @@ -125,11 +121,6 @@ padding-left: $spacing-vertical * 1/3; } -.form-field__prefix--recommended-content { - font-size: 12px; - align-self: center; -} - .form-field__select { min-width: 60px; height: 30px; diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss index ff58835f6..9acd75954 100644 --- a/src/renderer/scss/component/_tooltip.scss +++ b/src/renderer/scss/component/_tooltip.scss @@ -75,8 +75,8 @@ .tooltip--right { .tooltip__body { - margin-top: -5px; - margin-left: 10px; + margin-top: -30px; + margin-left: 110%; &::after { top: 17px; -- 2.45.3 From ddafd3d5b5f8e42d917786f01cefcaf2dd808a18 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 9 Aug 2018 12:41:14 -0400 Subject: [PATCH 6/7] improve spacing --- src/renderer/component/fileCard/view.jsx | 2 +- src/renderer/component/fileTile/view.jsx | 4 +++- .../component/recommendedContent/index.js | 2 +- .../component/recommendedContent/view.jsx | 19 ++++++--------- src/renderer/modal/modalCreditIntro/view.jsx | 6 ++--- src/renderer/scss/_gui.scss | 3 +-- src/renderer/scss/_vars.scss | 4 ++-- src/renderer/scss/component/_card.scss | 23 ++++++++++++++----- src/renderer/scss/component/_file-list.scss | 1 - src/renderer/types/claim.js | 4 +++- 10 files changed, 38 insertions(+), 30 deletions(-) diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index 1d602d72d..f8dd8582c 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -94,7 +94,7 @@ class FileCard extends React.PureComponent {
- {title} + {title}
{pending ?
Pending...
: } diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index c053ff305..acaf49791 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -126,10 +126,12 @@ class FileTile extends React.PureComponent { {showUri ? uri : channel || __('Anonymous')} +
+
+ {isRewardContent && } {showLocal && isDownloaded && }
- {displayDescription && (
{description} diff --git a/src/renderer/component/recommendedContent/index.js b/src/renderer/component/recommendedContent/index.js index 1cc5c2f51..166498b6d 100644 --- a/src/renderer/component/recommendedContent/index.js +++ b/src/renderer/component/recommendedContent/index.js @@ -8,7 +8,7 @@ const select = (state, props) => ({ }); const perform = dispatch => ({ - search: query => dispatch(doSearch(query, 20)), + search: query => dispatch(doSearch(query, 20, undefined, true)), }); export default connect( diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index 7fedc5420..a713eaa26 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -10,17 +10,11 @@ type Props = { search: string => void, }; -type State = { - didSearch: boolean, -}; - export default class RecommendedContent extends React.PureComponent { constructor() { super(); - this.state = { - didSearch: false, - }; + this.didSearch = undefined; } componentDidMount() { @@ -29,13 +23,12 @@ export default class RecommendedContent extends React.PureComponent {

{currentBalance <= 0 && (

- You currently have , so the actions you - can take are limited. + You currently have , so the actions + you can take are limited.

)} {Boolean(totalRewardValue) && (

There are a variety of ways to get credits, including more than{' '} - {' '} + {' '} {__('in free rewards for participating in the LBRY beta.')}

)} diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 226d547e0..33899285f 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -257,10 +257,8 @@ p { } .credit-amount { - font-family: 'metropolis-bold'; font-size: 10px; white-space: nowrap; - padding: $spacing-vertical * 1/6 0; } .credit-amount--large { @@ -269,6 +267,7 @@ p { } .credit-amount--file-page { + font-family: 'metropolis-bold'; border-radius: 5px; padding: 5px; } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index a9e8141cb..64fa23cfe 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -31,7 +31,7 @@ $large-breakpoint: 1921px; --color-dark-blue: #2f6f61; --color-light-blue: #49b2e2; --color-red: #e2495e; - --color-yellow: #e8b414; + --color-yellow: #fbd55e; --color-green: #399483; --color-green-light: #effbe4; --color-green-blue: #2ec1a8; @@ -50,7 +50,7 @@ $large-breakpoint: 1921px; --color-placeholder: var(--color-grey); --color-search-placeholder: var(--color-placeholder); --color-credit-free: var(--color-dark-blue); - --color-credit-price: var(--color-yellow); + --color-credit-price: var(--card-text-color); /* Shadows */ --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index dd65a35c0..57f107813 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -111,11 +111,12 @@ } .card__title--small { - font-size: 14px; - line-height: 18px; + font-size: 12px; + line-height: 12px; - @media only screen and (min-width: $large-breakpoint) { - font-size: 16px; + @media only screen and (min-width: $medium-breakpoint) { + font-size: 14px; + line-height: 14px; } } @@ -135,6 +136,13 @@ .card__title--file-card { padding-top: $spacing-vertical * 1/3; + // height is the same height that two lines of title fill + // doing this so content below the title is inline accross the row + height: 30px; + + @media only screen and (min-width: $medium-breakpoint) { + height: 36px; + } } .card__subtitle { @@ -167,9 +175,12 @@ .card__file-properties { display: flex; align-items: center; + padding-top: $spacing-vertical * 1/3; + color: var(--card-text-color); - .icon { - margin: $spacing-vertical * 1/3 $spacing-vertical * 1/3 0 0; + .icon + .icon, + .credit-amount + .icon { + margin-left: $spacing-vertical * 1/3; } } diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index c5440a995..ee2583015 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -33,7 +33,6 @@ line-height: 1; display: flex; align-items: center; - // justify-content: space-between; } } diff --git a/src/renderer/types/claim.js b/src/renderer/types/claim.js index 3878294d9..ec060f2e6 100644 --- a/src/renderer/types/claim.js +++ b/src/renderer/types/claim.js @@ -34,6 +34,8 @@ export type Claim = { publisherSignature: ?{ certificateId: ?string, }, - stream: ?Metadata, + stream: { + metadata: ?Metadata, + }, }, }; -- 2.45.3 From 4c82cfeab18a240d15ff105844997503f356839c Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Sat, 11 Aug 2018 00:17:06 -0400 Subject: [PATCH 7/7] update changelog --- CHANGELOG.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3678db79c..bba8fdee5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,9 +9,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/). * Wallet Encryption/Decryption user flows ([#1785](https://github.com/lbryio/lbry-desktop/pull/1785)) * Add FAQ to Publishing Area ([#1833](https://github.com/lbryio/lbry-desktop/pull/1833)) * Better preview for content ([#620](https://github.com/lbryio/lbry-desktop/pull/620)) - * Add new markdown and docx viewer ([#1826](https://github.com/lbryio/lbry-desktop/pull/1826)) - * Add new viewer for human-readable text files ([#1826](https://github.com/lbryio/lbry-desktop/pull/1826)) - * Add csv and json viewer ([#1410](https://github.com/lbryio/lbry-desktop/pull/1410)) + * New markdown and docx viewer ([#1826](https://github.com/lbryio/lbry-desktop/pull/1826)) + * New viewer for human-readable text files ([#1826](https://github.com/lbryio/lbry-desktop/pull/1826)) + * CSV and JSON viewer ([#1410](https://github.com/lbryio/lbry-desktop/pull/1410)) + * Recommended content on file viewer page ([#1845](https://github.com/lbryio/lbry-desktop/pull/1845)) ### Changed * Pass error message from spee.ch API during thumbnail upload ([#1840](https://github.com/lbryio/lbry-desktop/pull/1840)) -- 2.45.3