search

fremtind / jokul

Jøkul er et designsystem utviklet av Fremtind.
https://jokul.fremtind.no
MIT License
65 stars 31 forks source link

File uploader #354

Closed piofinn closed 1 year ago

piofinn commented 5 years ago

We need a file upload component (or pattern). This is needed in several client solutions. The field needs support for help- and error text, possibly also for uploading several files.

Check with the different client teams for specific requirements.

Steinop commented 5 years ago

Any information about which client solutions/teams needing this component? Nice to get some more information about needs/requirements.

Steinop commented 4 years ago

Lagde et animert utkast til filopplaster ifm SeOpp i september i fjor. Den kan helt sikkert forbedres. Denne versjonen tar utgangspunkt i et kort som ekspanderer men tanken var at selve filopplasteren med "drag and drop" eller "klikk for filbrowsing" også skulle kunne fungere frittstående. Dette er langt fra fasit men et innspill til en evt løsning.

Får ikke lastet opp filen her pga størrelse men her er lenke til et skjult område på Vimeo: https://vimeo.com/383534593/3a9204dcef

Steinop commented 4 years ago

Her er Lines komponenter for meldeskade.no: https://www.figma.com/file/vBsxipTTBrMn83k3d9Ly6Y/meldeskade.no-komponenter?node-id=23%3A41

Steinop commented 4 years ago

Her er ny prototype på filopplaster med bildethumbnails, modal forhåndsvisning og feilmelding.

Prototypen er ikke pixelperfect men ganske realistiskt skisse på interaksjon / animasjon. (Se bort fra intens klikking på hovereffekten ved sletting/forhåndsvisning i filmen - det er en bug i Adobe XD)

Tanker rundt løsningen: Prøver å gjenbruke eksisterende Jøkulkomponenter så godt det lar seg gjøre i prototypen.

Feilmeldingen er basert på eksisterende komponent men med en prosentverdi av rød meldingsfarge som bakgrunn istedenfor grå. Har også lagt til et lukkekryss slik at bruker har mulighet til å kvittere ut feilmeldingen. Meldingen kan også kvitteres ut ved at man laster inn nye komponenter ved drag and drop eller klikker på "velg fil"

Komponenten skal også fungere i kort-komponenten i løsninger hvor det er behov for det.

Når man dumper inn mange filer samtidig er tanken at filene vises ved at de legger seg inn sekvensielt med siste bilde øverst til venstre.

Filer skal også kunne vises som en liste. Enten ved at man selv kan velge visningsmodus eller at det gjøres backend. Her må vi se an behovet.

Når én eller flere filer legges inn gjennom filopplasteren lastes de opp umiddelbart. På den måten vil det ikke være behov for en "Send inn" knapp eller en egen visning av bilder som er sendt inn. Hvis man angrer på opplastede filer kan de slettes direkte i thumbnailvisningen (og kanskje også i modal forhåndsvisning?).

Lasteindikator vises før checkmark på hvert enkelt bildethumbnail hvis filene er så store at de krever det.

... "Velg fil" er laget som en tekstlenke slik at fontstørrelsen tilpasses mobil/desktop. Alternativt bruker vi tertiærknapp men da må fontstørrelsen for "eller slipp her" være fixed size slik at den matcher knappestørrelsen. Innspill til dette?

Teksten "Velg fil eller slipp her" er åpen for justering. Hovedtanken er at teksten skal være så minimalistisk, kort og lettfattelig som mulig. Når filopplasterkomponenten brukes i en reell løsning kan det være naturlig å bruke en overskrift over komponenten - type: "Last opp bilder" eller lignende som en innledning til komponenten.

Opptak av prototype: https://vimeo.com/385228119/d10d7329e8

Ønsker kommentarer og innspill på dette - så fyr løs :) Vil jobbe videre med komponenten i Figma.

idalower-zz commented 4 years ago
Steinop commented 4 years ago

