Create Tailwind module

Moving the UI.tw function into Tailwind.use. Creating and consuming some
functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally
style some of my components.
This commit is contained in:
William Carroll 2020-04-19 13:40:18 +01:00
parent 7b2163d804
commit f92fe97aff
5 changed files with 49 additions and 27 deletions

View file

@ -5,6 +5,7 @@ import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import State
import Tailwind
import UI
@ -16,7 +17,7 @@ header1 copy =
, "pb-12"
, Responsive.h1
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -29,7 +30,7 @@ header2 copy =
, "pb-10"
, Responsive.h2
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -41,7 +42,7 @@ paragraph copy =
[ [ "pb-10"
, Responsive.h3
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -59,15 +60,15 @@ numberedList items =
, "list-decimal"
, Responsive.h3
]
|> UI.tw
|> Tailwind.use
|> class
]
(items |> List.map (\x -> li [ [ "pb-10" ] |> UI.tw |> class ] [ text x ]))
(items |> List.map (\x -> li [ [ "pb-10" ] |> Tailwind.use |> class ] [ text x ]))
render : State.Model -> Html State.Msg
render model =
div [ [ "container", "mx-auto" ] |> UI.tw |> class ]
div [ [ "container", "mx-auto" ] |> Tailwind.use |> class ]
[ header1 "Welcome to LearnPianoChords.app!"
, paragraph """
Learn Piano Chords helps piano players master chords.
@ -110,7 +111,7 @@ render model =
"""
]
]
, div [ [ "text-center", "py-20" ] |> UI.tw |> class ]
, div [ [ "text-center", "py-20" ] |> Tailwind.use |> class ]
[ UI.simpleButton
{ label = "Let's get started"
, handleClick = State.SetView State.Preferences

View file

@ -6,6 +6,7 @@ import Html.Events exposing (..)
import Icon
import Responsive
import State
import Tailwind
import Tempo
import Theory
import UI
@ -105,7 +106,7 @@ keyCheckboxes model =
, "pt-10"
, Responsive.h2
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text "Select keys" ]
@ -134,7 +135,7 @@ closePreferences =
, "top-0"
, "z-10"
]
|> UI.tw
|> Tailwind.use
|> class
, onClick (State.SetView State.Practice)
]

View file

@ -0,0 +1,29 @@
module Tailwind exposing (..)
{-| Functions to make Tailwind development in Elm even more pleasant.
-}
{-| Conditionally use `class` selection when `condition` is true.
-}
when : Bool -> String -> String
when condition class =
if condition then
class
else
""
if_ : Bool -> String -> String -> String
if_ condition whenTrue whenFalse =
if condition then
whenTrue
else
whenFalse
use : List String -> String
use styles =
String.join " " styles

View file

@ -4,6 +4,7 @@ import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import Tailwind
import UI
@ -20,7 +21,7 @@ render { tempo, handleInput } =
[ [ "py-10"
, Responsive.h2
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text (String.fromInt tempo ++ " BPM") ]

View file

@ -4,6 +4,7 @@ import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import Tailwind
type Color
@ -31,11 +32,6 @@ textForColor color =
"text-black"
tw : List String -> String
tw styles =
String.join " " styles
simpleButton :
{ label : String
, handleClick : msg
@ -57,7 +53,7 @@ simpleButton { label, handleClick, color, classes } =
]
in
button
[ class (tw <| List.concat [ buttonClasses, classes ])
[ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
, onClick handleClick
]
[ text label ]
@ -90,7 +86,7 @@ textToggleButton { label, toggled, handleClick, classes } =
]
in
button
[ class (tw <| List.concat [ buttonClasses, classes ])
[ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
, onClick handleClick
]
[ text label ]
@ -116,7 +112,7 @@ textField { placeholderText, handleInput, classes } =
]
in
input
[ class (tw <| List.concat [ inputClasses, classes ])
[ class (Tailwind.use <| List.concat [ inputClasses, classes ])
, onInput handleInput
, placeholder placeholderText
]
@ -139,17 +135,11 @@ overlayButton { label, handleClick, isVisible } =
, "z-30"
, "w-screen"
, "h-screen"
, Tailwind.if_ isVisible "opacity-100" "opacity-0"
]
extraClasses =
if isVisible then
[ "opacity-100" ]
else
[ "opacity-0" ]
in
button
[ List.concat [ classes, extraClasses ] |> tw |> class
[ classes |> Tailwind.use |> class
, style "background-color" "rgba(0,0,0,0.30)"
, onClick handleClick
]
@ -157,7 +147,7 @@ overlayButton { label, handleClick, isVisible } =
[ style "-webkit-text-stroke-width" "2px"
, style "-webkit-text-stroke-color" "black"
, class <|
tw
Tailwind.use
[ "transform"
, "-rotate-90"
, "text-white"