Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2025-12-26 13:19:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleaner element selection, add css shadow

Browse Source
This commit is contained in:
aamunger
2023-03-08 14:44:15 -08:00
parent 745aa79d73
commit 605bde227c
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
extensions/notebook-renderers/src/index.ts
View File

@@ -216,17 +216,15 @@ function getPreviousOutputWithMatchingMimeType(container: HTMLElement, mimeType:
// if there is a scrollable output, it will be scrolled to the given value if provided or the bottom of the element
function appendChildAndScroll(container: HTMLElement, child: HTMLElement, scrollTop?: number) {
container.appendChild(child);
child.childNodes.forEach((node) => {
if (node instanceof HTMLElement && node.classList.contains(scrollableClass)) {
node.scrollTop = scrollTop !== undefined ? scrollTop : node.scrollHeight;
}
});
const scrollableElement = child.querySelector(`.${scrollableClass}`);
if (scrollableElement) {
scrollableElement.scrollTop = scrollTop !== undefined ? scrollTop : scrollableElement.scrollHeight;
}
}
// Find the scrollTop of the existing scrollable output, return undefined if at the bottom or element doesn't exist
function findScrolledHeight(outputContainer: HTMLElement, outputId: string): number | undefined {
const output = outputContainer.querySelector(`[output-item-id="${outputId}"]`);
const scrollableElement = output?.querySelector('.scrollable');
const scrollableElement = outputContainer.querySelector(`[output-item-id="${outputId}"] .${scrollableClass}`);
if (scrollableElement && scrollableElement.scrollHeight - scrollableElement.scrollTop - scrollableElement.clientHeight > 2) {
// not scrolled to the bottom
return scrollableElement.scrollTop;
@@ -338,6 +336,9 @@ export const activate: ActivationFunction<void> = (ctx) => {
box-sizing: border-box;
border-width: 1px;
}
.output .scrollable.more-above {
box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset
}
.output-plaintext .code-bold,
.output-stream .code-bold,
.traceback .code-bold {

8
extensions/notebook-renderers/src/textHelper.ts
View File

@@ -54,6 +54,14 @@ function truncatedArrayOfString(id: string, buffer: string[], linesLimit: number
function scrollableArrayOfString(id: string, buffer: string[], container: HTMLElement, trustHtml: boolean) {
const scrollableDiv = document.createElement('div');
scrollableDiv.classList.add(scrollableClass);
scrollableDiv.onscroll = (e) => {
const target = e.target as HTMLElement;
if (target.scrollTop === 0) {
target.classList.remove('more-above');
} else {
target.classList.add('more-above');
}
};
if (buffer.length > 5000) {
container.appendChild(generateViewMoreElement(id, false));