Oppdatert mobil prototype i Figma - bruk gjerne Figma Mirror appen på mobilen ved testing (laget for iPhoneX - 375x812 px) https://www.figma.com/file/TkbB9ANfejDSjB2u4u1OEuqM/J%C3%B8kul-komponenter-byggesone?node-id=8862%3A16019

Et par ting å legge merke til:

  1. Når man velger fil ligger det en animasjon på "tap". Drag and drop fungerer vel ikke på mobil/pad (eller gjør det det på iPad med "split screen"?)
  2. Bildekarusellen fungerer både ved trykk på ikonene og sveip sideveis
  3. Feilmeldingen har en animasjon med farget bakgrunn som går fra rød til hvit - mulig dette kan være et pattern vi kan bruke for å tydeliggjøre meldinger og "progressive disclosure"
joms commented 4 years ago

Liker veldig godt det jeg ser i videoen.

Steinop commented 4 years ago

Her er lenke til filmer av et par Figmaprototyper (disse har en tendens til å ikke spille like smooth som i Adobe XD, men gir et inntrykk). @joms: Her vil du se hvordan det ser ut ved opplasting av flere filer samtidig. Har også sett på hvordan en loader kan se ut i tilfeller hvor linja er treg eller filene er store (spesielt akrtuelt hvis det på sikt er aktuelt å laste opp film) Bør antakelig være en lite delay før loaderen vises på den grå skeleton-visningen av bildet. Finnes det evt noen smart måte å beregne hvor lang tid nedlastingen vil ta slik at vi unngår at loaderen blinker inn uten at det er nødvendig?

Støtter forslag om å bruke kamera direkte. Dette vil nok være mest aktuelt i fremti(n)dige løsninger og bli en egen komponent men bildevisning/arkiv kan oppføre seg på samme måte som her.

Figmaprototype av mobil flyt: https://vimeo.com/389705764/521e5fd426 Prototype av loader: https://vimeo.com/389706926/0aa9376811

Loaderprototypen har en simplifisert flyt og er laget for å vise hvordan bildene faller inn og stackes fra topp. %-verdien må oppdateres dynamisk - fadingen er kun en begrensning i Figma.

joms commented 4 years ago

Å kalkulere gjenstående tid er veldig fingeren-i-luften, og kan fort gi falske forhåpninger/skuffelser. Jeg tror en loader som viser der vil i seg selv gi et godt estimat siden man da kan se fremgangen der, og selv tenke seg om dette vil "ta lang tid" eller "ta kort tid". Noe mer nøyaktig enn det tror jeg ikke det er noen stor nytte i med tanke på potensielle svingninger i nettverkshastighet.

Når det gjelder å vente med å vise loader, så tror jeg ikke det er et stort problem når det gjelder opplasting. Jeg ser for meg at de fleste bilder er flere megabyte store, som vil medføre opplastingstid på antagelig minimum ett sekund (må sies at jeg er litt på tynn is her). En måte å løse dette på kan være en "oppstartsanimasjon" som alltid vil vises, og om opplastingen er ferdig før oppstartsanimasjonen er ferdig, går den sømløst over i en ferdiganimasjon.

Nå leker jeg bare med teorier, men når det gjelder kamera kunne man på mobile enheter vist en kamera-knapp på samme ruten hvor man trigger filopplasting, for å trigge kamera. Resten av oppførselen vil egentlig være lik, og man kan tenke seg at man "laster opp et bilde fra kamera".

Steinop commented 4 years ago

Ja, flere måter å løse animasjonen på. Kan evt også droppe å vise %-verdien og bare la den grå bakgrunnen endres i størrelse slik som jeg testet ut i en tidligere skisse. Da med diamantformen. Bevegelsen her er nok litt i meste laget overdrevet både i størrelse og tempo men kan gi en dekorativ effekt: https://vimeo.com/389716032/3c95507540

En kameraknapp som tar deg til kameraappen bør fungere. Bildene må man nok uansett velge fra bildeappen slik som i prototypen med mindre man skyter bilder og laster opp direkte - som kanskje ikke er helt hensiktsmessig fordi brukeren kanskje bommer på fokus, blitz etc slik at en form for sortering/utvelgelse før opplasting kan være lurt. Da bør resten av flyten bli lik.

