maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

scrollable details container

Browse source
This commit is contained in:
Sandeep Somavarapu 2021-07-15 01:51:59 +02:00
parent cef7746e50
commit a412af45c7
2 changed files with 42 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/vs/workbench/contrib/extensions/browser/extensionEditor.ts
View file

@ -752,10 +752,20 @@ export class ExtensionEditor extends EditorPane {
}
private renderAdditionalDetails(container: HTMLElement, extension: IExtension): void {
this.renderCategories(container, extension);
this.renderTags(container, extension);
this.renderResources(container, extension);
this.renderMoreInfo(container, extension);
const content = $('div', { class: 'additional-details-content', tabindex: '0' });
const scrollableContent = new DomScrollableElement(content, {});
const layout = () => scrollableContent.scanDomNode();
const removeLayoutParticipant = arrays.insert(this.layoutParticipants, { layout });
this.contentDisposables.add(toDisposable(removeLayoutParticipant));
this.contentDisposables.add(scrollableContent);
this.renderCategories(content, extension);
this.renderTags(content, extension);
this.renderResources(content, extension);
this.renderMoreInfo(content, extension);
append(container, scrollableContent.getDomNode());
scrollableContent.scanDomNode();
}
private renderCategories(container: HTMLElement, extension: IExtension): void {
@ -985,6 +995,7 @@ export class ExtensionEditor extends EditorPane {
}
}, this, this.contentDisposables);
this.contentDisposables.add(scrollableContent);
append(template.content, scrollableContent.getDomNode());
return content;
}
@ -1655,14 +1666,14 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
if (buttonHoverBackgroundColor) {
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container > .categories-container > .categories > .category:hover { background-color: ${buttonHoverBackgroundColor}; border-color: ${buttonHoverBackgroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container > .tags-container > .tags > .tag:hover { background-color: ${buttonHoverBackgroundColor}; border-color: ${buttonHoverBackgroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container .categories-container > .categories > .category:hover { background-color: ${buttonHoverBackgroundColor}; border-color: ${buttonHoverBackgroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container .tags-container > .tags > .tag:hover { background-color: ${buttonHoverBackgroundColor}; border-color: ${buttonHoverBackgroundColor}; }`);
}
const buttonForegroundColor = theme.getColor(buttonForeground);
if (buttonForegroundColor) {
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container > .categories-container > .categories > .category:hover { color: ${buttonForegroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container > .tags-container > .tags > .tag:hover { color: ${buttonForegroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container .categories-container > .categories > .category:hover { color: ${buttonForegroundColor}; }`);
collector.addRule(`.monaco-workbench .extension-editor .content > .details > .additional-details-container .tags-container > .tags > .tag:hover { color: ${buttonForegroundColor}; }`);
}
});

35
src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css
View file

@ -314,23 +314,34 @@
.extension-editor > .body > .content > .details > .additional-details-container {
width: 25%;
min-width: 170px;
margin: 20px 0 0 20px;
min-width: 280px;
height: 100%;
}
.extension-editor > .body > .content > .details > .additional-details-container > .monaco-scrollable-element {
height: 100%;
}
.extension-editor > .body > .content > .details > .additional-details-container > .monaco-scrollable-element > .additional-details-content {
height: 100%;
overflow-y: scroll;
padding: 20px;
box-sizing: border-box;
}
.extension-editor > .body > .content > .details > .additional-details-container .additional-details-title {
font-size: 120%;
}
.extension-editor > .body > .content > .details > .additional-details-container > .categories-container > .categories,
.extension-editor > .body > .content > .details > .additional-details-container > .tags-container > .tags,
.extension-editor > .body > .content > .details > .additional-details-container > .resources-container > .resources,
.extension-editor > .body > .content > .details > .additional-details-container > .more-info-container > .more-info {
.extension-editor > .body > .content > .details > .additional-details-container .categories-container > .categories,
.extension-editor > .body > .content > .details > .additional-details-container .tags-container > .tags,
.extension-editor > .body > .content > .details > .additional-details-container .resources-container > .resources,
.extension-editor > .body > .content > .details > .additional-details-container .more-info-container > .more-info {
margin: 15px 0px;
}
.extension-editor > .body > .content > .details > .additional-details-container > .categories-container > .categories > .category,
.extension-editor > .body > .content > .details > .additional-details-container > .tags-container > .tags > .tag {
.extension-editor > .body > .content > .details > .additional-details-container .categories-container > .categories > .category,
.extension-editor > .body > .content > .details > .additional-details-container .tags-container > .tags > .tag {
display: inline-block;
border: 1px solid rgba(136, 136, 136, 0.45);
padding: 2px 4px;
@ -340,21 +351,21 @@
cursor: pointer;
}
.extension-editor > .body > .content > .details > .additional-details-container > .resources-container > .resources > .resource {
.extension-editor > .body > .content > .details > .additional-details-container .resources-container > .resources > .resource {
display: block;
cursor: pointer;
}
.extension-editor > .body > .content > .details > .additional-details-container > .resources-container > .resources > .resource:hover {
.extension-editor > .body > .content > .details > .additional-details-container .resources-container > .resources > .resource:hover {
text-decoration: underline;
}
.extension-editor > .body > .content > .details > .additional-details-container > .more-info-container > .more-info > .more-info-entry {
.extension-editor > .body > .content > .details > .additional-details-container .more-info-container > .more-info > .more-info-entry {
font-size: 90%;
display: flex;
}
.extension-editor > .body > .content > .details > .additional-details-container > .more-info-container > .more-info > .more-info-entry span {
.extension-editor > .body > .content > .details > .additional-details-container .more-info-container > .more-info > .more-info-entry span {
flex: 0.5
}