beeco design system · javaslat 04 · 2026-10-01

Média és speciális elemek

A negyedik komponenscsomag: képek, videó és fájlok feltöltése, galéria, térkép, havi naptár, nyitvatartás, avatar, címke. Minden feltöltő a 3/A szabályt követi: súgó (ⓘ), engedett típusok és méret, aktuális állapot, és a hibás fájl meg sem kezd feltöltődni. Ahol valóban dönteni kell, 2 változatot mutatok.

Jóváhagyva: Claude javaslata szerint (2026-10-01)

Hogyan olvasd: a Javaslat jelű változatot ajánlom. A makettek állóképek, a képek helyén színátmenet van, a nevek, számok és határok mintaadatok (a valódi határokat a projekt adja). A lap a rendszered világos/sötét módját követi.

1. Képfeltöltő (ImageUpload) – ejtőzóna

organizmus
Kiváltja: EntityImageUploadDropzone (16 fájl használja), ImageUploadDropzone (1), ImageUploader (0 használó – halott kód). Ma: accept="image/*", de a felirat „JPG, PNG, GIF” – bármilyen képtípus átmegy (pl. HEIC, SVG); a méretet (5 MB) és a típust értesítésben jelzi, nem a mezőnél; darabszám-határ és számláló nincs. Épül: Field (címke + ⓘ + tartomány + számláló – 01-es csomag) + natív <input type="file"> egy <label>-ben (billentyűzettel is) + húzás-ejtés + haladásjelző; utána opcionálisan 3. Képvágó.

A – a galéria-rácsba épül („+ Kép” csempe)

Javaslat
  • Egy helyen látod, mi van fent, mi tölt, és mennyi fér még (a 16 feltöltő ma mind galériával párban él).
  • Az egész rácsra rá lehet húzni a fájlokat; a „+ Kép” csempe billentyűzettel is elérhető.
  • A hibás fájl el sem indul; az oka és a teendő a mező alatt marad, amíg be nem zárod.

B – külön nagy ejtőzóna a galéria fölött

  • Nagy, egyértelmű cél – első feltöltésnél barátságos.
  • Sok helyet foglal akkor is, ha már van 10 kép; a feltöltő és az eredmény két helyen van.
Állapotok: üres (nagy „+ Kép” csempe + egy mondat) · ráhúzás (a rács mézes kerete) · feltöltés (csempénként %, MB, Megszakítás) · feldolgozás · kész · hiba (Újrapróbálás) · tele (a „+ Kép” tiltott, „10/10 kép – törölj egyet, ha újat tennél fel”) · tiltott · csak olvasható.
Szélső esetek (3.4):
  • túl nagy fájl · rossz típus (a tartalmat nézzük, nem a kiterjesztést) · 12 fájl egyszerre, amikor 6 fér → az első 6 indul, a többiről üzenet
  • megszakadt feltöltés, lassú hálózat · ugyanaz a fájl kétszer
  • nagyon széles/magas kép · átlátszó PNG (sakktábla-háttér) · 0 bájtos fájl
  • a súgó szövegét a projekt adja (mire kell a kép, hol jelenik meg az appban)

2. Képgaléria és nagyító (Gallery, Lightbox)

organizmus
Kiváltja: EntityImageGallery (20 használó; ma: rács + törlés, a képleírás a fájlnév), PartnerImageGallery (2), ImageLightbox (1; nyilak és Esc van, fókuszcsapda nincs). Épül: CSS-rács + 3. csomag: DropdownMenu (⋯), Modal (nagyító), Confirmation; a feltöltő (1A) ebbe a rácsba épül.

A – borítókép + sorrend (húzással és menüből)

Javaslat
  • Az első kép a borító – ha az app is így használja, itt látszik, mi lesz a kártyán.
  • Sorrend húzással és „Előre/Hátra” menüponttal (billentyűzet, érintés).
  • Leírás (alt) szerkeszthető – ma a fájlnév a képleírás.

B – egyszerű rács, csak törlés (mint ma)

  • Nincs mit megtanulni.
  • A kuka a kép sarkában: egy félrekoppintás és törölve; a sorrend a feltöltés sorrendje.
Kérdés Bencének / neked: az app a képek sorrendjét (első = borító) használja? Ha nem, az A-ból csak a menü és az alt marad, a borító nem kell.

Nagyító – változat nélkül: sötét háttér, „2/7” számláló, nyilak (billentyű ← →, telefonon húzás), Esc, fókuszcsapda, alul a leírás; a fókusz visszaáll a megnyitott képre.

3. Képvágó (ImageCropper)

organizmus
Kiváltja: ImageCropperModal (a két feltöltő hívja; react-easy-crop 5.x, rögzített képarány, görgős nagyítás, max. 8×). Épül: 03/1 Modal + Field (nagyítás csúszka ⓘ-vel, tartománnyal) + Button. A kérdés: a vágó motorja.

A – react-easy-crop marad, DS-burokban

