diff options
author | William Carroll <wpcarro@gmail.com> | 2020-04-19T17·36+0100 |
---|---|---|
committer | William Carroll <wpcarro@gmail.com> | 2020-04-19T17·36+0100 |
commit | 4a8f750ba8b7aa9663be2753cd6e25aa5e18d535 (patch) | |
tree | 9d9a2ef1c74501be3c9c55ddc2298b56d83a14fb /website/sandbox/learnpianochords/src/Preferences.elm | |
parent | 14f11823ff9b08d627460bee96964dc64ae22dff (diff) |
Restore support for whitelisted chord inversions
Allow users to include or exclude chord inversions.
Diffstat (limited to 'website/sandbox/learnpianochords/src/Preferences.elm')
-rw-r--r-- | website/sandbox/learnpianochords/src/Preferences.elm | 64 |
1 files changed, 29 insertions, 35 deletions
diff --git a/website/sandbox/learnpianochords/src/Preferences.elm b/website/sandbox/learnpianochords/src/Preferences.elm index 6594e6c52e71..59e6c8234c13 100644 --- a/website/sandbox/learnpianochords/src/Preferences.elm +++ b/website/sandbox/learnpianochords/src/Preferences.elm @@ -37,42 +37,35 @@ selectKey model { relativeMajor, relativeMinor } = ] -chordTypeCheckboxes : List Theory.ChordType -> Html State.Msg -chordTypeCheckboxes chordTypes = - ul [] - (Theory.allChordTypes - |> List.map - (\chordType -> - li [] - [ label [] [ text (Theory.chordTypeName chordType) ] - , input - [ type_ "checkbox" - , onClick (State.ToggleChordType chordType) - , checked (List.member chordType chordTypes) - ] - [] - ] - ) - ) - - -inversionCheckboxes : List Theory.ChordInversion -> Html State.Msg -inversionCheckboxes inversions = - ul [] - (Theory.allInversions - |> List.map - (\inversion -> - li [] - [ label [] [ text (Theory.inversionName inversion) ] - , input - [ type_ "checkbox" - , onClick (State.ToggleInversion inversion) - , checked (List.member inversion inversions) +inversionCheckboxes : State.Model -> Html State.Msg +inversionCheckboxes model = + div [] + [ h2 + [ [ "text-gray-500" + , "text-center" + , "pt-10" + , Responsive.h2 + ] + |> Tailwind.use + |> class + ] + [ text "Select inversions" ] + , ul + [ [ "flex", "justify-center" ] |> Tailwind.use |> class ] + (Theory.allInversions + |> List.map + (\inversion -> + li [] + [ UI.textToggleButton + { label = Theory.inversionName inversion + , handleClick = State.ToggleInversion inversion + , classes = [] + , toggled = List.member inversion model.whitelistedInversions + } ] - [] - ] - ) - ) + ) + ) + ] keyCheckboxes : State.Model -> Html State.Msg @@ -150,5 +143,6 @@ render model = { tempo = model.tempo , handleInput = State.SetTempo } + , inversionCheckboxes model , keyCheckboxes model ] |