Javaslat 03 – rétegek

Hogyan olvasd: a Javaslat jelű változatot ajánlom. A makettek állóképek (nem kattinthatók), a bennük lévő nevek és számok mintaadatok. A valódi komponens a jóváhagyás után készül el, billentyűzettel, képernyőolvasóval és tesztlappal. A lap a rendszered világos/sötét módját követi.

Amit az adminban találtam: ~19 fájl rajzol saját ablakot (saját háttér, saját bezárás), ebből csak 3 tartja bent a fókuszt (ConfirmationModal, AdminCalendar, PoiBulkImagesModal), és egyik sem portálban nyílik. A fejléc címe 18 ágú if/else, ami az 56 útvonalból kb. 21-et fed le – a Naptár, Analitika, Rajok, Nyereményjáték, Üzenetek oldalon üres. Az adminnak nincs telefonos elrendezése.

1. Felugró ablak (Modal) és megerősítés

organizmus

Kiváltja: ConfirmationModal (13 fájl használja), ResultModal, TagCreateModal (7), PoiUnknownTagsModal, PoiBulkEdit/Images/DeleteModal, VideoUploadModal, ImageCropperModal, MapsCoordinateHelper, az AdminCalendar saját CalendarDialog-ja, PrizeDrawOverlay, a TagsManagement, PoiDuplicates és Hives oldal saját ablakai; window.confirm (AddInAppMessage). Épül: Radix Dialog / AlertDialog (fókuszcsapda, Esc, fókusz vissza a nyitó gombra, portál) + a meglévő bc-modal, bc-scrim, Button. Méretek: alap 560 px, is-wide 880 px, telefonon teljes szélesség.

A – középre nyíló megerősítő ablak

Javaslat

Megállít: a következményt (mi törlődik még) ki lehet írni.
A fókusz a Mégse gombon indul – véletlen Enter nem töröl.
A gomb felirata az ige („Törlés”), nem „Igen/OK”.

B – helyben megerősítés (a sorban)

Gyors, nem takar ki semmit.
Nincs hely kiírni a következményt; telefonon szűk.
Visszavonható műveletnél (pl. elrejtés) jó lehet – de ott nem kell megerősítés, elég a „Visszavonás” az értesítésben.

Szabály: megerősítés csak visszafordíthatatlan vagy másokat érintő műveletnél (törlés, közzététel, küldés). Visszafordíthatónál azonnal végrehajtjuk, és az értesítésben „Visszavonás” van (7.).

Állapotok: nyitás · töltés (a gomb pörög, a Mégse is tiltott, Esc nem zár) · hiba az ablakon belül (bc-alert, az ablak nyitva marad) · siker → zár + értesítés.

Szélső esetek a tesztlapon:

nagyon hosszú tartalom → a fej és a gombsor áll, a közepe görög
ablak az ablakban (pl. képvágó a szerkesztőben) – legfeljebb 2 szint
dupla kattintás a Törlésen · szerverhiba · lejárt munkamenet
telefon fekvő (844×390): a gombsor látszik billentyűzettel is
el nem mentett változás → „Elveted a módosításokat?”

2. Veszélyes tömeges művelet (végleges törlés)

organizmus

Kiváltja: PoiBulkDeleteModal (ma: hatásvizsgálat + egy „Törlés” gomb; nincs második lépés), a jövőbeli tömeges műveletek (partnerek, kuponok). Épül: 1. Modal (AlertDialog) + TextInput + bc-alert is-danger + a hatáslista (dl).

A – be kell gépelni a darabszámot

Javaslat

A szám begépelése kényszerít, hogy elolvasd, mennyit törölsz – a név tömegesen értelmetlen.
Egyetlen elem végleges törlésénél a nevét kell beírni (ékezet- és kisbetű-érzéketlenül).
A gomb addig tiltott, amíg nem egyezik.

B – jelölőnégyzet: „Értem, nem vonható vissza”

Gyorsabb.
Rutinból kipipálható – ugyanaz a mozdulat, mint bármely jelölő.

