mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create UI module for common components

Browse source 
Create UI.elm to house components like `button`, which is a simple HTML button
with `focus:outline-none` applied as a `class`, which is an accessibility
feature that I don't need for this touch-screen application.

I like this pattern more than my more opinionated patterns for UI modules in Elm
where I'd define all of the arguments as a record type (i.e. kwargs).
This commit is contained in:
William Carroll 2020-10-11 10:15:03 +01:00
parent 106457de4b
commit 0a15ea7366
2 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
scratch/habit-screens/client/src/Habits.elm
View file

@ -7,6 +7,7 @@ import Html.Events exposing (..)
import Set
import State
import Time exposing (Weekday(..))
import UI
morning : List State.Habit
@ -154,7 +155,7 @@ render { today, visibleDayOfWeek, completed } =
div [ class "text-center w-full bg-blue-600 text-white fixed top-0 left-0 px-3 py-4" ]
[ p [ class "py-2 inline pr-5" ]
[ text "As you are not viewing today's habits, the UI is in read-only mode" ]
, button
, UI.button
[ class "bg-blue-200 px-4 py-2 rounded text-blue-600 text-xs font-bold"
, onClick State.ViewToday
]
@ -164,40 +165,40 @@ render { today, visibleDayOfWeek, completed } =
else
text ""
, div [ class "flex center" ]
[ button
[ UI.button
[ class "w-1/4 text-gray-500"
, onClick State.ViewPrevious
]
[ text "‹ previous" ]
, h1 [ class "font-bold text-gray-500 text-3xl text-center w-full" ]
[ text (weekdayName weekday) ]
, button
, UI.button
[ class "w-1/4 text-gray-500"
, onClick State.ViewNext
]
[ text "next ›" ]
]
]
, ul []
, ul [ class "pt-6" ]
(weekday
|> habitsFor
|> List.indexedMap
(\i x ->
li [ class "text-xl list-disc ml-6" ]
[ button
[ class "py-5 px-3"
, tailwind
[ ( "line-through", today == visibleDayOfWeek && Set.member i completed )
[ if today == visibleDayOfWeek then
UI.button
[ class "py-5 px-3"
, tailwind [ ( "line-through", Set.member i completed ) ]
, onClick (State.ToggleHabit i)
]
, onClick
(if today /= visibleDayOfWeek then
State.DoNothing
[ text x ]
else
State.ToggleHabit i
)
]
[ text x ]
else
UI.button
[ class "py-5 px-3 cursor-not-allowed"
, onClick State.DoNothing
]
[ text x ]
]
)
)

9
scratch/habit-screens/client/src/UI.elm Normal file
View file

@ -0,0 +1,9 @@
module UI exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
button : List (Attribute msg) -> List (Html msg) -> Html msg
button attrs children =
Html.button ([ class "focus:outline-none" ] ++ attrs) children