db1b5ac · typeable/elm-ui

11

12

13type alias Model =

14− { count : Int }

14+ { multiline : String

15+ , single : String

16+ }

15

17

16

18

17initialModel : Model

19initialModel : Model

18initialModel =

20initialModel =

19− { count = 0 }

21+ { multiline = testtxt

22+ , single = ""

23+ }

20

24

21

25

22type Msg

26type Msg

23− = Increment

27+ = MultilineChanged String

24− | Decrement

28+ | SingleChanged String

25− | MLChanged String

26

29

27

30

28update : Msg -> Model -> Model

31update : Msg -> Model -> Model

29update msg model =

32update msg model =

30 case msg of

33 case msg of

31− Increment ->

34+ MultilineChanged new ->

32− { model | count = model.count + 1 }

35+ { model | multiline = new }

33

36

34− Decrement ->

37+ SingleChanged new ->

35− { model | count = model.count - 1 }

38+ { model | single = new }

36−

37− MLChanged s ->

38− model

39

40

41examplePlaceholder =

86view : Model -> Html Msg

87view model =

88 layout [] <|

89− column

89+ column []

90− [ width (px 1500)

90+ [ el [ Font.size 32 ] (text "Single Input")

91− , padding 100

91+ , viewSingle model

92− , spacing 500

92+ , el [ Font.size 32 ] (text "Multiline")

93− , centerX

93+ , viewMultiline model

94 ]

95+

96+

97+viewMultiline model =

98+ column

99+ [ width (px 1500)

100+ , padding 100

101+ , spacing 500

102+ , centerX

103+ ]

95− [ rowTest "Heights"

104+ [ rowTest "Heights"

96− [ multiline [ background ]

105+ [ multiline [ background ]

97− { onChange = MLChanged

106+ { onChange = MultilineChanged

98− , text = testtxt

107+ , text = model.multiline

99− , placeholder = Nothing

108+ , placeholder = Nothing

100− , spellcheck = False

109+ , spellcheck = False

101− , label =

110+ , label =

102− label "Default"

111+ label "Default"

103− }

112+ }

104− , multiline [ background, height shrink ]

113+ , multiline [ background, height shrink ]

105− { onChange = MLChanged

114+ { onChange = MultilineChanged

106− , text = testtxt

115+ , text = model.multiline

107− , placeholder = Nothing

116+ , placeholder = Nothing

108− , spellcheck = False

117+ , spellcheck = False

109− , label =

118+ , label =

110− label "Height shrink"

119+ label "Height shrink"

111− }

120+ }

112− , multiline [ background, height fill ]

121+ , multiline [ background, height fill ]

113− { onChange = MLChanged

122+ { onChange = MultilineChanged

114− , text = testtxt

123+ , text = model.multiline

115− , placeholder = Nothing

124+ , placeholder = Nothing

116− , spellcheck = False

125+ , spellcheck = False

117− , label =

126+ , label =

118− label "Height Fill"

127+ label "Height Fill"

119− }

128+ }

120− , multiline [ background, height (px 200) ]

129+ , multiline [ background, height (px 200) ]

121− { onChange = MLChanged

130+ { onChange = MultilineChanged

122− , text = testtxt

131+ , text = model.multiline

123− , placeholder = Nothing

132+ , placeholder = Nothing

124− , spellcheck = False

133+ , spellcheck = False

125− , label =

134+ , label =

126− label "Height 200px"

135+ label "Height 200px"

127− }

136+ }

128− ]

137+ ]

129− , rowTest "Widths"

138+ , rowTest "Widths"

130− [ multiline []

139+ [ multiline []

131− { onChange = MLChanged

140+ { onChange = MultilineChanged

132− , text = testtxt

141+ , text = model.multiline

133− , placeholder = Nothing

142+ , placeholder = Nothing

134− , spellcheck = False

143+ , spellcheck = False

135− , label =

144+ , label =

136− label "Default"

145+ label "Default"

137− }

146+ }

138− , multiline [ width fill ]

147+ , multiline [ width fill ]

139− { onChange = MLChanged

148+ { onChange = MultilineChanged

140− , text = testtxt

149+ , text = model.multiline

141− , placeholder = Nothing

150+ , placeholder = Nothing

142− , spellcheck = False

151+ , spellcheck = False

143− , label =

152+ , label =

144− label "Width fill"

153+ label "Width fill"

145− }

154+ }

146− , multiline [ width shrink ]

155+ , multiline [ width shrink ]

147− { onChange = MLChanged

156+ { onChange = MultilineChanged

148− , text = testtxt

157+ , text = model.multiline

149− , placeholder = Nothing

158+ , placeholder = Nothing

150− , spellcheck = False

159+ , spellcheck = False

151− , label =

160+ , label =

152− label "Width Shrink"

161+ label "Width Shrink"

153− }

162+ }

154− , multiline [ width (px 300) ]

163+ , multiline [ width (px 300) ]

155− { onChange = MLChanged

164+ { onChange = MultilineChanged

156− , text = testtxt

165+ , text = model.multiline

157− , placeholder = Nothing

166+ , placeholder = Nothing

158− , spellcheck = False

167+ , spellcheck = False

159− , label = label "width 300"

168+ , label = label "width 300"

160− }

169+ }

161− ]

170+ ]

162− , rowTest "Spacing"

171+ , rowTest "Spacing"

163− [ multiline []

172+ [ multiline []

164− { onChange = MLChanged

173+ { onChange = MultilineChanged

165− , text = testtxt

174+ , text = model.multiline

166− , placeholder = Nothing

175+ , placeholder = Nothing

167− , spellcheck = False

176+ , spellcheck = False

168− , label =

177+ , label =

169− label "Default"

178+ label "Default"

170− }

179+ }

171− , multiline [ spacing 30, padding 60 ]

180+ , multiline [ spacing 30, padding 60 ]

172− { onChange = MLChanged

181+ { onChange = MultilineChanged

173− , text = testtxt

182+ , text = model.multiline

174− , placeholder = Nothing

183+ , placeholder = Nothing

175− , spellcheck = False

184+ , spellcheck = False

176− , label =

185+ , label =

177− label "Spacing 30"

186+ label "Spacing 30"

178− }

187+ }

179− , multiline [ spacing 0 ]

188+ , multiline [ spacing 0 ]

180− { onChange = MLChanged

189+ { onChange = MultilineChanged

181− , text = testtxt

190+ , text = model.multiline

182− , placeholder = Nothing

191+ , placeholder = Nothing

183− , spellcheck = False

192+ , spellcheck = False

184− , label = label "Spacing 0"

193+ , label = label "Spacing 0"

185− }

194+ }

186− ]

195+ ]

187− , rowTest "Scrollable viewport with different paddings "

196+ , rowTest "Scrollable viewport with different paddings "

188− [ multiline [ height (px 200), padding 30 ]

197+ [ multiline [ height (px 200), padding 30 ]

189− { onChange = MLChanged

198+ { onChange = MultilineChanged

190− , text = testtxt

199+ , text = model.multiline

191− , placeholder = Nothing

200+ , placeholder = Nothing

192− , spellcheck = False

201+ , spellcheck = False

193− , label =

202+ , label =

194− label "Height 200, Padding 30"

203+ label "Height 200, Padding 30"

195− }

204+ }

196− , multiline [ height (px 200), padding 60 ]

205+ , multiline [ height (px 200), padding 60 ]

197− { onChange = MLChanged

206+ { onChange = MultilineChanged

198− , text = testtxt

207+ , text = model.multiline

199− , placeholder = Nothing

208+ , placeholder = Nothing

200− , spellcheck = False

209+ , spellcheck = False

201− , label =

210+ , label =

202− label "Height 200, Padding 60"

211+ label "Height 200, Padding 60"

203− }

212+ }

204− , multiline [ height (px 200), padding 0 ]

213+ , multiline [ height (px 200), padding 0 ]

205− { onChange = MLChanged

214+ { onChange = MultilineChanged

206− , text = testtxt

215+ , text = model.multiline

207− , placeholder = Nothing

216+ , placeholder = Nothing

208− , spellcheck = False

217+ , spellcheck = False

209− , label = label "Height 200, Padding 0"

218+ , label = label "Height 200, Padding 0"

210− }

219+ }

211− ]

220+ ]

212− , rowTest "Placeholders"

221+ , rowTest "Placeholders"

213− [ multiline []

222+ [ multiline []

214− { onChange = MLChanged

223+ { onChange = MultilineChanged

215− , text = ""

224+ , text = ""

216− , placeholder = Just examplePlaceholder

225+ , placeholder = Just examplePlaceholder

217− , spellcheck = False

226+ , spellcheck = False

218− , label =

227+ , label =

219− label "Default"

228+ label "Default"

220− }

229+ }

221− , multiline [ height shrink ]

230+ , multiline [ height shrink ]

222− { onChange = MLChanged

231+ { onChange = MultilineChanged

223− , text = ""

232+ , text = ""

224− , placeholder = Just examplePlaceholder

233+ , placeholder = Just examplePlaceholder

225− , spellcheck = False

234+ , spellcheck = False

226− , label =

235+ , label =

227− label "Height shrink"

236+ label "Height shrink"

228− }

237+ }

229− , multiline [ height fill ]

238+ , multiline [ height fill ]

230− { onChange = MLChanged

239+ { onChange = MultilineChanged

231− , text = ""

240+ , text = ""

232− , placeholder = Just examplePlaceholder

241+ , placeholder = Just examplePlaceholder

233− , spellcheck = False

242+ , spellcheck = False

234− , label =

243+ , label =

235− label "Height Fill"

244+ label "Height Fill"

236− }

245+ }

237− , multiline [ height (px 200) ]

246+ , multiline [ height (px 200) ]

238− { onChange = MLChanged

247+ { onChange = MultilineChanged

248+ , text = ""

249+ , placeholder = Just examplePlaceholder

250+ , spellcheck = False

251+ , label =

252+ label "Height 200px"

253+ }

254+ ]

255+ , rowTest "Long Placeholders"

256+ [ multiline []

257+ { onChange = MultilineChanged

258+ , text = ""

259+ , placeholder = Just examplePlaceholderLong

260+ , spellcheck = False

261+ , label =

262+ label "Default"

263+ }

264+ , multiline [ height shrink ]

265+ { onChange = MultilineChanged

239− , text = ""

266+ , text = ""

267+ , placeholder = Just examplePlaceholderLong

268+ , spellcheck = False

269+ , label =

270+ label "Height shrink"

271+ }

272+ , multiline [ height fill ]

273+ { onChange = MultilineChanged

274+ , text = ""

240− , placeholder = Just examplePlaceholder

275+ , placeholder = Just examplePlaceholderLong

276+ , spellcheck = False

277+ , label =

278+ label "Height Fill"

279+ }

280+ , multiline [ height (px 200) ]

281+ { onChange = MultilineChanged

282+ , text = ""

283+ , placeholder = Just examplePlaceholderLong

241− , spellcheck = False

284+ , spellcheck = False

242− , label =

285+ , label =

243− label "Height 200px"

286+ label "Height 200px"

244− }

287+ }

288+ ]

289+ ]

290+

291+

292+singleInput attrs labelTxt model =

293+ Input.text attrs

294+ { onChange = SingleChanged

295+ , text = model

296+ , label =

297+ labelAbove

298+ [ width (px 100)

299+ , Font.italic

245 ]

300 ]

246− , rowTest "Long Placeholders"

247− [ multiline []

248− { onChange = MLChanged

249− , text = ""

301+ (text labelTxt)

250− , placeholder = Just examplePlaceholderLong

302+ , placeholder =

251− , spellcheck = False

303+ Just

252− , label =

304+ (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]

253− label "Default"

305+ (text "Here is my single input")

254− }

306+ )

255− , multiline [ height shrink ]

307+ }

256− { onChange = MLChanged

308+

257− , text = ""

309+

258− , placeholder = Just examplePlaceholderLong

310+singleInputLongPlaceholder attrs labelTxt model =

259− , spellcheck = False

260− , label =

261− label "Height shrink"

262− }

263− , multiline [ height fill ]

264− { onChange = MLChanged

265− , text = ""

311+ Input.text attrs

266− , placeholder = Just examplePlaceholderLong

312+ { onChange = SingleChanged

267− , spellcheck = False

313+ , text = model

268− , label =

314+ , label =

269− label "Height Fill"

315+ labelAbove

270− }

316+ [ width (px 100)

271− , multiline [ height (px 200) ]

317+ , Font.italic

272− { onChange = MLChanged

273− , text = ""

274− , placeholder = Just examplePlaceholderLong

275− , spellcheck = False

276− , label =

277− label "Height 200px"

278− }

279 ]

318 ]

319+ (text labelTxt)

320+ , placeholder =

321+ Just

322+ (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]

323+ (text "Here is my single input with a placeholder that is super long")

324+ )

325+ }

