From f54c23055c2149d34e8d0ac03d5ce9a62aa107d1 Mon Sep 17 00:00:00 2001 From: Calvin Lee Date: Fri, 24 Feb 2023 10:02:24 -0700 Subject: [PATCH] feat: [code-101]: added dotted lines to conversation page (#354) --- .../ThreadSection/ThreadSection.module.scss | 62 +++++- .../ThreadSection.module.scss.d.ts | 3 + .../ThreadSection/ThreadSection.tsx | 16 +- .../Conversation/Conversation.module.scss | 7 +- .../Conversation.module.scss.d.ts | 1 + .../PullRequest/Conversation/Conversation.tsx | 201 ++++++++++-------- .../PullRequestActionsBox.module.scss | 2 +- 7 files changed, 198 insertions(+), 94 deletions(-) diff --git a/web/src/components/ThreadSection/ThreadSection.module.scss b/web/src/components/ThreadSection/ThreadSection.module.scss index 87d21a9c8..f0ca3772e 100644 --- a/web/src/components/ThreadSection/ThreadSection.module.scss +++ b/web/src/components/ThreadSection/ThreadSection.module.scss @@ -1,5 +1,6 @@ .thread { - margin-bottom: var(--spacing-medium) !important; + margin-bottom: var(--spacing-medium); + --layout-spacing: var(--spacing-2) !important; .content { padding-left: 25px; @@ -21,3 +22,62 @@ } } } + +.titleContent { + padding-left: 25px; + position: relative; + + > ::before { + position: absolute; + top: 34px; + left: 15px; + content: ''; + width: 1px; + height: 28px; + border: 1px dashed var(--grey-200); + opacity: 0.7; + z-index: 2; + } +} +.inCommentBox { + padding-left: 25px; + position: relative; + + > ::after { + position: absolute; + bottom: -12px; + left: 15px; + content: ''; + width: 1px; + height: 22px; + border: 1px dashed var(--grey-200); + opacity: 0.7; + z-index: 2; + } +} + +.threadLessSpace { + margin-bottom: var(--spacing-small) !important; + --layout-spacing: var(--spacing-2) !important; + + .content { + padding-left: 25px; + position: relative; + --layout-spacing: var(--spacing-2) !important; + + > ::before { + position: absolute; + top: -8px; + left: 7px; + content: ''; + width: 1px; + height: calc(100% + 18px); + border: 1px dashed var(--grey-200); + opacity: 0.7; + } + + &.hideGutter > ::before { + display: none; + } + } +} diff --git a/web/src/components/ThreadSection/ThreadSection.module.scss.d.ts b/web/src/components/ThreadSection/ThreadSection.module.scss.d.ts index 104fb5574..8e1427336 100644 --- a/web/src/components/ThreadSection/ThreadSection.module.scss.d.ts +++ b/web/src/components/ThreadSection/ThreadSection.module.scss.d.ts @@ -4,5 +4,8 @@ declare const styles: { readonly thread: string readonly content: string readonly hideGutter: string + readonly titleContent: string + readonly inCommentBox: string + readonly threadLessSpace: string } export default styles diff --git a/web/src/components/ThreadSection/ThreadSection.tsx b/web/src/components/ThreadSection/ThreadSection.tsx index fdf338fb4..994ad5068 100644 --- a/web/src/components/ThreadSection/ThreadSection.tsx +++ b/web/src/components/ThreadSection/ThreadSection.tsx @@ -8,6 +8,9 @@ interface ThreadSectionProps { className?: string contentClassName?: string hideGutter?: boolean + onlyTitle?: boolean + inCommentBox?: boolean + lastItem?: boolean } export const ThreadSection: React.FC = ({ @@ -15,11 +18,18 @@ export const ThreadSection: React.FC = ({ children, className, contentClassName, - hideGutter + hideGutter, + onlyTitle, + inCommentBox = false, + lastItem }) => { return ( - - + + {title} {children} diff --git a/web/src/pages/PullRequest/Conversation/Conversation.module.scss b/web/src/pages/PullRequest/Conversation/Conversation.module.scss index 8eb75226f..4ff140e13 100644 --- a/web/src/pages/PullRequest/Conversation/Conversation.module.scss +++ b/web/src/pages/PullRequest/Conversation/Conversation.module.scss @@ -52,6 +52,7 @@ .sortContainer { border-bottom: 1px solid var(--grey-200); + margin-bottom: var(--spacing-small) !important; } .sortDropdown { @@ -62,7 +63,8 @@ } .mergedBox { - padding: var(--spacing-xlarge) 0 !important; + padding-top: var(--spacing-small) !important; + padding-bottom: var(--spacing-small) !important; } .mergeContainer { @@ -136,6 +138,9 @@ display: none !important; } } +.hideDottedLine { + z-index: 3; +} .newCommentCreated { box-shadow: 0px 0px 5px rgb(37 41 192); diff --git a/web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts b/web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts index c4d5d95bb..e3cff5283 100644 --- a/web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts +++ b/web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts @@ -18,6 +18,7 @@ declare const styles: { readonly title: string readonly fname: string readonly snapshotContent: string + readonly hideDottedLine: string readonly newCommentCreated: string readonly clear: string readonly refreshIcon: string diff --git a/web/src/pages/PullRequest/Conversation/Conversation.tsx b/web/src/pages/PullRequest/Conversation/Conversation.tsx index 192f7f6e5..c2a648508 100644 --- a/web/src/pages/PullRequest/Conversation/Conversation.tsx +++ b/web/src/pages/PullRequest/Conversation/Conversation.tsx @@ -40,6 +40,7 @@ import { DescriptionBox } from './DescriptionBox' import { PullRequestActionsBox } from './PullRequestActionsBox/PullRequestActionsBox' import PullRequestSideBar from './PullRequestSideBar/PullRequestSideBar' import css from './Conversation.module.scss' +import { ThreadSection } from 'components/ThreadSection/ThreadSection' export interface ConversationProps extends Pick { onCommentUpdate: () => void @@ -280,104 +281,129 @@ export const Conversation: React.FC = ({ if (isSystemComment(commentItems)) { return ( - + + }> ) } return ( - { - let result = true - let updatedItem: CommentItem | undefined = undefined - const id = (commentItem as CommentItem)?.payload?.id + { + let result = true + let updatedItem: CommentItem | undefined = undefined + const id = (commentItem as CommentItem)?.payload?.id - switch (action) { - case CommentAction.DELETE: - result = false - await confirmAct({ - message: getString('deleteCommentConfirm'), - action: async () => { - await deleteComment({}, { pathParams: { id } }) - .then(() => { - result = true + switch (action) { + case CommentAction.DELETE: + result = false + await confirmAct({ + message: getString('deleteCommentConfirm'), + action: async () => { + await deleteComment({}, { pathParams: { id } }) + .then(() => { + result = true + }) + .catch(exception => { + result = false + showError( + getErrorMessage(exception), + 0, + getString('pr.failedToDeleteComment') + ) + }) + } + }) + break + + case CommentAction.REPLY: + await saveComment({ text: value, parent_id: Number(threadId) }) + .then(newComment => { + updatedItem = activityToCommentItem(newComment) }) .catch(exception => { result = false - showError(getErrorMessage(exception), 0, getString('pr.failedToDeleteComment')) + showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment')) }) - } - }) - break + break - case CommentAction.REPLY: - await saveComment({ text: value, parent_id: Number(threadId) }) - .then(newComment => { - updatedItem = activityToCommentItem(newComment) - }) - .catch(exception => { - result = false - showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment')) - }) - break + case CommentAction.UPDATE: + await updateComment({ text: value }, { pathParams: { id } }) + .then(newComment => { + updatedItem = activityToCommentItem(newComment) + }) + .catch(exception => { + result = false + showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment')) + }) + break + } - case CommentAction.UPDATE: - await updateComment({ text: value }, { pathParams: { id } }) - .then(newComment => { - updatedItem = activityToCommentItem(newComment) - }) - .catch(exception => { - result = false - showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment')) - }) - break - } + if (result) { + onCommentUpdate() + } - if (result) { - onCommentUpdate() - } - - return [result, updatedItem] - }} - outlets={{ - [CommentBoxOutletPosition.TOP_OF_FIRST_COMMENT]: isCodeComment(commentItems) && ( - - ), - [CommentBoxOutletPosition.LEFT_OF_OPTIONS_MENU]: ( - { + // state= newState + // }} + /> + ) + }} + /> + }> ) })} @@ -542,7 +568,6 @@ const SystemBox: React.FC = ({ pullRequestMetadata, commentItems margin={{ left: 'small' }} padding={{ right: 'small' }} {...generateReviewDecisionIcon((payload?.payload as Unknown)?.decision)} - /> {/* */} diff --git a/web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss b/web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss index b557d486a..d7b29fd85 100644 --- a/web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss +++ b/web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss @@ -5,7 +5,7 @@ margin: -24px -24px 0 !important; position: sticky; top: 0; - z-index: 2; + z-index: 4; &.merged { border-color: transparent !important;