diff --git a/src/vs/base/browser/ui/list/listView.ts b/src/vs/base/browser/ui/list/listView.ts index 978dbb0197e..6e29b67c503 100644 --- a/src/vs/base/browser/ui/list/listView.ts +++ b/src/vs/base/browser/ui/list/listView.ts @@ -370,6 +370,7 @@ export class ListView implements IListView { this.scrollableElementWidthDelayer.cancel(); this.scrollableElement.setScrollDimensions({ width: this.renderWidth, scrollWidth: this.renderWidth }); this.rowsContainer.style.width = ''; + this.domNode.style.removeProperty('--list-scroll-right-offset'); } } @@ -894,6 +895,11 @@ export class ListView implements IListView { this.scrollableElement.setScrollDimensions({ width: typeof width === 'number' ? width : getContentWidth(this.domNode) }); + + const scrollPos = this.scrollableElement.getScrollPosition(); + const scrollDims = this.scrollableElement.getScrollDimensions(); + const rightOffset = Math.max(0, scrollDims.scrollWidth - scrollPos.scrollLeft - this.renderWidth); + this.domNode.style.setProperty('--list-scroll-right-offset', `${Math.max(rightOffset - 12, 0)}px`); } } @@ -935,6 +941,8 @@ export class ListView implements IListView { if (this.horizontalScrolling && scrollWidth !== undefined) { this.rowsContainer.style.width = `${Math.max(scrollWidth, this.renderWidth)}px`; + const rightOffset = Math.max(0, scrollWidth - (renderLeft ?? 0) - this.renderWidth); + this.domNode.style.setProperty('--list-scroll-right-offset', `${Math.max(rightOffset - 12, 0)}px`); } this.lastRenderTop = renderTop; diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css index 02909b0bd77..e40976750cf 100644 --- a/src/vs/workbench/browser/parts/views/media/views.css +++ b/src/vs/workbench/browser/parts/views/media/views.css @@ -63,6 +63,7 @@ .monaco-workbench .tree-explorer-viewlet-tree-view .message .button-container:not(:last-child) { padding-bottom: 8px; } + .monaco-workbench .tree-explorer-viewlet-tree-view .message.hide { display: none; } @@ -179,6 +180,7 @@ font-size: 13px; line-height: 15px; } + .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .monaco-inputbox { line-height: normal; flex: 1; @@ -218,6 +220,7 @@ .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon.disabled { opacity: 0.6; } + /* makes spinning icons square */ .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon.codicon.codicon-modifier-spin { padding-left: 6px; @@ -251,6 +254,35 @@ display: block; } +/* When horizontal scrolling is enabled, shift actions back to the viewport's right edge */ +.customview-tree .monaco-list.horizontal-scrolling .monaco-list-row:has(.actions .action-item):hover .custom-view-tree-node-item .actions, + +.customview-tree .monaco-list.horizontal-scrolling .monaco-list-row:has(.actions .action-item).selected .custom-view-tree-node-item .actions, + +.customview-tree .monaco-list.horizontal-scrolling .monaco-list-row:has(.actions .action-item).focused .custom-view-tree-node-item .actions { + position: relative; + right: var(--list-scroll-right-offset, 0px); + background-color: var(--vscode-list-hoverBackground); + padding-left: 4px; +} + +.customview-tree .monaco-list.horizontal-scrolling .monaco-list-row:has(.monaco-icon-label[class*="monaco-decoration-"]) .actions { + right: max(calc(var(--list-scroll-right-offset, 0px) - 17px), + 0px) !important; +} + +.customview-tree .monaco-list.horizontal-scrolling:focus .monaco-list-row.selected .custom-view-tree-node-item .actions { + background-color: var(--vscode-list-activeSelectionBackground); +} + +.customview-tree .monaco-list.horizontal-scrolling:not(:focus) .monaco-list-row.selected .custom-view-tree-node-item .actions { + background-color: var(--vscode-list-inactiveSelectionBackground); +} + +.customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.focused:not(.selected) .custom-view-tree-node-item .actions { + background-color: var(--vscode-list-focusBackground); +} + /* filter view pane */ .monaco-workbench .auxiliarybar.pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item.viewpane-filter-container {