Merge pull request #105 from muhbaasu/flexbox

Add flexbox support.

clay.cabal

@@ -51,6 +51,7 @@ Library
     Clay.Display
     Clay.Elements
     Clay.Filter
+    Clay.Flexbox
     Clay.Font
     Clay.FontFace
     Clay.Geometry

src/Clay.hs

@@ -99,6 +99,7 @@ module Clay
 , module Clay.Box
 , module Clay.Display
 , module Clay.Dynamic
+, module Clay.Flexbox
 , module Clay.Font
 , module Clay.FontFace
 , module Clay.Geometry
@@ -140,6 +141,7 @@ import Clay.Time
 import Clay.Common
 import Clay.Display    hiding (table)
 import Clay.Dynamic
+import Clay.Flexbox    hiding (flex, nowrap, wrap)
 import Clay.Font       hiding (menu, caption, small, icon)
 import Clay.FontFace
 import Clay.Geometry

src/Clay/Common.hs

@@ -15,32 +15,36 @@ import Data.Monoid (Monoid, (<>))
 
 -------------------------------------------------------------------------------
 
-class All     a where all     :: a
-class Auto    a where auto    :: a
-class Inherit a where inherit :: a
-class None    a where none    :: a
-class Normal  a where normal  :: a
-class Visible a where visible :: a
-class Hidden  a where hidden  :: a
-class Initial a where initial :: a
-class Unset   a where unset   :: a
+class All      a where all      :: a
+class Auto     a where auto     :: a
+class Baseline a where baseline :: a
+class Center   a where center   :: a
+class Inherit  a where inherit  :: a
+class None     a where none     :: a
+class Normal   a where normal   :: a
+class Visible  a where visible  :: a
+class Hidden   a where hidden   :: a
+class Initial  a where initial  :: a
+class Unset    a where unset    :: a
 
 -- | The other type class is used to escape from the type safety introduced by
 -- embedding CSS properties into the typed world of Clay. `Other` allows you to
 -- cast any `Value` to a specific value type.
 
 class Other   a where other   :: Value -> a
 
-instance All     Value where all     = "all"
-instance Auto    Value where auto    = "auto"
-instance Inherit Value where inherit = "inherit"
-instance Normal  Value where normal  = "normal"
-instance None    Value where none    = "none"
-instance Visible Value where visible = "visible"
-instance Hidden  Value where hidden  = "hidden"
-instance Other   Value where other   = id
-instance Initial Value where initial = "initial"
-instance Unset   Value where unset   = "unset"
+instance All      Value where all      = "all"
+instance Auto     Value where auto     = "auto"
+instance Baseline Value where baseline = "baseline"
+instance Center   Value where center   = "center"
+instance Inherit  Value where inherit  = "inherit"
+instance Normal   Value where normal   = "normal"
+instance None     Value where none     = "none"
+instance Visible  Value where visible  = "visible"
+instance Hidden   Value where hidden   = "hidden"
+instance Other    Value where other    = id
+instance Initial  Value where initial  = "initial"
+instance Unset    Value where unset    = "unset"
 
 -------------------------------------------------------------------------------
 

src/Clay/Display.hs

@@ -65,13 +65,13 @@ module Clay.Display
 -- * Vertical align.
 
 , VerticalAlign(..)
-, baseline, middle, vAlignSub, vAlignSuper, textTop, textBottom, vAlignTop, vAlignBottom
+, middle, vAlignSub, vAlignSuper, textTop, textBottom, vAlignTop, vAlignBottom
 
 -- * Cursor
 
 , Cursor(..)
 , crosshair, cursorDefault, pointer, move, eResize, neResize, nwResize, nResize, seResize, swResize, sResize, wResize, cursorText, wait, cursorProgress, help, cursorUrl
-          
+
 )
 where
 
@@ -232,14 +232,13 @@ class (Val a) => VerticalAlign a where
     verticalAlign :: a -> Css
     verticalAlign = key "vertical-align"
 
-newtype VerticalAlignValue a = VerticalAlignValue Value deriving (Val)
+newtype VerticalAlignValue a = VerticalAlignValue Value deriving (Val, Baseline)
 
 instance VerticalAlign (VerticalAlignValue a)
 instance VerticalAlign (Size a)
 
-baseline,middle,vAlignSub,vAlignSuper,textTop,textBottom,vAlignTop,vAlignBottom :: VerticalAlignValue Value
+middle,vAlignSub,vAlignSuper,textTop,textBottom,vAlignTop,vAlignBottom :: VerticalAlignValue Value
 
-baseline = VerticalAlignValue "baseline"
 middle = VerticalAlignValue "middle"
 vAlignSub = VerticalAlignValue "sub"
 vAlignSuper = VerticalAlignValue "super"

src/Clay/Flexbox.hs

