feat(ui): enhance status panel actions and styling
This update significantly refactors the visual layout and functionality of the working tree status panel. It introduces dedicated action groups for discarding changes, staging, and unstaging files, improving user interaction and clarity. - Added contextual action buttons (discard all/selected) to both staged and unstaged sections. - Updated CSS structure to accommodate new status action containers. - Improved handling of selected file counts within the panel headers.
This commit is contained in:
+40
@@ -6028,3 +6028,43 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
.ai-review-footer { align-items: stretch; flex-direction: column; }
|
||||
.ai-review-footer > div { justify-content: flex-end; }
|
||||
}
|
||||
|
||||
/* Contextual status actions: global discard in the panel header, selection
|
||||
actions beside their matching Stage/Unstage command. */
|
||||
.status-head-actions,
|
||||
.status-lane-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.status-head-actions { flex-wrap: wrap; }
|
||||
.status-discard-all {
|
||||
margin-left: 3px;
|
||||
border-color: color-mix(in srgb, var(--code-delete-strong) 30%, var(--color-border));
|
||||
color: var(--code-delete-strong);
|
||||
background: color-mix(in srgb, var(--code-delete-strong) 8%, transparent);
|
||||
}
|
||||
.status-discard-all:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--code-delete-strong) 52%, var(--color-border));
|
||||
color: var(--code-delete-strong);
|
||||
background: color-mix(in srgb, var(--code-delete-strong) 14%, transparent);
|
||||
}
|
||||
.status-lane-title { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
|
||||
.status-lane-actions { flex-wrap: wrap; }
|
||||
.status-lane-actions .status-selection-count {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
padding: 0 5px;
|
||||
color: var(--color-ink-dim);
|
||||
background: transparent;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.status-lane-head { align-items: flex-start; flex-direction: column; }
|
||||
.status-lane-actions { width: 100%; justify-content: flex-start; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user