OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 | 5 |
6 /** | 6 /** |
7 * @fileoverview Specifications for the NTP design, and an accessor to presets. | 7 * @fileoverview Specifications for NTP design, and an accessor to presets. |
8 */ | 8 */ |
9 | 9 |
| 10 var THUMBNAIL_FALLBACK = { |
| 11 DOT: 'dot' // Draw single dot. |
| 12 }; |
10 | 13 |
11 /** | 14 /** |
12 * Specifications for an NTP design (not comprehensive). | 15 * Specifications for an NTP design (not comprehensive). |
13 * | 16 * |
14 * name: A unique identifier for the style. | 17 * name: A unique identifier for the style. |
15 * appropriate CSS will take effect. | |
16 * fontFamily: Font family to use for title and thumbnail <iframe>s. | 18 * fontFamily: Font family to use for title and thumbnail <iframe>s. |
17 * fontSize: Font size to use for the <iframe>s, in px. | 19 * fontSize: Font size to use for the <iframe>s, in px. |
18 * tileWidth: The width of each suggestion tile, in px. | 20 * tileWidth: The width of each suggestion tile, in px. |
19 * tileMargin: Spacing between successive tiles, in px. | 21 * tileMargin: Spacing between successive tiles, in px. |
20 * titleColor: The RRGGBB color of title text. | 22 * titleColor: The RRGGBB color of title text. |
| 23 * titleColorAgainstDark: The RRGGBB color of title text against a dark theme. |
21 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the | 24 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the |
22 * default value is 'center'. | 25 * default value is 'center'. |
23 * titleTextFade: (Optional) The number of pixels beyond which title | 26 * titleTextFade: (Optional) The number of pixels beyond which title |
24 * text begins to fade. This overrides the default ellipsis style. | 27 * text begins to fade. This overrides the default ellipsis style. |
25 * thumbnailTextColor: The RRGGBB color that thumbnail <iframe> may use to | 28 * thumbnailTextColor: The RRGGBB color that thumbnail <iframe> may use to |
26 * display text message in place of missing thumbnail. | 29 * display text message in place of missing thumbnail. |
| 30 * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the |
| 31 * thumbnail fallback strategy. If unassigned, then the thumbnail.html |
| 32 * <iframe> would handle the fallback. |
| 33 * showFakeboxHint: Whether to display text in the fakebox. |
27 * | 34 * |
28 * @typedef {{ | 35 * @typedef {{ |
29 * name: string, | 36 * name: string, |
30 * fontFamily: string, | 37 * fontFamily: string, |
31 * fontSize: number, | 38 * fontSize: number, |
32 * tileWidth: number, | 39 * tileWidth: number, |
33 * tileMargin: number, | 40 * tileMargin: number, |
34 * titleColor: string, | 41 * titleColor: string, |
| 42 * titleColorAgainstDark: string, |
35 * titleTextAlign: string|null|undefined, | 43 * titleTextAlign: string|null|undefined, |
36 * titleTextFade: string|null|undefined, | 44 * titleTextFade: string|null|undefined, |
37 * thumbnailTextColor: string | 45 * thumbnailTextColor: string, |
| 46 * thumbnailFallback: string|null|undefined |
| 47 * showFakeboxHint: string|null|undefined |
38 * }} | 48 * }} |
39 */ | 49 */ |
40 var NtpDesign; | 50 var NtpDesign; |
41 | 51 |
42 /** | 52 /** |
43 * Returns an NTP design corresponding to the given name. | 53 * Returns an NTP design corresponding to the given name. |
44 * @param {string|undefined} opt_name The name of the design. If undefined, then | 54 * @param {string|undefined} opt_name The name of the design. If undefined, then |
45 * the default design is specified. | 55 * the default design is specified. |
46 * @return {NtpDesign} The NTP design corresponding to name. | 56 * @return {NtpDesign} The NTP design corresponding to name. |
47 */ | 57 */ |
48 function getNtpDesign(opt_name) { | 58 function getNtpDesign(opt_name) { |
49 // TODO(huangs): Add new style. | 59 var ntpDesign = null; |
50 return { | 60 |
51 name: 'classical', | 61 if (opt_name === 'md') { |
52 fontFamily: 'arial, sans-serif', | 62 ntpDesign = { |
53 fontSize: 11, | 63 name: opt_name, |
54 tileWidth: 140, | 64 fontFamily: 'arial, sans-serif', |
55 tileMargin: 20, | 65 fontSize: 12, |
56 titleColor: '777777', | 66 tileWidth: 146, |
57 // No titleTextAlign: defaults to 'center'. | 67 tileMargin: 12, |
58 // No titleTextFade: by default we have ellipsis. | 68 titleColor: '000000', |
59 thumbnailTextColor: '777777' | 69 titleColorAgainstDark: 'd2d2d2', |
60 }; | 70 titleTextAlign: 'inherit', |
| 71 titleTextFade: 112 - 24, // 112px wide title with 24 pixel fade at end. |
| 72 thumbnailTextColor: '777777', |
| 73 thumbnailFallback: THUMBNAIL_FALLBACK.DOT, |
| 74 showFakeboxHint: true |
| 75 }; |
| 76 } else { |
| 77 ntpDesign = { |
| 78 name: 'classical', |
| 79 fontFamily: 'arial, sans-serif', |
| 80 fontSize: 11, |
| 81 tileWidth: 140, |
| 82 tileMargin: 20, |
| 83 titleColor: '777777', |
| 84 titleColorAgainstDark: '777777', |
| 85 titleTextAlign: 'center', |
| 86 titleTextFade: null, // Default to ellipsis. |
| 87 thumbnailTextColor: '777777', |
| 88 thumbnailFallback: null, // Default to false. |
| 89 showFakeboxHint: false |
| 90 }; |
| 91 } |
| 92 return ntpDesign; |
61 } | 93 } |
OLD | NEW |