From 50283e0ceabc37c27817d001b342bc6710dfd8d0 Mon Sep 17 00:00:00 2001 From: flowforfrank Date: Fri, 23 Apr 2021 08:30:54 +0200 Subject: [PATCH 1/2] Add support for showing comments associated with files --- src/components/Node.tsx | 5 +++++ src/components/settings/SidebarSettings.tsx | 8 +++++++ src/global.d.ts | 1 + src/platforms/GitHub/API.ts | 10 +++++++++ src/platforms/GitHub/Request.d.ts | 5 +++++ src/platforms/GitHub/index.ts | 4 +++- src/styles/index.scss | 23 +++++++++++++++++++++ src/utils/configHelper.ts | 4 ++++ 8 files changed, 59 insertions(+), 1 deletion(-) diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 5fa7942..7fd3ea1 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -38,6 +38,10 @@ 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/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx index 8f805b0..3ac1ed8 100644 --- a/src/components/settings/SidebarSettings.tsx +++ b/src/components/settings/SidebarSettings.tsx @@ -102,6 +102,14 @@ export function SidebarSettings(props: React.PropsWithChildren) { }, }} /> + ) } diff --git a/src/global.d.ts b/src/global.d.ts index a7771b6..d18d63a 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -13,6 +13,7 @@ type TreeNode = { url?: string sha?: string accessDenied?: boolean + comments: number } type IO = { diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts index 083912e..0491ef9 100644 --- a/src/platforms/GitHub/API.ts +++ b/src/platforms/GitHub/API.ts @@ -106,6 +106,16 @@ export async function getPullTreeData( return await request(url, { accessToken }) } +export async function getPullComments( + userName: string, + repoName: string, + pullId: string, + accessToken?: string, +): Promise { + const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments` + return await request(url, { accessToken }) +} + export async function getPullPageDocument( userName: string, repoName: string, diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts index a010a1c..257cf46 100644 --- a/src/platforms/GitHub/Request.d.ts +++ b/src/platforms/GitHub/Request.d.ts @@ -35,7 +35,12 @@ declare namespace GitHubAPI { changed_files: number } + type PullComment = { + path: string + } + type PullTreeData = PullTreeItem[] + type PullComments = PullComment[] type MetaData = { name: string diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 49cf7c0..e75f1ab 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -146,9 +146,10 @@ export const GitHub: Platform = { GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT, ) let page = 1 - const [pullData, treeData] = await Promise.all([ + const [pullData, treeData, commentData] = await Promise.all([ API.getPullData(userName, repoName, pullId, accessToken), API.getPullTreeData(userName, repoName, pullId, page, accessToken), + API.getPullComments(userName, repoName, pullId, accessToken), ]) const count = pullData.changed_files @@ -176,6 +177,7 @@ export const GitHub: Platform = { window.location.search }#${creator(item.filename) || ''}`, sha: item.sha, + comments: commentData?.filter(comment => item.filename === comment.path).length, })) const root = processTree(nodes) diff --git a/src/styles/index.scss b/src/styles/index.scss index 85a3e31..bc813e2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -503,6 +503,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- &.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); @@ -574,6 +582,21 @@ $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); + } + .go-to-button, .find-in-folder-button { @include icon-button(); diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts index 68ddd08..ca6ae44 100644 --- a/src/utils/configHelper.ts +++ b/src/utils/configHelper.ts @@ -14,6 +14,7 @@ export type Config = { toggleButtonContent: 'logo' | 'octoface' recursiveToggleFolder: 'shift' | 'alt' searchMode: SearchMode + commentToggle: boolean } enum configKeys { @@ -29,6 +30,7 @@ enum configKeys { toggleButtonContent = 'toggleButtonContent', recursiveToggleFolder = 'recursiveToggleFolder', searchMode = 'searchMode', + commentToggle = 'commentToggle', } const defaultConfigs: Config = { @@ -44,6 +46,7 @@ const defaultConfigs: Config = { toggleButtonContent: 'logo', recursiveToggleFolder: 'shift', searchMode: 'fuzzy', + commentToggle: true, } const configKeyArray = Object.values(configKeys) @@ -85,6 +88,7 @@ async function migrateConfig() { 'copySnippetButton', 'intelligentToggle', 'icons', + 'commentToggle', ]) if (config && (!('configVersion' in config) || config.configVersion < version)) { await storageHelper.set({ platform_GitHub: config, configVersion: version }) From 43fd645c7ca581ba66b08d110e96f4cf7683d0ed Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 18 May 2021 23:06:36 +0800 Subject: [PATCH 2/2] 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,