threepenny-gui-flexbox (empty) → 0.2.0.0
raw patch · 7 files changed
+265/−0 lines, 7 filesdep +basedep +claydep +textsetup-changed
Dependencies added: base, clay, text, threepenny-gui, threepenny-gui-flexbox
Files
- LICENSE +30/−0
- README.org +46/−0
- Setup.hs +2/−0
- app/Main.hs +25/−0
- src/Graphics/UI/Threepenny/Ext/Flexbox.hs +119/−0
- src/Lib.hs +6/−0
- threepenny-gui-flexbox.cabal +37/−0
+ LICENSE view
@@ -0,0 +1,30 @@+Copyright Jeremy Barisch-Rooney (c) 2017++All rights reserved.++Redistribution and use in source and binary forms, with or without+modification, are permitted provided that the following conditions are met:++ * Redistributions of source code must retain the above copyright+ notice, this list of conditions and the following disclaimer.++ * Redistributions in binary form must reproduce the above+ copyright notice, this list of conditions and the following+ disclaimer in the documentation and/or other materials provided+ with the distribution.++ * Neither the name of Author name here nor the names of other+ contributors may be used to endorse or promote products derived+ from this software without specific prior written permission.++THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ README.org view
@@ -0,0 +1,46 @@+* Threepenny-gui Flexbox+ Flexbox layouts for Threepenny-gui.++ This library was written following the wonderful+ [[https://css-tricks.com/snippets/css/a-guide-to-flexbox][A Complete Guide to+ Flexbox]] and using the wonderful+ [[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.++ You can set a property by using the defaults and over-riding a speicific entry+ using record syntax:+ + #+BEGIN_SRC Haskell+ defaultChildProps { cFlexGrow = 2 }+ #+END_SRC+ + What you'll propbably use a lot is `flexbox`, which you provide with a parent+ element and properties, and a list of children elements and their respective+ properties.++ The example image above was produced with the below code. It attaches three+ ~div~ s with text "foo" to the ~body~ in the ratio 1:2:1. The example can be+ run with ~stack exec threepenny-flexbox-exe~.+ + #+BEGIN_SRC Haskell+ -- |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]++ -- |Example "foo" div and given flex-grow value.+ grow :: Int -> (UI Element, ChildProps)+ grow n = (foo, defaultChildProps { cFlexGrow = n })+ where foo = UI.div # set UI.text "foo"+ # set UI.style [("background-color", "#F89406"),+ ("margin", "8px")]+ #+END_SRC
+ Setup.hs view
@@ -0,0 +1,2 @@+import Distribution.Simple+main = defaultMain
+ app/Main.hs view
@@ -0,0 +1,25 @@+module Main where++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, cFlexGrow,+ defaultChildProps,+ defaultParentProps,+ flexbox)++main :: IO ()+main = startGUI defaultConfig example++-- |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]++-- |Example "foo" div and given flex-grow value.+grow :: Int -> (UI Element, ChildProps)+grow n = (foo, defaultChildProps { cFlexGrow = n })+ where foo = UI.div # set UI.text "foo"+ # set UI.style [("background-color", "#F89406"),+ ("margin", "8px")]+
+ src/Graphics/UI/Threepenny/Ext/Flexbox.hs view
@@ -0,0 +1,119 @@+module Graphics.UI.Threepenny.Ext.Flexbox (+ -- Core functions.+ ChildProps (..), ParentProps (..), defaultParentProps, defaultChildProps,+ flexbox,++ -- Helper functions.+ column, row+ ) where++import qualified Clay.Common as CC+import Clay.Display (Display)+import qualified Clay.Display as CD+import Clay.Flexbox (AlignContentValue,+ AlignItemsValue, AlignSelfValue,+ FlexDirection, FlexWrap,+ JustifyContentValue)+import qualified Clay.Flexbox as CF+import Clay.Property (unKeys, unPlain, unValue)+import Clay.Size (LengthUnit, Size)+import Clay.Stylesheet (Rule (Property), runS)+import Data.Text (unpack)+import qualified Graphics.UI.Threepenny as UI+import Graphics.UI.Threepenny.Core hiding (column, row)++-- |Convert to Threepenny style.+class ToStyle a where+ toStyle :: a -> [(String, String)]++-- |Convert a Clay Property to Threepnny style.+instance ToStyle Rule where+ toStyle (Property k v) =+ [(unpack $ unPlain $ unKeys k, unpack $ unPlain $ unValue v)]++-- |Properties for a parent.+data ParentProps = ParentProps {+ pDisplay :: Display+ , pFlexDirection :: FlexDirection+ , pFlexWrap :: FlexWrap+ , pJustifyContent :: JustifyContentValue+ , pAlignItems :: AlignItemsValue+ , pAlignContent :: AlignContentValue+}++-- |Convert parent properties to Threepenny style.+instance ToStyle ParentProps where+ toStyle p = concatMap toStyle $ concatMap runS [+ CD.display $ pDisplay p+ , CF.flexDirection $ pFlexDirection p+ , CF.flexWrap $ pFlexWrap p+ , CF.justifyContent $ pJustifyContent p+ , CF.alignItems $ pAlignItems p+ , CF.alignContent $ pAlignContent p+ ]++-- |Default properties for a parent.+defaultParentProps :: ParentProps+defaultParentProps = ParentProps {+ pDisplay = CD.flex+ , pFlexDirection = CF.row+ , pFlexWrap = CF.nowrap+ , pJustifyContent = CF.flexStart+ , pAlignItems = CF.stretch+ , pAlignContent = CF.stretch+}++-- |Properties for a child.+data ChildProps = ChildProps {+ cOrder :: Int+ , cFlexGrow :: Int+ , cFlexShrink :: Int+ , cFlexBasis :: Size LengthUnit+ , cAlignSelf :: AlignSelfValue+}++-- |Convert child properties to Threepenny style.+instance ToStyle ChildProps where+ toStyle c = concatMap toStyle $ concatMap runS [+ CF.order $ cOrder c+ , CF.flexGrow $ cFlexGrow c+ , CF.flexShrink $ cFlexShrink c+ , CF.flexBasis $ cFlexBasis c+ , CF.alignSelf $ cAlignSelf c+ ]++-- |Default properties for a child.+defaultChildProps :: ChildProps+defaultChildProps = ChildProps {+ cOrder = 1+ , cFlexGrow = 0+ , cFlexShrink = 1+ , cFlexBasis = CC.auto+ , cAlignSelf = CC.auto+}++-- |Set Flexbox properties on an element.+setProps :: ToStyle a => UI Element -> a -> UI Element+setProps el props = el # set UI.style (toStyle props)++-- |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+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++-- |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+
+ src/Lib.hs view
@@ -0,0 +1,6 @@+module Lib+ ( someFunc+ ) where++someFunc :: IO ()+someFunc = putStrLn "someFunc"
+ threepenny-gui-flexbox.cabal view
@@ -0,0 +1,37 @@+name: threepenny-gui-flexbox+version: 0.2.0.0+synopsis: Flexbox layouts for Threepenny-gui.+description: See the README at https://github.com/barischj/threepenny-gui-flexbox+homepage: https://github.com/barischj/threepenny-gui-flexbox+license: BSD3+license-file: LICENSE+author: Jeremy Barisch-Rooney+maintainer: barischj@tcd.ie+copyright: 2017 Jeremy Barisch-Rooney+category: Web+build-type: Simple+extra-source-files: README.org+cabal-version: >=1.10++library+ hs-source-dirs: src+ exposed-modules: Lib+ , Graphics.UI.Threepenny.Ext.Flexbox+ build-depends: base >= 4.7 && < 5+ , clay+ , text+ , threepenny-gui+ default-language: Haskell2010++executable threepenny-flexbox-exe+ hs-source-dirs: app+ main-is: Main.hs+ ghc-options: -threaded -rtsopts -with-rtsopts=-N+ build-depends: base+ , threepenny-gui+ , threepenny-gui-flexbox+ default-language: Haskell2010++source-repository head+ type: git+ location: https://github.com/barischj/threepenny-gui-flexbox