From 645f8ef45259f39aa5688743a01a12b0b9e90058 Mon Sep 17 00:00:00 2001
From: infinite-persistence
<64950861+infinite-persistence@users.noreply.github.com>
Date: Thu, 13 May 2021 02:26:47 +0800
Subject: [PATCH] Posts: restore "Tip unlock | Claim details" component (#6051)
* Add ICON.INFO - "i" within a circle.
Basically, an inverted ICON.ALERT.
* 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/common/icon-custom.jsx | 7 +++
ui/component/postViewer/index.js | 8 ++-
ui/component/postViewer/view.jsx | 75 +++++++++++++++++++++++++++--
ui/constants/icons.js | 1 +
ui/scss/component/_post.scss | 26 ++++++++++
6 files changed, 112 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/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/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) {
-