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:
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user