threepenny-gui-flexbox 0.4.0.2 → 0.4.1

raw patch · 5 files changed

+71/−40 lines, 5 filesPVP: major bump suggested

API removals or changes: PVP suggests a major version bump

API changes (from Hackage documentation)

Files

• LICENSE +1/−1
• README.md +29/−15
• app/Main.hs +21/−11
• src/Graphics/UI/Threepenny/Ext/Flexbox.hs +17/−10
• threepenny-gui-flexbox.cabal +3/−3

@@ -1,4 +1,4 @@-Copyright Jeremy Barisch-Rooney (c) 2017+Copyright Jeremy Barisch Rooney (c) 2017  All rights reserved. 

@@ -76,23 +76,37 @@  ### 'flex' -We provide a utility function `flex` which takes both parent and child elements-and their respective `ParentProps` and `ChildProps`, applies the respective-properties and then returns the parent element with children attached. We also-provide variants of this function which use default properties for parent or-children. Below is a full example demonstrating this, which produced the image-above.-  +We provide a utility function `flex` (and a few variants thereof) which takes+both parent and child elements and their respective `ParentProps` and+`ChildProps`, applies the properties to the respective elements and then returns+the parent element with children attached.++Here is a full example, which produces the above image of three orange text+boxes in ratio 1:2:1. First done without `flex_p` and then with `flex_p`.+`flex_p` is a variant of `flex` which applies default Flexbox properties to the+parent element.+ ``` Haskell--- |Example of three divs using a flex-grow ratio of 1:2:1.+-- |Example without 'flex_p'. example :: Window -> UI () example w = void $-  flex_p (getBody w) $ [grow 1, grow 2, grow 1]+  getBody w # setFlex parentProps #+ [+      foo # setFlex (flexGrow 1)+    , foo # setFlex (flexGrow 2)+    , foo # setFlex (flexGrow 1)+    ] --- |Example "foo" div and given flex-grow value.-grow :: Int -> (UI Element, ChildProps)-grow n = (foo, flexGrow n)-  where foo = UI.div # set UI.text "foo"-                     # set UI.style [("background-color", "#F89406"),-                                     ("margin", "8px")]+-- |Example with 'flex_p'.+example' :: Window -> UI ()+example' w = void $+  flex_p (getBody w) [+      (foo, flexGrow 1)+    , (foo, flexGrow 2)+    , (foo, flexGrow 1)+    ]++-- | Simple coloured 'div'.+foo = UI.div # set UI.text "foo"+             # set UI.style [("background-color", "#F89406"),+                             ("margin", "8px")] ```

@@ -3,20 +3,30 @@ import           Control.Monad                      (void) import qualified Graphics.UI.Threepenny             as UI import           Graphics.UI.Threepenny.Core        hiding (row)-import           Graphics.UI.Threepenny.Ext.Flexbox (ChildProps, flexGrow,-                                                     flex_p)+import           Graphics.UI.Threepenny.Ext.Flexbox  main :: IO ()-main = startGUI defaultConfig example+main = startGUI defaultConfig example' --- |Example of three divs using a flex-grow ratio of 1:2:1.+-- |Example without 'flex_p'. example :: Window -> UI () example w = void $-  flex_p (getBody w) $ [grow 1, grow 2, grow 1]+  getBody w # setFlex parentProps #+ [+      foo # setFlex (flexGrow 1)+    , foo # setFlex (flexGrow 2)+    , foo # setFlex (flexGrow 1)+    ] --- |Example "foo" div and given flex-grow value.-grow :: Int -> (UI Element, ChildProps)-grow n = (foo, flexGrow n)-  where foo = UI.div # set UI.text "foo"-                     # set UI.style [("background-color", "#F89406"),-                                     ("margin", "8px")]+-- |Example with 'flex_p'.+example' :: Window -> UI ()+example' w = void $+  flex_p (getBody w) [+      (foo, flexGrow 1)+    , (foo, flexGrow 2)+    , (foo, flexGrow 1)+    ]++-- | Simple coloured 'div'.+foo = UI.div # set UI.text "foo"+             # set UI.style [("background-color", "#F89406"),+                             ("margin", "8px")]

@@ -1,18 +1,25 @@ module Graphics.UI.Threepenny.Ext.Flexbox (   -- * Parent Properties-  ParentProps (..), parentProps,+  ParentProps (..), -  -- ** Parent Property Helpers+  -- ** Parent Property Constructors+  parentProps,+   display, flexDirection, flexWrap, justifyContent, alignItems, aligContent,- +   -- * Child Properties-  ChildProps (..), childProps,+  ChildProps (..), -  -- ** Child Property Helpers+  -- ** Child Property Constructors+  childProps,+   order, flexGrow, flexShrink, flexBasis, alignSelf,    -- * Core Functions-  ToStyle (..), setProps, flex, flex_p, flex_c, flex_pc +  ToStyle (..), setFlex,++  -- * Useful Abstractions+  flex, flex_p, flex_c, flex_pc   ) where  import qualified Clay.Common                 as CC@@ -114,8 +121,8 @@ alignSelf  x = childProps { cAlignSelf  = x }  -- |Set Flexbox properties on an element.-setProps :: ToStyle a => a -> UI Element -> UI Element-setProps props el = el # set UI.style (toStyle props)+setFlex :: ToStyle a => a -> UI Element -> UI Element+setFlex props el = el # set UI.style (toStyle props)  -- |Attach elements to a parent element, applying given Flexbox properties. flex ::@@ -124,8 +131,8 @@   -> [(UI Element, ChildProps)] -- ^ Children and respective Flexbox properties   -> UI Element                 -- ^ Parent with attached children flex p pProps cs = do-  p'  <- p # setProps pProps-  cs' <- mapM (\(c, cProps) -> c # setProps cProps) cs+  p'  <- p # setFlex pProps+  cs' <- mapM (\(c, cProps) -> c # setFlex cProps) cs   element p' #+ map element cs'  -- |Like 'flex' but apply default properties to the parent.

@@ -1,12 +1,12 @@ name:                threepenny-gui-flexbox-version:             0.4.0.2+version:             0.4.1 synopsis:            Flexbox layouts for Threepenny-gui. homepage:            https://github.com/barischj/threepenny-gui-flexbox license:             BSD3 license-file:        LICENSE-author:              Jeremy Barisch-Rooney+author:              Jeremy Barisch Rooney maintainer:          barischj@tcd.ie-copyright:           2017 Jeremy Barisch-Rooney+copyright:           2017 Jeremy Barisch Rooney category:            Web build-type:          Simple extra-source-files:  README.md