feat(compare): add German localization and revamp compare UI
Pass the application language into compare dialogs and add German translations so titles, buttons and helper text render appropriately. Refactor dialog markup to introduce a compact header with a GitCompare icon, show changed-file counts, and surface contextual help and warnings. Adjust and extend CSS for spacing, layout and responsive behavior. - Pass app language into compare components and derive isGerman flag - Replace icons and restructure headers; add counts, help and warnings - Update styles for sizing, spacing, responsive rules and new classes
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { ArrowRight, GitCompare, LoaderCircle, X } from "@lucide/svelte";
|
||||
import { ArrowRight, GitCompare, Info, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { GitBranch, GitCommit } from "../types";
|
||||
import SelectMenu from "./SelectMenu.svelte";
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
canCompare: boolean;
|
||||
isBusy: boolean;
|
||||
operation: string;
|
||||
language?: "en" | "de";
|
||||
onCompareFromChange: (val: string) => void;
|
||||
onCompareToChange: (val: string) => void;
|
||||
onCompare: () => void;
|
||||
@@ -25,12 +26,15 @@
|
||||
canCompare = false,
|
||||
isBusy = false,
|
||||
operation = "",
|
||||
language = "en",
|
||||
onCompareFromChange = () => {},
|
||||
onCompareToChange = () => {},
|
||||
onCompare = () => {},
|
||||
onClose = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let isGerman = $derived(language === "de");
|
||||
|
||||
function commitOptionLabel(item: GitCommit): string {
|
||||
return `${item.short_hash} - ${item.summary}`;
|
||||
}
|
||||
@@ -58,50 +62,66 @@
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
>
|
||||
<div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label="Select branches or commits to compare" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Compare</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Compare branches or commits</h2>
|
||||
<div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label={isGerman ? "Branches oder Commits vergleichen" : "Compare branches or commits"} tabindex="-1">
|
||||
<header class="compare-dialog-head">
|
||||
<div class="compare-dialog-title">
|
||||
<span class="compare-dialog-mark"><GitCompare size={18} aria-hidden="true" /></span>
|
||||
<div>
|
||||
<h2>{isGerman ? "Branches oder Commits vergleichen" : "Compare branches or commits"}</h2>
|
||||
<p>{isGerman ? "Zwei Repository-Stände direkt gegenüberstellen" : "Review two repository states side by side"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<button class="dialog-close" type="button" onclick={onClose} title={isGerman ? "Schließen" : "Close"} aria-label={isGerman ? "Vergleich schließen" : "Close comparison"}>
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if targetCount < 2}
|
||||
<div class="blank-state">At least two branches or commits are needed to compare.</div>
|
||||
{:else}
|
||||
<form class="compare-form" onsubmit={handleSubmit}>
|
||||
<label class="compare-field">
|
||||
<span>Base</span>
|
||||
<SelectMenu class="compare-target-select" value={compareFrom} options={compareOptions} placeholder="Select a branch or commit" showSelectedGroup disabled={isBusy} onChange={onCompareFromChange} />
|
||||
</label>
|
||||
<form class="compare-select-shell" onsubmit={handleSubmit}>
|
||||
<div class="compare-select-body">
|
||||
{#if targetCount < 2}
|
||||
<div class="blank-state">{isGerman ? "Für einen Vergleich werden mindestens zwei Branches oder Commits benötigt." : "At least two branches or commits are needed to compare."}</div>
|
||||
{:else}
|
||||
<section class="compare-target-panel">
|
||||
<div class="compare-target-heading">
|
||||
<h3>{isGerman ? "Vergleichsbereich" : "Comparison range"}</h3>
|
||||
<p>{isGerman ? "Wähle Ausgangspunkt und Ziel des Vergleichs." : "Choose the starting point and target for the comparison."}</p>
|
||||
</div>
|
||||
<div class="compare-form">
|
||||
<label class="compare-field">
|
||||
<span>{isGerman ? "Ausgangsbasis" : "Base"}</span>
|
||||
<SelectMenu class="compare-target-select" value={compareFrom} options={compareOptions} placeholder={isGerman ? "Branch oder Commit wählen" : "Select a branch or commit"} showSelectedGroup disabled={isBusy} onChange={onCompareFromChange} />
|
||||
</label>
|
||||
|
||||
<ArrowRight class="compare-arrow" size={18} aria-hidden="true" />
|
||||
<span class="compare-arrow-shell"><ArrowRight size={18} aria-hidden="true" /></span>
|
||||
|
||||
<label class="compare-field">
|
||||
<span>Compare with</span>
|
||||
<SelectMenu class="compare-target-select" value={compareTo} options={compareOptions} placeholder="Select a branch or commit" showSelectedGroup disabled={isBusy} onChange={onCompareToChange} />
|
||||
</label>
|
||||
<label class="compare-field">
|
||||
<span>{isGerman ? "Vergleichen mit" : "Compare with"}</span>
|
||||
<SelectMenu class="compare-target-select" value={compareTo} options={compareOptions} placeholder={isGerman ? "Branch oder Commit wählen" : "Select a branch or commit"} showSelectedGroup disabled={isBusy} onChange={onCompareToChange} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button class="btn-primary" type="submit" disabled={!canCompare}>
|
||||
{#if operation === "Comparing revisions"}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{#if compareFrom && compareTo && compareFrom === compareTo}
|
||||
<div class="compare-target-help compare-target-warning"><Info size={15} aria-hidden="true" /><span>{isGerman ? "Wähle zwei unterschiedliche Branches oder Commits." : "Select two different branches or commits to compare."}</span></div>
|
||||
{:else}
|
||||
<GitCompare size={16} aria-hidden="true" />
|
||||
<div class="compare-target-help"><Info size={15} aria-hidden="true" /><span>{isGerman ? "Verglichen werden die vollständigen Repository-Stände. Nicht committete Änderungen im Arbeitsverzeichnis sind nicht enthalten." : "The complete repository states are compared. Uncommitted working-tree changes are not included."}</span></div>
|
||||
{/if}
|
||||
Compare
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if compareFrom && compareTo && compareFrom === compareTo}
|
||||
<div class="blank-state">Select two different branches or commits to compare.</div>
|
||||
{:else}
|
||||
<div class="compare-target-help">
|
||||
The two branch tips are compared across the entire repository. Uncommitted working-tree changes are not included.
|
||||
{/if}
|
||||
</div>
|
||||
<footer class="compare-select-footer">
|
||||
<span>{isGerman ? `${targetCount} Ziele verfügbar` : `${targetCount} targets available`}</span>
|
||||
<div>
|
||||
<button class="btn-secondary" type="button" onclick={onClose}>{isGerman ? "Abbrechen" : "Cancel"}</button>
|
||||
<button class="btn-primary" type="submit" disabled={!canCompare || targetCount < 2}>
|
||||
{#if operation === "Comparing revisions"}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<GitCompare size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
{isGerman ? "Vergleich öffnen" : "Open comparison"}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user