Close all but "General" group by default It's overwhelming.

Changes

2 changed files (+16/-7)

• src/Parameters/App.elm
  • @@ -509,13 +509,19 @@
    type alias GroupProps msg = { title : List (Html.Html msg) , description : Maybe (List (Html.Html msg)) + , defaultOpen : Bool } group : GroupProps Msg -> List (Html.Html Msg) -> Html.Html Msg - group { title, description } children = + group { title, description, defaultOpen } children = node "x-field-group" - [] + [ if defaultOpen then + attribute "default-open" "" + + else + class "" + ] (span [ slot "title" ] title :: (description |> Maybe.map (span [ slot "description" ]) |> Maybe.withDefault (text "")) :: children
  • @@ -525,7 +531,7 @@
    view : Model -> List (Html.Html Msg) view model = [ group - { title = [ text "General" ], description = Nothing } + { title = [ text "General" ], description = Nothing, defaultOpen = True } [ numberField model { key = ShoulderWidth , title = [ text "Shoulder Width" ]
  • @@ -585,7 +591,7 @@ }
    ] , hr [] [] , group - { title = [ text "Buckle / Clasp" ], description = Nothing } + { title = [ text "Buckle / Clasp" ], description = Nothing, defaultOpen = False } [ numberField model { key = BuckleHoleDistance , title = [ text "Center Hole Distance" ]
  • @@ -626,7 +632,7 @@ }
    ] , hr [] [] , group - { title = [ text "Loops" ], description = Nothing } + { title = [ text "Loops" ], description = Nothing, defaultOpen = False } [ choiceField model { key = LoopStyle , title = [ text "Loop Style" ]
  • @@ -724,7 +730,7 @@ }
    ] , hr [] [] , group - { title = [ text "Rendering" ], description = Nothing } + { title = [ text "Rendering" ], description = Nothing, defaultOpen = False } [ numberField model { key = CanvasMargin , title = [ text "Print Margin" ]
• src/elements/x-field-group.js
  • @@ -62,7 +62,10 @@ body.appendChild(slot);
    } connectedCallback() { - this.setAttribute("opened", ""); + if (this.hasAttribute("default-open")) { + this.setAttribute("opened", ""); + } + this.#trigger.addEventListener("click", this.#onToggleClick); }