feat(bisect-dialog): revamp commit range inputs and styling
Restructure the bisect dialog to group the search range and make the known-good and known-bad fields more distinct and informative. The UI and CSS were overhauled to improve spacing, sizing, color cues and responsiveness for clearer interaction and readability. - Introduce a labeled search-range block with dedicated good/bad fields - Add icons, compact tags and adjusted placeholders for clarity - Replace and simplify styles to improve layout and mobile behavior
This commit is contained in:
@@ -39,9 +39,23 @@
|
||||
<div class="bisect-intro-icon"><Bug size={24} /></div>
|
||||
<div><h3>{de ? "Welcher Commit hat den Fehler eingeführt?" : "Which commit introduced the bug?"}</h3><p>{de ? "Gitty checkt schrittweise frühere Commits aus. Markiere jede getestete Version als Good, Bad oder Skip." : "Gitty checks out earlier commits step by step. Mark each tested version as Good, Bad, or Skip."}</p></div>
|
||||
</section>
|
||||
<div class="bisect-fields">
|
||||
<label><span>{de ? "Funktionierender Commit (Good)" : "Known good commit"}</span><input bind:value={good} placeholder={de ? "z. B. v1.4.0 oder Commit-Hash" : "e.g. v1.4.0 or commit hash"} disabled={isBusy} spellcheck="false" autocomplete="off" /><small>{de ? "Eine ältere Revision, bei der der Fehler noch nicht auftrat." : "An older revision where the bug did not occur."}</small></label>
|
||||
<label><span>{de ? "Fehlerhafter Commit (Bad)" : "Known bad commit"}</span><input bind:value={bad} placeholder="HEAD" disabled={isBusy} spellcheck="false" autocomplete="off" /><small>{de ? "Meistens HEAD, also der aktuell ausgecheckte Commit." : "Usually HEAD, the currently checked-out commit."}</small></label>
|
||||
<div class="bisect-range">
|
||||
<div class="range-heading">
|
||||
<span>{de ? "Suchbereich" : "Search range"}</span>
|
||||
<small>{de ? "Von funktionierend bis fehlerhaft" : "From working to broken"}</small>
|
||||
</div>
|
||||
<div class="bisect-fields">
|
||||
<label class="commit-field good-field">
|
||||
<span class="field-title"><Check size={14} />{de ? "Funktionierender Commit" : "Known good commit"}<em>Good</em></span>
|
||||
<input bind:value={good} placeholder={de ? "z. B. v1.4.0 oder Commit-Hash" : "e.g. v1.4.0 or commit hash"} disabled={isBusy} spellcheck="false" autocomplete="off" />
|
||||
<small>{de ? "Hier trat der Fehler noch nicht auf." : "The bug did not occur here."}</small>
|
||||
</label>
|
||||
<label class="commit-field bad-field">
|
||||
<span class="field-title"><Bug size={14} />{de ? "Fehlerhafter Commit" : "Known bad commit"}<em>Bad</em></span>
|
||||
<input bind:value={bad} placeholder="HEAD" disabled={isBusy} spellcheck="false" autocomplete="off" />
|
||||
<small>{de ? "Meistens HEAD, der aktuelle Commit." : "Usually HEAD, the current commit."}</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bisect-notice"><AlertTriangle size={15} /><span>{de ? "Der Arbeitsbaum muss sauber sein. Während des Bisects wechselt Gitty vorübergehend zwischen Commits." : "The working tree must be clean. Gitty temporarily switches between commits during the bisect."}</span></div>
|
||||
{:else if bisectState.finished && bisectState.culprit}
|
||||
@@ -81,9 +95,48 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bisect-dialog{width:min(650px,calc(100vw - 28px));overflow:hidden}.bisect-body{display:grid;gap:16px;padding:18px}.bisect-loading{display:flex;min-height:220px;align-items:center;justify-content:center;gap:8px;color:var(--color-ink-muted)}
|
||||
.bisect-intro,.bisect-current,.bisect-result{display:flex;align-items:flex-start;gap:13px}.bisect-intro-icon,.result-icon{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));border-radius:9px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}.bisect-intro h3,.bisect-current h3,.bisect-result h3{margin:0;font-size:14px}.bisect-intro p,.result-copy{margin:5px 0 0;color:var(--color-ink-muted);line-height:1.5}
|
||||
.bisect-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bisect-fields label{display:grid;gap:6px}.bisect-fields label>span{font-size:11px;font-weight:700}.bisect-fields input{height:34px;font-family:var(--font-mono);font-size:12px}.bisect-fields small{color:var(--color-ink-faint);font-size:10px;line-height:1.4}.bisect-notice{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid color-mix(in srgb,#e2ad4e 32%,var(--color-border));border-radius:7px;color:var(--color-ink-muted);background:color-mix(in srgb,#e2ad4e 7%,var(--color-surface))}.bisect-notice :global(svg){flex:0 0 auto;color:#e2ad4e}.bisect-notice.error{border-color:color-mix(in srgb,#e45c65 40%,var(--color-border));color:#ef979d;background:color-mix(in srgb,#c92f3a 8%,var(--color-surface))}.bisect-notice.error :global(svg){color:#ef6972}
|
||||
.bisect-progress{display:flex;align-items:center;justify-content:space-between;color:var(--color-ink-muted);font-size:11px}.bisect-progress strong{color:var(--color-primary)}.bisect-current{padding:14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.bisect-current>:global(svg){flex:0 0 auto;color:var(--color-primary)}.commit-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;margin-top:7px;color:var(--color-ink-faint);font-size:10px}.commit-meta code{padding:2px 5px;border-radius:4px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.bisect-question{display:grid;gap:4px}.bisect-question span{color:var(--color-ink-muted);font-size:11px}.verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.verdict{min-height:58px;justify-content:flex-start;padding:8px 11px;text-align:left}.verdict>span{display:grid;gap:2px}.verdict small{color:var(--color-ink-faint);font-size:9.5px}.verdict.good{color:#69c986}.verdict.bad{color:#ef737b}.verdict.skip{color:#ddb45c}.bisect-result{padding:16px;border:1px solid color-mix(in srgb,#ef737b 36%,var(--color-border));border-radius:8px;background:color-mix(in srgb,#c92f3a 7%,var(--color-surface))}.bisect-result>div:last-child>span{color:#ef838b;font-size:10px;font-weight:800;text-transform:uppercase}.result-copy{margin:0}.bisect-footer{justify-content:flex-end}.bisect-footer .reset{margin-right:auto}
|
||||
@media(max-width:620px){.bisect-fields,.verdict-grid{grid-template-columns:1fr}.bisect-body{padding:14px}.bisect-progress{align-items:flex-start;flex-direction:column;gap:4px}}
|
||||
.bisect-dialog{grid-template-rows:auto minmax(0,auto) auto;width:min(640px,calc(100vw - 28px));height:auto;max-height:calc(100vh - 40px);overflow:hidden}
|
||||
.bisect-body{display:grid;align-content:start;gap:14px;padding:16px 18px;overflow:auto}
|
||||
.bisect-loading{display:flex;min-height:150px;align-items:center;justify-content:center;gap:8px;color:var(--color-ink-muted)}
|
||||
.bisect-intro,.bisect-current,.bisect-result{display:flex;align-items:flex-start;gap:12px}
|
||||
.bisect-intro-icon,.result-icon{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid color-mix(in srgb,var(--color-primary) 32%,var(--color-border));border-radius:8px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 9%,var(--color-surface))}
|
||||
.bisect-intro h3,.bisect-current h3,.bisect-result h3{margin:0;font-size:13px}
|
||||
.bisect-intro p,.result-copy{max-width:520px;margin:4px 0 0;color:var(--color-ink-muted);font-size:12px;line-height:1.45}
|
||||
.bisect-range{display:grid;gap:9px;padding:12px;border:1px solid var(--color-border-subtle);border-radius:9px;background:color-mix(in srgb,var(--color-surface) 72%,transparent)}
|
||||
.range-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
|
||||
.range-heading>span{color:var(--color-ink);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
|
||||
.range-heading>small{color:var(--color-ink-faint);font-size:10px}
|
||||
.bisect-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||||
.commit-field{display:grid;gap:6px;padding:10px;border:1px solid var(--color-border-subtle);border-radius:7px;background:var(--color-surface-raised)}
|
||||
.field-title{display:flex;align-items:center;gap:6px;color:var(--color-ink);font-size:11px;font-weight:700}
|
||||
.field-title em{margin-left:auto;padding:1px 5px;border-radius:4px;font-size:9px;font-style:normal;font-weight:800;text-transform:uppercase}
|
||||
.good-field .field-title :global(svg),.good-field .field-title em{color:#69c986}
|
||||
.good-field .field-title em{background:color-mix(in srgb,#69c986 10%,transparent)}
|
||||
.bad-field .field-title :global(svg),.bad-field .field-title em{color:#ef737b}
|
||||
.bad-field .field-title em{background:color-mix(in srgb,#ef737b 10%,transparent)}
|
||||
.bisect-fields input{height:32px;font-family:var(--font-mono);font-size:11.5px}
|
||||
.bisect-fields small{color:var(--color-ink-faint);font-size:9.5px;line-height:1.35}
|
||||
.bisect-notice{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid color-mix(in srgb,#e2ad4e 28%,var(--color-border));border-radius:7px;color:var(--color-ink-muted);background:color-mix(in srgb,#e2ad4e 6%,var(--color-surface));font-size:11.5px;line-height:1.4}
|
||||
.bisect-notice :global(svg){flex:0 0 auto;color:#e2ad4e}
|
||||
.bisect-notice.error{border-color:color-mix(in srgb,#e45c65 40%,var(--color-border));color:#ef979d;background:color-mix(in srgb,#c92f3a 8%,var(--color-surface))}
|
||||
.bisect-notice.error :global(svg){color:#ef6972}
|
||||
.bisect-progress{display:flex;align-items:center;justify-content:space-between;color:var(--color-ink-muted);font-size:11px}
|
||||
.bisect-progress strong{color:var(--color-primary)}
|
||||
.bisect-current{padding:14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}
|
||||
.bisect-current>:global(svg){flex:0 0 auto;color:var(--color-primary)}
|
||||
.commit-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;margin-top:7px;color:var(--color-ink-faint);font-size:10px}
|
||||
.commit-meta code{padding:2px 5px;border-radius:4px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
|
||||
.bisect-question{display:grid;gap:4px}
|
||||
.bisect-question span{color:var(--color-ink-muted);font-size:11px}
|
||||
.verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
|
||||
.verdict{min-height:58px;justify-content:flex-start;padding:8px 11px;text-align:left}
|
||||
.verdict>span{display:grid;gap:2px}
|
||||
.verdict small{color:var(--color-ink-faint);font-size:9.5px}
|
||||
.verdict.good{color:#69c986}.verdict.bad{color:#ef737b}.verdict.skip{color:#ddb45c}
|
||||
.bisect-result{padding:16px;border:1px solid color-mix(in srgb,#ef737b 36%,var(--color-border));border-radius:8px;background:color-mix(in srgb,#c92f3a 7%,var(--color-surface))}
|
||||
.bisect-result>div:last-child>span{color:#ef838b;font-size:10px;font-weight:800;text-transform:uppercase}
|
||||
.result-copy{margin:0}
|
||||
.bisect-footer{justify-content:flex-end;padding-block:9px}
|
||||
.bisect-footer .reset{margin-right:auto}
|
||||
@media(max-width:620px){.bisect-fields,.verdict-grid{grid-template-columns:1fr}.bisect-body{padding:14px}.range-heading{align-items:flex-start;flex-direction:column;gap:2px}.bisect-progress{align-items:flex-start;flex-direction:column;gap:4px}}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user