8d73390 · typeable/elm-ui

git.iko.soy/typeable/elm-ui

on master help sign in

add Font.variantList. Hold back `Font.with` for the moment.

8d73390Matthew Griffith8 years ago

src/Element/Font.elm+91−29

compare with master

unifiedsplit

@@ -1,11 +1,11 @@

1module Element.Font exposing

2 ( color, size

3 , family, Font, typeface, serif, sansSerif, monospace

4− , external, with, sizeByCapital, full

4+ , external

5 , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing

6 , underline, strike, italic, unitalicized

7 , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline

8− , Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

8+ , Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

9 , glow, shadow

10 )

@@ -36,24 +36,7 @@ module Element.Font exposing

37@docs family, Font, typeface, serif, sansSerif, monospace

39−@docs external, with, sizeByCapital, full

39+@docs external

40−

41−`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:

42−

43− import Element

44− import Element.Font as Font

45−

46− view =

47− Element.el

48− [ Font.family

49− [ Font.external

50− { name = "Roboto"

51− , url = "https://fonts.googleapis.com/css?family=Roboto"

52− }

53− , Font.sansSerif

54− ]

55− ]

56− (Element.text "Woohoo, I'm stylish text")

59## Alignment and Spacing

42## Alignment and Spacing

@@ -73,7 +56,7 @@ module Element.Font exposing

74## Variants

57## Variants

76−@docs Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

59+@docs Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

79## Shadows

62## Shadows

@@ -96,7 +79,13 @@ type alias Font =

96{-| -}

79{-| -}

97color : Color -> Attr decorative msg

80color : Color -> Attr decorative msg

98color fontColor =

81color fontColor =

82+ Internal.StyleClass

83+ Flag.fontColor

84+ (Internal.Colored

99− Internal.StyleClass Flag.fontColor (Internal.Colored ("fc-" ++ Internal.formatColorClass fontColor) "color" fontColor)

85+ ("fc-" ++ Internal.formatColorClass fontColor)

86+ "color"

87+ fontColor

88+ )

100

101

102{-|

91{-|

@@ -116,7 +105,12 @@ color fontColor =

116-}

105-}

117family : List Font -> Attribute msg

106family : List Font -> Attribute msg

118family families =

107family families =

108+ Internal.StyleClass

109+ Flag.fontFamily

110+ (Internal.FontFamily

119− Internal.StyleClass Flag.fontFamily <| Internal.FontFamily (List.foldl Internal.renderFontClassName "ff-" families) families

111+ (List.foldl Internal.renderFontClassName "ff-" families)

112+ families

113+ )

120

114

121

115

122{-| -}

116{-| -}

@@ -155,8 +149,7 @@ type alias Adjustment =

155{-| -}

149{-| -}

156with :

150with :

157 { name : String

151 { name : String

158− , adjustment : Adjustment

152+ , adjustment : Maybe Adjustment

159− , url : Maybe String

160 , variants : List Variant

153 , variants : List Variant

161 }

154 }

162 -> Font

155 -> Font

@@ -176,7 +169,30 @@ full =

176 Internal.htmlClass classes.fullSize

169 Internal.htmlClass classes.fullSize

177

170

178

171

172+{-| **Note** it's likely that `Font.external` will cause a flash on your page on loading.

173+

174+To bypass this, import your fonts using a separate stylesheet and just use `Font.typeface`.

175+

176+It's likely that `Font.external` will be removed or redesigned in the future to avoid the flashing.

177+

178+`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:

179+

180+ import Element

181+ import Element.Font as Font

182+

183+ view =

184+ Element.el

185+ [ Font.family

186+ [ Font.external

187+ { name = "Roboto"

188+ , url = "https://fonts.googleapis.com/css?family=Roboto"

189+ }

190+ , Font.sansSerif

191+ ]

192+ ]

193+ (Element.text "Woohoo, I'm stylish text")

194+

179−{-| -}

195+-}

180external : { url : String, name : String } -> Font

196external : { url : String, name : String } -> Font

181external { url, name } =

197external { url, name } =

182 Internal.ImportFont name url

198 Internal.ImportFont name url

@@ -364,9 +380,7 @@ type alias Variant =

364 ]

380 ]

365 (text "rendered with smallcaps")

381 (text "rendered with smallcaps")

366

382

367−**Note** These will **not** stack. If you want multiple variants, you should use `Font.with`.

383+**Note** These will **not** stack. If you want multiple variants, you should use `Font.variantList`.

368−

369−If you specify a font variant on an element, then it will override all variants listed in `Font.with`.

370

384

371-}

385-}

372variant : Variant -> Attribute msg

386variant : Variant -> Attribute msg

@@ -385,6 +399,54 @@ variant var =

