mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-11-22 11:52:09 +03:00
restore nearby tests
This commit is contained in:
mdgriffith
parent
7ed3ecb935
commit
22cfba3908
@ -18,6 +18,28 @@ So, this means,
|
||||
-}
|
||||
element : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )
|
||||
element label attrs =
|
||||
-- [ ( label, paragraph attrs [ short ] )
|
||||
-- ]
|
||||
mapEveryCombo
|
||||
(\( selfLabel, makeSelf ) ( childLabel, child ) ->
|
||||
( label ++ " - " ++ selfLabel ++ " > " ++ childLabel
|
||||
, makeSelf attrs child
|
||||
)
|
||||
)
|
||||
layouts
|
||||
contents
|
||||
|
||||
|
||||
{-| Given a list of attributes, generate every context this list of attributes could be in.
|
||||
|
||||
So, this means,
|
||||
|
||||
- every element type
|
||||
- in every element type
|
||||
|
||||
-}
|
||||
elementInLayout : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )
|
||||
elementInLayout label attrs =
|
||||
-- [ ( label, paragraph attrs [ short ] )
|
||||
-- ]
|
||||
mapEveryCombo3
|
||||
@ -31,6 +53,40 @@ element label attrs =
|
||||
contents
|
||||
|
||||
|
||||
{-| Sometimes we want to try a whole bunch of combinations of attributes
|
||||
|
||||
This makes it a bit easier to construct
|
||||
|
||||
-}
|
||||
elementWith : String -> List ( String, List (Testable.Attr msg) ) -> List ( String, Testable.Element msg )
|
||||
elementWith label labelAttrs =
|
||||
mapEveryCombo3
|
||||
(\( attrLabel, attrs ) ( selfLabel, makeSelf ) ( childLabel, child ) ->
|
||||
( label ++ " - " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel
|
||||
, makeSelf attrs child
|
||||
)
|
||||
)
|
||||
labelAttrs
|
||||
layouts
|
||||
contents
|
||||
|
||||
|
||||
{-| This varies the layout element that an element is in.
|
||||
-}
|
||||
elementInLayoutWith : String -> List ( String, List (Testable.Attr msg) ) -> List ( String, Testable.Element msg )
|
||||
elementInLayoutWith label labelAttrs =
|
||||
mapEveryCombo4
|
||||
(\( attrLabel, attrs ) ( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->
|
||||
( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel
|
||||
, makeLayout [] (makeSelf attrs child)
|
||||
)
|
||||
)
|
||||
labelAttrs
|
||||
layouts
|
||||
layouts
|
||||
contents
|
||||
|
||||
|
||||
layouts =
|
||||
[ ( "el"
|
||||
, \attrs child ->
|
||||
@ -56,19 +112,30 @@ layouts =
|
||||
|
||||
|
||||
nearbys =
|
||||
[ inFront
|
||||
, above
|
||||
, onLeft
|
||||
, onRight
|
||||
, below
|
||||
, behindContent
|
||||
[ ( "inFront", inFront )
|
||||
, ( "above", above )
|
||||
, ( "onLeft", onLeft )
|
||||
, ( "onRight", onRight )
|
||||
, ( "below", below )
|
||||
, ( "behindContent", behindContent )
|
||||
]
|
||||
|
||||
|
||||
alignments =
|
||||
[ Tuple.pair "alignLeft" alignLeft
|
||||
, Tuple.pair "alignRight" alignRight
|
||||
, Tuple.pair "alignTop" alignTop
|
||||
, Tuple.pair "alignBottom" alignBottom
|
||||
, Tuple.pair "centerX" centerX
|
||||
, Tuple.pair "centerY" centerY
|
||||
]
|
||||
|
||||
|
||||
contents =
|
||||
[ ( "none", none )
|
||||
, ( "short text", text short )
|
||||
, ( "long text", text lorem )
|
||||
|
||||
-- , ( "long text", text lorem )
|
||||
, ( "box"
|
||||
, box
|
||||
)
|
||||
@ -121,6 +188,26 @@ mapEveryCombo3 fn listOne listTwo listThree =
|
||||
listOne
|
||||
|
||||
|
||||
mapEveryCombo4 fn listOne listTwo listThree listFour =
|
||||
List.concatMap
|
||||
(\one ->
|
||||
List.concatMap
|
||||
(\two ->
|
||||
List.concatMap
|
||||
(\three ->
|
||||
List.map
|
||||
(\four ->
|
||||
fn one two three four
|
||||
)
|
||||
listFour
|
||||
)
|
||||
listThree
|
||||
)
|
||||
listTwo
|
||||
)
|
||||
listOne
|
||||
|
||||
|
||||
sizes render =
|
||||
List.concatMap
|
||||
(\( widthLen, heightLen ) ->
|
||||
|
||||
@ -8,6 +8,7 @@ import Testable
|
||||
import Testable.Element exposing (..)
|
||||
import Testable.Element.Background as Background
|
||||
import Testable.Element.Font as Font
|
||||
import Testable.Generator
|
||||
import Testable.Runner
|
||||
import Tests.Palette as Palette exposing (..)
|
||||
|
||||
@ -57,365 +58,46 @@ p attrs =
|
||||
|
||||
|
||||
{-| -}
|
||||
main : Html.Html msg
|
||||
main =
|
||||
Testable.Runner.show view
|
||||
|
||||
|
||||
{-| -}
|
||||
view : Testable.Element msg
|
||||
view : List ( String, Testable.Element msg )
|
||||
view =
|
||||
let
|
||||
transparentBox attrs =
|
||||
el
|
||||
([ Font.color white
|
||||
, width (px 50)
|
||||
, height (px 50)
|
||||
, Background.color white
|
||||
]
|
||||
++ attrs
|
||||
List.concat
|
||||
[ [ Tuple.pair "Parent inFront above child inFront" layeredVisibility
|
||||
, Tuple.pair "Sibling onLeft above sibling inFront" overlappingChildren
|
||||
, Tuple.pair "el with all nearbys and alignments" master
|
||||
, Tuple.pair "paragraph with all nearbys and alignments" masterParagraph
|
||||
]
|
||||
, Testable.Generator.elementWith "Nearbys"
|
||||
(Testable.Generator.nearbys
|
||||
|> List.map
|
||||
(\( nearbyLabel, nearby ) ->
|
||||
Tuple.pair nearbyLabel
|
||||
[ nearby (box [])
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, Background.color red
|
||||
]
|
||||
)
|
||||
)
|
||||
, Testable.Generator.elementWith "Nearbys with alignment"
|
||||
(Testable.Generator.mapEveryCombo
|
||||
(\( nearbyLabel, nearby ) ( alignmentLabel, align ) ->
|
||||
Tuple.pair (nearbyLabel ++ " ++ " ++ alignmentLabel)
|
||||
[ nearby (box [ align ])
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, Background.color red
|
||||
]
|
||||
)
|
||||
(text "hi")
|
||||
Testable.Generator.nearbys
|
||||
Testable.Generator.alignments
|
||||
)
|
||||
|
||||
-- single location name box =
|
||||
-- row [ height (px 100), width fill, spacing 50 ]
|
||||
-- [ box
|
||||
-- [ location
|
||||
-- (el
|
||||
-- [ width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , Background.color darkCharcoal
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
-- ]
|
||||
-- , box
|
||||
-- [ location
|
||||
-- (el
|
||||
-- [ width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , alignLeft
|
||||
-- , Background.color darkCharcoal
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
-- ]
|
||||
-- ]
|
||||
little name attrs =
|
||||
el
|
||||
([ label name
|
||||
, width (px 5)
|
||||
, height (px 5)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
++ attrs
|
||||
)
|
||||
none
|
||||
|
||||
nearby location name render =
|
||||
column [ spacing 32, label "column" ]
|
||||
[ el [ padding 20, Background.color green, Font.color white ] (text name)
|
||||
, row [ height (px 100), width fill, spacing 50 ]
|
||||
[ render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignLeft
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerX
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignRight
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignTop
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerY
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignBottom
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
]
|
||||
, text "widths/heights"
|
||||
, row [ height (px 100), width fill, spacing 50, label "Row" ]
|
||||
[ render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width fill
|
||||
, height fill
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height fill
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ label "render"
|
||||
, location
|
||||
(el
|
||||
[ label name
|
||||
, width fill
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height shrink
|
||||
, Background.color darkCharcoal
|
||||
, Font.color white
|
||||
]
|
||||
(text "h-shrink")
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width shrink
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
, Font.color white
|
||||
]
|
||||
(text "w-shrink")
|
||||
)
|
||||
]
|
||||
]
|
||||
, text "on paragraph"
|
||||
, row [ width fill, spacing 50, label "Row" ]
|
||||
[ p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignLeft
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerX
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignRight
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignTop
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerY
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignBottom
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
master =
|
||||
el [ padding 20 ] <|
|
||||
box
|
||||
[ above (little "above-left" [ alignLeft ])
|
||||
, above (little "above-center" [ centerX ])
|
||||
, above (little "above-right" [ alignRight ])
|
||||
, below (little "below-left" [ alignLeft ])
|
||||
, below (little "below-center" [ centerX ])
|
||||
, below (little "below-right" [ alignRight ])
|
||||
, onRight (little "onRight-left" [ alignTop ])
|
||||
, onRight (little "onRight-center" [ centerY ])
|
||||
, onRight (little "onRight-right" [ alignBottom ])
|
||||
, onLeft (little "onLeft-left" [ alignTop ])
|
||||
, onLeft (little "onLeft-center" [ centerY ])
|
||||
, onLeft (little "onLeft-right" [ alignBottom ])
|
||||
, inFront (little "infront-left-top" [ alignTop, alignLeft ])
|
||||
, inFront (little "infront-center-top" [ alignTop, centerX ])
|
||||
, inFront (little "infront-right-top" [ alignTop, alignRight ])
|
||||
, inFront (little "infront-left-center" [ centerY, alignLeft ])
|
||||
, inFront (little "infront-center-center" [ centerY, centerX ])
|
||||
, inFront (little "infront-right-center" [ centerY, alignRight ])
|
||||
, inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
|
||||
, inFront (little "infront-center-bottom" [ alignBottom, centerX ])
|
||||
, inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
|
||||
]
|
||||
|
||||
masterParagraph =
|
||||
el [ padding 20 ] <|
|
||||
p
|
||||
[ above (little "above-left" [ alignLeft ])
|
||||
, above (little "above-center" [ centerX ])
|
||||
, above (little "above-right" [ alignRight ])
|
||||
, below (little "below-left" [ alignLeft ])
|
||||
, below (little "below-center" [ centerX ])
|
||||
, below (little "below-right" [ alignRight ])
|
||||
, onRight (little "onRight-left" [ alignTop ])
|
||||
, onRight (little "onRight-center" [ centerY ])
|
||||
, onRight (little "onRight-right" [ alignBottom ])
|
||||
, onLeft (little "onLeft-left" [ alignTop ])
|
||||
, onLeft (little "onLeft-center" [ centerY ])
|
||||
, onLeft (little "onLeft-right" [ alignBottom ])
|
||||
, inFront (little "infront-left-top" [ alignTop, alignLeft ])
|
||||
, inFront (little "infront-center-top" [ alignTop, centerX ])
|
||||
, inFront (little "infront-right-top" [ alignTop, alignRight ])
|
||||
, inFront (little "infront-left-center" [ centerY, alignLeft ])
|
||||
, inFront (little "infront-center-center" [ centerY, centerX ])
|
||||
, inFront (little "infront-right-center" [ centerY, alignRight ])
|
||||
, inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
|
||||
, inFront (little "infront-center-bottom" [ alignBottom, centerX ])
|
||||
, inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
|
||||
]
|
||||
in
|
||||
column
|
||||
[ centerX, label "Nearby Elements", spacing 100 ]
|
||||
[ layeredVisibility
|
||||
, overlappingChildren
|
||||
|
||||
-- Note: visibility checks like the above
|
||||
-- need to be at the top so they're in the viewport
|
||||
, master
|
||||
, masterParagraph
|
||||
, nearby above "above" box
|
||||
, nearby below "below" box
|
||||
, nearby inFront "inFront" box
|
||||
, nearby onRight "onRight" box
|
||||
, nearby onLeft "onLeft" box
|
||||
, nearby behindContent "behindContent" transparentBox
|
||||
-- , nearby above "above" box
|
||||
-- , nearby below "below" box
|
||||
-- , nearby inFront "inFront" box
|
||||
-- , nearby onRight "onRight" box
|
||||
-- , nearby onLeft "onLeft" box
|
||||
-- , nearby behindContent "behindContent" transparentBox
|
||||
]
|
||||
|
||||
|
||||
@ -436,3 +118,319 @@ overlappingChildren =
|
||||
, el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
|
||||
(justBox 40 darkGrey [])
|
||||
]
|
||||
|
||||
|
||||
little name attrs =
|
||||
el
|
||||
([ label name
|
||||
, width (px 5)
|
||||
, height (px 5)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
++ attrs
|
||||
)
|
||||
none
|
||||
|
||||
|
||||
transparentBox attrs =
|
||||
el
|
||||
([ Font.color white
|
||||
, width (px 50)
|
||||
, height (px 50)
|
||||
, Background.color white
|
||||
]
|
||||
++ attrs
|
||||
)
|
||||
(text "hi")
|
||||
|
||||
|
||||
master =
|
||||
el [ padding 20 ] <|
|
||||
box
|
||||
[ above (little "above-left" [ alignLeft ])
|
||||
, above (little "above-center" [ centerX ])
|
||||
, above (little "above-right" [ alignRight ])
|
||||
, below (little "below-left" [ alignLeft ])
|
||||
, below (little "below-center" [ centerX ])
|
||||
, below (little "below-right" [ alignRight ])
|
||||
, onRight (little "onRight-left" [ alignTop ])
|
||||
, onRight (little "onRight-center" [ centerY ])
|
||||
, onRight (little "onRight-right" [ alignBottom ])
|
||||
, onLeft (little "onLeft-left" [ alignTop ])
|
||||
, onLeft (little "onLeft-center" [ centerY ])
|
||||
, onLeft (little "onLeft-right" [ alignBottom ])
|
||||
, inFront (little "infront-left-top" [ alignTop, alignLeft ])
|
||||
, inFront (little "infront-center-top" [ alignTop, centerX ])
|
||||
, inFront (little "infront-right-top" [ alignTop, alignRight ])
|
||||
, inFront (little "infront-left-center" [ centerY, alignLeft ])
|
||||
, inFront (little "infront-center-center" [ centerY, centerX ])
|
||||
, inFront (little "infront-right-center" [ centerY, alignRight ])
|
||||
, inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
|
||||
, inFront (little "infront-center-bottom" [ alignBottom, centerX ])
|
||||
, inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
|
||||
]
|
||||
|
||||
|
||||
masterParagraph =
|
||||
el [ padding 20 ] <|
|
||||
p
|
||||
[ above (little "above-left" [ alignLeft ])
|
||||
, above (little "above-center" [ centerX ])
|
||||
, above (little "above-right" [ alignRight ])
|
||||
, below (little "below-left" [ alignLeft ])
|
||||
, below (little "below-center" [ centerX ])
|
||||
, below (little "below-right" [ alignRight ])
|
||||
, onRight (little "onRight-left" [ alignTop ])
|
||||
, onRight (little "onRight-center" [ centerY ])
|
||||
, onRight (little "onRight-right" [ alignBottom ])
|
||||
, onLeft (little "onLeft-left" [ alignTop ])
|
||||
, onLeft (little "onLeft-center" [ centerY ])
|
||||
, onLeft (little "onLeft-right" [ alignBottom ])
|
||||
, inFront (little "infront-left-top" [ alignTop, alignLeft ])
|
||||
, inFront (little "infront-center-top" [ alignTop, centerX ])
|
||||
, inFront (little "infront-right-top" [ alignTop, alignRight ])
|
||||
, inFront (little "infront-left-center" [ centerY, alignLeft ])
|
||||
, inFront (little "infront-center-center" [ centerY, centerX ])
|
||||
, inFront (little "infront-right-center" [ centerY, alignRight ])
|
||||
, inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
|
||||
, inFront (little "infront-center-bottom" [ alignBottom, centerX ])
|
||||
, inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
|
||||
]
|
||||
|
||||
|
||||
nearbyOld location name render =
|
||||
column [ spacing 32, label "column" ]
|
||||
[ el [ padding 20, Background.color green, Font.color white ] (text name)
|
||||
, row [ height (px 100), width fill, spacing 50 ]
|
||||
[ render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignLeft
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerX
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignRight
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignTop
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerY
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignBottom
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
]
|
||||
, text "widths/heights"
|
||||
, row [ height (px 100), width fill, spacing 50, label "Row" ]
|
||||
[ render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width fill
|
||||
, height fill
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height fill
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ label "render"
|
||||
, location
|
||||
(el
|
||||
[ label name
|
||||
, width fill
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height shrink
|
||||
, Background.color darkCharcoal
|
||||
, Font.color white
|
||||
]
|
||||
(text "h-shrink")
|
||||
)
|
||||
]
|
||||
, render
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width shrink
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
, Font.color white
|
||||
]
|
||||
(text "w-shrink")
|
||||
)
|
||||
]
|
||||
]
|
||||
, text "on paragraph"
|
||||
, row [ width fill, spacing 50, label "Row" ]
|
||||
[ p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignLeft
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerX
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignRight
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignTop
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, centerY
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
, p
|
||||
[ location
|
||||
(el
|
||||
[ label name
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
, alignBottom
|
||||
, Background.color darkCharcoal
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user