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

@@ -0,0 +1,51 @@
<?php
/**
* Copyable text input — standard <label> + <span> above, input with a
* compact copy button overlaid on the right edge. A <div> wrapper around
* the input+button provides a dedicated positioning context so nothing
* leaks from the label's layout rules.
*
* The copy button reads the input's CURRENT value (live) via
* data-copy-target so users can edit the field and still copy the new value.
*
* Required view vars:
* $name — input name attribute
* $label — already-translated label text
*
* Optional:
* $id, $value, $type (default 'text'), $placeholder,
* $readonly, $required, $disabled
*/
$inputName = (string) ($name ?? '');
if ($inputName === '') {
return;
}
$inputId = (string) ($id ?? $inputName);
$inputType = (string) ($type ?? 'text');
$inputValue = (string) ($value ?? '');
$inputLabel = (string) ($label ?? '');
$inputPlaceholder = (string) ($placeholder ?? '');
$inputReadonly = (bool) ($readonly ?? false);
$inputRequired = (bool) ($required ?? false);
$inputDisabled = (bool) ($disabled ?? false);
?>
<label for="<?php e($inputId); ?>">
<span><?php e($inputLabel); ?></span>
<div class="app-input-copy">
<input type="<?php e($inputType); ?>" name="<?php e($inputName); ?>" id="<?php e($inputId); ?>"
value="<?php e($inputValue); ?>"
<?php if ($inputPlaceholder !== ''): ?>placeholder="<?php e($inputPlaceholder); ?>"<?php endif; ?>
<?php if ($inputReadonly): ?>readonly<?php endif; ?>
<?php if ($inputRequired): ?>required<?php endif; ?>
<?php if ($inputDisabled): ?>disabled<?php endif; ?> />
<button type="button" class="app-input-copy-button"
data-copy-button data-copy-target="<?php e($inputId); ?>"
data-tooltip="<?php e(t('Copy to clipboard')); ?>" data-tooltip-pos="top"
aria-label="<?php e(t('Copy to clipboard')); ?>">
<i class="bi bi-clipboard" data-copy-icon-idle aria-hidden="true"></i>
<i class="bi bi-check-lg" data-copy-icon-done aria-hidden="true"></i>
</button>
</div>
</label>