These are chat archives for japgolly/scalacss

7th
Apr 2015
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:15
@japgolly scalacss adaptor for scalajs-react-native https://github.com/chandu0101/scalajs-react-native ? :P
David Barri
@japgolly
Apr 07 2015 06:18
@chandu0101 Sure! We can include in the 0.2.0 release coming at the end of the week.
I don't a mac though. I don't even know what it needs - would you be able to submit a PR actually?
The ext modules are very tiny.
Like 20 LoC or so.
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:20
:o i have no idea about scalacss internals :s
David Barri
@japgolly
Apr 07 2015 06:21
I have no idea about scalajs-react-native
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:22
haha :p
David Barri
@japgolly
Apr 07 2015 06:22
Don't worry man, it's super easy. Just look at the existing ext modules
It's quite simple - you'll figure it out immediately :+1:
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:25
without going to details , if i define stylesheet and while accessing them in components we should convert them as js.Object instead of class names - how much works its going to be ?
and we should allow only part of css properties
David Barri
@japgolly
Apr 07 2015 06:26
That will be pretty easy, not much work.
You're talking about a function of scalacss.Css ⇒ js.Object
This message was deleted
The relevant data types are all here: scalacss/package.scala
And you can use Css ⇒ String from scalacss/Renderer.scala
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:33
cool ok thanks for info , i’ll see what i can do :)
David Barri
@japgolly
Apr 07 2015 06:33
Although you wouldn't need Css ⇒ String come to think of it... will you have js.Object of attributes to js.Object of key - values?
like map[string, map[string, string]]?
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:34
here is an example

  val styles = ReactNative.StyleSheet.create(
    json(
      textContainer = json(
        flex = 1
      ),
      movieTitle = json(
        flex = 1,
        fontSize = 16,
        fontWeight = "500",
        marginBottom = 2
      ),
      movieYear = json(
        color = "#999999",
        fontSize = 12
      ),
      row = json(
        alignItems = "center",
        backgroundColor = "white",
        flexDirection = "row",
        padding = 5
      ),
      cellImage = json(
        backgroundColor = "#dddddd",
        height = 93,
        marginRight = 10,
        width = 60
      ),
      cellBorder = json(
        backgroundColor = "rgba(0, 0, 0, 0.1)",
        // Trick to get the thinest line the device can display
        height = 1 / ReactNative.PixelRatio.get(),
        marginLeft = 4
      )
    )
  )
json = js.Dynamic.literal
usage : View(style = styles.cellBorder)
David Barri
@japgolly
Apr 07 2015 06:36
Ok, you'll find it easy to generate that. scalacss.Css is basically just a nested bunch of CssKV which already contains the css you need.
  /**
   * A CSS attribute and its corresponding value.
   *
   * Example: `CssKV("margin-bottom", "12px")`
   */
  final case class CssKV(key: String, value: String)
Notice, it's all just String s at the end.
If you're wondering how to get a Css from your stylesheets, I'll add a nice convenience method #29 but for now, you just call val css = Css(MyStyleSheet.register.styles)
Chandra Sekhar Kode
@chandu0101
Apr 07 2015 06:40
i barley understand anything here , i’ll give a try after lunch :)
David Barri
@japgolly
Apr 07 2015 06:40
Hehe, don't worry, when you look at the types, starting at Css it will all be very clear.