Mikor kell? 10-nél több elem végleges törlése, vagy bármi, ami másokat is érint (pl. partner törlése a hozzá tartozó kuponokkal). Egy elem sima törlésére az 1A elég. Szélső eset: a hatásvizsgálat nem tölt be → a gomb tiltott, „Újrapróbálás”.

3. Oldalpanel (Drawer) – részletek és gyors szerkesztés a listából

organizmus

Ma: a listából minden részlet és szerkesztés új oldal (pl. Partners.tsx: navigate(`/partners/edit/…${location.search}`) – a szűrőt az URL-ben viszi, a görgetési helyet nem). Oldalpanel ma nincs az adminban. Épül: Radix Dialog (jobbról csúszik be, 400 ms ease-drawer, a mobil oldalsáv mozgása) + FormSection. Szélesség 480 px; 600 px alatt teljes képernyős lap.

A – oldalpanel rövid műveletekhez, oldal a hosszú űrlaphoz

Javaslat

A lista a helyén marad (szűrő, görgetés, kijelölés) – gyors egymás utáni ellenőrzéshez (POI-minőségsor, partner-állapot).
Saját URL-je van (?reszlet=123), a Vissza gomb bezárja.
A hosszú Add/Edit űrlap marad külön oldal – a panel alján „Teljes oldal”.

B – maradjon minden külön oldal (mint ma)

Nincs új minta, egyszerű.
Minden ellenőrzés = oda-vissza navigálás, a lista újratölt, a görgetés elvész.

Panel vagy ablak? Ablak: egy kérdés, egy döntés (megerősítés, címke létrehozása). Panel: egy elem megnézése/rövid javítása a lista mellett. Oldal: hosszú űrlap, mély hivatkozás.

Szélső esetek:

el nem mentett változás + a panel bezárása vagy másik sor választása
a sor közben törlődött (más admin)
telefon: teljes képernyő, a fejléc ragad
panelből nyíló ablak (pl. képvágó)

4. Súgó (ⓘ, Popover) és gomb-felirat (Tooltip)

atom / molekula

Kiváltja: 114 title= attribútum (érintésen nem jelenik meg), a Partners saját partner-success-tooltip-je, a Table/FilterTable és a feltöltők súgói; a 3/A szabály kötelező súgó gombja (a 01-es csomagban már van: bc-help-btn + bc-pop). Épül: Radix Popover (súgó) és Radix Tooltip (ikongomb felirata). A grafikonok adat-buborékja külön, a 02-es csomagban.

A – a ⓘ koppintásra nyíló buborék

Javaslat

Telefonon és tableten is működik (rámutatás nincs).
Lehet benne példa, sőt link is – nyitva marad, amíg el nem olvasod.
Esc és kívül koppintás zár; a fókusz visszaáll a ⓘ-re.

B – rámutatásra nyíló felirat mindenhol

Kevesebb kattintás egérrel.
Érintésen nem jön elő; eltűnik, mielőtt végigolvasnád; példa nem fér bele.

Tooltip (gomb-felirat) – változat nélkül: csak ikongombra, a látható aria-label ismétlése (pl. „Szerkesztés”); 500 ms késleltetés, billentyűfókuszra is; soha nem hordoz egyedi információt.

Szélső esetek:

a ⓘ a képernyő szélén → a buborék befordul (Radix collision)
nagyon hosszú súgó → max. 360 px, görgethető
200% nagyítás, sötét mód
súgó egy ablakon belül (réteg-sorrend)

5. Legördülő menü (DropdownMenu) – profil és sor-műveletek

molekula

Kiváltja: a fejléc profil-menüje (Header.tsx + 12 soros Dropdown + MenuItems: nincs Esc, nyilak, kívül-kattintás), a listák sorvégi ikonsorai (ceruza/kuka ikon 4 fájlban). Épül: Radix DropdownMenu (nyilak, kezdőbetűs ugrás, Esc) + bc-pop keret; veszélyes elem piros és elválasztva, alul.

A – fő művelet látszik, a többi a „⋯” menüben

Javaslat