326+

327+

328+viewSingle model =

329+ column

330+ [ width (px 1500)

331+ , padding 100

332+ , spacing 500

333+ , centerX

334+ ]

335+ [ rowTest "Heights"

336+ [ singleInput [] "Default" model.single

337+ , singleInput [ height shrink ] "Height shrink" model.single

338+ , singleInput [ height fill ] "Height Fill" model.single

339+ , singleInput [ height (px 200) ] "Height 200px" model.single

340+ ]

341+ , rowTest "Widths"

342+ [ singleInput [] "Default" model.single

343+ , singleInput [ width fill ] "Width fill" model.single

344+ , singleInput [ width shrink ] "Width Shrink" model.single

345+ , singleInput [ width (px 200) ] "width 200" model.single

346+ ]

347+ , rowTest "Spacing (no effect)"

348+ [ singleInput [] "Default" model.single

349+ , singleInput [ spacing 60 ] "Spacing 30" model.single

350+ , singleInput [ spacing 0 ] "Spacing 0" model.single

351+ ]

352+ , rowTest "Padding"

353+ [ singleInput [] "Default" model.single

354+ , singleInput [ padding 60 ] "Padding 30" model.single

355+ , singleInput [ padding 0 ] "Padding 0" model.single

280 ]

356 ]

357+ , rowTest "Scrollable viewport with different paddings "

358+ [ singleInput [ height (px 200), padding 30 ] "Height 200, Padding 30" model.single

359+ , singleInput [ height (px 200), padding 60 ] "Height 200, Padding 60" model.single

360+ , singleInput [ height (px 200), padding 0 ] "Height 200, Padding 0" model.single

361+ ]

362+ , rowTest "Long Placeholders"

363+ [ singleInputLongPlaceholder [] "Default" model.single

364+ , singleInputLongPlaceholder [ height shrink ] "Height shrink" model.single

365+ , singleInputLongPlaceholder [ height fill ] "Height Fill" model.single

366+ , singleInputLongPlaceholder [ height (px 200) ] "Height 200px" model.single

367+ ]

368+ ]

281

369

282

370

283main : Program () Model Msg

371main : Program () Model Msg