OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 import 'dart:sky'; | 5 import 'dart:sky'; |
6 | 6 |
7 enum FontWeight { | 7 enum FontWeight { w100, w200, w300, w400, w500, w600, w700, w800, w900 } |
8 w100, | |
9 w200, | |
10 w300, | |
11 w400, | |
12 w500, | |
13 w600, | |
14 w700, | |
15 w800, | |
16 w900 | |
17 } | |
18 | |
19 const thin = FontWeight.w100; | 8 const thin = FontWeight.w100; |
20 const extraLight = FontWeight.w200; | 9 const extraLight = FontWeight.w200; |
21 const light = FontWeight.w300; | 10 const light = FontWeight.w300; |
22 const normal = FontWeight.w400; | 11 const normal = FontWeight.w400; |
23 const medium = FontWeight.w500; | 12 const medium = FontWeight.w500; |
24 const semiBold = FontWeight.w600; | 13 const semiBold = FontWeight.w600; |
25 const bold = FontWeight.w700; | 14 const bold = FontWeight.w700; |
26 const extraBold = FontWeight.w800; | 15 const extraBold = FontWeight.w800; |
27 const black = FontWeight.w900; | 16 const black = FontWeight.w900; |
28 | 17 |
29 enum TextAlign { | 18 enum TextAlign { left, right, center } |
30 left, | |
31 right, | |
32 center | |
33 } | |
34 | 19 |
35 enum TextDecoration { | 20 enum TextDecoration { none, underline, overline, lineThrough } |
36 none, | |
37 underline, | |
38 overline, | |
39 lineThrough | |
40 } | |
41 | |
42 const underline = const <TextDecoration>[TextDecoration.underline]; | 21 const underline = const <TextDecoration>[TextDecoration.underline]; |
43 const overline = const <TextDecoration>[TextDecoration.overline]; | 22 const overline = const <TextDecoration>[TextDecoration.overline]; |
44 const lineThrough = const <TextDecoration>[TextDecoration.lineThrough]; | 23 const lineThrough = const <TextDecoration>[TextDecoration.lineThrough]; |
45 | 24 |
46 enum TextDecorationStyle { | 25 enum TextDecorationStyle { solid, double, dotted, dashed, wavy } |
47 solid, | |
48 double, | |
49 dotted, | |
50 dashed, | |
51 wavy | |
52 } | |
53 | 26 |
54 class TextStyle { | 27 class TextStyle { |
55 const TextStyle({ | 28 const TextStyle({ |
56 this.color, | 29 this.color, |
57 this.fontFamily, | 30 this.fontFamily, |
58 this.fontSize, | 31 this.fontSize, |
59 this.fontWeight, | 32 this.fontWeight, |
60 this.textAlign, | 33 this.textAlign, |
| 34 this.height, |
61 this.decoration, | 35 this.decoration, |
62 this.decorationColor, | 36 this.decorationColor, |
63 this.decorationStyle | 37 this.decorationStyle |
64 }); | 38 }); |
65 | 39 |
66 final Color color; | 40 final Color color; |
67 final String fontFamily; | 41 final String fontFamily; |
68 final double fontSize; // in pixels | 42 final double fontSize; // in pixels |
69 final FontWeight fontWeight; | 43 final FontWeight fontWeight; |
70 final TextAlign textAlign; | 44 final TextAlign textAlign; |
| 45 final double height; // multiple of fontSize |
71 final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> o
nce Dart supports constant Sets | 46 final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> o
nce Dart supports constant Sets |
72 final Color decorationColor; | 47 final Color decorationColor; |
73 final TextDecorationStyle decorationStyle; | 48 final TextDecorationStyle decorationStyle; |
74 | 49 |
75 TextStyle copyWith({ | 50 TextStyle copyWith({ |
76 Color color, | 51 Color color, |
77 String fontFamily, | 52 String fontFamily, |
78 double fontSize, | 53 double fontSize, |
79 FontWeight fontWeight, | 54 FontWeight fontWeight, |
80 TextAlign textAlign, | 55 TextAlign textAlign, |
| 56 double height, |
81 List<TextDecoration> decoration, | 57 List<TextDecoration> decoration, |
82 Color decorationColor, | 58 Color decorationColor, |
83 TextDecorationStyle decorationStyle | 59 TextDecorationStyle decorationStyle |
84 }) { | 60 }) { |
85 return new TextStyle( | 61 return new TextStyle( |
86 color: color != null ? color : this.color, | 62 color: color != null ? color : this.color, |
87 fontFamily: fontFamily != null ? fontFamily : this.fontFamily, | 63 fontFamily: fontFamily != null ? fontFamily : this.fontFamily, |
88 fontSize: fontSize != null ? fontSize : this.fontSize, | 64 fontSize: fontSize != null ? fontSize : this.fontSize, |
89 fontWeight: fontWeight != null ? fontWeight : this.fontWeight, | 65 fontWeight: fontWeight != null ? fontWeight : this.fontWeight, |
90 textAlign: textAlign != null ? textAlign : this.textAlign, | 66 textAlign: textAlign != null ? textAlign : this.textAlign, |
| 67 height: height != null ? height : this.height, |
91 decoration: decoration != null ? decoration : this.decoration, | 68 decoration: decoration != null ? decoration : this.decoration, |
92 decorationColor: decorationColor != null ? decorationColor : this.decorati
onColor, | 69 decorationColor: decorationColor != null ? decorationColor : this.decorati
onColor, |
93 decorationStyle: decorationStyle != null ? decorationStyle : this.decorati
onStyle | 70 decorationStyle: decorationStyle != null ? decorationStyle : this.decorati
onStyle |
94 ); | 71 ); |
95 } | 72 } |
96 | 73 |
97 static String _colorToCSSString(Color color) { | |
98 return 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 25
5.0})'; | |
99 } | |
100 | |
101 TextStyle merge(TextStyle other) { | 74 TextStyle merge(TextStyle other) { |
102 return copyWith( | 75 return copyWith( |
103 color: other.color, | 76 color: other.color, |
104 fontFamily: other.fontFamily, | 77 fontFamily: other.fontFamily, |
105 fontSize: other.fontSize, | 78 fontSize: other.fontSize, |
106 fontWeight: other.fontWeight, | 79 fontWeight: other.fontWeight, |
107 textAlign: other.textAlign, | 80 textAlign: other.textAlign, |
| 81 height: other.height, |
108 decoration: other.decoration, | 82 decoration: other.decoration, |
109 decorationColor: other.decorationColor, | 83 decorationColor: other.decorationColor, |
110 decorationStyle: other.decorationStyle | 84 decorationStyle: other.decorationStyle |
111 ); | 85 ); |
112 } | 86 } |
113 | 87 |
| 88 static String _colorToCSSString(Color color) { |
| 89 return 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 25
5.0})'; |
| 90 } |
| 91 |
114 static String _fontFamilyToCSSString(String fontFamily) { | 92 static String _fontFamilyToCSSString(String fontFamily) { |
115 // TODO(hansmuller): escape the fontFamily string. | 93 // TODO(hansmuller): escape the fontFamily string. |
116 return fontFamily; | 94 return fontFamily; |
117 } | 95 } |
118 | 96 |
119 static String _decorationToCSSString(List<TextDecoration> decoration) { | 97 static String _decorationToCSSString(List<TextDecoration> decoration) { |
120 assert(decoration != null); | 98 assert(decoration != null); |
121 const toCSS = const <TextDecoration, String>{ | 99 const toCSS = const <TextDecoration, String>{ |
122 TextDecoration.none: 'none', | 100 TextDecoration.none: 'none', |
123 TextDecoration.underline: 'underline', | 101 TextDecoration.underline: 'underline', |
(...skipping 16 matching lines...) Expand all Loading... |
140 } | 118 } |
141 | 119 |
142 void applyToCSSStyle(CSSStyleDeclaration cssStyle) { | 120 void applyToCSSStyle(CSSStyleDeclaration cssStyle) { |
143 if (color != null) { | 121 if (color != null) { |
144 cssStyle['color'] = _colorToCSSString(color); | 122 cssStyle['color'] = _colorToCSSString(color); |
145 } | 123 } |
146 if (fontFamily != null) { | 124 if (fontFamily != null) { |
147 cssStyle['font-family'] = _fontFamilyToCSSString(fontFamily); | 125 cssStyle['font-family'] = _fontFamilyToCSSString(fontFamily); |
148 } | 126 } |
149 if (fontSize != null) { | 127 if (fontSize != null) { |
150 cssStyle['font-size'] = "${fontSize}px"; | 128 cssStyle['font-size'] = '${fontSize}px'; |
151 } | 129 } |
152 if (fontWeight != null) { | 130 if (fontWeight != null) { |
153 cssStyle['font-weight'] = const { | 131 cssStyle['font-weight'] = const { |
154 FontWeight.w100: '100', | 132 FontWeight.w100: '100', |
155 FontWeight.w200: '200', | 133 FontWeight.w200: '200', |
156 FontWeight.w300: '300', | 134 FontWeight.w300: '300', |
157 FontWeight.w400: '400', | 135 FontWeight.w400: '400', |
158 FontWeight.w500: '500', | 136 FontWeight.w500: '500', |
159 FontWeight.w600: '600', | 137 FontWeight.w600: '600', |
160 FontWeight.w700: '700', | 138 FontWeight.w700: '700', |
161 FontWeight.w800: '800', | 139 FontWeight.w800: '800', |
162 FontWeight.w900: '900' | 140 FontWeight.w900: '900' |
163 }[fontWeight]; | 141 }[fontWeight]; |
164 } | 142 } |
165 if (textAlign != null) { | 143 if (textAlign != null) { |
166 cssStyle['text-align'] = const { | 144 cssStyle['text-align'] = const { |
167 TextAlign.left: 'left', | 145 TextAlign.left: 'left', |
168 TextAlign.right: 'right', | 146 TextAlign.right: 'right', |
169 TextAlign.center: 'center', | 147 TextAlign.center: 'center', |
170 }[textAlign]; | 148 }[textAlign]; |
171 } | 149 } |
| 150 if (height != null) { |
| 151 cssStyle['line-height'] = '${height}'; |
| 152 } |
172 if (decoration != null) { | 153 if (decoration != null) { |
173 cssStyle['text-decoration'] = _decorationToCSSString(decoration); | 154 cssStyle['text-decoration'] = _decorationToCSSString(decoration); |
174 if (decorationColor != null) | 155 if (decorationColor != null) |
175 cssStyle['text-decoration-color'] = _colorToCSSString(decorationColor); | 156 cssStyle['text-decoration-color'] = _colorToCSSString(decorationColor); |
176 if (decorationStyle != null) | 157 if (decorationStyle != null) |
177 cssStyle['text-decoration-style'] = _decorationStyleToCSSString(decorati
onStyle); | 158 cssStyle['text-decoration-style'] = _decorationStyleToCSSString(decorati
onStyle); |
178 } | 159 } |
179 } | 160 } |
180 | 161 |
181 bool operator ==(other) { | 162 bool operator ==(other) { |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
223 result.add('${prefix}decoration: $decoration'); | 204 result.add('${prefix}decoration: $decoration'); |
224 if (decorationColor != null) | 205 if (decorationColor != null) |
225 result.add('${prefix}decorationColor: $decorationColor'); | 206 result.add('${prefix}decorationColor: $decorationColor'); |
226 if (decorationStyle != null) | 207 if (decorationStyle != null) |
227 result.add('${prefix}decorationStyle: $decorationStyle'); | 208 result.add('${prefix}decorationStyle: $decorationStyle'); |
228 if (result.isEmpty) | 209 if (result.isEmpty) |
229 return '${prefix}<no style specified>'; | 210 return '${prefix}<no style specified>'; |
230 return result.join('\n'); | 211 return result.join('\n'); |
231 } | 212 } |
232 } | 213 } |
OLD | NEW |