feat(CreateIssueDialog): replace plain textarea with CommentEditor for description
Replace the simple <textarea> with the CommentEditor component (imported at top) and bind description to it. Pass locale-aware props (language, ariaLabel, previewLabel, placeholder) and keep disabled/rows bindings so the dialog behavior is unchanged. Also adjust styles to remove textarea-specific rules (resize/line-height and focus handling) and update the selector sets to reflect the component change.
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import { CirclePlus, X } from "@lucide/svelte";
|
import { CirclePlus, X } from "@lucide/svelte";
|
||||||
import SelectMenu from "./SelectMenu.svelte";
|
import SelectMenu from "./SelectMenu.svelte";
|
||||||
|
import CommentEditor from "./CommentEditor.svelte";
|
||||||
import { createIntegrationIssue, listIntegrationRepositories, listAzureIssueProjects, listAzureIssueTypes } from "../git";
|
import { createIntegrationIssue, listIntegrationRepositories, listAzureIssueProjects, listAzureIssueTypes } from "../git";
|
||||||
import { integrationCredentialKey } from "../integrations";
|
import { integrationCredentialKey } from "../integrations";
|
||||||
import type { GitIntegrationSource, IntegrationIssue, StoredCredential } from "../types";
|
import type { GitIntegrationSource, IntegrationIssue, StoredCredential } from "../types";
|
||||||
@@ -98,7 +99,13 @@
|
|||||||
{:else if repository && !typesLoading && !types.length}<p>{de ? "Keine Work-Item-Typen verfügbar." : "No work item types available."}</p>{/if}
|
{:else if repository && !typesLoading && !types.length}<p>{de ? "Keine Work-Item-Typen verfügbar." : "No work item types available."}</p>{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<label>{de ? "Titel" : "Title"}<input bind:this={titleInput} bind:value={title} disabled={busy} required placeholder={de ? "Was soll erledigt werden?" : "What needs to be done?"}/></label>
|
<label>{de ? "Titel" : "Title"}<input bind:this={titleInput} bind:value={title} disabled={busy} required placeholder={de ? "Was soll erledigt werden?" : "What needs to be done?"}/></label>
|
||||||
<label>{de ? "Beschreibung" : "Description"}<textarea bind:value={description} disabled={busy} rows="7" placeholder={de ? "Details zum Issue (optional)" : "Issue details (optional)"}></textarea></label>
|
<div class="field">
|
||||||
|
<span>{de ? "Beschreibung" : "Description"}</span>
|
||||||
|
<CommentEditor bind:value={description} language={de ? "de" : "en"} disabled={busy} rows={7}
|
||||||
|
ariaLabel={de ? "Beschreibung" : "Description"}
|
||||||
|
previewLabel={de ? "Beschreibungsvorschau" : "Description preview"}
|
||||||
|
placeholder={de ? "Details zum Issue (optional)" : "Issue details (optional)"} />
|
||||||
|
</div>
|
||||||
{#if error}<p class="error" role="alert">{de ? "Issue konnte nicht bestätigt werden." : "Issue creation could not be confirmed."} {error}</p>{/if}
|
{#if error}<p class="error" role="alert">{de ? "Issue konnte nicht bestätigt werden." : "Issue creation could not be confirmed."} {error}</p>{/if}
|
||||||
</div>
|
</div>
|
||||||
<footer><button type="button" disabled={busy} onclick={onClose}>{de ? "Abbrechen" : "Cancel"}</button><button class="primary" type="submit" disabled={!canSubmit}>{busy ? (de ? "Wird erstellt …" : "Creating …") : (de ? "Issue erstellen" : "Create issue")}</button></footer>
|
<footer><button type="button" disabled={busy} onclick={onClose}>{de ? "Abbrechen" : "Cancel"}</button><button class="primary" type="submit" disabled={!canSubmit}>{busy ? (de ? "Wird erstellt …" : "Creating …") : (de ? "Issue erstellen" : "Create issue")}</button></footer>
|
||||||
@@ -112,10 +119,10 @@
|
|||||||
header>div {flex:1} header>:global(svg) {color:var(--color-accent)}
|
header>div {flex:1} header>:global(svg) {color:var(--color-accent)}
|
||||||
h2 {font-size:17px;margin:0} p {margin:4px 0;color:var(--color-ink-dim);font-size:12px}
|
h2 {font-size:17px;margin:0} p {margin:4px 0;color:var(--color-ink-dim);font-size:12px}
|
||||||
.body {display:grid;gap:18px;padding:22px 24px}.field,label {display:grid;gap:8px;min-width:0;font-size:12px}
|
.body {display:grid;gap:18px;padding:22px 24px}.field,label {display:grid;gap:8px;min-width:0;font-size:12px}
|
||||||
button,input,textarea {font:inherit;color:var(--color-ink);border:1px solid var(--color-border);background:var(--color-surface);border-radius:0}
|
button,input {font:inherit;color:var(--color-ink);border:1px solid var(--color-border);background:var(--color-surface);border-radius:0}
|
||||||
input,textarea {box-sizing:border-box;width:100%;padding:10px;font-size:13px}textarea {resize:vertical;line-height:1.5}
|
input {box-sizing:border-box;width:100%;padding:10px;font-size:13px}
|
||||||
button {padding:8px 12px;cursor:pointer;font-size:12px}button:disabled {opacity:.5;cursor:default}
|
button {padding:8px 12px;cursor:pointer;font-size:12px}button:disabled {opacity:.5;cursor:default}
|
||||||
input:focus-visible,textarea:focus-visible,button:focus-visible {outline:2px solid var(--color-accent);outline-offset:2px}
|
input:focus-visible,button:focus-visible {outline:2px solid var(--color-accent);outline-offset:2px}
|
||||||
.dialog-close {display:grid;place-items:center;padding:6px;border:0;background:transparent}
|
.dialog-close {display:grid;place-items:center;padding:6px;border:0;background:transparent}
|
||||||
.error {color:var(--color-danger);overflow-wrap:anywhere;line-height:1.5}
|
.error {color:var(--color-danger);overflow-wrap:anywhere;line-height:1.5}
|
||||||
footer {display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--app-dialog-chrome)}
|
footer {display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--app-dialog-chrome)}
|
||||||
|
|||||||
Reference in New Issue
Block a user