From 99ab165a8fc2f0aa217d33eb434c8a65ee314e36 Mon Sep 17 00:00:00 2001 From: zeppi Date: Thu, 3 Dec 2020 19:10:23 -0500 Subject: [PATCH] New repost flow Clearer display of takeover amounts Repost from empty search result, from top page, or from claim review changes final touches bump empty comment copy they emptier validation cleanup extra --- static/app-strings.json | 3 + ui/component/claimEffectiveAmount/view.jsx | 2 +- .../claimPreview/claim-preview-loading.jsx | 30 ++ .../claimPreview/claim-preview-no-content.jsx | 32 ++ .../claimPreview/claim-preview-no-mature.jsx | 35 ++ ui/component/claimPreview/view.jsx | 36 +- ui/component/commentsList/view.jsx | 5 +- ui/component/common/empty.jsx | 30 ++ ui/component/fileActions/view.jsx | 2 +- ui/component/header/view.jsx | 2 +- ui/component/repostCreate/index.js | 45 ++ ui/component/repostCreate/view.jsx | 416 ++++++++++++++++++ ui/component/router/view.jsx | 2 + ui/component/searchTopClaim/index.js | 18 +- ui/component/searchTopClaim/view.jsx | 100 +++-- ui/component/yrbl/index.jsx | 5 +- ui/constants/pages.js | 1 + ui/modal/modalRepost/view.jsx | 2 +- ui/page/publish/view.jsx | 1 - ui/page/repost/index.js | 15 + ui/page/repost/view.jsx | 77 ++++ ui/page/search/view.jsx | 3 +- ui/page/top/index.js | 14 +- ui/page/top/view.jsx | 30 +- ui/redux/selectors/search.js | 23 +- ui/scss/all.scss | 1 + ui/scss/component/_claim-list.scss | 35 +- ui/scss/component/_claim-search.scss | 12 + ui/scss/component/_empty.scss | 21 + ui/scss/component/_yrbl.scss | 10 + ui/scss/themes/dark.scss | 5 +- 31 files changed, 938 insertions(+), 75 deletions(-) create mode 100644 ui/component/claimPreview/claim-preview-loading.jsx create mode 100644 ui/component/claimPreview/claim-preview-no-content.jsx create mode 100644 ui/component/claimPreview/claim-preview-no-mature.jsx create mode 100644 ui/component/common/empty.jsx create mode 100644 ui/component/repostCreate/index.js create mode 100644 ui/component/repostCreate/view.jsx create mode 100644 ui/page/repost/index.js create mode 100644 ui/page/repost/view.jsx create mode 100644 ui/scss/component/_empty.scss diff --git a/static/app-strings.json b/static/app-strings.json index a80f0eaf8..aa85af808 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1527,6 +1527,9 @@ "Explore": "Explore", "There is a bug... somewhere": "There is a bug... somewhere", "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.": "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.", + "No Results": "No Results", + "Content preview": "Content preview", + "Repost url": "Repost url", "Close sidebar - hide channels you are following": "Close sidebar - hide channels you are following", "Expand sidebar - view channels you are following.": "Expand sidebar - view channels you are following.", "--end--": "--end--" diff --git a/ui/component/claimEffectiveAmount/view.jsx b/ui/component/claimEffectiveAmount/view.jsx index a9e95a91c..d6a744728 100644 --- a/ui/component/claimEffectiveAmount/view.jsx +++ b/ui/component/claimEffectiveAmount/view.jsx @@ -14,7 +14,7 @@ function ClaimEffectiveAmount(props: Props) { return null; } - return ; + return ; } export default ClaimEffectiveAmount; diff --git a/ui/component/claimPreview/claim-preview-loading.jsx b/ui/component/claimPreview/claim-preview-loading.jsx new file mode 100644 index 000000000..53f3ade50 --- /dev/null +++ b/ui/component/claimPreview/claim-preview-loading.jsx @@ -0,0 +1,30 @@ +// @flow +import classnames from 'classnames'; +import React from 'react'; + +type Props = { + isChannel: boolean, + type: string, +}; + +function ClaimPreviewLoading(props: Props) { + const { isChannel, type } = props; + return ( +
  • +
    +
    +
    +
    +
    +
    +
    +
    • + ); +} + +export default ClaimPreviewLoading; diff --git a/ui/component/claimPreview/claim-preview-no-content.jsx b/ui/component/claimPreview/claim-preview-no-content.jsx new file mode 100644 index 000000000..f08dfad91 --- /dev/null +++ b/ui/component/claimPreview/claim-preview-no-content.jsx @@ -0,0 +1,32 @@ +// @flow +import classnames from 'classnames'; +import React from 'react'; +import Empty from 'component/common/empty'; + +type Props = { + isChannel: boolean, + type: string, +}; + +function ClaimPreviewNoContent(props: Props) { + const { isChannel, type } = props; + return ( +
  • +
    + +
    +
    • + ); +} + +export default ClaimPreviewNoContent; diff --git a/ui/component/claimPreview/claim-preview-no-mature.jsx b/ui/component/claimPreview/claim-preview-no-mature.jsx new file mode 100644 index 000000000..6a3a84b35 --- /dev/null +++ b/ui/component/claimPreview/claim-preview-no-mature.jsx @@ -0,0 +1,35 @@ +// @flow +import classnames from 'classnames'; +import React from 'react'; +import Empty from 'component/common/empty'; + +type Props = { + isChannel: boolean, + type: string, +}; + +function ClaimPreviewNoMature(props: Props) { + const { isChannel, type } = props; + return ( +
  • +
    +
    +
    +
    +
    +
    • + ); +} + +export default ClaimPreviewNoMature; diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index e0873f9bc..13e22dc7d 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -22,6 +22,9 @@ import ClaimRepostAuthor from 'component/claimRepostAuthor'; import FileDownloadLink from 'component/fileDownloadLink'; import AbandonedChannelPreview from 'component/abandonedChannelPreview'; import PublishPending from 'component/publishPending'; +import ClaimPreviewLoading from './claim-preview-loading'; +import ClaimPreviewNoMature from './claim-preview-no-mature'; +import ClaimPreviewNoContent from './claim-preview-no-content'; type Props = { uri: string, @@ -58,6 +61,7 @@ type Props = { getFile: string => void, customShouldHide?: Claim => boolean, showUnresolvedClaim?: boolean, + showNullPlaceholder?: boolean, includeSupportAction?: boolean, hideActions?: boolean, renderActions?: Claim => ?Node, @@ -94,6 +98,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { streamingUrl, customShouldHide, showUnresolvedClaim, + showNullPlaceholder, includeSupportAction, hideActions = false, renderActions, @@ -195,29 +200,22 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { } }, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]); - if (shouldHide) { + if (shouldHide && !showNullPlaceholder) { return null; } - if (placeholder === 'loading' || claim === undefined || (isResolvingUri && !claim)) { - return ( -
  • -
    -
    -
    -
    -
    -
    -
    -
    • - ); + if (placeholder === 'loading' || (isResolvingUri && !claim)) { + return ; } + + if (claim && showNullPlaceholder && shouldHide && nsfw) { + return ; + } + + if (!claim && showNullPlaceholder) { + return ; + } + if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && claim === null) { return ; } diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 0d3fa0018..a2d918607 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -12,6 +12,7 @@ import CommentCreate from 'component/commentCreate'; import usePersistedState from 'effects/use-persisted-state'; import { ENABLE_COMMENT_REACTIONS } from 'config'; import { sortComments } from 'util/comments'; +import Empty from 'component/common/empty'; type Props = { comments: Array, @@ -58,7 +59,7 @@ function CommentList(props: Props) { Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS ); const linkedCommentId = linkedComment && linkedComment.comment_id; - const hasNoComments = totalComments === 0; + const hasNoComments = !totalComments; const moreBelow = totalComments - end > 0; const isMyComment = (channelId: string): boolean => { if (myChannels != null && channelId != null) { @@ -210,7 +211,7 @@ function CommentList(props: Props) { <> - {!isFetchingComments && hasNoComments &&
    {__('Be the first to comment!')}
    } + {!isFetchingComments && hasNoComments && }
      {comments && diff --git a/ui/component/common/empty.jsx b/ui/component/common/empty.jsx new file mode 100644 index 000000000..1b9752519 --- /dev/null +++ b/ui/component/common/empty.jsx @@ -0,0 +1,30 @@ +// @flow +import React from 'react'; + +type Props = { + text: ?string, +}; + +class Empty extends React.PureComponent { + static defaultProps = { + text: '', + }; + + render() { + const { text } = this.props; + + return ( +
      +
      + {text && ( +
      +

      {text}

      +
      + )} +
      +
      + ); + } +} + +export default Empty; diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx index 1e10c27d4..25bfeb699 100644 --- a/ui/component/fileActions/view.jsx +++ b/ui/component/fileActions/view.jsx @@ -74,7 +74,7 @@ function FileActions(props: Props) { push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`); doToast({ message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }) }); } else { - openModal(MODALS.REPOST, { uri }); + push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}`); } } diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index 6edb4ad7b..99d58ed30 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -205,7 +205,7 @@ const Header = (props: Props) => { icon={ICONS.ARROW_LEFT} /> {backTitle &&

      {isMobile ? simpleBackTitle || backTitle : backTitle}

      } - {authenticated ? ( + {authenticated || !IS_WEB ? (