@@ -0,0 +1,118 @@
+{-# LANGUAGE FlexibleInstances, GeneralizedNewtypeDeriving, OverloadedStrings #-}
+module Clay.Flexbox where
+
+import Clay.Common     (Auto, Baseline, Center, Inherit, Other)
+import Clay.Property
+import Clay.Size       (Size)
+import Clay.Stylesheet
+import Data.String     (fromString)
+
+-- | CSS Flexible Box Layout
+-- http://dev.w3.org/csswg/css-flexbox-1
+
+class FlexEnd      a where flexEnd      :: a
+class FlexStart    a where flexStart    :: a
+class SpaceAround  a where spaceAround  :: a
+class SpaceBetween a where spaceBetween :: a
+class Stretch      a where stretch      :: a
+
+instance FlexEnd Value      where flexEnd      = "flex-end"
+instance FlexStart Value    where flexStart    = "flex-start"
+instance SpaceAround Value  where spaceAround  = "space-around"
+instance SpaceBetween Value where spaceBetween = "space-between"
+instance Stretch Value      where stretch      = "stretch"
+
+-------------------------------------------------------------------------------
+
+newtype AlignContentValue = AlignContentValue Value
+  deriving (Val, Other, Inherit, FlexStart, FlexEnd
+          , Center, SpaceBetween, SpaceAround, Stretch)
+
+alignContent :: AlignContentValue -> Css
+alignContent = key "align-content"
+
+-------------------------------------------------------------------------------
+
+newtype AlignItemsValue = AlignItemValue Value
+  deriving (Val, Other, Inherit, Baseline
+          , Center, FlexEnd, FlexStart, Stretch)
+
+alignItems :: AlignItemsValue -> Css
+alignItems = key "align-items"
+
+-------------------------------------------------------------------------------
+
+newtype AlignSelfValue = AlignSelfValue Value
+  deriving (Val, Other, Inherit, Auto, Baseline
+          , Center, FlexEnd, FlexStart, Stretch)
+
+alignSelf :: AlignSelfValue -> Css
+alignSelf = key "align-self"
+
+-------------------------------------------------------------------------------
+
+flex :: Int -> Int -> Size b -> Css
+flex g s b = key "flex" (gs ! ss ! value b)
+  where gs = fromString (show g) :: Value
+        ss = fromString (show s) :: Value
+
+-------------------------------------------------------------------------------
+
+flexBasis :: Size a -> Css
+flexBasis = key "flex-basis"
+
+-------------------------------------------------------------------------------
+
+newtype FlexDirection = FlexDirection Value
+  deriving (Val, Other)
+
+row, rowReverse, column, columnReverse :: FlexDirection
+
+row           = FlexDirection "row"
+rowReverse    = FlexDirection "row-reverse"
+column        = FlexDirection "column"
+columnReverse = FlexDirection "column-reverse"
+
+flexDirection :: FlexDirection -> Css
+flexDirection = key "flex-direction"
+
+-------------------------------------------------------------------------------
+
+flexFlow :: FlexDirection -> FlexWrap -> Css
+flexFlow d w = key "flex-flow" (d ! w)
+
+-------------------------------------------------------------------------------
+
+flexGrow :: Int -> Css
+flexGrow i = key "flex-grow" (fromString (show i) :: Value)
+
+flexShrink :: Int  -> Css
+flexShrink i = key "flex-shrink" (fromString (show i) :: Value)
+
+-------------------------------------------------------------------------------
+
+newtype FlexWrap = FlexWrap Value
+  deriving (Val, Other)
+
+nowrap, wrap, wrapReverse :: FlexWrap
+
+nowrap = FlexWrap "nowrap"
+wrap = FlexWrap "wrap"
+wrapReverse = FlexWrap "wrap-reverse"
+
+flexWrap :: FlexWrap -> Css
+flexWrap = key "flex-wrap"
+
+-------------------------------------------------------------------------------
+
+newtype JustifyContentValue = JustifyContentValue Value
+  deriving (Val, Other, Inherit, Center, FlexEnd
+          , FlexStart, SpaceAround, SpaceBetween)
+
+justifyContent :: JustifyContentValue -> Css
+justifyContent = key "justify-content"
+
+-------------------------------------------------------------------------------
+
+order :: Int -> Css
+order i = key "order" (fromString (show i) :: Value)

src/Clay/Text.hs

@@ -34,7 +34,7 @@ module Clay.Text
 
 , TextAlign
 , textAlign
-, justify, matchParent, start, end, center
+, justify, matchParent, start, end
 , alignSide
 , alignString
 
@@ -145,15 +145,14 @@ direction = key "direction"
 -------------------------------------------------------------------------------
 
 newtype TextAlign = TextAlign Value
-  deriving (Val, Normal, Inherit, Other)
+  deriving (Val, Normal, Inherit, Other, Center)
 
-justify, matchParent, start, end, center :: TextAlign
+justify, matchParent, start, end :: TextAlign
 
 justify     = TextAlign "justify"
 matchParent = TextAlign "match-parent"
 start       = TextAlign "start"
 end         = TextAlign "end"
-center      = TextAlign "center"
 
 alignSide :: Side -> TextAlign
 alignSide = TextAlign . value