git.iko.soy/purestack-dev/purescript-plum
on master help sign in
borders
f3595e9iko
plum/src/Plum/View.purs+77
compare with master
unifiedsplit
@@ -2,6 +2,10 @@ module Plum.View
2 ( View
2 ( View
3 , Nerve(..)
3 , Nerve(..)
4 , Meat(..)
4 , Meat(..)
5+ , BorderStyle(..)
6+ , Corner(..)
7+ , Shadow(..)
8+ , ShadowCfg
5 , Side(..)
9 , Side(..)
6 , Bones(..)
10 , Bones(..)
7 , grow
11 , grow
@@ -39,6 +43,13 @@ module Plum.View
39 , pointer
43 , pointer
40 , move
44 , move
41 , clip
45 , clip
46+ , borders
47+ , border
48+ , borderStyle
49+ , roundAll
50+ , round
51+ , shadow
52+ , innerShadow
42 , onHover
53 , onHover
43 , onMouseDown
54 , onMouseDown
44 ) where
55 ) where
@@ -242,6 +253,27 @@ onHover (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { hover = meat } a
242onMouseDown :: forall ch msg. Monoid ch => GenericUI Unit msg Unit -> GenericUI ch msg Unit
253onMouseDown :: forall ch msg. Monoid ch => GenericUI Unit msg Unit -> GenericUI ch msg Unit
243onMouseDown (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { down = meat } a
254onMouseDown (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { down = meat } a
244
255
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+
245data Meat
277data Meat
246 = Spacing Int Int
278 = Spacing Int Int
247 | Explain
279 | Explain
@@ -256,6 +288,45 @@ data Meat
256 | Pointer
288 | Pointer
257 | Move { x :: Int, y :: Int }
289 | Move { x :: Int, y :: Int }
258 | Clip Direction
290 | 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"
259
330
260data Side = Top | Right | Bottom | Left
331data Side = Top | Right | Bottom | Left
261
332
@@ -353,6 +424,11 @@ skin ctx = case _ of
353 Move { x, y } -> sk ("move-" <> show x <> "-" <> show y) "transform" ("translate(" <> show x <> "px, " <> show y <> "px)")
424 Move { x, y } -> sk ("move-" <> show x <> "-" <> show y) "transform" ("translate(" <> show x <> "px, " <> show y <> "px)")
354 Clip X -> sk "clip-x" "overflow-x" "hidden"
425 Clip X -> sk "clip-x" "overflow-x" "hidden"
355 Clip Y -> sk "clip-y" "overflow-y" "hidden"
426 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")
356
432
357class Renderable x where
433class Renderable x where
358 render :: x -> String
434 render :: x -> String
@@ -523,3 +599,4 @@ grow fire v =
523 node /\ skinGrowth = runWriter (growSkin fire mempty v)
599 node /\ skinGrowth = runWriter (growSkin fire mempty v)
524 in
600 in
525 { node, style: styleSkinGrowth skinGrowth }
601 { node, style: styleSkinGrowth skinGrowth }
602+