I would like to use this view with a black background, and the default colors for literals do not meet the WCAG contrast guidelines.
diff --git a/elm-package.json b/elm-package.json
index 6423f00..1e7f0d1 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -1,5 +1,5 @@
{
- "version": "1.0.1",
+ "version": "2.0.0",
"summary": "Shows JSON data as an expandable HTML tree",
"repository": "https://github.com/Microsoft/elm-json-tree-view.git",
"license": "MIT",
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 5417e75..982b0f2 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -170,6 +170,7 @@ viewJsonTree model =
else
Nothing
, toMsg = SetTreeViewState
+ , css = JsonTree.defaultCss
}
in
div []
diff --git a/src/JsonTree.elm b/src/JsonTree.elm
index f8ea706..d346faa 100644
--- a/src/JsonTree.elm
+++ b/src/JsonTree.elm
@@ -7,6 +7,7 @@ module JsonTree
, TaggedValue(..)
, KeyPath
, Config
+ , CssConfig
, State
, parseValue
, parseString
@@ -14,6 +15,7 @@ module JsonTree
, defaultState
, expandAll
, collapseToDepth
+ , defaultCss
)
{-| This library provides a JSON tree view. You feed it JSON, and it transforms it into
@@ -41,6 +43,10 @@ Features:
@docs expandAll, collapseToDepth
+# Styling
+
+@docs CssConfig, defaultCss
+
-}
import Dict exposing (Dict)
@@ -159,7 +165,7 @@ annotate pathSoFar node =
view : Node -> Config msg -> State -> Html msg
view node config state =
div
- [ style css.root ]
+ [ style config.css.root ]
(viewNodeInternal 0 config node state)
@@ -180,6 +186,7 @@ the previous state.
type alias Config msg =
{ onSelect : Maybe (KeyPath -> msg)
, toMsg : State -> msg
+ , css : CssConfig
}
@@ -290,16 +297,16 @@ viewNodeInternal : Int -> Config msg -> Node -> State -> List (Html msg)
viewNodeInternal depth config node state =
case node.value of
TString str ->
- viewScalar css.string ("\"" ++ str ++ "\"") node config
+ viewScalar config.css.string ("\"" ++ str ++ "\"") node config
TFloat x ->
- viewScalar css.number (toString x) node config
+ viewScalar config.css.number (toString x) node config
TBool bool ->
- viewScalar css.bool (toString bool) node config
+ viewScalar config.css.bool (toString bool) node config
TNull ->
- viewScalar css.null "null" node config
+ viewScalar config.css.null "null" node config
TList nodes ->
viewArray depth nodes node.keyPath config state
@@ -313,7 +320,7 @@ viewScalar someCss str node config =
List.singleton <|
case config.onSelect of
Just onSelect ->
- hover css.selectable
+ hover config.css.selectable
span
[ style someCss
, id node.keyPath
@@ -335,7 +342,7 @@ viewCollapser depth config newStateThunk displayText =
text ""
else
span
- [ style css.collapser
+ [ style config.css.collapser
, lazyStateChangeOnClick newStateThunk config.toMsg
]
[ text displayText ]
@@ -364,13 +371,13 @@ viewArray depth nodes keyPath config state =
else
[ viewCollapseButton depth keyPath config state
, ul
- [ style css.ul ]
+ [ style config.css.ul ]
(List.map viewListItem nodes)
]
viewListItem node =
li
- [ style css.li ]
+ [ style config.css.li ]
(List.append (viewNodeInternal (depth + 1) config node state) [ text "," ])
in
[ text "[" ] ++ innerContent ++ [ text "]" ]
@@ -389,14 +396,14 @@ viewDict depth dict keyPath config state =
else
[ viewCollapseButton depth keyPath config state
, ul
- [ style css.ul ]
+ [ style config.css.ul ]
(List.map viewListItem (Dict.toList dict))
]
viewListItem ( fieldName, node ) =
li
- [ style css.li ]
- ([ span [ style css.fieldName ] [ text fieldName ]
+ [ style config.css.li ]
+ ([ span [ style config.css.fieldName ] [ text fieldName ]
, text ": "
]
++ (viewNodeInternal (depth + 1) config node state)
@@ -409,8 +416,25 @@ viewDict depth dict keyPath config state =
-- STYLES
+{-| Configure the list of styles for the tree view.
+-}
+type alias CssConfig =
+ { root : List (String, String)
+ , ul : List (String, String)
+ , li : List (String, String)
+ , collapser : List (String, String)
+ , fieldName : List (String, String)
+ , string : List (String, String)
+ , number : List (String, String)
+ , bool : List (String, String)
+ , null : List (String, String)
+ , selectable : List (String, String)
+ }
-css =
+{-| Default styling
+-}
+defaultCss : CssConfig
+defaultCss =
{ root =
[ ( "font-family", "monospace" )
, ( "white-space", "pre" )