From 6637c7b98be6e02af769f095ca2283ec0b22bf79 Mon Sep 17 00:00:00 2001 From: saltrafael Date: Mon, 23 Aug 2021 07:50:24 -0300 Subject: [PATCH 1/4] Fix CSS - separator lines --- ui/component/notification/view.jsx | 2 +- ui/scss/component/menu-button.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx index 3a0d70811..0da262dd5 100644 --- a/ui/component/notification/view.jsx +++ b/ui/component/notification/view.jsx @@ -160,7 +160,7 @@ export default function Notification(props: Props) { ) : notificationLink ? (props: { children: any }) => ( - + {props.children} diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss index 5f32d66ad..9ddb0145b 100644 --- a/ui/scss/component/menu-button.scss +++ b/ui/scss/component/menu-button.scss @@ -119,6 +119,7 @@ } .menu__link--notification { + width: 100%; display: flex; align-items: flex-start; From d7344f5047d47d96046855e102d55c4d30dd8f3b Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 27 Aug 2021 07:29:58 -0300 Subject: [PATCH 2/4] Add direct reacting from notifications --- CHANGELOG.md | 1 + ui/component/comment/view.jsx | 9 +++ ui/component/commentCreate/view.jsx | 59 ++++++++++-------- ui/component/commentMenuList/view.jsx | 10 ++- ui/component/commentReactions/view.jsx | 18 ++++-- ui/component/commentsReplies/view.jsx | 3 + ui/component/notification/view.jsx | 84 ++++++++++++++++++++------ ui/modal/modalRemoveComment/view.jsx | 18 +++++- ui/page/notifications/index.js | 4 ++ ui/page/notifications/view.jsx | 42 +++++++++++-- ui/scss/component/_comments.scss | 2 + ui/scss/component/_notification.scss | 39 ++++++++++-- 12 files changed, 226 insertions(+), 63 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f6e5ec86b..5b4e3c00f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Add confirmation on comment removal _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563)) - Show on content page if a file is part of a playlist already _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393)) - Add filtering to playlists ([#6905](https://github.com/lbryio/lbry-desktop/pull/6905)) +- Added direct replying to notifications _community pr!_ ([#6935](https://github.com/lbryio/lbry-desktop/pull/6935)) ### Changed - Use Canonical Url for copy link ([#6500](https://github.com/lbryio/lbry-desktop/pull/6500)) diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index bc8222db7..3233d3fb6 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -64,6 +64,9 @@ type Props = { isModerator: boolean, isGlobalMod: boolean, isFiat: boolean, + supportDisabled: boolean, + setQuickReply: (any) => void, + quickReply: any, }; const LENGTH_TO_COLLAPSE = 300; @@ -100,6 +103,9 @@ function Comment(props: Props) { isModerator, isGlobalMod, isFiat, + supportDisabled, + setQuickReply, + quickReply, } = props; const { @@ -185,6 +191,7 @@ function Comment(props: Props) { function handleSubmit() { updateComment(commentId, editedMessage); + if (setQuickReply) setQuickReply({ ...quickReply, comment_id: commentId, comment: editedMessage }); setEditing(false); } @@ -294,6 +301,7 @@ function Comment(props: Props) { commentIsMine={commentIsMine} handleEditComment={handleEditComment} supportAmount={supportAmount} + setQuickReply={setQuickReply} /> @@ -403,6 +411,7 @@ function Comment(props: Props) { onCancelReplying={() => { setReplying(false); }} + supportDisabled={supportDisabled} /> )} diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 26c9093e1..ec203e22c 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -47,8 +47,10 @@ type Props = { claimIsMine: boolean, sendTip: ({}, (any) => void, (any) => void) => void, doToast: ({ message: string }) => void, + supportDisabled: boolean, doFetchCreatorSettings: (channelId: string) => Promise, settingsByChannelId: { [channelId: string]: PerChannelSettings }, + setQuickReply: (any) => void, }; export function CommentCreate(props: Props) { @@ -71,6 +73,8 @@ export function CommentCreate(props: Props) { doToast, doFetchCreatorSettings, settingsByChannelId, + supportDisabled, + setQuickReply, } = props; const buttonRef: ElementRef = React.useRef(); const { @@ -80,7 +84,7 @@ export function CommentCreate(props: Props) { const [isSubmitting, setIsSubmitting] = React.useState(false); const [commentFailure, setCommentFailure] = React.useState(false); const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined }); - const { claim_id: claimId } = claim; + const claimId = claim && claim.claim_id; const [isSupportComment, setIsSupportComment] = React.useState(); const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState(); const [tipAmount, setTipAmount] = React.useState(1); @@ -322,6 +326,7 @@ export function CommentCreate(props: Props) { createComment(commentValue, claimId, parentId, txid, payment_intent_id, environment) .then((res) => { setIsSubmitting(false); + if (setQuickReply) setQuickReply(res); if (res && res.signature) { setCommentValue(''); @@ -522,32 +527,34 @@ export function CommentCreate(props: Props) { requiresAuth={IS_WEB} /> )} - {!claimIsMine && ( - )} diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx index 2d5746a2d..e51fe4ebe 100644 --- a/ui/component/notification/view.jsx +++ b/ui/component/notification/view.jsx @@ -191,7 +191,7 @@ export default function Notification(props: Props) { {isCommentNotification && commentText ? ( <>
{title}
-
+
{commentText}
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index 14d6d2718..47a27c1ca 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -18,13 +18,14 @@ $contentMaxWidth: 60rem; .comment__create, .comment__content { margin: var(--spacing-m); + margin-bottom: 0; } } .notification__icon { display: flex; align-items: flex-start; - margin-top: var(--spacing-xs); + margin: auto; .icon__wrapper { width: 1rem; @@ -42,6 +43,10 @@ $contentMaxWidth: 60rem; align-items: center; margin-left: var(--spacing-m); } + + @media (max-width: $breakpoint-medium) { + margin-top: var(--spacing-xxs); + } } .notification__wrapper { @@ -64,6 +69,16 @@ $contentMaxWidth: 60rem; @media (max-width: $breakpoint-small) { padding: var(--spacing-s); } + + .comment__creator-like { + height: 0.8rem; + width: 0.8rem; + margin-left: 3px; + z-index: 3; + position: absolute; + top: 0.4rem; + left: 0.4rem; + } } .notification__wrapper--unread { @@ -174,6 +189,15 @@ $contentMaxWidth: 60rem; margin: var(--spacing-m); margin-bottom: 0; + @media (min-width: $breakpoint-small) { + margin-left: 5rem; + } + + @media (max-width: $breakpoint-small) { + margin-left: 3rem; + } + + > *:not(:last-of-type) { margin-right: var(--spacing-m); } @@ -181,16 +205,6 @@ $contentMaxWidth: 60rem; .button__label { margin-left: var(--spacing-xs); } - - .comment__creator-like { - height: 0.8rem; - width: 0.8rem; - margin-left: 3px; - z-index: 3; - position: absolute; - top: 0.4rem; - left: 0.4rem; - } } .notification__bubble {