diff --git a/example/src/Main.elm b/example/src/Main.elm index 325135d..8d7df21 100644 --- a/example/src/Main.elm +++ b/example/src/Main.elm @@ -162,7 +162,8 @@ progressPlayground isDarkMode pm = { isDarkMode = isDarkMode , preview = Progress.progressWithProps pm , controlSections = - [ { controls = + [ { heading = "" + , controls = [ Control.field "Bar" (Control.counter { value = pm.value @@ -174,9 +175,9 @@ progressPlayground isDarkMode pm = , Control.comment "A progress element can contain a bar visually indicating progress" ] } - , { controls = - [ Control.header "Config" - , Control.field "Indicating" + , { heading = "Config" + , controls = + [ Control.field "Indicating" (Control.bool { id = "indicating" , value = pm.indicating @@ -254,9 +255,9 @@ progressPlayground isDarkMode pm = ) ] } - , { controls = - [ Control.header "Content" - , Control.field "Unit" + , { heading = "Content" + , controls = + [ Control.field "Unit" (Control.string { value = pm.unit , onInput = (\string ps -> { ps | unit = string }) >> UpdateProgress @@ -307,7 +308,8 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ] , p [] [ text "よって、われらの各自の政府は、サンフランシスコ市に会合し、全権委任状を示してそれが良好妥当であると認められた代表者を通じて、この国際連合憲章に同意したので、ここに国際連合という国際機構を設ける。" ] ] , controlSections = - [ { controls = + [ { heading = "" + , controls = [ Control.field "-webkit-font-smoothing" (Control.select { value = tm.webkitFontSmoothing |> Typography.webkitFontSmoothingToString @@ -338,9 +340,9 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ] ) ] } - , { controls = - [ Control.header "Typography" - , Control.field "font-family" + , { heading = "Typography" + , controls = + [ Control.field "font-family" (Control.select { value = tm.typography.font.families |> String.concat , options = [ Css.sansSerif.value, Css.serif.value ] @@ -574,9 +576,9 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ] ) ] } - , { controls = - [ Control.header "TextBlock" - , Control.field "word-break" + , { heading = "TextBlock" + , controls = + [ Control.field "word-break" (Control.select { value = tm.typography.textBlock.wordBreak |> Maybe.map Typography.wordBreakToString |> Maybe.withDefault "-" , options = [ "normal", "break-all", "keep-all", "auto-phrase" ] @@ -638,7 +640,7 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ] playground : { isDarkMode : Bool , preview : Html msg - , controlSections : List { controls : List (Control msg) } + , controlSections : List { heading : String, controls : List (Control msg) } } -> Html msg playground { isDarkMode, preview, controlSections } = @@ -670,9 +672,8 @@ playground { isDarkMode, preview, controlSections } = ] ] (List.map - (.controls - >> List.map Control.render - >> div + (\{ heading, controls } -> + div [ css [ padding (Css.em 0.75) , displayFlex @@ -682,6 +683,18 @@ playground { isDarkMode, preview, controlSections } = , palette (Palette.controlSection isDarkMode) ] ] + (header + [ css + [ displayFlex + , justifyContent spaceBetween + , alignItems center + , fontWeight bold + , empty [ display none ] + ] + ] + [ text heading ] + :: List.map Control.render controls + ) ) controlSections ) diff --git a/package/src/Emaki/Control.elm b/package/src/Emaki/Control.elm index fb298cc..d141a10 100644 --- a/package/src/Emaki/Control.elm +++ b/package/src/Emaki/Control.elm @@ -2,8 +2,7 @@ module Emaki.Control exposing ( Control , StringControl, BoolControl, SelectControl, RadioControl, CounterControl, BoolAndStringControl , render - , comment, header, string, bool, select, radio, counter, boolAndString - + , comment, string, bool, select, radio, counter, boolAndString , field , customize ) @@ -13,7 +12,7 @@ module Emaki.Control exposing @docs Control @docs StringControl, BoolControl, SelectControl, RadioControl, CounterControl, BoolAndStringControl @docs render -@docs comment, header, string, bool, select, radio, counter, boolAndString +@docs comment, string, bool, select, radio, counter, boolAndString @docs field @docs customize @@ -32,7 +31,6 @@ import Html.Styled.Events exposing (onClick, onInput) type Control msg = Comment String - | Header String | String (StringControl msg) | Bool (BoolControl msg) | Select (SelectControl msg) @@ -93,11 +91,6 @@ comment = Comment -header : String -> Control msg -header = - Header - - string : StringControl msg -> Control msg string = String @@ -128,8 +121,6 @@ boolAndString = BoolAndString - - field : String -> Control msg -> Control msg field label props = Field label props @@ -156,12 +147,6 @@ render props = ] [ text str ] - -- TODO: 消す - -- https://github.com/y047aka/elm-emaki/pull/29#issue-2128470533 - Header str -> - Html.header [ css [ displayFlex, justifyContent spaceBetween, alignItems center, fontWeight bold ] ] - [ text str ] - String ps -> input [ type_ "text" @@ -285,7 +270,6 @@ render props = [] ] - Field label ps -> div [ css