From 43fd645c7ca581ba66b08d110e96f4cf7683d0ed Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 18 May 2021 23:06:36 +0800 Subject: [PATCH] refactor: minor enhancements on file comments --- src/components/FileExplorer.tsx | 14 +++++++++++--- src/components/Icon.tsx | 6 ++++++ src/components/Node.tsx | 5 ----- src/global.d.ts | 2 +- src/platforms/GitHub/Request.d.ts | 7 +++++++ src/styles/index.scss | 32 ++++++++++++------------------- 6 files changed, 37 insertions(+), 29 deletions(-) diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index 81002d4..d39dd59 100644 --- a/src/components/FileExplorer.tsx +++ b/src/components/FileExplorer.tsx @@ -46,7 +46,7 @@ const RawFileExplorer: React.FC = function RawFileExplor searched, } = props const { - value: { accessToken, compressSingletonFolder, searchMode }, + value: { accessToken, compressSingletonFolder, searchMode, commentToggle }, } = useConfigs() const onSearch = React.useCallback( @@ -104,18 +104,26 @@ const RawFileExplorer: React.FC = function RawFileExplor ) : undefined + const renderFileCommentAmounts = (node: TreeNode): React.ReactNode => + node.comments !== undefined && + node.comments > 0 && ( + + {node.comments} + + ) const renders: ((node: TreeNode) => React.ReactNode)[] = [] + if (commentToggle) renders.push(renderFileCommentAmounts) if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton) if (searched) renders.push(renderGoToButton) return renders.length ? node => renders.map((render, i) => {render(node)}) : undefined - }, [goTo, onSearch, searched, searchMode]) + }, [goTo, onSearch, searched, searchMode, commentToggle]) const renderLabelText = React.useCallback( - node => searchModes[searchMode].renderNodeLabelText(node, searchKey), + (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey), [searchKey, searchMode], ) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index c5d9f07..ce98f05 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -2,6 +2,7 @@ import { ChevronDownIcon as ChevronDown, ChevronRightIcon as ChevronRight, ClockIcon as Clock, + CommentIcon as Comment, FileCodeIcon as FileCode, FileIcon as File, FileMediaIcon as FileMedia, @@ -28,6 +29,11 @@ function getSVGIconComponent( name: string } { switch (type) { + case 'comment': + return { + IconComponent: Comment, + name: 'Comment', + } case 'search': return { IconComponent: Search, diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 7fd3ea1..5fa7942 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -38,10 +38,6 @@ export function Node({ style, onClick, }: Props) { - const { - value: { commentToggle }, - } = useConfigs() - return ( {renderLabelText(node)} - {(commentToggle && !!node.comments) && 💬 {node.comments}} {renderActions &&
{renderActions(node)}
} diff --git a/src/global.d.ts b/src/global.d.ts index e149322..199ec17 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -14,7 +14,7 @@ type TreeNode = { url?: string sha?: string accessDenied?: boolean - comments: number + comments?: number } type IO = { diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts index 257cf46..5b9d8c1 100644 --- a/src/platforms/GitHub/Request.d.ts +++ b/src/platforms/GitHub/Request.d.ts @@ -37,6 +37,13 @@ declare namespace GitHubAPI { type PullComment = { path: string + pull_request_review_id: number + id: number + node_id: string + diff_hunk: string + body: string + html_url: string + author_association: string } type PullTreeData = PullTreeItem[] diff --git a/src/styles/index.scss b/src/styles/index.scss index bc813e2..ee47712 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -500,17 +500,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- .node-item { background: var(--gitako-bg-primary); + &:hover { + text-decoration: initial; // revert underline from .gitako-side-bar a:hover + .node-item-label { + text-decoration: underline; // apply underline like .gitako-side-bar a:hover + } + } &.focused, &:hover { background: var(--gitako-bg-tertiary); - - .node-item-comment { - background: var(--gitako-bg-tertiary); - background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - background: linear-gradient(to right, transparent 0% ,var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161b22', endColorstr='#161b22', GradientType=1); - } } &:active { background: var(--gitako-bg-secondary); @@ -583,18 +581,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } .node-item-comment { - position: absolute; - top: 0; - right: 0; - height: 36px; - line-height: 37px; - padding: 0 10px; - color: var(--gitako-auto-gray-5); - background: var(--gitako-bg-primary); - background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - background: linear-gradient(to right, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d1117', endColorstr='#0d1117', GradientType=1); + padding: 0 4px; + color: var(--gitako-text-tertiary); + + .octicon-wrapper { + margin: 0; // make it closer to the comment amount label + } } .go-to-button,