Javaslat
  • Már bent van, bevált (MIT licenc) – érintés, csípés, görgő kész.
  • A projekt csak a DS ImageCropper-t látja; ha egyszer cserélni kell, egy helyen.
  • A DS adja rá: csúszka + ⓘ, billentyűzet (nyilak mozgatnak, +/− nagyít), „Alaphelyzet”, magyar feliratok.

B – saját vágó, függőség nélkül

  • Eggyel kevesebb csomag.
  • Érintés, csípés, tehetetlenség, Safari-sajátosságok: napokban mérhető munka és hibalehetőség – ugyanazért, ami ma működik.
Esetek: nagyon kicsi kép (kisebb, mint a kimenet → figyelmeztetés: „a kép homályos lehet”) · nagyon széles/magas · átlátszó PNG · EXIF-elforgatás (telefonfotó) · a képarányt a projekt rögzíti, ilyenkor a választó nem látszik · Mégse = az eredeti fájl nem töltődik fel.

4. Videófeltöltés – változat nélkül

organizmus
Kiváltja: VideoUploadModal (1 használó, ContentVideos): csak video/mp4, legfeljebb 25 MB, megszakítható, utána „feldolgozás és regisztráció”. Jó alap – a DS ugyanezt a folyamatot adja egységes kinézettel. Épül: 1. feltöltő-mag (típus, méret, haladás) + 03/1 Modal + lépésjelző.
Esetek: rossz típus (.mov) → „Csak MP4 tölthető fel. Telefonon: Megosztás → Mentés MP4-ként.” · 25 MB fölött → a határ és a teendő · megszakítás közben bezárás · a feldolgozás hibázik (a feltöltés megmarad, „Újrapróbálás”) · lassú hálózat · a lap elhagyása feltöltés közben (figyelmeztetés).

5. Fájlimport (Excel)

organizmus
Kiváltja: ExcelUploadPage + ResultModal (pages/Excel): sablon letöltése → fájl kiválasztása → feltöltés → az eredményablak csak a hibás/figyelmeztető sorszámokat listázza, a hiba okát nem. Rossz fájlt értesítésben jelez. Épül: 1. feltöltő-mag (.xlsx, .xls) + lépésjelző + bc-table + bc-alert.

A – 3 lépés: fájl → ellenőrzés → import

Javaslat
  • Még az import előtt látod, mi lesz – és miért nem.
  • Sor + oszlop + ok + teendő: a hibát az Excelben rögtön megtalálod.
  • Kell hozzá egy „próbaimport” (dry-run) a backendben – ez fejlesztési idő, döntés kell.

B – egy lépés, jobb eredménylista (backend-változás nélkül)

  • Ma is megvalósítható.
  • Utólag derül ki, és ha a backend nem mondja meg az okot, csak sorszámot tudunk mutatni.
Esetek: rossz típus (.csv, .numbers) a mező alatt, nem értesítésben · üres fájl · csak fejléc · 10 000+ sor (haladás, a lista görgethető) · ismeretlen oszlop / hiányzó kötelező oszlop · régi sablon (verzió) · ugyanaz a fájl kétszer (duplikáció-figyelmeztetés).

6. Térkép – jelölő, csoport, jelmagyarázat, vezérlők

organizmus
Kiváltja / öltözteti: Leaflet 1.9 – PoiMap (L.icon + divIcon + leaflet.heat + saját jelmagyarázat), HiveMap (leaflet.markercluster a saját alapszíneivel), PartnerContentMap (divIcon), AnalyticsHeatMap (hőtérkép nyers színekkel: kék→sárga→narancs→piros), MapsCoordinateHelper; közös stílus: src/styles/_leaflet.scss (37 sor). Épül: Leaflet marad (nem cseréljük); a DS ad: bc-map CSS (vezérlők, felugró buborék, csoport), mapMarker({ kind, selected }) divIcon-gyár, MapLegend, és a hőtérkép színeit a data-seq tokenekből olvassa. Térkép/lista váltó: 01/3A szegmentált kapcsoló. A hőtérkép grafikon, ezért a 3/B is érvényes rá (cím, egység, „Hogyan olvasd?”, adattábla).

A – tű alakú jelölő ikonnal, számozott csoport

Javaslat
  • A típust betű/ikon és szín együtt jelzi (színtévesztőnek is), a kijelölt mézes és nagyobb.
  • Csoport: fehér kör, fekete keret, Lalezar szám; 3 méretfokozat – a mostani zöld/sárga/narancs alapszínek helyett.
  • Vezérlők 44 px-esek érintésen; jelmagyarázat telefonon lenyitható.

B – kis pötty jelölő (sűrű térképhez)

  • Sok pont is áttekinthető, csoport nélkül.
  • Csak szín különbözteti meg; nehéz rákoppintani (14 px).
Hőtérkép-skála: ma szivárvány (kék→piros), ami a sötét módban és színtévesztőnek félrevezető. Javaslat: egyszínű sorozat a data-seq tokenekből, két végén felirattal és egységgel.

Kiegészítés: a B pötty lehet az A „kis nagyítású” formája (távolról pötty, közelről tű) – ha kéred, így építem.

