@@ -2,6 +2,10 @@ module Plum.View
22 ( View
33 , Nerve(..)
44 , Meat(..)
5+ , BorderStyle(..)
6+ , Corner(..)
7+ , Shadow(..)
8+ , ShadowCfg
59 , Side(..)
610 , Bones(..)
711 , grow
@@ -39,6 +43,13 @@ module Plum.View
3943 , pointer
4044 , move
4145 , clip
46+ , borders
47+ , border
48+ , borderStyle
49+ , roundAll
50+ , round
51+ , shadow
52+ , innerShadow
4253 , onHover
4354 , onMouseDown
4455 ) where
@@ -242,6 +253,27 @@ onHover (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { hover = meat } a
242253onMouseDown :: forall ch msg. Monoid ch => GenericUI Unit msg Unit -> GenericUI ch msg Unit
243254onMouseDown (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { down = meat } a
244255
256+borders :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
257+borders l = Array.foldMap (\s -> m $ BorderWidth s l) [ Top, Right, Bottom, Left ]
258+
259+border :: forall ch msg. Monoid ch => Side -> Int -> GenericUI ch msg Unit
260+border s l = m $ BorderWidth s l
261+
262+borderStyle :: forall ch msg. Monoid ch => BorderStyle -> GenericUI ch msg Unit
263+borderStyle s = m $ BorderStyle s
264+
265+roundAll :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
266+roundAll l = Array.foldMap (\c -> m $ Round c l) [ TopLeft, TopRight, BottomRight, BottomLeft ]
267+
268+round :: forall ch msg. Monoid ch => Corner -> Int -> GenericUI ch msg Unit
269+round c l = m $ Round c l
270+
271+shadow :: forall ch msg. Monoid ch => ShadowCfg -> GenericUI ch msg Unit
272+shadow cfg = m $ Shadow $ ShadowCfg cfg
273+
274+innerShadow :: forall ch msg. Monoid ch => ShadowCfg -> GenericUI ch msg Unit
275+innerShadow cfg = m $ InnerShadow $ ShadowCfg cfg
276+
245277data Meat
246278 = Spacing Int Int
247279 | Explain
@@ -256,6 +288,45 @@ data Meat
256288 | Pointer
257289 | Move { x :: Int, y :: Int }
258290 | Clip Direction
291+ | BorderWidth Side Int
292+ | BorderStyle BorderStyle
293+ | Round Corner Int
294+ | Shadow Shadow
295+ | InnerShadow Shadow
296+
297+type ShadowCfg = { offset :: { x :: Int, y :: Int }, size :: Number, blur :: Number, color :: Color }
298+
299+newtype Shadow = ShadowCfg ShadowCfg
300+
301+instance Renderable Shadow where
302+ render (ShadowCfg s) = show s.offset.x <> "px " <> show s.offset.y <> "px " <> show s.blur <> "px " <> show s.size <> "px " <> render s.color
303+ renderKey (ShadowCfg s) = show s.offset.x <> "-" <> show s.offset.y <> "-" <> show s.blur <> "-" <> show s.size <> "-" <> renderKey s.color
304+
305+data Corner = TopLeft | TopRight | BottomRight | BottomLeft
306+
307+instance Renderable Corner where
308+ render = case _ of
309+ TopLeft -> "top-left"
310+ TopRight -> "top-right"
311+ BottomRight -> "bottom-right"
312+ BottomLeft -> "bottom-left"
313+ renderKey = case _ of
314+ TopLeft -> "top-left"
315+ TopRight -> "top-right"
316+ BottomRight -> "bottom-right"
317+ BottomLeft -> "bottom-left"
318+
319+data BorderStyle = Solid | Dashed | Dotted
320+
321+instance Renderable BorderStyle where
322+ render = case _ of
323+ Solid -> "solid"
324+ Dashed -> "dashed"
325+ Dotted -> "dotted"
326+ renderKey = case _ of
327+ Solid -> "solid"
328+ Dashed -> "dashed"
329+ Dotted -> "dotted"
259330
260331data Side = Top | Right | Bottom | Left
261332
@@ -353,6 +424,11 @@ skin ctx = case _ of
353424 Move { x, y } -> sk ("move-" <> show x <> "-" <> show y) "transform" ("translate(" <> show x <> "px, " <> show y <> "px)")
354425 Clip X -> sk "clip-x" "overflow-x" "hidden"
355426 Clip Y -> sk "clip-y" "overflow-y" "hidden"
427+ BorderWidth side l -> sk ("border-width-" <> renderKey side <> "-" <> show l) ("border-" <> render side <> "-width") (show l <> "px")
428+ BorderStyle s -> sk ("border-style-" <> renderKey s) "border-style" (render s)
429+ Round corner l -> sk ("round-" <> renderKey corner <> "-" <> show l) ("border-" <> render corner <> "-radius") (show l <> "px")
430+ Shadow s -> sk ("shadow-" <> renderKey s) "box-shadow" (render s)
431+ InnerShadow s -> sk ("inner-shadow-" <> renderKey s) "box-shadow" (render s <> " inset")
356432
357433class Renderable x where
358434 render :: x -> String
@@ -523,3 +599,4 @@ grow fire v =
523599 node /\ skinGrowth = runWriter (growSkin fire mempty v)
524600 in
525601 { node, style: styleSkinGrowth skinGrowth }
602+