A sor nyugodt; a leggyakoribb (Szerkesztés) egy koppintás.
A törlés nem a ceruza mellett van – nehezebb félrekattintani.
A „…” a felirat végén jelzi: ablak jön.

B – minden művelet ikonként a sorban

Minden egy koppintás.
3-nál több ikon kitalálósdi; telefonon nem fér el; a kuka a keze ügyében van.

Szabály: ≤ 2 művelet → ikongombok a sorban (felirattal, Tooltip-pel); 3+ → A. A profil-menü is ez: név + szerep, „Kijelentkezés” alul. Esetek: tiltott menüpont (jogosultság) indoklással · menü a képernyő alján (felfelé nyílik) · hosszú felirat · érintés: 44 px sorok.

6. Fülek (Tabs) – panelváltó és oldal-navigáció

molekula

Kiváltja: AdminAnalytics 7 füle (?tab= az URL-ben – ez jó), CalendarSectionLayout 4 fő + 2–3 másodlagos füle, a Rajok nézetváltója. Épül: a meglévő bc-tabs. Két komponens, egy kinézet: Tabs (Radix Tabs, role="tab", ugyanazon az oldalon vált panelt) és NavTabs (linkek, aria-current="page", útvonalat vált).

A – telefonon görgethető sor, halványuló széllel

Javaslat

Ugyanaz a minta minden méreten; a kijelölt fül magától a látható részbe gördül.
A halvány szél jelzi: van még.

B – telefonon legördülővé alakul

Sok fülnél (7+) rendezettebb.
Elrejti a többi lehetőséget; két minta ugyanarra.

Javítás a Naptárnál: a másodlagos sor (Eseménylista · Keresés · Új esemény) keveri a nézetet és a műveletet. Javaslat: „Új esemény” gomb az oldalfejbe (7.), a „Keresés” a lista keresőmezője – így egy fülsor marad. Esetek: 2 és 10 fül · hosszú fülnév · számláló a fülön („Hibák 3”) · tiltott fül.

7. Oldalfej (PageHeader) és morzsamenü (Breadcrumbs)

organizmus

Kiváltja: Header.tsx 18 ágú if/else-e a pathname-re (új oldalnál mindig elfelejtődik – ma kb. 35 útvonalon üres a cím), az oldalak saját h1-jei és fejlécei (pl. AdminCalendar „Tartalmi áttekintés”). Épül: a meglévő bc-page-header + új Breadcrumbs. A cím és a morzsa az útvonal leírásából jön ({ path, title, crumb } egy helyen, a react-router handle-jével); részletoldalon a cím az elem neve („Méhes Kávézó”), betöltés közben csontváz. A böngészőfül címe (document.title) ugyanebből.

A – cím a tartalom tetején, felette morzsa; a fejléc vékony

Javaslat

A cím, a hely és az oldal fő művelete egy blokkban – az ember itt keresi.
Telefonon a morzsából csak a szülő marad: „‹ Sablonok”.
A fejlécben csak menü, (később keresés) és profil.

B – cím a fejlécben (mint ma), morzsa alatta

Mindig látszik görgetés közben is.
A cím általános („részletei”), a művelet-gombok külön sorba szorulnak; telefonon a fejléc tele van.

Esetek: nagyon hosszú elemnév (két sorra tör, a morzsában levágva, teljes név title-ben) · 4+ szint (a középső „…”) · betöltés és „nem található” · jogosultság nélküli szülő (nem link) · 3+ művelet → a harmadiktól „⋯” menü (5A).

8. Értesítés (Toast)

molekula

Kiváltja / öltözteti: react-toastify – 243 hívás (139 hiba, 75 siker, 26 info, 3 figyelmeztetés), egy <ToastContainer /> az App.tsx-ben alapbeállítással (jobb fent, 5 mp); a kinézetet a _toast.scss már a bc-toast-hoz igazítja. Épül: DS-burok: notify.success/error/info/warning(szöveg, { action }) – a projekt nem hívja közvetlenül a könyvtárat, így később cserélhető. A react-toastify marad (MIT, már bent van); alternatíva a Sonner (MIT, kisebb) – csere csak külön döntéssel.

A – asztalon jobb fent, telefonon lent középen

