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

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

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