LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show reply and fix clickability of menu options/emojis

Browse source
This commit is contained in:
saltrafael 2021-08-10 10:52:38 -03:00
parent 076df9c47f
commit 985f8e3724
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
8 changed files with 87 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/component/comment/view.jsx
View file

@ -59,7 +59,9 @@ type Props = {
stakedLevel: number,
supportAmount: number,
numDirectReplies: number,
isFiat: boolean
isFiat: boolean,
setCommentReply: (any) => void,
commentReply: any,
};
const LENGTH_TO_COLLAPSE = 300;
@ -93,6 +95,8 @@ function Comment(props: Props) {
supportAmount,
numDirectReplies,
isFiat,
setCommentReply,
commentReply,
} = props;
const {
@ -178,6 +182,7 @@ function Comment(props: Props) {
function handleSubmit() {
updateComment(commentId, editedMessage);
setCommentReply({ ...commentReply, comment_id: commentId, comment: editedMessage });
setEditing(false);
}
@ -253,7 +258,10 @@ function Comment(props: Props) {
</span>
)}
</div>
<div className="comment__menu">
<span className="comment__menu" onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}>
<Menu>
<MenuButton className="menu__button">
<Icon
@ -271,9 +279,10 @@ function Comment(props: Props) {
commentIsMine={commentIsMine}
handleEditComment={handleEditComment}
supportAmount={supportAmount}
setCommentReply={setCommentReply}
/>
</Menu>
</div>
</span>
</div>
<div>
{isEditing ? (
@ -286,6 +295,10 @@ function Comment(props: Props) {
charCount={charCount}
onChange={handleEditMessageChanged}
textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
/>
<div className="section__actions section__actions--no-margin">
<Button
@ -294,8 +307,15 @@ function Comment(props: Props) {
label={__('Done')}
requiresAuth={IS_WEB}
disabled={message === editedMessage}
onClick={(e) => {
e.stopPropagation();
}}
/>
<Button button="link" label={__('Cancel')} onClick={() => setEditing(false)} />
<Button button="link" label={__('Cancel')} onClick={(e) => {
setEditing(false);
e.stopPropagation();
e.preventDefault();
}} />
</div>
</Form>
) : (
@ -330,7 +350,11 @@ function Comment(props: Props) {
requiresAuth={IS_WEB}
label={commentingEnabled ? __('Reply') : __('Log in to reply')}
className="comment__action"
onClick={handleCommentReply}
onClick={(e) => {
handleCommentReply();
e.stopPropagation();
e.preventDefault();
}}
icon={ICONS.REPLY}
/>
)}

3
ui/component/commentCreate/view.jsx
View file

@ -50,6 +50,7 @@ type Props = {
sendTip: ({}, (any) => void, (any) => void) => void,
doToast: ({ message: string }) => void,
disabled: boolean,
setCommentReply: (any) => void,
};
export function CommentCreate(props: Props) {
@ -71,6 +72,7 @@ export function CommentCreate(props: Props) {
claimIsMine,
sendTip,
doToast,
setCommentReply,
} = props;
const buttonRef: ElementRef<any> = React.useRef();
const {
@ -244,6 +246,7 @@ export function CommentCreate(props: Props) {
createComment(commentValue, claimId, parentId, txid, payment_intent_id, environment)
.then((res) => {
setIsSubmitting(false);
setCommentReply(res);
if (res && res.signature) {
setCommentValue('');

4
ui/component/commentMenuList/view.jsx
View file

@ -30,6 +30,7 @@ type Props = {
moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
openModal: (id: string, {}) => void,
supportAmount?: any,
setCommentReply: (any) => void,
};
function CommentMenuList(props: Props) {
@ -56,6 +57,7 @@ function CommentMenuList(props: Props) {
moderationDelegatorsById,
openModal,
supportAmount,
setCommentReply,
} = props;
const contentChannelClaim = !claim
@ -83,7 +85,7 @@ function CommentMenuList(props: Props) {
if (playingUri && playingUri.source === 'comment') {
clearPlayingUri();
}
openModal(MODALS.CONFIRM_REMOVE_COMMENT, { commentId, commentIsMine, contentChannelPermanentUrl, supportAmount });
openModal(MODALS.CONFIRM_REMOVE_COMMENT, { commentId, commentIsMine, contentChannelPermanentUrl, supportAmount, setCommentReply });
}
function handleCommentBlock() {

4
ui/component/common/form-components/form-field.jsx
View file

@ -283,10 +283,12 @@ export class FormField extends React.PureComponent<Props> {
type="button"
className="button--emoji"
label={emoji}
onClick={() => {
onClick={(e) => {
inputProps.onChange({
target: { value: inputProps.value ? `${inputProps.value} ${emoji}` : emoji },
});
e.stopPropagation();
e.preventDefault();
}}
/>
))}

8
ui/component/notification/index.js
View file

@ -1,9 +1,13 @@
import { connect } from 'react-redux';
import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
import { doResolveUri } from 'lbry-redux';
import { doResolveUri, selectMyChannelClaims } from 'lbry-redux';
import Notification from './view';
export default connect(null, {
const select = (state) => ({
myChannels: selectMyChannelClaims(state),
});
export default connect(select, {
doReadNotifications,
doDeleteNotification,
doResolveUri,

46
ui/component/notification/view.jsx
View file

@ -19,6 +19,7 @@ import LbcMessage from 'component/common/lbc-message';
import UriIndicator from 'component/uriIndicator';
import CommentReactions from 'component/commentReactions';
import CommentCreate from 'component/commentCreate';
import CommentView from 'component/comment';
import { NavLink } from 'react-router-dom';
type Props = {
@ -28,13 +29,27 @@ type Props = {
doReadNotifications: ([number]) => void,
doDeleteNotification: (number) => void,
doResolveUri: (string) => void,
myChannels: ?Array<ChannelClaim>,
};
export default function Notification(props: Props) {
const { notification, menuButton = false, doReadNotifications, doDeleteNotification, doResolveUri } = props;
const { notification, menuButton = false, doReadNotifications, doDeleteNotification, doResolveUri, myChannels } = props;
const { push } = useHistory();
const { notification_rule, notification_parameters, is_read, id } = notification;
const [isReplying, setReplying] = React.useState(false);
const [commentReply, setCommentReply] = React.useState();
const isMyComment = (channelId: string): boolean => {
if (myChannels != null && channelId != null) {
for (let i = 0; i < myChannels.length; i++) {
if (myChannels[i].claim_id === channelId) {
return true;
}
}
}
return false;
};
const isCommentNotification =
notification_rule === RULE.COMMENT ||
notification_rule === RULE.COMMENT_REPLY ||
@ -246,12 +261,29 @@ export default function Notification(props: Props) {
isReply
uri={notificationTarget}
parentId={notification_parameters.dynamic.hash}
onDoneReplying={() => {
setReplying(false);
}}
onCancelReplying={() => {
setReplying(false);
}}
onDoneReplying={() => setReplying(false)}
onCancelReplying={() => setReplying(false)}
setCommentReply={setCommentReply}
/>
)}
{commentReply && (
<CommentView
key={commentReply.comment_id}
uri={notificationTarget}
authorUri={commentReply.channel_url}
author={commentReply.channel_name}
claimId={commentReply.claim_id}
commentId={commentReply.comment_id}
message={commentReply.comment}
timePosted={commentReply.timestamp * 1000}
commentIsMine={commentReply.channel_id && isMyComment(commentReply.channel_id)}
isPinned={commentReply.is_pinned}
supportAmount={commentReply.support_amount}
numDirectReplies={commentReply.replies}
isFiat={commentReply.is_fiat}
setCommentReply={setCommentReply}
commentReply={commentReply}
/>
)}
</>

4
ui/modal/modalRemoveComment/view.jsx
View file

@ -11,10 +11,11 @@ type Props = {
closeModal: () => void,
deleteComment: (string, ?string) => void,
supportAmount?: any,
setCommentReply: (any) => void,
};
function ModalRemoveComment(props: Props) {
const { commentId, commentIsMine, contentChannelPermanentUrl, closeModal, deleteComment, supportAmount } = props;
const { commentId, commentIsMine, contentChannelPermanentUrl, closeModal, deleteComment, supportAmount, setCommentReply } = props;
return (
<Modal isOpen contentLabel={__('Confirm Comment Deletion')} type="card" onAborted={closeModal}>
@ -36,6 +37,7 @@ function ModalRemoveComment(props: Props) {
label={__('Remove')}
onClick={() => {
deleteComment(commentId, commentIsMine ? undefined : contentChannelPermanentUrl);
setCommentReply(undefined);
closeModal();
}}
/>

1
ui/scss/component/_comments.scss
View file

@ -218,6 +218,7 @@ $thumbnailWidthSmall: 1rem;
.comment__message {
word-break: break-word;
max-width: 35rem;
color: var(--color-text);
ul li,
ol li {