diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js
index cda850b38..80793559b 100644
--- a/ui/component/commentCreate/index.js
+++ b/ui/component/commentCreate/index.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
-
import { doCommentCreate, makeSelectClaimForUri } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
import { CommentCreate } from './view';
+import { selectUserVerifiedEmail } from 'lbryinc';
const select = (state, props) => ({
+ commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
claim: makeSelectClaimForUri(props.uri)(state),
});
const perform = dispatch => ({
createComment: (comment, claimId, channel) => dispatch(doCommentCreate(comment, claimId, channel)),
+ openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
});
export default connect(
diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 67175ac93..5f7f6e89a 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -5,15 +5,19 @@ import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import ChannelSection from 'component/selectChannel';
import usePersistedState from 'effects/use-persisted-state';
+import * as MODALS from 'constants/modal_types';
+import I18nMessage from '../i18nMessage/view';
type Props = {
+ commentingEnabled: boolean,
uri: string,
claim: StreamClaim,
+ openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
createComment: (string, string, string) => void,
};
export function CommentCreate(props: Props) {
- const { createComment, claim } = props;
+ const { commentingEnabled, createComment, claim, openModal } = props;
const { claim_id: claimId } = claim;
const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
@@ -28,10 +32,16 @@ export function CommentCreate(props: Props) {
setChannel(channel);
}
- function handleCommentAck(event) {
+ function handleCommentAck() {
setCommentAck(true);
}
+ function onTextareaFocus() {
+ if (!commentAck) {
+ openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck });
+ }
+ }
+
function handleSubmit() {
if (channel !== CHANNEL_NEW && commentValue.length) createComment(commentValue, claimId, channel);
setCommentValue('');
@@ -39,58 +49,35 @@ export function CommentCreate(props: Props) {
useEffect(() => setCharCount(commentValue.length), [commentValue]);
+ if (!commentingEnabled) {
+ return (
+ }}>
+ Please %sign_in_link% to comment.
+
+ );
+ }
+
return (
-
- {commentAck !== true && (
-
-
{__('A few things to know before participating in the comment alpha:')}
-
-
- {__('During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.')}
-
-
- {__(
- 'During the alpha, comments are not decentralized or censorship resistant (but we repeat ourselves).'
- )}
-
-
- {__(
- 'For the initial release, deleting or editing comments is not possible. Please be mindful of this when posting.'
- )}
-
-
- {__(
- 'When the alpha ends, we will attempt to transition comments, but do not promise to do so. Any transition will likely involve publishing previous comments under a single archive handle.'
- )}
-
-
-
-
- )}
- {commentAck === true && (
-
- )}
-
+
);
}
diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js
index c5e1ef8ec..a8988a1a0 100644
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@@ -1,5 +1,6 @@
export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
export const CONFIRM_EXTERNAL_RESOURCE = 'confirm_external_resource';
+export const COMMENT_ACKNOWEDGEMENT = 'comment_acknowlegement';
export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
export const FILE_TIMEOUT = 'file_timeout';
export const DOWNLOADING = 'downloading';
diff --git a/ui/modal/modalCommentAcknowledgement/index.js b/ui/modal/modalCommentAcknowledgement/index.js
new file mode 100644
index 000000000..07caa9917
--- /dev/null
+++ b/ui/modal/modalCommentAcknowledgement/index.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalCommentAcknowledgement from './view';
+
+const perform = dispatch => ({
+ closeModal: () => dispatch(doHideModal()),
+});
+
+export default connect(
+ null,
+ perform
+)(ModalCommentAcknowledgement);
diff --git a/ui/modal/modalCommentAcknowledgement/view.jsx b/ui/modal/modalCommentAcknowledgement/view.jsx
new file mode 100644
index 000000000..8d9f88595
--- /dev/null
+++ b/ui/modal/modalCommentAcknowledgement/view.jsx
@@ -0,0 +1,43 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+
+type Props = {
+ onCommentAcknowledge: () => void,
+ closeModal: () => void,
+};
+
+class ModalCommentAcknowledgement extends React.PureComponent {
+ render() {
+ const { closeModal, onCommentAcknowledge } = this.props;
+
+ function onAbortedOrConfirmed() {
+ onCommentAcknowledge();
+ closeModal();
+ }
+
+ return (
+
+ {__('A few things to know before making your comment:')}
+
+
+ {__(
+ 'Commenting is in alpha. During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.'
+ )}
+
+
+ {__('Deleting or editing comments is not currently possible. Please be mindful of this when posting.')}
+
+ {__('When the alpha ends, we will attempt to transition comments, but do not promise to do so.')}
+
+
+ );
+ }
+}
+
+export default ModalCommentAcknowledgement;
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index 10c87acce..92062219c 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -26,6 +26,7 @@ import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
import ModalWalletUnlock from 'modal/modalWalletUnlock';
import ModalRewardCode from 'modal/modalRewardCode';
import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
+import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
type Props = {
modal: { id: string, modalProps: {} },
@@ -96,6 +97,8 @@ function ModalRouter(props: Props) {
return ;
case MODALS.REWARD_GENERATED_CODE:
return ;
+ case MODALS.COMMENT_ACKNOWEDGEMENT:
+ return ;
default:
return null;
}
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 7800914b9..60619ccb9 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -223,13 +223,14 @@ class FilePage extends React.Component {
-
-
- {__('Comments')} ALPHA
-
-
-
+ {__('Comments')}
+
+
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 0ccc00bfa..c0f094ba7 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -31,7 +31,6 @@
@import 'component/menu-button';
@import 'component/modal';
@import 'component/navigation';
-@import 'component/notice';
@import 'component/pagination';
@import 'component/placeholder';
@import 'component/search';
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index b3ec920f1..07625533e 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -1,14 +1,16 @@
.comments {
@extend .ul--no-style;
- margin-top: var(--spacing-large);
}
.comment {
display: flex;
flex-direction: column;
- padding: 0;
font-size: var(--font-multiplier-small);
- padding: var(--spacing-small) 0;
+ padding: var(--spacing-small) 0 var(--spacing-small);
+
+ &:first-of-type {
+ padding-top: 0;
+ }
&:not(:last-of-type) {
border-bottom: 1px solid var(--lbry-gray-1);
@@ -23,6 +25,7 @@
text-overflow: ellipsis;
display: flex;
justify-content: space-between;
+ margin-bottom: var(--spacing-small);
time {
opacity: 0.3;
@@ -34,7 +37,6 @@
}
.comment__author {
- margin-bottom: 1rem;
text-overflow: ellipsis; // This is where the magic happens
flex-basis: 400px;
flex-shrink: 1;
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 64bcc2156..c09a96f7b 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -95,6 +95,10 @@ fieldset-section {
margin-top: var(--spacing-small);
}
}
+
+ + fieldset-section {
+ margin-top: var(--spacing-medium);
+ }
}
checkbox-element {
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 33c04a5e8..6eb577e1d 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -1,4 +1,8 @@
.markdown-preview {
+ > *:last-child {
+ margin-bottom: 0;
+ }
+
// Headers
h1,
h2,
diff --git a/ui/scss/component/_notice.scss b/ui/scss/component/_notice.scss
deleted file mode 100644
index 429141295..000000000
--- a/ui/scss/component/_notice.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.notice {
- border: 1px solid;
- border-radius: 5px;
- padding: var(--spacing-medium) var(--spacing-large);
- text-shadow: 0 1px 0 rgba($lbry-white, 0.5);
-
- &:not(.notice--error) {
- background-color: $lbry-green-1;
- border-color: $lbry-green-2;
- color: $lbry-green-3;
- }
-}
-
-.notice--error {
- background-color: $lbry-red-1;
- border-color: $lbry-red-2;
- color: $lbry-red-3;
-}