Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-24 18:49:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement SplitView for changes panel and enhance CI status widget layout

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
mrleemurray
2026-03-26 14:41:44 +00:00
parent cfbbd6b3dd
commit 872217c276
4 changed files with 278 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css
View File

@@ -3,30 +3,25 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/* CI Status Widget - beneath the changes tree */
/* CI Status Widget - beneath the files list */
.ci-status-widget {
display: flex;
flex-direction: column;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 8px;
border: 1px solid var(--vscode-input-border, transparent);
border-radius: 4px;
background-color: var(--vscode-editor-background);
overflow: hidden;
font-size: 12px;
}
/* Header - always visible, clickable */
/* Header */
.ci-status-widget-header {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
padding: 2px 0;
min-height: 22px;
}
.ci-status-widget-header:hover {
background-color: var(--vscode-list-hoverBackground);
font-weight: 500;
}
/* Title - single line, overflow ellipsis */
@@ -34,27 +29,60 @@
flex: 1;
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
color: var(--vscode-foreground);
padding-left: 8px;
}
.ci-status-widget-title .monaco-icon-label {
width: 100%;
height: 18px;
}
.ci-status-widget-title .monaco-icon-label-container,
.ci-status-widget-title .monaco-icon-name-container {
display: block;
overflow: hidden;
}
.ci-status-widget-title .label-name {
.ci-status-widget-title-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Status count badges in the header */
.ci-status-widget-counts {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
padding-right: 8px;
}
.ci-status-widget:hover .ci-status-widget-counts {
padding-right: 0;
}
.ci-status-widget-count-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
line-height: 1;
}
.ci-status-widget-count-badge .codicon {
font-size: 14px;
}
.ci-status-widget-count-badge.ci-status-success .codicon {
color: var(--vscode-testing-iconPassed, #73c991);
}
.ci-status-widget-count-badge.ci-status-failure .codicon {
color: var(--vscode-testing-iconFailed, #f14c4c);
}
.ci-status-widget-count-badge.ci-status-running .codicon {
color: var(--vscode-testing-iconQueued, var(--vscode-editorWarning-foreground));
}
.ci-status-widget-count-badge.ci-status-pending .codicon {
color: var(--vscode-descriptionForeground);
}
.ci-status-widget-header-actions {
flex: 0 0 auto;
display: none;
@@ -62,6 +90,10 @@
margin-left: auto;
}
.ci-status-widget:hover .ci-status-widget-header-actions.has-actions {
display: flex;
}
.ci-status-widget-header-actions .monaco-action-bar {
display: flex;
align-items: center;
@@ -72,18 +104,11 @@
height: 16px;
}
/* Twistie icon on the right */
.ci-status-widget-twistie {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--vscode-foreground);
opacity: 0.7;
}
/* Body - collapsible list */
/* Body - check list */
.ci-status-widget-body {
border-top: 1px solid var(--vscode-input-border, transparent);
flex: 1;
min-height: 0;
overflow: hidden;
}
.ci-status-widget-list {
@@ -96,23 +121,21 @@
}
/* Individual check row */
.ci-status-widget-list .monaco-list-row {
border-radius: 4px !important;
}
.ci-status-widget-check {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
padding: 4px 8px;
height: 100%;
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.ci-status-widget-list .monaco-list-row:hover .ci-status-widget-check,
.ci-status-widget-list .monaco-list-row.focused .ci-status-widget-check,
.ci-status-widget-list .monaco-list-row.selected .ci-status-widget-check {
background-color: var(--vscode-list-hoverBackground);
}
.ci-status-widget-check-label {
display: flex;
flex: 1;
@@ -143,19 +166,19 @@
color: var(--vscode-foreground);
}
.ci-status-widget-title.ci-status-success .monaco-icon-label::before,
.ci-status-widget-title.ci-status-success .codicon,
.ci-status-widget-check.ci-status-success .monaco-icon-label::before {
color: var(--vscode-testing-iconPassed, #73c991);
}
.ci-status-widget-title.ci-status-failure .monaco-icon-label::before,
.ci-status-widget-title.ci-status-failure .codicon,
.ci-status-widget-check.ci-status-failure .monaco-icon-label::before {
color: var(--vscode-testing-iconFailed, #f14c4c);
}
.ci-status-widget-title.ci-status-running .monaco-icon-label::before,
.ci-status-widget-title.ci-status-running .codicon,
.ci-status-widget-check.ci-status-running .monaco-icon-label::before,
.ci-status-widget-title.ci-status-pending .monaco-icon-label::before {
.ci-status-widget-title.ci-status-pending .codicon {
color: var(--vscode-testing-iconQueued, var(--vscode-editorWarning-foreground));
}