385 ("\"" ++ name ++ "\" " ++ String.fromInt index)

399 ("\"" ++ name ++ "\" " ++ String.fromInt index)

386

400

387

401

402+isSmallCaps x =

403+ case x of

404+ Internal.VariantActive feat ->

405+ feat == "smcp"

406+

407+ _ ->

408+ False

409+

410+

411+{-| -}

412+variantList : List Variant -> Attribute msg

413+variantList vars =

414+ let

415+ features =

416+ vars

417+ |> List.map Internal.renderVariant

418+

419+ hasSmallCaps =

420+ List.any isSmallCaps vars

421+

422+ name =

423+ if hasSmallCaps then

424+ vars

425+ |> List.map Internal.variantName

426+ |> String.join "-"

427+ |> (\x -> x ++ "-sc")

428+

429+ else

430+ vars

431+ |> List.map Internal.variantName

432+ |> String.join "-"

433+

434+ featureString =

435+ String.join ", " features

436+ in

437+ Internal.StyleClass Flag.fontVariant <|

438+ Internal.Style ("v-" ++ name)

439+ [ Internal.Property "font-feature-settings" featureString

440+ , Internal.Property "font-variant"

441+ (if hasSmallCaps then

442+ "small-caps"

443+

444+ else

445+ "normal"

446+ )

447+ ]

448+

449+

388{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.

450{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.

389-}

451-}

390smallCaps : Variant

452smallCaps : Variant

src/Internal/Model.elm+32−16

@@ -90,6 +90,7 @@ module Internal.Model exposing

90 , renderFontClassName

91 , renderHeight

92 , renderRoot

93+ , renderVariant

93 , renderWidth

94 , renderWidth

94 , rootStyle

95 , rootStyle

95 , rowClass

96 , rowClass

@@ -103,6 +104,7 @@ module Internal.Model exposing

103 , transformClass

104 , transformClass

104 , unstyled

105 , unstyled

105 , unwrapDecorations

106 , unwrapDecorations

107+ , variantName

106 )

108 )

107

109

108{-| -}

110{-| -}

@@ -222,8 +224,7 @@ type Font

222 | ImportFont String String

224 | ImportFont String String

223 | FontWith

225 | FontWith

224 { name : String

226 { name : String

225− , url : Maybe String

226− , adjustment : Adjustment

227+ , adjustment : Maybe Adjustment

227 , variants : List Variant

228 , variants : List Variant

228 }

229 }

229

230

@@ -246,6 +247,18 @@ renderVariant var =

246 "\"" ++ name ++ "\" " ++ String.fromInt index

247 "\"" ++ name ++ "\" " ++ String.fromInt index

247

248

249

250+variantName var =

251+ case var of

252+ VariantActive name ->

253+ name

254+

255+ VariantOff name ->

256+ name ++ "-0"

257+

258+ VariantIndexed name index ->

259+ name ++ "-" ++ String.fromInt index

260+

261+

249renderVariants typeface =

262renderVariants typeface =

250 case typeface of

263 case typeface of

251 FontWith font ->

264 FontWith font ->

@@ -2309,14 +2322,12 @@ renderTopLevelValues rules =

2309 ImportFont _ url ->

2322 ImportFont _ url ->

2310 Just ("@import url('" ++ url ++ "');")

2323 Just ("@import url('" ++ url ++ "');")

2311

2324

2312− FontWith with ->

2325+ -- FontWith with ->

2313− case with.url of

2326+ -- case with.url of

2314− Just x ->

2327+ -- Just x ->

2315− Just ("@import url('" ++ x ++ "');")

2328+ -- Just ("@import url('" ++ x ++ "');")

2316−

2317− Nothing ->

2329+ -- Nothing ->

2318− Nothing

2330+ -- Nothing

2319−

2320 _ ->

2331 _ ->

2321 Nothing

2332 Nothing

2322

2333

@@ -2457,12 +2468,17 @@ typefaceAdjustment typefaces =

2457 Nothing ->

2468 Nothing ->

2458 case face of

2469 case face of

2459 FontWith with ->

2470 FontWith with ->

2460− Just

2471+ case with.adjustment of

2472+ Nothing ->

2473+ found

2474+

2475+ Just adjustment ->

2476+ Just

2461− ( fontAdjustmentRules

2477+ ( fontAdjustmentRules

2462− (.full (convertAdjustment with.adjustment))

2478+ (.full (convertAdjustment adjustment))

2463− , fontAdjustmentRules

2479+ , fontAdjustmentRules

2464− (.capital (convertAdjustment with.adjustment))

2480+ (.capital (convertAdjustment adjustment))

2465− )

2481+ )

2466

2482

2467 _ ->

2483 _ ->

2468 found

2484 found