OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
3 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm
l"> | 3 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm
l"> |
4 <link rel="import" href="chrome://resources/cr_elements/network/network_icons.ht
ml"> | 4 <link rel="import" href="chrome://resources/cr_elements/network/network_icons.ht
ml"> |
5 | 5 |
6 <dom-module id="cr-network-icon"> | 6 <dom-module id="cr-network-icon"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 :host { | 9 :host { |
10 overflow: hidden; | 10 overflow: hidden; |
(...skipping 21 matching lines...) Expand all Loading... |
32 } | 32 } |
33 | 33 |
34 /* Lower-right corner */ | 34 /* Lower-right corner */ |
35 #secure { | 35 #secure { |
36 height: 20px; | 36 height: 20px; |
37 left: 16px; | 37 left: 16px; |
38 position: absolute; | 38 position: absolute; |
39 top: 16px; | 39 top: 16px; |
40 width: 20px; | 40 width: 20px; |
41 } | 41 } |
| 42 |
| 43 /* Images */ |
| 44 #icon.ethernet { |
| 45 background: url(ethernet.svg); |
| 46 } |
| 47 |
| 48 #icon.vpn { |
| 49 background: url(vpn.svg); |
| 50 } |
| 51 |
| 52 /* Wi-Fi images */ |
| 53 #icon.wifi-0 { |
| 54 background: url(wifi_0.svg); |
| 55 } |
| 56 |
| 57 #icon.wifi-1 { |
| 58 background: url(wifi_1.svg); |
| 59 } |
| 60 |
| 61 #icon.wifi-2 { |
| 62 background: url(wifi_2.svg); |
| 63 } |
| 64 |
| 65 #icon.wifi-3 { |
| 66 background: url(wifi_3.svg); |
| 67 } |
| 68 |
| 69 #icon.wifi-4 { |
| 70 background: url(wifi_4.svg); |
| 71 } |
| 72 |
| 73 #icon.wifi-off { |
| 74 background: url(wifi_off.svg); |
| 75 } |
| 76 |
| 77 #icon.wifi-connecting { |
| 78 animation: wifi-levels 750ms infinite; |
| 79 animation-direction: alternate; |
| 80 animation-timing-function: steps(4, end); |
| 81 } |
| 82 |
| 83 @keyframes wifi-levels { |
| 84 0% { background: url(wifi_0.svg); } |
| 85 25% { background: url(wifi_1.svg); } |
| 86 50% { background: url(wifi_2.svg); } |
| 87 75% { background: url(wifi_3.svg); } |
| 88 100% { background: url(wifi_4.svg); } |
| 89 } |
| 90 |
| 91 /* Cellular images */ |
| 92 #icon.cellular-0 { |
| 93 background: url(cellular_0.svg); |
| 94 } |
| 95 |
| 96 #icon.cellular-1 { |
| 97 background: url(cellular_1.svg); |
| 98 } |
| 99 |
| 100 #icon.cellular-2 { |
| 101 background: url(cellular_2.svg); |
| 102 } |
| 103 |
| 104 #icon.cellular-3 { |
| 105 background: url(cellular_3.svg); |
| 106 } |
| 107 |
| 108 #icon.cellular-4 { |
| 109 background: url(cellular_4.svg); |
| 110 } |
| 111 |
| 112 #icon.cellular-connecting { |
| 113 animation: cellular-levels 750ms infinite; |
| 114 animation-direction: alternate; |
| 115 animation-timing-function: steps(4, end); |
| 116 } |
| 117 |
| 118 @keyframes cellular-levels { |
| 119 0% { background: url(cellular_0.svg); } |
| 120 25% { background: url(cellular_1.svg); } |
| 121 50% { background: url(cellular_2.svg); } |
| 122 75% { background: url(cellular_3.svg); } |
| 123 100% { background: url(cellular_4.svg); } |
| 124 } |
42 </style> | 125 </style> |
43 <iron-icon id="icon" icon="[[getIcon_(networkState, isListItem)]]"> | 126 <div id="icon" class$="[[getIconClass_(networkState, isListItem)]]"> |
44 </iron-icon> | 127 </div> |
45 <iron-icon id="technology" hidden ="[[!showTechnology_(networkState)]]" | 128 <iron-icon id="technology" hidden ="[[!showTechnology_(networkState)]]" |
46 icon="[[getTechnology_(networkState)]]"> | 129 icon="[[getTechnology_(networkState)]]"> |
47 </iron-icon> | 130 </iron-icon> |
48 <iron-icon id="secure" hidden ="[[!showSecure_(networkState)]]" | 131 <iron-icon id="secure" hidden ="[[!showSecure_(networkState)]]" |
49 icon="network:badge-secure"> | 132 icon="network:badge-secure"> |
50 </iron-icon> | 133 </iron-icon> |
51 </template> | 134 </template> |
52 <script src="cr_network_icon.js"></script> | 135 <script src="cr_network_icon.js"></script> |
53 </dom-module> | 136 </dom-module> |
OLD | NEW |