Simplify PR chat card into just title (#290349)

* Simplify PR chat card into just title
Fixes #288848

* Fix indentation
This commit is contained in:
Alex Ross
2026-01-26 11:28:20 +01:00
committed by GitHub
parent 050848f110
commit bc063fec7a
2 changed files with 9 additions and 56 deletions

View File

@@ -12,10 +12,8 @@ import { ChatTreeItem } from '../../chat.js';
import { IChatContentPart } from './chatContentParts.js';
import { Codicon } from '../../../../../../base/common/codicons.js';
import { ThemeIcon } from '../../../../../../base/common/themables.js';
import { localize } from '../../../../../../nls.js';
import { addDisposableListener } from '../../../../../../base/browser/dom.js';
import { IOpenerService } from '../../../../../../platform/opener/common/opener.js';
import { renderAsPlaintext } from '../../../../../../base/browser/markdownRenderer.js';
export class ChatPullRequestContentPart extends Disposable implements IChatContentPart {
public readonly domNode: HTMLElement;
@@ -33,23 +31,14 @@ export class ChatPullRequestContentPart extends Disposable implements IChatConte
const titleContainer = dom.append(contentContainer, dom.$('.title-container'));
const icon = dom.append(titleContainer, dom.$('.icon'));
icon.classList.add(...ThemeIcon.asClassNameArray(Codicon.gitPullRequest));
const titleElement = dom.append(titleContainer, dom.$('.title'));
titleElement.textContent = `${this.pullRequestContent.title} - ${this.pullRequestContent.author}`;
const descriptionElement = dom.append(contentContainer, dom.$('.description'));
const descriptionWrapper = dom.append(descriptionElement, dom.$('.description-wrapper'));
const plainText = renderAsPlaintext({ value: this.pullRequestContent.description });
descriptionWrapper.textContent = plainText;
const seeMoreContainer = dom.append(descriptionElement, dom.$('.see-more'));
const seeMore: HTMLAnchorElement = dom.append(seeMoreContainer, dom.$('a'));
seeMore.textContent = localize('chatPullRequest.seeMore', 'Show pull request');
this._register(addDisposableListener(seeMore, 'click', (e) => {
const titleLink: HTMLAnchorElement = dom.append(titleContainer, dom.$('a.title'));
titleLink.textContent = `${this.pullRequestContent.title} - ${this.pullRequestContent.author}`;
titleLink.href = this.pullRequestContent.uri.toString();
this._register(addDisposableListener(titleLink, 'click', (e) => {
e.preventDefault();
e.stopPropagation();
this.openerService.open(this.pullRequestContent.uri);
}));
seeMore.href = this.pullRequestContent.uri.toString();
}
hasSameContent(other: IChatRendererContent, followingContent: IChatRendererContent[], element: ChatTreeItem): boolean {

View File

@@ -20,56 +20,20 @@
flex-direction: column;
}
.chat-pull-request-content-part .title-container .link {
color: var(--vscode-textLink-foreground);
flex-shrink: 0;
white-space: nowrap;
}
.chat-pull-request-content-part {
.title-container {
display: flex;
padding: 8px 12px;
border-bottom: 1px solid var(--vscode-chat-requestBorder);
}
p {
margin: 0px;
}
.title {
color: inherit;
text-decoration: none;
cursor: pointer;
.description .see-more {
display: none;
position: absolute;
right: 12px;
bottom: 8px;
a {
color: var(--vscode-textLink-foreground);
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
.description {
position: relative;
padding: 8px 12px;
background: var(--vscode-editor-background);
line-height: 1.5em;
.description-wrapper {
/* This mask fades out the end of text so the "see more" message can be displayed over it. */
mask-image:
linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 7em - 50px), rgba(0, 0, 0, 0) calc(100% - 4.5em - 50px)),
linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1.2em, rgba(0, 0, 0, 1) 0.15em, rgba(0, 0, 0, 1) 100%);
mask-repeat: no-repeat, no-repeat;
pointer-events: none;
/* Two lines tall, relative to font size (line-height is 1.5em) */
max-height: calc(2 * 1.5em);
}
.see-more {
display: block;
}
}
}