@@ -40,7 +40,12 @@ dimensions such that the left and right are twice as wide as the top and bottom:
40 myDimensions : Int -> Dimensions
40 myDimensions : Int -> Dimensions
41 myDimensions n = { left = 2 * n, right = 2 * n, top = n, bottom = n }
41 myDimensions n = { left = 2 * n, right = 2 * n, top = n, bottom = n }
43−type Dimensions = { left:Int, right:Int, top:Int, bottom:Int }
43+type alias Dimensions =
45{-| A field can have a outline around it. This lets you set its color, width,
50{-| A field can have a outline around it. This lets you set its color, width,
46and radius. The radius allows you to round the corners of your field. Set the
51and radius. The radius allows you to round the corners of your field. Set the
@@ -49,7 +54,11 @@ and thin with slightly rounded corners:
50 { color = grey, width = uniformly 1, radius = 4 }
55 { color = grey, width = uniformly 1, radius = 4 }
52−type Outline = { color:Color, width:Dimensions, radius:Int }
59+ , width:Dimensions
54{-| An outline with zero width, so you cannot see it. -}
63{-| An outline with zero width, so you cannot see it. -}
55noOutline : Outline
64noOutline : Outline
@@ -62,7 +71,10 @@ is blue and thin:
63 { color = blue, width = 1 }
72 { color = blue, width = 1 }
65−type Highlight = { color:Color, width:Int }
74+type alias Highlight =
67{-| An highlight with zero width, so you cannot see it. -}
79{-| An highlight with zero width, so you cannot see it. -}
68noHighlight : Highlight
80noHighlight : Highlight
@@ -81,12 +93,12 @@ from the total height to determine how much room there is for text. The
81`padding` and `outline` appear on the top and bottom, so there will be 28
93`padding` and `outline` appear on the top and bottom, so there will be 28
82vertical pixels remaining for the text (40 - 1 - 5 - 5 - 1).
94vertical pixels remaining for the text (40 - 1 - 5 - 5 - 1).
84−type Style =
96+type alias Style =
85− { padding : Dimensions
97+ { padding : Dimensions
86− , outline : Outline
98+ , outline : Outline
87− , highlight : Highlight
99+ , highlight : Highlight
88− , style : Text.Style
100+ , style : Text.Style
91{-| The default style for a text field. The outline is `Color.grey` with width
103{-| The default style for a text field. The outline is `Color.grey` with width
921 and radius 2. The highlight is `Color.blue` with width 1, and the default
1041 and radius 2. The highlight is `Color.blue` with width 1, and the default
@@ -94,11 +106,11 @@ text color is black.
95defaultStyle : Style
107defaultStyle : Style
96defaultStyle =
108defaultStyle =
97− { padding = uniformly 4
109+ { padding = uniformly 4
98− , outline = Outline Color.grey (uniformly 1) 2
110+ , outline = Outline Color.grey (uniformly 1) 2
99− , highlight = Highlight Color.blue 1
111+ , highlight = Highlight Color.blue 1
100− , style = Text.defaultStyle
112+ , style = Text.defaultStyle
103{-| Represents the current content of a text field. For example:
115{-| Represents the current content of a text field. For example:
@@ -107,7 +119,10 @@ defaultStyle =
107This means the user highlighted the substring `"She"` backwards. The value of
119This means the user highlighted the substring `"She"` backwards. The value of
108`content.string` is `"She sells sea shells"`.
120`content.string` is `"She sells sea shells"`.
110−type Content = { string:String, selection:Selection }
124+ , selection:Selection
112{-| The selection within a text field. `start` is never greater than `end`:
127{-| The selection within a text field. `start` is never greater than `end`:
@@ -116,14 +131,18 @@ type Content = { string:String, selection:Selection }
116 Selection 5 9 Backward -- highlighting characters starting after
131 Selection 5 9 Backward -- highlighting characters starting after
117 -- the 5th and ending after the 9th
132 -- the 5th and ending after the 9th
134+type alias Selection =
119−type Selection = { start:Int, end:Int, direction:Direction }
137+ , direction:Direction
121{-| The direction of selection. When the user highlights a selection in a text
140{-| The direction of selection. When the user highlights a selection in a text
122field, they must do it in a particular direction. This determines which end of
141field, they must do it in a particular direction. This determines which end of
123the selection moves when they change the selection by pressing Shift-Left or
142the selection moves when they change the selection by pressing Shift-Left or
124Shift-Right.
143Shift-Right.
126−data Direction = Forward | Backward
145+type Direction = Forward | Backward
128{-| A field with no content:
147{-| A field with no content: