Make disabled field more distinguishable

Changes

2 changed files (+20/-5)

• src/Parameters/App.elm
  • @@ -325,13 +325,19 @@ , title : List (Html.Html msg)
    , description : List (Html.Html msg) , unit : Maybe String , attrs : List (Html.Attribute msg) + , disabled : Bool } numberField : Model -> NumberFieldProps Msg -> Html.Html Msg - numberField model { key, title, description, attrs, unit } = + numberField model { key, title, description, attrs, unit, disabled } = node "x-field" - [] + [ if disabled then + attribute "disabled" "" + + else + class "" + ] [ label [ for (Key.toString key), slot "title" ] title , p [ id (descriptionId key), slot "description" ]
  • @@ -344,6 +350,7 @@ :: value (model.fields |> Dict.get (Key.toString key) |> Maybe.withDefault "")
    :: onInput (FieldChanged key) :: ariaInvalid (not (Dict.get (Key.toString key) model.errors == Nothing)) :: ariaDescribedBy [ errorId key, descriptionId key ] + :: Html.Attributes.disabled disabled :: attrs ) []
  • @@ -433,6 +440,7 @@ [ text "This will be the final width of your strap. "
    , text "You can use a size smaller than your lug width to create a play." ] , unit = Just "mm" + , disabled = False , attrs = step "1.0" :: lengthFieldAttrs constraints.lugWidth } , numberField model
  • @@ -442,6 +450,7 @@ , description =
    [ text "Thickness of lining leather. Set to 0 to disable lining generation." ] , unit = Just "mm" + , disabled = False , attrs = step "0.1" :: lengthFieldAttrs constraints.lining } ]
  • @@ -453,6 +462,7 @@ { key = BuckleHoleCount
    , title = [ text "Hole Count" ] , description = [ text "Set 0 to disable buckle holes generation." ] , unit = Nothing + , disabled = False , attrs = step "1" :: intFieldAttrs constraints.longPiece.buckleHole.count } , numberField model
  • @@ -461,10 +471,9 @@ , title = [ text "Hole Diameter" ]
    , description = [ text "Diameter of buckle holes. You can leave the default value if you're going to use the center mark." ] , unit = Just "mm" + , disabled = model.parameters.longPiece.buckleHole.count == 0 , attrs = - step "1.0" - :: disabled (model.parameters.longPiece.buckleHole.count == 0) - :: lengthFieldAttrs constraints.longPiece.buckleHole.diameter + step "1.0" :: lengthFieldAttrs constraints.longPiece.buckleHole.diameter } ] , hr [] []
  • @@ -476,6 +485,7 @@ , title = [ text "Print Margin" ]
    , description = [ text "Lower values can cause printing problems depending on your printer." ] , unit = Just "mm" + , disabled = False , attrs = step "1.0" :: lengthFieldAttrs constraints.rendering.margin } , numberField model
  • @@ -484,6 +494,7 @@ , title = [ text "Line Width" ]
    , description = [ text "Stroke width (thickness) of the cutting lines and seam lines." ] , unit = Just "mm" + , disabled = False , attrs = step "0.1" :: lengthFieldAttrs constraints.rendering.lineWidth } , node "x-field"
• src/elements/x-field.css
  • @@ -14,6 +14,10 @@ flex-direction: column;
    gap: 0.1em; } + :host([disabled]) { + color: GrayText; + } + ::slotted([slot="title"]) { font-weight: bold; font-size: 0.9rem;