joms commented 4 years ago

Tror nok kanskje det er bedre med noe som viser en form for progresjon da en sånn animasjon ikke vil vise om opplastingen har hengt seg opp av en eller annen grunn uten at den nødvendigvis har feilet.

Bildene må man nok uansett velge fra bildeappen slik som i prototypen med mindre man skyter bilder og laster opp direkte

Det er et veldig godt innspill ja.

Steinop commented 4 years ago

Har pixeltunet komponentene til filopplasteren og laget focus states. Foreløpig ligger dette i byggesonen fordi jeg mistenker at det kan bli noen justeringer når vi begynner å utvikle. Her er det nok også en god dose UU-snacks å tygge på i kode: Hvordan fungerer en filopplaster for en svaksynt? Hva vil han/hun høre eller se? Vil en som er blind i det hele tatt kunne laste opp bilder fra sitt bildearkiv? Vil en blind bruke kameraet på sin telefon pr i dag?

Kompakt/Mobil: https://www.figma.com/file/TkbB9ANfejDSjB2u4u1OEuqM/J%C3%B8kul-komponenter-byggesone?node-id=9480%3A204 Desktop: https://www.figma.com/file/TkbB9ANfejDSjB2u4u1OEuqM/J%C3%B8kul-komponenter-byggesone?node-id=9469%3A372

joms commented 4 years ago

@piofinn @Steinop Vet vi om noen som har et konkret behov for filopplaster? Det hadde vært interessant med en prat rundt tekniske behov.

Steinop commented 4 years ago

@joms Melde skade / Seopp v/Line Helle har behov for filopplaster.

joms commented 4 years ago

@Steinop Jeg snakket med Jonas i SeOpp, og så litt på filopplasteren de har i dag. Dette avdekte noen behov vi ikke har tatt høyde for til nå:

I dagens løsning er det også støtte for å bruke kamera/mikrofon direkte i opplasteren på mobil.

Screenshot av dagens løsning på desktop

MicrosoftTeams-image

joms commented 4 years ago

Ettersom jeg sitter på BM har jeg ikke mulighet til å fullføre denne tasken med det første.

Ovennevnte kommentar bør sjekkes med @Steinop. Ellers er status at animasjoner må finpusses, men grunnlaget ligger på plass. Det meste av mekanikk skal fungere, men det må eksponeres callbacks for eventlisteners, ettersom kontroll for opplasting bør ligge utenfor FileItem i motsetning til hva det gjør i dag.

gbrownlee commented 4 years ago

Siden mye tyder på at ingen team egentlig har behov for denne komponenten for øyeblikket, foreslår jeg at vi lukker issuet og evt. åpner det igjen om behovet gjenoppstår. Ønsker ikke at vi fyller repoet med ghost issues. @vegardsoerlie Kan du bekrefte at dette stemmer for SeOpp?

vegardsoerlie commented 4 years ago

@gbrownlee Vi har behov for den etterhvert. Snakket om komponenten senest i går og konkluderte med at vi venter med å omskrive vår fra Angular til React for å se ann hvordan denne i Jøkul hadde dekket våre behov, evt hvor mye som måtte tilpasses. Datepicker og filopplaster blir sannsynligvis de siste komponentene vi tar for oss i utviklingsløpet vi er inni nå.

joms commented 4 years ago

@vegardsoerlie Vi setter denne til deg, da du er nærmeste stake holder for å faktisk trenge en file uploader.

For å sikre at file uploaderen dekker behovene for de som trenger en sånn komponent, er det viktig at noen som vil bruke den står for kravspec og utvikling. Om du trenger hjelp fra Designsystem Teamet kan dette ordnes.

Per dags dato ligger det et grunnlag her, men som du ser av kommentarene over mangler det blant annet et arbeide på tilbakemeldinger og funksjonalitet for f.eks. å slette en opplastet fil fra listen. Her kan du nok snakke med @Steinop, men det er heller ikke dumt å ta med en designer fra SeOpp.

