feat(ui): copyable input partial + dynamic copy-target

- New core partial templates/partials/app-input-copy.phtml renders a
  standard label + input with a compact copy button overlaid on the
  right edge of the input. Used for privacy/imprint URLs on the tenant
  form; reusable for any field where a one-click copy is helpful.
- Extend the shared copy-field component (web/js/components/app-copy-field.js)
  with data-copy-target support — the button now reads the target input's
  .value at click-time, so users can edit a field and still copy the
  current value. Static data-copy-value keeps working unchanged.
- New component CSS web/css/components/app-input-copy.css positions the
  button absolute/inset + margin-block:auto (robust vertical centering
  regardless of input height) and uses a descendant selector (0,2,0)
  so the button wins over the global [data-tooltip] position:relative.
- Also register app-input-copy.css + app-tenant-logo.css in core.css
  @import list — they were only in the shared asset group before, which
  default-template admin pages don't load, so tenant-logo styles were
  effectively missing on admin tenant edit (topbar size etc.).
- Document the Copy-to-Clipboard + Copyable Input standards in
  docs/reference-frontend-javascript.md so future consumers don't
  re-invent the markup/selectors.
- File-upload preview: pending-file block restructured to a compact
  list-item row (small square thumb + filename/size stack + clear X)
  and removed the transparency checker pattern on the current-image
  preview in favour of a flat --app-preview-bg surface.
- Tenant edit page title + breadcrumb now show the tenant description
  ("Acme GmbH") instead of the generic "Mandant bearbeiten" when one
  is present.
- i18n: add "Copy to clipboard" / "In Zwischenablage kopieren" across
  both locales.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-24 21:26:11 +02:00
parent e814b5fd11
commit fa86009e3f
12 changed files with 262 additions and 41 deletions

View File

@@ -306,6 +306,85 @@ Für standardisierte Detailseiten gilt zusätzlich:
- Aktionssemantik über `data-detail-action-kind` (z. B. `save`, `save-close`, `delete`, `danger`).
- Optionaler Lock-Override über `data-detail-submit-lock="none"` (Default: `form`).
### Copy-to-Clipboard Standard
Für kopierbare Inhalte (Werte, Feld-Inhalte, Badges) gilt eine einzige
Component: `web/js/components/app-copy-field.js` — ein Button mit
`data-copy-button` bekommt automatisch einen Click-Handler, der in die
Zwischenablage schreibt und 1,2 s lang ein Check-Icon statt des Copy-Icons
anzeigt (Klasse `is-copied` wird am Button getoggelt).
Zwei Quell-Modi:
- **Statischer Wert** (fix im Markup):
```html
<button type="button" data-copy-button data-copy-value="max@acme.com"
aria-label="Copy email">
<i class="bi bi-copy" data-copy-icon-idle></i>
<i class="bi bi-check-lg" data-copy-icon-done></i>
</button>
```
- **Live Input-Wert** (liest `input.value` beim Klick):
```html
<input id="privacy_url" …>
<button type="button" data-copy-button data-copy-target="privacy_url" …>…</button>
```
Der Live-Modus ist vorzuziehen, wenn der User das Feld editieren kann —
der Button kopiert dann immer den aktuellen Wert, nicht den beim ersten
Render gesetzten.
### Copyable Input Standard
Für Text-Inputs, bei denen ein Copy-Button *im* Feld sitzen soll (z. B. URLs,
IDs, Tokens) existiert die Core-Partial **`templates/partials/app-input-copy.phtml`**.
Verwendung im Form:
```php
<?php
$name = 'privacy_url';
$label = t('Privacy URL');
$type = 'url';
$value = (string) ($values['privacy_url'] ?? '');
$readonly = $isReadOnly;
require templatePath('partials/app-input-copy.phtml');
?>
```
Optionale Vars: `$id` (Default = `$name`), `$placeholder`, `$required`,
`$disabled`. Die Partial rendert:
```html
<label for="privacy_url">
<span>Privacy URL</span>
<div class="app-input-copy">
<input type="url" name="privacy_url" id="privacy_url" value="…">
<button class="app-input-copy-button" data-copy-button
data-copy-target="privacy_url" …>
<i class="bi bi-clipboard" data-copy-icon-idle></i>
<i class="bi bi-check-lg" data-copy-icon-done></i>
</button>
</div>
</label>
```
CSS-Kontrakt (`web/css/components/app-input-copy.css`):
- `.app-input-copy` — Positioning-Wrapper, `position: relative`
- `.app-input-copy > input` — Native Form-Styling, `padding-right: 2.5rem`
für den Overlay-Button
- `.app-input-copy > .app-input-copy-button` — absolute positioniert rechts,
vertikal zentriert via `inset 0/auto + margin-block: auto`. Spezifität
`(0,2,0)` beim Descendant-Selector nötig, damit die globale
`[data-tooltip] { position: relative }`-Regel nicht gewinnt.
- `.is-copied` (wird vom Copy-Field-Component gesetzt) — tauscht Copy-Icon
gegen Check, färbt Button in `--app-action-success-border`.
Nicht selbst die Markup-Struktur nachbauen — immer die Partial verwenden,
damit Spacing, Vertical-Centering und A11y (`aria-label`, Tooltip) konsistent
bleiben.
### Global Confirm Actions
Für allgemeine Form-/Button-Confirms außerhalb der Detail-Policy gilt: