mirror of
https://github.com/microsoft/vscode.git
synced 2026-02-15 07:28:05 +00:00
Simplify PR chat card into just title (#290349)
* Simplify PR chat card into just title Fixes #288848 * Fix indentation
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user