vegardsoerlie commented 4 years ago

@joms Den er grei, jeg skal ta meg av dette ved anledning. Har litt jeg må få unna i gjeldende sprint først.

joms commented 4 years ago

https://youtu.be/IF6k0uZuypA?t=698 Ser for meg at det kan være verdt å vurdere react-transition-group for å oppnå kontroll på animasjoner. Ettersom den egentlig bare knytter seg til events for når en transition starter og slutter, vil den sånn jeg ser det forholde seg likegyldig til browser versjoner. Samt at den lar oss beholde kontrollen over animasjonen uavhengig av rammeverk.

vegardsoerlie commented 4 years ago

Se også på progress-bar i samme slengen. AHV benytter allerede denne, så pass på at behovet deres blir dekket.

Steinop commented 4 years ago

Progressbar ref. issue #937

espkva commented 4 years ago

@Steinop Jeg sliter litt med å få på plass preview av filer som ikke er et bilde. Har du tenkt noe rundt dette? E.g: PDFer, word-dokumenter o.l. Tenkte i utgangspunktet en form for standard "dokument"-preview for disse filtypene med evt. filnavn.

Steinop commented 4 years ago

Hvis preview ikke er mulig ville jeg brukt noe som er gjenkjennelig og som indikerer filtype. PDF, Word, Excel, etc. slik du foreslår.

wkillerud commented 3 years ago

Er det noen her som har vært involvert i diskusjonen og føler seg kallet til å dra prosessen videre? Om noen sitter på en komponent i sitt team, ta oss gjerne igjennom både design og kode i en show and tell på Designsystemforum.

Om det er vanskelig å lage noe gjenbrukbar kode gir det fortsatt verdi å dokumentere designet på https://jokul.fremtind.no Jeg hjelper gjerne med å publisere det, men selve innholdet må komme fra dere som har laget og bruker filopplasting.

joms commented 3 years ago

Jeg er usikker på hvor stort behov dette er lenger. Men sist jeg hørte noe var det SeOpp som ønsket seg dette. Jeg har startet på en headless upload hook fra et annet prosjekt også. Det kan antagelig være noe å hente der

gbrownlee commented 3 years ago

@SercanSercan, @BjorneOmaFremtind: Er denne noe dere kan hjelpe oss med? Vi ønsker å samle mønsteret og evt. komponent for opplasting av filer.

SercanSercan commented 3 years ago

Her er kode til SeOpp's FileUploader og FileList komponenter. FileUploader importerer FileList.

(intern versjonskontroll)/projects/SEOPP/repos/seopp-kunde-frontend/browse/src/Components/FileUploader (intern versjonskontroll)/projects/SEOPP/repos/seopp-kunde-frontend/browse/src/Components/FileList

FileUploader laster opp filer én etter én fordi vi hadde problemer da vi har lastet opp alle filer samtidig. I tillegg, viser det upload progress percentage. Samme komponent bruker fil extension validering.

wkillerud commented 2 years ago

SpareBank 1 sin, som vi kanskje kan la oss inspirere av om det ikke er noen store protester?

https://design.sparebank1.no/komponenter/skjemaelementer/#fileupload

fremtindelise commented 1 year ago

@Saegrov har jobbet på denne under Jøkul-uka og jobber med å ferdigstille kode.

onordbo commented 1 year ago

Vi nærmer oss et relativt komplett forslag på filopplaster. Prøv ut disse demo-flytene hvor komponentene er i bruk. Her er selve komponentene. Det gjenstår fortsatt å sette opp mobil/compact. Prototypene er bare et par av potensielt ørten eksempler på hvordan komponentene kan settes sammen, men de viser hvordan vi har tenkt mens vi lagde de forskjellige delene tilhørende states 😊

wkillerud commented 1 year ago

Har kommet et stykke på omstrukturering til å matche Figma-skissene, men ikke helt i mål. Pushet opp det nyeste til #3447