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); } | |
Dan Beam
2017/01/20 23:24:16
i think it an ideal world, you'd have less images
| |
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 |