Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 51e3e7e

Browse files
committed
Refactor styling
1 parent a4b8573 commit 51e3e7e

File tree

12 files changed

+322
-125
lines changed

12 files changed

+322
-125
lines changed

‎public/index.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<title>JSON Form web-component demo</title>
7-
<!--link rel="stylesheet" href="https://unpkg.com/@ubio/css@1.3.11/index.css"></link-->
7+
<link rel="stylesheet" href="solarized-dark.css"></link>
88
<script src="https://unpkg.com/json-viewer-custom-element"></script>
9-
<script src="highlight.pack.js"></script>
109

1110
<script>
1211
const q = document.querySelector.bind(document);
@@ -19,14 +18,13 @@
1918
}
2019
});
2120

22-
hljs.initHighlighting();
23-
2421
function connect(form, viewer) {
2522
form.addEventListener('change', () =>
2623
viewer.setAttribute('value', form.getAttribute('value'))
2724
);
2825
}
2926

27+
/*
3028
customElements.define('code-sample', class extends HTMLElement {
3129
static get observedAttributes() {
3230
return ['code'];
@@ -58,6 +56,7 @@
5856
}
5957
}
6058
});
59+
*/
6160

6261
</script>
6362
<style>

‎src/Demo.elm

Lines changed: 130 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
module Demo exposing (init, update, view)
22

33
import Browser exposing (Document)
4-
import Html exposing (Html, div, h3, h4, pre, text)
4+
import Html exposing (Html, div, span, text)
55
import Html.Attributes exposing (class, classList, style)
66
import Html.Events exposing (onClick)
77
import Json.Encode as Encode exposing (Value)
88
import Json.Form
99
import Json.Form.Config exposing (TextFieldStyle(..))
1010
import Json.Schema.Definitions exposing (Schema)
1111
import Json.Value exposing (JsonValue(..))
12-
import Snippets exposing (Snippet(..), getSnippet, getSnippetTitle)
12+
import Snippets exposing (Example, Snippet(..), getSnippet, getSnippetTitle)
13+
14+
15+
type alias ExampleDemo =
16+
{ form : Json.Form.Model
17+
, example : Example
18+
}
1319

1420

1521
type alias Model =
1622
{ showcase : Snippet
17-
, forms : List Json.Form.Model
23+
, examples : List ExampleDemo
1824
}
1925

2026

@@ -26,7 +32,7 @@ initialShowcase =
2632
init : Value -> ( Model, Cmd Msg )
2733
init _ =
2834
{ showcase = initialShowcase
29-
, forms = []
35+
, examples = []
3036
}
3137
|> update (SetShowcase initialShowcase)
3238

