mirror of
https://github.com/microsoft/vscode.git
synced 2026-07-08 15:55:15 +01:00
Adjust CI status widget layout and styles (#319894)
* fix: update CI status widget icons to compact versions and adjust CSS for improved layout Co-authored-by: Copilot <copilot@github.com> * fix: adjust gap in CI status widget count badge and add opacity to text Co-authored-by: Copilot <copilot@github.com> --------- Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com> Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
@@ -327,25 +327,25 @@ export class CIStatusWidget extends Disposable {
|
||||
|
||||
if (counts.running > 0) {
|
||||
const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-running'));
|
||||
badge.appendChild(renderIcon(Codicon.circleFilled));
|
||||
badge.appendChild(renderIcon(Codicon.circleFilledCompact));
|
||||
dom.append(badge, $('span')).textContent = `${counts.running}`;
|
||||
}
|
||||
|
||||
if (counts.failed > 0) {
|
||||
const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-failure'));
|
||||
badge.appendChild(renderIcon(Codicon.error));
|
||||
badge.appendChild(renderIcon(Codicon.errorCompact));
|
||||
dom.append(badge, $('span')).textContent = `${counts.failed}`;
|
||||
}
|
||||
|
||||
if (counts.pending > 0) {
|
||||
const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-pending'));
|
||||
badge.appendChild(renderIcon(Codicon.circleFilled));
|
||||
badge.appendChild(renderIcon(Codicon.circleFilledCompact));
|
||||
dom.append(badge, $('span')).textContent = `${counts.pending}`;
|
||||
}
|
||||
|
||||
if (counts.successful > 0) {
|
||||
const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-success'));
|
||||
badge.appendChild(renderIcon(Codicon.passFilled));
|
||||
badge.appendChild(renderIcon(Codicon.passFilledCompact));
|
||||
dom.append(badge, $('span')).textContent = `${counts.successful}`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,11 +29,11 @@
|
||||
|
||||
.ci-status-widget-header:hover {
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
padding-right: 22px;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.ci-status-widget-header:focus {
|
||||
padding-right: 22px;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.ci-status-widget-header:focus-visible {
|
||||
@@ -44,7 +44,7 @@
|
||||
/* Chevron — right-aligned, visible on hover only */
|
||||
.ci-status-widget-header .group-chevron {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
@@ -52,7 +52,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -96,13 +96,17 @@
|
||||
.ci-status-widget-count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ci-status-widget-count-badge .codicon {
|
||||
font-size: 14px;
|
||||
.monaco-workbench .ci-status-widget-count-badge .codicon[class*='codicon-'] {
|
||||
font-size: var(--vscode-codiconFontSize-compact, 12px);
|
||||
}
|
||||
|
||||
.ci-status-widget-count-badge span:not(.codicon) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ci-status-widget-count-badge.ci-status-success .codicon {
|
||||
|
||||
Reference in New Issue
Block a user