diff --git a/LICENSE b/LICENSE new file mode 100644 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.org b/README.org new file mode 100644 --- /dev/null +++ b/README.org @@ -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 diff --git a/Setup.hs b/Setup.hs new file mode 100644 --- /dev/null +++ b/Setup.hs @@ -0,0 +1,2 @@ +import Distribution.Simple +main = defaultMain diff --git a/app/Main.hs b/app/Main.hs new file mode 100644 --- /dev/null +++ b/app/Main.hs @@ -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")] + diff --git a/src/Graphics/UI/Threepenny/Ext/Flexbox.hs b/src/Graphics/UI/Threepenny/Ext/Flexbox.hs new file mode 100644 --- /dev/null +++ b/src/Graphics/UI/Threepenny/Ext/Flexbox.hs @@ -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 + diff --git a/src/Lib.hs b/src/Lib.hs new file mode 100644 --- /dev/null +++ b/src/Lib.hs @@ -0,0 +1,6 @@ +module Lib + ( someFunc + ) where + +someFunc :: IO () +someFunc = putStrLn "someFunc" diff --git a/threepenny-gui-flexbox.cabal b/threepenny-gui-flexbox.cabal new file mode 100644 --- /dev/null +++ b/threepenny-gui-flexbox.cabal @@ -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