@@ -41,55 +47,57 @@ update message model =
4147
case message of
4248
JsonFormMsg index msg ->
4349
let
44-
( forms, cmds ) =
45-
model.forms
50+
( examples, cmds ) =
51+
model.examples
4652
|> List.indexedMap
47-
(\i form ->
53+
(\i {form, example } ->
4854
if i == index then
4955
Json.Form.update msg form
5056
|> Tuple.first
51-
|> Tuple.mapSecond (Cmd.map (JsonFormMsg index))
57+
|> Tuple.mapFirst (\f -> { form = f, example = example })
58+
|> Tuple.mapSecond (JsonFormMsg index |> Cmd.map)
5259

5360
else
54-
( form, Cmd.none )
61+
( {form= form, example = example }, Cmd.none )
5562
)
5663
|> List.unzip
5764
in
5865
( { model
59-
| forms = forms
66+
| examples = examples
6067
}
6168
, Cmd.batch cmds
6269
)
6370

6471
SetShowcase s ->
6572
let
66-
( forms, cmds ) =
73+
( examples, cmds ) =
6774
getSnippet s
6875
|> List.indexedMap
69-
(\index schema ->
76+
(\index example ->
7077
let
7178
config =
7279
{ name = "form" ++ String.fromInt index
7380
, dense = True
7481
, textFieldStyle = Outlined
7582
}
7683
in
77-
Json.Form.init config schema Nothing
78-
|> Tuple.mapSecond (Cmd.map (JsonFormMsg index))
84+
Json.Form.init config example.schema Nothing
85+
|> Tuple.mapFirst (\form -> { form = form, example = example })
86+
|> Tuple.mapSecond (JsonFormMsg index |> Cmd.map)
7987
)
8088
|> List.unzip
8189
in
8290
( { model
8391
| showcase = s
84-
, forms = forms
92+
, examples = examples
8593
}
8694
, Cmd.batch cmds
8795
)
8896

8997

9098
view : Model -> Document Msg
9199
view model =
92-
{ title = "Demo"
100+
{ title = "Json Form Demo"
93101
, body =
94102
[ topbar model
95103
, content model
@@ -122,38 +130,113 @@ snippetTab activeSnippet snippet =
122130
content : Model -> Html Msg
123131
content model =
124132
let
125-
generatedForm index form =
133+
viewExample index {form, example } =
126134
div [ class "example-section" ]
127-
[ div [ style "width" "50%", style "display" "inline-block", style "max-width" "300px" ]
128-
[ form
129-
|> Json.Form.view
130-
|> Html.map (JsonFormMsg index)
131-
, form.value
132-
|> viewValue
135+
[ Html.h3 [ class "example-section__heading" ] [ text example.title ]
136+
, div [ class "example-section__content" ]
137+
[ div [ style "display" "inline-block", style "max-width" "300px", style "min-width" "300px" ]
138+
[ div [ style "padding" "10px", style "background" "var(--form-background)" ]
139+
[ form
140+
|> Json.Form.view
141+
|> Html.map (JsonFormMsg index)
142+
]
143+
|> cardWithTitle "Form"
144+
, form.value
145+
|> Maybe.map viewValue
146+
|> Maybe.withDefault (text " ")
147+
|> (\x -> div [ class "json-view" ] [ x ])
148+
|> cardWithTitle "Data"
149+
|> (\x -> div [ style "margin-top" "20px" ] [ x ])
150+
]
151+
, div [ style "width" "100%", style "min-width" "300px" ] [ example.schema |> viewSchema ]
133152
]
134-
, form.schema |> viewSchema
135153
]
136154
in
137155
div [ class "app-content" ]
138-
[ h3 [ style "padding" "8px", style "border-bottom" "1px solid #e8e8e8" ] [ text <| "Showcase: " ++ getSnippetTitle model.showcase ]
139-
, div []
140-
[ model.forms |> List.indexedMap generatedForm |> div []
141-
]
156+
[ model.examples |> List.indexedMap viewExample |> div []
142157
]
143158

144159

145-
viewValue : MaybeJsonValue -> Html msg
160+
viewValue : JsonValue -> Html msg
146161
viewValue v =
162+
let
163+
str c =
164+
Encode.string >> Encode.encode 0 >> val c
165+
166+
val c s =
167+
span [ class <| "json-view__" ++ c ] [ text s ]
168+
in
147169
case v of
148-
Just val ->
170+
NumericValue n ->
171+
n
172+
|> String.fromFloat
173+
|> val "number"
174+
175+
NullValue ->
176+
"null"
177+
|> val "null"
178+
179+
BoolValue b ->
180+
(if b then
181+
"true"
182+
183+
else
184+
"false"
185+
)
186+
|> val "bool"
187+
188+
StringValue s ->
189+
s |> str "string"
190+
191+
ObjectValue props ->
149192
let
150-
code =
151-
val |>Json.Value.encode |>Encode.encode 2
193+
lastIndex =
194+
List.length props -1
152195
in
153-
Html.node "code-sample" [ class "schema-source", Html.Attributes.attribute "code" code ] []
196+
[ text "{"
197+
, props
198+
|> List.indexedMap
199+
(\index ( key, vv ) ->
200+
span []
201+
[ key |> str "attr"
202+
, text ": "
203+
, viewValue vv
204+
, if index == lastIndex then
205+
text "\n"
154206

155-
Nothing ->
156-
text ""
207+
else
208+
text ",\n"
209+
]
210+
)
211+
|> div [ class "json-view__nested-props" ]
212+
, text "}"
213+
]
214+
|> span []
215+
216+
ArrayValue items ->
217+
let
218+
lastIndex =
219+
List.length items - 1
220+
in
221+
[ text "["
222+
, items
223+
|> List.indexedMap
224+
(\index vv ->
225+
span []
226+
[ index |> String.fromInt |> val "attr"
227+
, text ": "
228+
, viewValue vv
229+
, if index == lastIndex then
230+
text "\n"
231+
232+
else
233+
text ",\n"
234+
]
235+
)
236+
|> div [ class "json-view__nested-props" ]
237+
, text "]"
238+
]
239+
|> span []
157240

158241

159242
viewSchema : Schema -> Html msg
@@ -162,6 +245,16 @@ viewSchema s =
162245
code =
163246
s
164247
|> Json.Schema.Definitions.encode
165-
|> Encode.encode 2
248+
|> Json.Value.decodeValue
166249
in
167-
Html.node "code-sample" [ class "schema-source", Html.Attributes.attribute "code" code ] []
250+
viewValue code
251+
|> (\x -> div [ class "json-view" ] [ x ])
252+
|> cardWithTitle "Schema"
253+
254+
255+
cardWithTitle : String -> Html msg -> Html msg
256+
cardWithTitle title cardContent =
257+
div [ class "card", style "width" "100%" ]
258+
[ span [ class "card__title" ] [ text title ]
259+
, cardContent
260+
]

‎src/Json/Form/TextField.elm

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,17 @@ view model schema isJson isRequired isDisabled path =
107107
case multilineConfig of
108108
Just mlConf ->
109109
let
110+
paddings =
111+
if model.config.dense then
112+
25
113+
114+
else
115+
37
116+
110117
rows =
111118
case model.fieldHeights |> Dict.get path of
112119
Just height ->
113-
Basics.min (height / 18 |> round) mlConf.maxRows
120+
Basics.min ((height- paddings) / 18 |> round) mlConf.maxRows
114121

115122
Nothing ->
116123
mlConf.minRows

‎src/LegacyFormComponent.elm

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,34 +1010,33 @@ viewObject model schema props isArray path =
10101010
|> el SourceCode [ paddingLeft 10 ]
10111011
]
10121012

1013-
else
1014-
if isArray then
1015-
case os.items of
1016-
NoItems ->
1017-
iterateOverProps False justProps blankSchema
1013+
else if isArray then
1014+
case os.items of
1015+
NoItems ->
1016+
iterateOverProps False justProps blankSchema
10181017

1019-
ItemDefinition s ->
1020-
iterateOverProps False justProps s
1018+
ItemDefinition s ->
1019+
iterateOverProps False justProps s
10211020

1022-
-- TODO: hande arrayOfItems
1023-
_ ->
1024-
iterateOverProps False justProps disallowEverythingSchema
1021+
-- TODO: hande arrayOfItems
1022+
_ ->
1023+
iterateOverProps False justProps disallowEverythingSchema
10251024

1026-
else
1027-
[ os.properties
1028-
|> Maybe.map (iterateOverSchemata (Dict.fromList props) os.required)
1029-
|> Maybe.withDefault []
1030-
, case os.additionalProperties of
1031-
Just (ObjectSchema os) ->
1032-
iterateOverProps True extraProps (ObjectSchema os)
1025+
else
1026+
[ os.properties
1027+
|> Maybe.map (iterateOverSchemata (Dict.fromList props) os.required)
1028+
|> Maybe.withDefault []
1029+
, case os.additionalProperties of
1030+
Just (ObjectSchema os) ->
1031+
iterateOverProps True extraProps (ObjectSchema os)
10331032

1034-
Just (BooleanSchema False) ->
1035-
iterateOverProps True extraProps disallowEverythingSchema
1033+
Just (BooleanSchema False) ->
1034+
iterateOverProps True extraProps disallowEverythingSchema
10361035

1037-
_ ->
1038-
iterateOverProps True extraProps blankSchema
1039-
]
1040-
|> List.concat
1036+
_ ->
1037+
iterateOverProps True extraProps blankSchema
1038+
]
1039+
|> List.concat
10411040

10421041

10431042
disallowEverythingSchema : Schema

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /