From 2d2c414811e6a3ce3a29e001f6314f9e82625b5f Mon Sep 17 00:00:00 2001 From: seanyesmunt Date: Fri, 24 Aug 2018 17:25:18 -0400 Subject: [PATCH 1/3] use channelTile on top of search page --- src/renderer/component/channelTile/view.jsx | 50 ++++++++++++++++----- src/renderer/page/search/view.jsx | 21 +++++++-- 2 files changed, 56 insertions(+), 15 deletions(-) diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 531b9fccd..60f7e29b7 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -2,16 +2,13 @@ import * as React from 'react'; import CardMedia from 'component/cardMedia'; import TruncatedText from 'component/common/truncated-text'; - -/* - This component can probably be combined with FileTile - Currently the only difference is showing the number of files/empty channel -*/ +import classnames from 'classnames'; type Props = { uri: string, isResolvingUri: boolean, totalItems: number, + size: string, claim: ?{ claim_id: string, name: string, @@ -21,6 +18,10 @@ type Props = { }; class ChannelTile extends React.PureComponent { + static defaultProps = { + size: 'regular', + }; + componentDidMount() { const { uri, resolveUri } = this.props; @@ -36,27 +37,52 @@ class ChannelTile extends React.PureComponent { } render() { - const { claim, navigate, isResolvingUri, totalItems, uri } = this.props; - let channelName, channelId; + const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props; + let channelName; if (claim) { channelName = claim.name; - channelId = claim.claim_id; } const onClick = () => navigate('/show', { uri }); return ( -
+
- {isResolvingUri &&
{__('Loading...')}
} + {isResolvingUri && ( +
+ {__('Loading...')} +
+ )} {!isResolvingUri && ( -
+
{channelName || uri}
-
+
{totalItems > 0 && ( {totalItems} {totalItems === 1 ? 'file' : 'files'} diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index 4b2497797..d3000a9c9 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -1,9 +1,10 @@ // @flow import * as React from 'react'; import * as settings from 'constants/settings'; -import { isURIValid, normalizeURI } from 'lbry-redux'; +import { isURIValid, normalizeURI, parseURI } from 'lbry-redux'; import { FormField, FormRow } from 'component/common/form'; import FileTile from 'component/fileTile'; +import ChannelTile from 'component/channelTile'; import FileListSearch from 'component/fileListSearch'; import Page from 'component/page'; @@ -32,13 +33,27 @@ class SearchPage extends React.PureComponent { render() { const { query, resultCount } = this.props; + + const isValid = isURIValid(query); + + let uri; + let isChannel; + if (isValid) { + uri = normalizeURI(query); + ({ isChannel } = parseURI(uri)); + } + return ( {query && - isURIValid(query) && ( + isValid && (
{`lbry://${query}`}
- + {isChannel ? ( + + ) : ( + + )}
)}
From 4de7053a13a37ffc1225a01f33a7d0cc183ec49a Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 27 Aug 2018 14:45:50 -0400 Subject: [PATCH 2/3] add subscribtion button to exact channel match --- src/renderer/component/channelTile/view.jsx | 10 +++++++++- src/renderer/component/subscribeButton/view.jsx | 4 +++- src/renderer/scss/_vars.scss | 1 + src/renderer/scss/component/_search.scss | 2 +- static/themes/dark.css | 1 + 5 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 60f7e29b7..4b3c0f744 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -3,6 +3,7 @@ import * as React from 'react'; import CardMedia from 'component/cardMedia'; import TruncatedText from 'component/common/truncated-text'; import classnames from 'classnames'; +import SubscribeButton from 'component/subscribeButton'; type Props = { uri: string, @@ -38,10 +39,12 @@ class ChannelTile extends React.PureComponent { render() { const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props; - let channelName; + let channelName; + let subscriptionUri; if (claim) { channelName = claim.name; + subscriptionUri = claim.permanent_url; } const onClick = () => navigate('/show', { uri }); @@ -92,6 +95,11 @@ class ChannelTile extends React.PureComponent {
)} + {subscriptionUri && ( +
+ +
+ )}
); diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx index a29b8bb4a..4d5727d31 100644 --- a/src/renderer/component/subscribeButton/view.jsx +++ b/src/renderer/component/subscribeButton/view.jsx @@ -41,7 +41,9 @@ export default (props: Props) => { icon={isSubscribed ? undefined : icons.HEART} button="alt" label={subscriptionLabel} - onClick={() => { + onClick={e => { + e.stopPropagation(); + if (!subscriptions.length) { doNotify({ id: MODALS.FIRST_SUBSCRIPTION }); } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index ce5caddf4..199809230 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -137,6 +137,7 @@ $large-breakpoint: 1921px; --search-item-border-color: transparent; --search-item-active-color: var(--color-black); --search-modal-input-height: 70px; + --search-exact-result: #eaeaea; /* Nav */ --nav-color: var(--color-grey-dark); diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index fb61a21e5..fbe3f6a3d 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -87,7 +87,7 @@ .search__top { padding: 0 $spacing-width $spacing-width; - background-color: var(--card-bg); + background-color: var(--search-exact-result); } .search__content { diff --git a/static/themes/dark.css b/static/themes/dark.css index d3ca442c5..fae053d75 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -62,6 +62,7 @@ --search-active-bg-color: #13233C; --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); --search-modal-input-height: 70px; + --search-exact-result: #4C5D77; /* Nav */ --nav-color: #44548F; From ca07d8a99ba3d7ce34cde47b66e3a8cd48b3b4ce Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 27 Aug 2018 14:47:55 -0400 Subject: [PATCH 3/3] add resolution help tooltip next to url match --- src/renderer/page/search/view.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index d3000a9c9..89d8425d7 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -7,6 +7,9 @@ import FileTile from 'component/fileTile'; import ChannelTile from 'component/channelTile'; import FileListSearch from 'component/fileListSearch'; import Page from 'component/page'; +import ToolTip from 'component/common/tooltip'; +import Icon from 'component/common/icon'; +import * as icons from 'constants/icons'; type Props = { query: ?string, @@ -48,7 +51,15 @@ class SearchPage extends React.PureComponent { {query && isValid && (
-
{`lbry://${query}`}
+
+ {`lbry://${query}`} + + + +
{isChannel ? ( ) : (