Javaslat

Asztalon nem takarja a mentés gombot (az lent/jobbra van) és a táblázatot.
Telefonon a hüvelykujj elérésében, a billentyűzet fölött.
Ez a könyvtár egy beállítása – a hívásokhoz nem kell nyúlni.

B – mindig lent középen

Egy hely minden méreten.
Asztalon az űrlap-gombsort és a lapozót takarja.

Szabályok:

Hiba nem tűnik el magától (bezárás gombbal), siker/info 5 mp, rámutatásra/fókuszra megáll.
Mezőhiba (pl. „érvénytelen Excel-fájl”, „túl nagy kép”) a mező alá kerül, nem értesítésbe – a 139 hibaértesítés egy része ilyen.
Egyszerre legfeljebb 3; az azonos üzenet nem halmozódik.
Képernyőolvasó: siker role="status", hiba role="alert".

Szélső esetek:

nagyon hosszú szöveg (3 sor után levágva, „Részletek”)
10 értesítés 1 mp alatt (tömeges művelet → egy összesítő)
nyitott ablak fölött (réteg-sorrend)
csökkentett mozgás

9. Oldalsáv és navigáció telefonon/tableten

sablon

Kiváltja: ProtectedLayout + Navbar (187 sor, ExpandableMenuItem csoportokkal) + Header. Ma egyik sem vált elrendezést keskeny képernyőn (a Navbar.scss-ben csak rámutatás-szabály van) – telefonon az oldalsáv elveszi a helyet. Épül: a meglévő bc-shell / bc-sidebar / bc-topbar (900 px alatt már fiók, a JS-t kell hozzá megírni) + Radix Dialog a fiókhoz (fókusz, Esc, háttér). Ugrólink: „Ugrás a tartalomhoz”.

A – 900 px alatt behúzható fiók (☰)

Javaslat

Mind a ~12 menüpont és a csoportok megmaradnak – ugyanaz a térkép, mint asztalon.
A DS-ben már kész a CSS; oldalváltáskor bezár, a fókusz visszaáll a ☰-re.

B – alsó fülsor (4 fő + „Több”)

Appszerű, egy koppintás a fő helyekre.
Az admin 12+ helyéből 8 a „Több” mögé kerül; két navigációs minta.

Kiegészítő javaslat (döntsd el): 900–1200 px között (tablet fekvő) az oldalsáv összecsukható ikonsávvá (64 px, feliratok Tooltip-ben) – több hely a táblázatnak. Esetek: hosszú menüpont · nyitott fiók + elforgatás · aktív pont egy lenyitott csoportban · 200% nagyítás.

10. A többi – változat nélkül

atom / molekula

Elem	Szint	Mire épül	Kiváltja az adminban
Lenyitható (Accordion, Disclosure)	molekula	Radix Accordion + `bc-card is-flat`	`components/Accordion` (2 használó), `ExpandableBox` (2), `ExpandableMenuItem` (Navbar)
Lebegő réteg alap (Popover)	atom	`bc-pop` (01-es csomag)	a Combobox, dátumválasztó, súgó, menü közös rétege
Háttér-függöny (Scrim) + portál	atom	`bc-scrim`	~19 saját `-overlay`/`-backdrop` osztály
Ugrólink („Ugrás a tartalomhoz”)	atom	`bc-sr` + fókuszra látszik	ma nincs
Réteg-sorrend (z-index skála)	token	fejléc 10 · oldalsáv 60 · ablak 50 → rendezve: fejléc · fiók · ablak · lebegő · értesítés	szétszórt `z-index`-ek

Lenyitható makett. A z-index skála tokenként kerül be (--bc-z-*) – ez új token, ezért itt kérem hozzá a jóváhagyást.

Döntés

Írd meg a chatben, például: „1A, 2A, 3A, 4A, 5A, 6A, 7A, 8A, 9A (+ ikonsáv: igen/nem), 10 és a z-index tokenek – jóváhagyva”, vagy azt, amit másképp szeretnél. Ez kerül a docs/javaslatok/03-reteg.md Döntés részébe, és utána építek.