Browse Source

133: plan voor het verkleinen van de Kopie-knop (A + B + tooltip)

Variant A (icoonknop in de ListTile-rij) op mijnProfiel 2x, variant B
(compacte oranje chip) op MijnAanmeldingen, tooltip op alle drie en de
kleuren meteen op thema-tokens. Inclusief nulmeting voor verificatie en
twee terugvalopties voor de risicovolle stappen (ListTile in Stack,
Replace naar IconButton). Nog niets in de builder gedaan.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
bob 5 hours ago
parent
commit
58e96497f9
1 changed files with 108 additions and 0 deletions
  1. 108 0
      TASKS.md

+ 108 - 0
TASKS.md

@@ -27,6 +27,7 @@ Google Play en één doorloop die alleen Bob kan doen.
 | # | Taak | Kort |
 |---|---|---|
 | **FOTOBOEK** | Fotoboek: foto's kiezen uit Drupal + beheren | **Claude — bezig** (sessie 2026-09-22). Drupal-kant **AF** (endpoint `mijn_fotos` index+verwijder, live op devbob én productie, getest). App-kant in aanbouw: keuzeblok met Camera/Galerij/Fotoboek op de 4 upload-plekken (`uitgaansevenementAanmaken` + `stadsactiviteitAanmaken`, elk logo + foto's) en een 5e tab "Mijn foto's" op `mijnProfiel` voor beheer/verwijderen. Volledig plan + endpoint-spec staan in `CLAUDE.md` (commit 8c73621) |
+| **133** | Kopie-knop verkleinen (mijnProfiel 2x + MijnAanmeldingen) | **Claude — bezig** (plan af 2026-09-22, wacht op groen licht voor de browser). Variant A (icoon in de rij) op `mijnProfiel`, variant B (compacte chip) op `MijnAanmeldingen`, tooltip erbij, kleuren meteen goed. Volledig plan + terugvalopties onderaan dit bestand |
 | **G0.6** | Play-screenshots | ✅ Nieuwe set van 10 klaar (2026-09-19 avond). Alleen `tel-04-horeca.png` moet over zodra *Show Test Ads* uit staat |
 
 | **112** | Restje zoek-stad: lege API-call opruimen | **Eigenaar: Bob.** `SelectStateDropDownComponent` → Actions → On Page Load → *Conditional Action 5* (`gemeenteSelectId is set/non-empty`) → TRUE-tak → **Action 13, Custom Action `drupalRequest`** met url/sessionName/sessionId/token/body allemaal Unset. Staat sinds 2026-09-20 op **disabled**; kan weg via ⋮ → Delete Action. Vlak eronder staat **Conditional Action 16** (`apiGemeenteResultInitalize -> Succeeded`) met twee lege takken — mag in dezelfde moeite weg |
@@ -939,6 +940,113 @@ Een guard ("sla de fetch over als `alleXxx` al gevuld is") lost dat op, maar kos
 een conditie in vijf actieketens — en juist die dialoog is op deze pagina fragiel.
 Alleen doen als het in de praktijk hindert.
 