Esetek:
  • 0 pont („Ezen a területen nincs találat” + nagyítás ki) · 1 pont · 10 000+ pont (csoport kötelező)
  • azonos koordinátájú pontok (csoport szétnyílik)
  • a csempék nem töltenek be (offline) · hely-engedély megtagadva
  • billentyűzet: a jelölők Tab-bal bejárhatók, Enter nyitja a buborékot; lista-nézet mindig elérhető
  • sötét mód (a csempe világos marad, a DS-rétegek sötétek)

7. Havi naptár (MonthCalendar)

organizmus
Kiváltja: pages/Calendar/AdminCalendar.tsx (536 sor: hónapváltó, 3 szűrő, rács, saját CalendarDialog) és PartnerContentCalendar. A három tartalomfajta színe ma nyers hex (#d9ecfb esemény, #fde5ed speciális nap, #e7efd7 oktatás), sötét módban nem vált. Épül: DS rács (a 01/2 dátumválasztó hét- és hónaplogikája: hétfő, magyar nevek) + szerepszínek: esemény = info, speciális nap = warning, oktatás = success, mindegyik bal csíkkal és jelmagyarázattal; napra kattintva 3. csomag Oldalpanel.

A – telefonon: pöttyös hónap + a kiválasztott nap listája

Javaslat
  • A hónap alakja megmarad: egy pillantás, hol van üres nap – a „Tartalmi áttekintés” pont erről szól.
  • A napok neve teljes hosszában olvasható a listában.

B – telefonon: napló-lista (csak a napok, amiken van valami)

  • Egyszerű, sokat mutat görgetve.
  • A hónap egészét nem látod; üres napok csak jelölve, ha külön kérjük.
Esetek: 0 tartalom a hónapban · nagyon sok egy napon (+N további → panel) · hosszú cím (levágva, teljes címe a panelben) · ismétlődő (évenkénti) speciális nap · szűrő mindent kikapcsol · hónap határán átnyúló esemény · töltés/hiba (Újrapróbálás) · ma kiemelve (nem csak színnel: kör + „ma” a képernyőolvasónak).

8. Nyitvatartás-szerkesztő (OpeningHours)

organizmus
Kiváltja: components/OpeningHours (68 sor, 2 használó): napi egy sáv, zárva/nyitva egy lakat/pipa ikongomb nyers színnel és aria-pressed nélkül, két natív időmező; nincs ellenőrzés (a zárás lehet a nyitás előtt), nincs „másold a többi napra”. Épül: Field (ⓘ, tartomány) + Switch + időmező (01/2A idő része) + Button.

A – soronként egy nap: kapcsoló + idősáv + gyors másolás

Javaslat
  • Egy pillantásra olvasható, mint egy kirakati tábla.
  • A kapcsoló egyértelmű (nyitva/zárva), képernyőolvasónak is.
  • Leggyakoribb eset (H–P ugyanaz) egy koppintás.

B – sablon + kivételek

  • Nagyon gyors a tipikus boltnál.
  • A tényleges heti rend „fejben összerakandó”; az egyedi eseteknél úgyis az A-hoz jutunk.
Döntés kell (adatmodell): ma napi egy sáv fér el (start, end, is_closed). Ebédszünethez (két sáv) és éjfél utáni záráshoz a backend és az app (Bence) is módosul. Javaslat: a DS-komponens tudja, de csak akkor kapcsoljuk be, ha a modell is.
Esetek:
  • 0–24 (egész nap) · éjfél utáni zárás (22:00–02:00) · két sáv
  • zárás = nyitás · üres idő nyitott napon
  • ünnepnap / szezonális nyitvatartás (külön elem, most nem része)
  • 12 órás beírás („6pm”) → 18:00

9. Avatar és címke – változat nélkül

atom
ElemSzintMire épülKiváltja az adminban
Avatar (kép vagy monogram; 24 / 32 / 40 / 64 px; kör vagy lekerekített négyzet cégnek)atomtokenek: surface-accent, line, Lalezar monograma fejléc mindenkinél ugyanazt a beégetett képet mutatja (/images/Hege.png, alt="avatar"); a HiveMap saját avatar-spanjai
Címke / állapotjelvény (Badge, Tag)atombc-badge (+ állapotok), eltávolítható címke: bc-tag (01/4A)BeecoTag (1), a 6 fájl saját *-badge/*-pill osztálya

Avatar: ha nincs kép vagy nem tölt be, a név kezdőbetűi (ékezettel: „Á”); a kép alt-ja a név, díszítő helyen üres. Monogramok: mintaadat.

Döntés

Írd meg a chatben, például: „1A, 2A (ha az app használja a sorrendet), 3A, 4, 5A vagy 5B, 6A (+ pötty távolról: igen/nem), 7A, 8A (két sáv: most nem), 9 – jóváhagyva”, vagy azt, amit másképp szeretnél. Az 5A és a 8-as két sáv backend-munkát kér – ezekről Bencével is egyeztetni kell. Ez kerül a docs/javaslatok/04-media.md Döntés részébe.