threepenny-gui-flexbox 0.2.0.2 → 0.3

raw patch · 4 files changed

+49/−28 lines, 4 filesPVP ok

version bump matches the API change (PVP)

API changes (from Hackage documentation)

Files

• README.org +24/−7
• app/Main.hs +4/−4
• src/Graphics/UI/Threepenny/Ext/Flexbox.hs +20/−16
• threepenny-gui-flexbox.cabal +1/−1

@@ -1,4 +1,7 @@ * Threepenny-gui Flexbox [[https://travis-ci.org/barischj/threepenny-gui-flexbox.svg?branch=master]]+  [[https://img.shields.io/hackage/v/threepenny-gui-flexbox.svg]]+  [[https://www.stackage.org/package/threepenny-gui-flexbox/badge/nightly]]+   Flexbox layouts for Threepenny-gui.    This library was written following the wonderful@@ -7,23 +10,37 @@   [[https://hackage.haskell.org/package/clay][Clay]] library as a CSS DSL.     [[./example.png]]+ * Usage+   This library exposes the entire Flexbox API.    We collect the Flexbox properties that apply to the parent element, things   like ~flex-direction~, in a ~ParentProps~ data type. -  We collect the Flexbox properties that apply to the children elements, things-  like ~flex-grow~, in a ~ChildProps~ data type.+  We collect the Flexbox properties that apply to children elements, things like+  ~flex-grow~, in a ~ChildProps~ data type. -  You can set a property by using the defaults and over-riding a speicific entry+** Setting Properties++  You can set a property by using the defaults and over-riding a specific entry   using record syntax:   +  *Setting flex-grow: 2;*   #+BEGIN_SRC Haskell-  defaultChildProps { cFlexGrow = 2 }+  childProps { cFlexGrow = 2 }   #+END_SRC   -  What you'll propbably use a lot is `flexbox`, which you provide with a parent+  You can use the Clay CSS DSL to set values:+  +  *Setting display: inline-flex;*+  #+BEGIN_SRC Haskell+  parentProps { pDisplay = Clay.Flexbox.inlineFlex }+  #+END_SRC++** Example++  What you'll propbably use a lot is ~flexbox~, which you pass a parent   element and properties, and a list of children elements and their respective   properties. @@ -35,11 +52,11 @@   -- |Example of three divs using a flex-grow ratio of 1:2:1.   example :: Window -> UI ()   example w = void $-    flexbox (getBody w) defaultParentProps $ [grow 1, grow 2, grow 1]+    flexbox (getBody w) parentProps $ [grow 1, grow 2, grow 1]    -- |Example "foo" div and given flex-grow value.   grow :: Int -> (UI Element, ChildProps)-  grow n = (foo, defaultChildProps { cFlexGrow = n })+  grow n = (foo, childProps { cFlexGrow = n })     where foo = UI.div # set UI.text "foo"                        # set UI.style [("background-color", "#F89406"),                                        ("margin", "8px")]

@@ -4,8 +4,8 @@ import qualified Graphics.UI.Threepenny             as UI import           Graphics.UI.Threepenny.Core        hiding (row) import           Graphics.UI.Threepenny.Ext.Flexbox (ChildProps, cFlexGrow,-                                                     defaultChildProps,-                                                     defaultParentProps,+                                                     childProps,+                                                     parentProps,                                                      flexbox)  main :: IO ()@@ -14,11 +14,11 @@ -- |Example of three divs using a flex-grow ratio of 1:2:1. example :: Window -> UI () example w = void $-    flexbox (getBody w) defaultParentProps $ [grow 1, grow 2, grow 1]+    flexbox (getBody w) parentProps $ [grow 1, grow 2, grow 1]  -- |Example "foo" div and given flex-grow value. grow :: Int -> (UI Element, ChildProps)-grow n = (foo, defaultChildProps { cFlexGrow = n })+grow n = (foo, childProps { cFlexGrow = n })   where foo = UI.div # set UI.text "foo"                      # set UI.style [("background-color", "#F89406"),                                      ("margin", "8px")]

@@ -1,9 +1,14 @@ module Graphics.UI.Threepenny.Ext.Flexbox (-  -- Core functions.-  ChildProps (..), ParentProps (..), defaultParentProps, defaultChildProps,-  flexbox,+  -- * Parent Properties+  ParentProps (..), parentProps, -  -- Helper functions.+  -- * Child Properties+  ChildProps (..), childProps,++  -- * Core Functions+  flexbox, setProps, toStyle,++  -- * Helper functions   column, row   ) where @@ -53,8 +58,8 @@     ]  -- |Default properties for a parent.-defaultParentProps :: ParentProps-defaultParentProps = ParentProps {+parentProps :: ParentProps+parentProps = ParentProps {     pDisplay        = CD.flex   , pFlexDirection  = CF.row   , pFlexWrap       = CF.nowrap@@ -83,8 +88,8 @@     ]  -- |Default properties for a child.-defaultChildProps :: ChildProps-defaultChildProps = ChildProps {+childProps :: ChildProps+childProps = ChildProps {     cOrder      = 1   , cFlexGrow   = 0   , cFlexShrink = 1@@ -98,22 +103,21 @@  -- |Attach elements to a parent element, with given Flexbox properties applied. flexbox ::-     UI Element -> ParentProps  -- Parent and its Flexbox properties-  -> [(UI Element, ChildProps)] -- Children and respective Flexbox properties-  -> UI Element                 -- Parent with attached children+     UI Element                 -- ^ Parent+  -> ParentProps                -- ^ Parent Flexbox properties+  -> [(UI Element, ChildProps)] -- ^ Children and respective Flexbox properties+  -> UI Element                 -- ^ Parent with attached children flexbox p pProps cs = do   p'  <- setProps p pProps   cs' <- mapM (uncurry setProps) cs   element p' #+ map element cs' --- Helper functions ------------------------------------------------------------- -- |Attach elements to a parent element with flex-direction column. column :: UI Element -> [UI Element] -> UI Element-column p cs = flexbox p defaultParentProps { pFlexDirection = CF.column } $-  zip cs $ repeat defaultChildProps+column p cs = flexbox p parentProps { pFlexDirection = CF.column } $+  zip cs $ repeat childProps  -- |Attach elements to a parent element with default Flexbox properties. row :: UI Element -> [UI Element] -> UI Element-row p cs = flexbox p defaultParentProps $ zip cs $ repeat defaultChildProps+row p cs = flexbox p parentProps $ zip cs $ repeat childProps 

@@ -1,5 +1,5 @@ name:                threepenny-gui-flexbox-version:             0.2.0.2+version:             0.3 synopsis:            Flexbox layouts for Threepenny-gui. description:         See the homepage homepage:            https://github.com/barischj/threepenny-gui-flexbox