+## 🔁 133 · Kopie-knop verkleinen (3 plekken) · Eigenaar: **Claude — bezig** (plan af 2026-09-22, wacht op groen licht voor de browser)
+
+Besluit Bob 2026-09-22: de `Kopie`-knop onder de kaarten is te groot. **Variant A**
+(icoon ín de rij) op `mijnProfiel`, **variant B** (compacte chip) op
+`MijnAanmeldingen`, met tooltip, en de kleuren meteen goed.
+
+**Waarom hij zo groot oogt:** alle drie de knoppen hebben
+`color: secondaryBackground` op een kaart die zelf óók `secondaryBackground` is —
+een onzichtbaar vlak van 40 dp met alleen het woord "Kopie" erin.
+
+### Waar het zit (verse export 2026-09-22)
+
+| # | Bestand | Structuur nu | i18n |
+|---|---|---|---|
+| 1 | `mijn_profiel_widget.dart:617` (evenementen) | `Column [ ListTile(+chevron), Align(1,0) > Button ]` | `oxse6aci` |
+| 2 | `mijn_profiel_widget.dart:1430` (stadsactiviteiten) | idem | `wcyy4pao` |
+| 3 | `mijn_aanmeldingen_widget.dart:386` | `Column [ Padding>Column(logo/titel/datum/status), Button ]`, knop **gecentreerd** (geen `width`) | `g4pbs1et` |
+
+Knop-opties op alle drie identiek: `height 40`, `padding 16/0/16/0`,
+`color secondaryBackground`, `titleSmall` + `primaryText`, `elevation 0`,
+`borderRadius 8`.
+
+### Doelstijl
+
+- **A (plek 1 en 2):** `FlutterFlowIconButton`, `content_copy`, `buttonSize 34`,
+  `icon size 20`, `borderRadius 8`, **Fill Color `primaryBackground`**,
+  **Icon Color `secondary`** (#FF680D — merk-DNA: oranje = actie). Rechts ín de
+  rij, met **8 dp rechtermarge** (zie 132-E). De chevron (`arrow_forward_ios_rounded`)
+  vervalt: puur decoratief, de hele rij is al tikbaar.
+- **B (plek 3):** de `Button` blijft, maar `height 40 → 28`, `padding 16 → 10`,
+  `borderRadius 8 → 14` (pil), `titleSmall → bodySmall`, **tekstkleur `secondary`**,
+  **`borderSide` 1 px `secondary`**, Fill Color op **transparant**, en een
+  **icoon `content_copy`** vóór de tekst (`iconPadding` links 0, rechts 4).
+  Daarna `Align(1,0)` eromheen + 12 dp rechterpadding.
+- **Tooltip** op alle drie (Wrap Widget → 4e rij, 1e icoon), `triggerMode`
+  **longPress** (niet tap — de knop heeft zelf al een onTap, anders dan het
+  favorietenhartje op `HorecagelegenheidCurrent`).
+  Referentiepatroon: `horecagelegenheid_current_widget.dart:336-437`.
+
+### Teksten (nieuwe i18n-sleutels via de globe)
+
+| plek | NL | EN |
+|---|---|---|
+| 1 en 3 | Kopieer naar een nieuw evenement | Copy to a new event |
+| 2 | Kopieer naar een nieuwe activiteit | Copy to a new activity |
+
+Bij A verdwijnt de knoptekst; `oxse6aci` en `wcyy4pao` blijven dan leeg staan
+(niet erg — een lege `en` valt niet terug op NL, maar er is ook geen NL meer).
+Bij B blijft `g4pbs1et` = Kopie/Copy gewoon staan.
+
+### Stappen — plek 1 en 2 (variant A)
+
+1. Tree-filter `ListTile` → de juiste node (1e = evenementen, 2e = stadsactiviteiten).
+2. `ListTile` → Wrap Widget → **Container**, breedte op **∞** (het ∞-knopje in
+   het Width-veld; let op: dat is een toggle, één klik).
+3. Die `Container` → Wrap Widget → **Stack**.
+4. De bestaande `Align > Button` de `Stack` in slepen (drop op de `Stack`-rij =
+   positie 0), daarna de `Container`-rij óók op de `Stack`-rij droppen zodat de
+   volgorde `[Container, Align]` wordt — anders ligt de knop áchter de rij.
+   Eén sleep per tool-aanroep, verse `zoom` ertussen.
+5. `Align` op **(1.0, 0.0)** + rechterpadding 8.
+6. De `Button` → rechtsklik → **Replace** → `IconButton`. **Dit is de kritieke
+   stap**: Replace behoudt de actieketen. Zie de terugval hieronder als
+   `IconButton` niet in de Replace-lijst staat.
+7. Icoon + kleuren + maten uit "Doelstijl".
+8. `ListTile` → **Trailing Icon** weghalen (chevron) en `contentPadding` rechts
+   **12 → 52**, zodat een lange titel niet onder de knop loopt.
+9. Wrap de `IconButton` in een **Tooltip**, tekst + EN via de globe.
+
+⚠️ **Twee risico's, met terugval:**
+- **Een `ListTile` in een `Stack`** is in dit project nergens precedent, en
+  FlutterFlow weigert een `ListTile` in een `Row` ("Invalid Action") omdat die
+  geen intrinsieke breedte heeft. Stap 2 (de Container met breedte ∞) is er
+  juist om dat te voorkomen. Weigert stap 3 alsnog: **val voor plek 1 en 2 terug
+  op variant B** — dan is de hele taak één set knop-opties + tooltip, zonder
+  structuurwijziging.
+- **Replace → IconButton** is niet bevestigd (bij een `Text` biedt de dialoog
+  alleen RichText/TextField/Button). Lukt het niet: **NIET** Copy/Paste Action
+  Chain gebruiken — de keten hangt volledig aan het loop-item
+  (`$.nid`, `$.horecagelegenheidnid`) en die bindingen sneuvelen bij plakken.
+  Terugval dan: de bestaande `Button` houden en hem icoon-only maken (knoptekst
+  leeghalen via de globe + `content_copy` als icoon + `height/width 34`,
+  `padding 0`). Zelfde resultaat, nul risico op verloren bindingen.
+
+### Stappen — plek 3 (variant B)
+
+1. `Button` selecteren → knop-opties uit "Doelstijl" zetten.
+2. Icoon toevoegen (Add Icon → `content_copy`).
+3. Wrap Widget → **Align** (1.0, 0.0) + rechterpadding 12.
+4. Wrap Widget → **Tooltip**, tekst + EN via de globe.
+
+### Verificatie (verse export, nulmeting van 2026-09-22 erbij)
+
+| check | nu | na |
+|---|---|---|
+| `grep -c "FlutterFlowIconButton(" lib/mijn_profiel/mijn_profiel_widget.dart` | 2 | 4 |
+| `grep -c "arrow_forward_ios_rounded" lib/mijn_profiel/mijn_profiel_widget.dart` | 5 | 3 |
+| `grep -c "AlignedTooltip(" lib/mijn_profiel/mijn_profiel_widget.dart` | 0 | 2 |
+| `grep -c "Stack(" lib/mijn_profiel/mijn_profiel_widget.dart` | 0 | 2 |
+| `grep -c "AlignedTooltip(" lib/mijn_aanmeldingen/mijn_aanmeldingen_widget.dart` | 0 | 1 |
+| `grep -c "FFButtonWidget(" lib/mijn_aanmeldingen/mijn_aanmeldingen_widget.dart` | 1 | 1 |
+
+Plus: `height: 28.0` en `borderSide` in de opties van plek 3, en per plek dat de
+actieketen intact is — tel de navigatieparameters
+(`grep -c "serializeParam" ...` rond elke knop) en controleer dat `$.nid` en
+`$.horecagelegenheidnid` nog aan het **loop-item** hangen, niet aan de respons.
+
 ## 🅖 G · GOOGLE PLAY — volledige checklist · Eigenaar: Bob
 
 *Opgesteld 2026-09-19. Account aangemaakt 2026-09-18 als **Organisatie** (Digital