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 NTP design. | 7 * @fileoverview Specifications for NTP design. |
8 */ | 8 */ |
9 | 9 |
10 var THUMBNAIL_FALLBACK = { | 10 var THUMBNAIL_FALLBACK = { |
11 DOT: 'dot' // Draw single dot. | 11 DOT: 'dot' // Draw single dot. |
12 }; | 12 }; |
13 | 13 |
14 | 14 |
15 /** | 15 /** |
16 * Specifications for an NTP design (not comprehensive). | 16 * Specifications for an NTP design (not comprehensive). |
17 * | 17 * |
18 * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the list | 18 * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the list |
19 * of tiles. | 19 * of tiles. |
20 * fontFamily: Font family to use for title and thumbnail iframes. | 20 * fontFamily: Font family to use for title and thumbnail iframes. |
21 * fontSize: Font size to use for the iframes, in px. | 21 * fontSize: Font size to use for the iframes, in px. |
22 * mainClass: Class applied to #ntp-contents to control CSS. | 22 * mainClass: Class applied to #ntp-contents to control CSS. |
| 23 * numTitleLines: Number of lines to display in titles. |
23 * showFavicon: Whether to show favicon. | 24 * showFavicon: Whether to show favicon. |
24 * thumbnailTextColor: The 4-component color that thumbnail iframe may use to | 25 * thumbnailTextColor: The 4-component color that thumbnail iframe may use to |
25 * display text message in place of missing thumbnail. | 26 * display text message in place of missing thumbnail. |
26 * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the | 27 * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the |
27 * thumbnail fallback strategy. If unassigned, then the thumbnail.html | 28 * thumbnail fallback strategy. If unassigned, then the thumbnail.html |
28 * iframe would handle the fallback. | 29 * iframe would handle the fallback. |
29 * tileWidth: The width of each suggestion tile, in px. | 30 * tileWidth: The width of each suggestion tile, in px. |
30 * tileMargin: Spacing between successive tiles, in px. | 31 * tileMargin: Spacing between successive tiles, in px. |
31 * titleColor: The 4-component color of title text. | 32 * titleColor: The 4-component color of title text. |
32 * titleColorAgainstDark: The 4-component color of title text against a dark | 33 * titleColorAgainstDark: The 4-component color of title text against a dark |
33 * theme. | 34 * theme. |
34 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the | 35 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the |
35 * default value is 'center'. | 36 * default value is 'center'. |
36 * titleTextFade: (Optional) The number of pixels beyond which title | 37 * titleTextFade: (Optional) The number of pixels beyond which title |
37 * text begins to fade. This overrides the default ellipsis style. | 38 * text begins to fade. This overrides the default ellipsis style. |
38 * | 39 * |
39 * @const {{ | 40 * @const {{ |
40 * fakeboxWingSize: number, | 41 * fakeboxWingSize: number, |
41 * fontFamily: string, | 42 * fontFamily: string, |
42 * fontSize: number, | 43 * fontSize: number, |
43 * mainClass: string, | 44 * mainClass: string, |
| 45 * numTitleLines: number, |
44 * showFavicon: boolean, | 46 * showFavicon: boolean, |
45 * thumbnailTextColor: string, | 47 * thumbnailTextColor: string, |
46 * thumbnailFallback: string|null|undefined, | 48 * thumbnailFallback: string|null|undefined, |
47 * tileWidth: number, | 49 * tileWidth: number, |
48 * tileMargin: number, | 50 * tileMargin: number, |
49 * titleColor: string, | 51 * titleColor: string, |
50 * titleColorAgainstDark: string, | 52 * titleColorAgainstDark: string, |
51 * titleTextAlign: string|null|undefined, | 53 * titleTextAlign: string|null|undefined, |
52 * titleTextFade: number|null|undefined | 54 * titleTextFade: number|null|undefined |
53 * }} | 55 * }} |
54 */ | 56 */ |
55 var NTP_DESIGN = { | 57 var NTP_DESIGN = { |
56 fakeboxWingSize: 0, | 58 fakeboxWingSize: 0, |
57 fontFamily: 'arial, sans-serif', | 59 fontFamily: 'arial, sans-serif', |
58 fontSize: 12, | 60 fontSize: 12, |
59 mainClass: 'thumb-ntp', | 61 mainClass: 'thumb-ntp', |
| 62 numTitleLines: 1, |
60 showFavicon: true, | 63 showFavicon: true, |
61 thumbnailTextColor: [50, 50, 50, 255], | 64 thumbnailTextColor: [50, 50, 50, 255], |
62 thumbnailFallback: THUMBNAIL_FALLBACK.DOT, | 65 thumbnailFallback: THUMBNAIL_FALLBACK.DOT, |
63 tileWidth: 156, | 66 tileWidth: 156, |
64 tileMargin: 16, | 67 tileMargin: 16, |
65 titleColor: [50, 50, 50, 255], | 68 titleColor: [50, 50, 50, 255], |
66 titleColorAgainstDark: [210, 210, 210, 255], | 69 titleColorAgainstDark: [210, 210, 210, 255], |
67 titleTextAlign: 'inherit', | 70 titleTextAlign: 'inherit', |
68 titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end. | 71 titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end. |
69 }; | 72 }; |
70 | 73 |
71 | 74 |
72 /** | 75 /** |
73 * Modifies NTP_DESIGN parameters for icon NTP. | 76 * Modifies NTP_DESIGN parameters for icon NTP. |
74 */ | 77 */ |
75 function modifyNtpDesignForIcons() { | 78 function modifyNtpDesignForIcons() { |
76 NTP_DESIGN.fakeboxWingSize = 132; | 79 NTP_DESIGN.fakeboxWingSize = 132; |
77 NTP_DESIGN.mainClass = 'icon-ntp'; | 80 NTP_DESIGN.mainClass = 'icon-ntp'; |
| 81 NTP_DESIGN.numTitleLines = 2; |
78 NTP_DESIGN.showFavicon = false; | 82 NTP_DESIGN.showFavicon = false; |
79 NTP_DESIGN.thumbnailFallback = null; | 83 NTP_DESIGN.thumbnailFallback = null; |
80 NTP_DESIGN.tileWidth = 48 + 2 * 18; | 84 NTP_DESIGN.tileWidth = 48 + 2 * 18; |
81 NTP_DESIGN.tileMargin = 60 - 18 * 2; | 85 NTP_DESIGN.tileMargin = 60 - 18 * 2; |
82 NTP_DESIGN.titleColor = [120, 120, 120, 255]; | 86 NTP_DESIGN.titleColor = [120, 120, 120, 255]; |
83 NTP_DESIGN.titleColorAgainstDark = [210, 210, 210, 255]; | 87 NTP_DESIGN.titleColorAgainstDark = [210, 210, 210, 255]; |
84 NTP_DESIGN.titleTextAlign = 'center'; | 88 NTP_DESIGN.titleTextAlign = 'center'; |
85 delete NTP_DESIGN.titleTextFade; | 89 delete NTP_DESIGN.titleTextFade; |
86 } | 90 } |
OLD | NEW |