From ee7d22d41a54be2a02c6f2d64e93f5450efb99df Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 12 May 2021 10:29:08 +0800 Subject: [PATCH 1/2] Add ICON.INFO - "i" within a circle. Basically, an inverted ICON.ALERT. --- ui/component/common/icon-custom.jsx | 7 +++++++ ui/constants/icons.js | 1 + 2 files changed, 8 insertions(+) diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index 21bb157a9..a14e9c49d 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -385,6 +385,13 @@ export const icons = { ), + [ICONS.INFO]: buildIcon( + + + + + + ), [ICONS.UNLOCK]: buildIcon( diff --git a/ui/constants/icons.js b/ui/constants/icons.js index 326d33f5d..f1ad4e32b 100644 --- a/ui/constants/icons.js +++ b/ui/constants/icons.js @@ -6,6 +6,7 @@ export const REWARDS = 'Award'; export const LOCAL = 'Folder'; export const ALERT = 'AlertCircle'; +export const INFO = 'InfoCircle'; export const COPY = 'Clipboard'; export const ARROW_LEFT = 'ChevronLeft'; export const ARROW_RIGHT = 'ChevronRight'; -- 2.45.3 From 04e5c2998a195f55711c419a8a4f2936cb2fc930 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 12 May 2021 08:16:45 +0800 Subject: [PATCH 2/2] Posts: restore "Tip unlock | Claim details" component ## Issue 5882: tip unlock + claim id detials missing from markdown posts view ## Notes The easiest solution would be to put `FileDescription` into posts, but I think that goes against the clean up of the Post layout, where the focus should be on the content. The faded style of the File Details section seems too distracting, plus we don't want the File Description anyway. Fixed by: - Make the existing "LBC amount" clickable to show credit details. An additional padlock will appear if the content is yours and you have tips to unlock. - Add an "info" icon beside it to show file details. These "link" buttons are usually lit, but I dimmed it in this case to make them stand out less. Again, focusing on Post content instead of buttons. --- static/app-strings.json | 1 + ui/component/postViewer/index.js | 8 +++- ui/component/postViewer/view.jsx | 75 ++++++++++++++++++++++++++++++-- ui/scss/component/_post.scss | 26 +++++++++++ 4 files changed, 104 insertions(+), 6 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 40eea5808..2728cb16d 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1867,6 +1867,7 @@ "Help LBRY Save Crypto": "Help LBRY Save Crypto", "The US government is attempting to destroy the cryptocurrency industry. Can you help?": "The US government is attempting to destroy the cryptocurrency industry. Can you help?", "Learn more and sign petition": "Learn more and sign petition", + "View claim details": "View claim details", "Publishing...": "Publishing...", "Collection": "Collection", "Fetch transaction data for export": "Fetch transaction data for export", diff --git a/ui/component/postViewer/index.js b/ui/component/postViewer/index.js index c2bd8d4d4..fd706066f 100644 --- a/ui/component/postViewer/index.js +++ b/ui/component/postViewer/index.js @@ -1,9 +1,13 @@ import { connect } from 'react-redux'; -import { makeSelectClaimForUri } from 'lbry-redux'; +import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux'; import PostViewer from './view'; +import { doOpenModal } from 'redux/actions/app'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), + claimIsMine: makeSelectClaimIsMine(props.uri)(state), }); -export default connect(select)(PostViewer); +export default connect(select, { + doOpenModal, +})(PostViewer); diff --git a/ui/component/postViewer/view.jsx b/ui/component/postViewer/view.jsx index 06175c592..9f211048e 100644 --- a/ui/component/postViewer/view.jsx +++ b/ui/component/postViewer/view.jsx @@ -1,27 +1,54 @@ // @flow import * as React from 'react'; +import * as ICONS from 'constants/icons'; +import * as MODALS from 'constants/modal_types'; +import { formatCredits } from 'lbry-redux'; import FileAuthor from 'component/fileAuthor'; +import FileDetails from 'component/fileDetails'; import FileTitle from 'component/fileTitle'; import FileActions from 'component/fileActions'; import FileRenderInitiator from 'component/fileRenderInitiator'; import FileRenderInline from 'component/fileRenderInline'; +import FileValues from 'component/fileValues'; import FileViewCount from 'component/fileViewCount'; -import CreditAmount from 'component/common/credit-amount'; +import ClaimTags from 'component/claimTags'; import DateTime from 'component/dateTime'; +import Button from 'component/button'; +import LbcSymbol from 'component/common/lbc-symbol'; +import classnames from 'classnames'; + +const EXPAND = { + NONE: 'none', + CREDIT_DETAILS: 'credit_details', + FILE_DETAILS: 'file_details', +}; type Props = { uri: string, claim: ?StreamClaim, + claimIsMine: boolean, + doOpenModal: (id: string, {}) => void, }; function PostViewer(props: Props) { - const { uri, claim } = props; + const { uri, claim, claimIsMine, doOpenModal } = props; + const [expand, setExpand] = React.useState(EXPAND.NONE); if (!claim) { return null; } const amount = parseFloat(claim.amount) + parseFloat(claim.meta.support_amount); + const formattedAmount = formatCredits(amount, 2, true); + const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0; + + function handleExpand(newExpand) { + if (expand === newExpand) { + setExpand(EXPAND.NONE); + } else { + setExpand(newExpand); + } + } return (
@@ -30,11 +57,51 @@ function PostViewer(props: Props) { -
- + +
+
+ + {claimIsMine && hasSupport && ( +
+ {expand === EXPAND.CREDIT_DETAILS && ( +
+ +
+ )} + + {expand === EXPAND.FILE_DETAILS && ( +
+ + +
+ )} + diff --git a/ui/scss/component/_post.scss b/ui/scss/component/_post.scss index ec23edcb9..04fba2597 100644 --- a/ui/scss/component/_post.scss +++ b/ui/scss/component/_post.scss @@ -70,6 +70,32 @@ } } +.post__info--expanded { + margin-bottom: var(--spacing-s); +} + +.post__info--grouped { + .button--link { + margin-right: var(--spacing-s); + } + + .dim { + color: var(--color-text-subtitle); + stroke: var(--color-text-subtitle); + } +} + +.post__info--credit-details { + @include font-sans; + margin-top: var(--spacing-l); + margin-bottom: var(--spacing-l); + width: 75%; + + .tag { + margin-top: 0; + } +} + .post__date { display: block; margin-top: var(--spacing-s); -- 2.45.3