search

keboola / indigo-ui

Indigo UI library, its CSS and React components. Also Styleguide app showing usages of this library.
https://indigo.keboola.com
MIT License
5 stars 0 forks source link

mapping detail prototype #290

Closed janmichek closed 5 years ago

janmichek commented 5 years ago

fixes https://github.com/keboola/indigo-ui/issues/224

janmichek commented 5 years ago

@ujovlado @natocTo pripravil jsem story dle jackova navrhu. Mrknete prosim. Az si to tam odladime, muzu to jednoduse prebouchat do kbc

natocTo commented 5 years ago

Tady se řeší pouze CSS že? Proti tomu asi nic nemám. Nesedí mi tam to "story source", nebo nevidím tam ten řádek na který klikám. Ale je tam psané dummy, tak asi proto.

Bude potřeba si dávat pozor, že třeba v hlavičce tlačítka budou muset být ještě pod divem apod, aby byly u sebe vpravo. Nebo tlačítka odstranit apod aby neotvírali/nezavírali panel. Ale to by bylo jasné pak při použití.

PS: Závidím těm, který jednou budou začínat projekt a bude venku react-bootstrap postavený na bootstrapu 4, kde už se bude pracovat s flexboxem.

natocTo commented 5 years ago

Ještě nevím, zda už neřešit rovnou u nových věcí mobilní zobrazení. Pokud to bude brzo aktuální.

natocTo commented 5 years ago

Poslední ještě: flex-flow: row; jsem neznal (dohledal jsme si že to je zkratka pro flow-direction a flow-wrap). Takto použité to je asi to samé co flex-direction: row;. Což je default, tak by to tam být nemuselo, ale mě nevadí to uvést pro přehlednost.

janmichek commented 5 years ago

Jo, tady se resi css a zaroven jsem pridal story = dummy html prototyp. Je to UI element pro nas, ktery pak budeme napojovat. Drive se ui elementy rozkopirovavaly a propagovaly se chyby. Nektere jednodussi elementy jsou udelany jako komponenty - naplni se pres props. nektere slozitejsi (jako takhle) jsou slozeny -samozrejmne je tam vetsi prostor pro chyby.

"story source"

tomu moc nerozumim, pls explain. Nebo mam uvest lepsi description?

Bude potřeba si dávat pozor, že třeba v hlavičce tlačítka budou muset být ještě pod divem apod, aby byly u sebe vpravo.

Nemyslim si, ze bude potreba to mit jeste obaleny divem s .pull-right

Nepouzivame nejaktualnejsi verzi react-bootstrap v3. To muzem updatnout as s reactem v15. Btw react-bootstrap v4 uz je na svete .] https://reactstrap.github.io/

Ještě nevím, zda už neřešit rovnou u nových věcí mobilní zobrazení.

Vyhledove s tim pocitam, ale nedelal jsem responsivni zobrazeni. TOhle neni typicky vec co chces delat na mobilu. Z user feedbacku vyplynulo ze uzivatele na mobilu navstevuji Orchestrace, Joby, Storage.

flex-direction vs flex-flow - krome osobni preference k tomu nic nemam.

janmichek commented 5 years ago

To propagovani kliku na akce se bude muset poresit s implementaci.

natocTo commented 5 years ago

Nemyslim si, ze bude potreba to mit jeste obaleny divem s .pull-right

Takto jsem to nemyslel. Jakmile by tam bylo h2 třeba + button + button, tak jeden button bude vpravo a a ten první bude uprostřed (protože justify-content: space-between;). Tak proto ten div třeba. Ale to byla jen poznámka.

"story source"

Tady jsem jen myslel, že jsem v tom kódu pod tou "grafikou" nenašel samotný ten řádek na který klikám. Jako třeba ikonku koše apod.

janmichek commented 5 years ago

Takto jsem to nemyslel. Jakmile by tam bylo h2 třeba + button + button, tak jeden button bude vpravo a a ten první bude uprostřed (protože justify-content: space-between;). Tak proto ten div třeba. Ale to byla jen poznámka.

A vis, ze jo? kdyz neni vytvoreny mapping, pro prazdny stav tam je popisek. Ale udelam to trochu jinak. Dik za rejpnuti .] Udelam jeste story pro empty state.

natocTo commented 5 years ago

Tady asi OK. Jen mi hlásí console že u input mappingu máš "UL" pod tagem "P" (default FormControl.Static), tak to to chce předělat na div třeba. Ale to je detail.

janmichek commented 5 years ago

@natocTo yep, dik za check. Lepsi