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/paper-button/paper-butt
on.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner.html"> |
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap
er-toggle-button.html"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap
er-toggle-button.html"> |
5 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expa
nd_button.html"> | 5 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expa
nd_button.html"> |
6 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.
html"> | 6 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.
html"> |
7 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_
network_item.html"> | 7 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_
item.html"> |
8 <link rel="import" href="/settings_shared_css.html"> | 8 <link rel="import" href="/settings_shared_css.html"> |
9 | 9 |
10 <dom-module name="network-summary-item"> | 10 <dom-module name="network-summary-item"> |
11 <template> | 11 <template> |
12 <style include="settings-shared"> | 12 <style include="settings-shared"> |
13 :host { | |
14 --cr-network-icon-mixin: { | |
15 height: 24px; | |
16 left: -4px; | |
17 width: 24px; | |
18 } | |
19 --cr-network-name-mixin: { | |
20 font-size: inherit; | |
21 }; | |
22 --cr-network-state-mixin: { | |
23 @apply(--settings-secondary); | |
24 font-size: inherit; | |
25 }; | |
26 } | |
27 | |
28 paper-spinner { | 13 paper-spinner { |
29 height: 20px; | 14 height: 20px; |
30 margin: 0 20px; | 15 margin: 0 20px; |
31 width: 20px; | 16 width: 20px; |
32 } | 17 } |
33 | 18 |
34 .button-row { | 19 .button-row { |
35 align-items: center; | 20 align-items: center; |
36 border-top: var(--settings-separator-line); | 21 border-top: var(--settings-separator-line); |
37 display: flex; | 22 display: flex; |
38 min-height: var(--settings-row-min-height); | 23 min-height: var(--settings-row-min-height); |
39 } | 24 } |
40 | 25 |
41 #buttons { | 26 #buttons { |
42 align-items: center; | 27 align-items: center; |
43 } | 28 } |
44 | 29 |
45 #deviceEnabledButton { | 30 #deviceEnabledButton { |
46 -webkit-margin-start: 10px; | 31 -webkit-margin-start: 10px; |
47 } | 32 } |
48 | 33 |
49 #networkList { | 34 #networkList { |
50 margin: 5px 0 10px; | 35 margin: 5px 0 10px; |
51 max-height: 400px; | 36 max-height: 400px; |
52 } | 37 } |
53 </style> | 38 </style> |
54 <div class="settings-box two-line"> | 39 <div class="settings-box two-line"> |
55 <div id="details" actionable class="start layout horizontal center" | 40 <div id="details" actionable class="start layout horizontal center" |
56 on-tap="onDetailsTap_"> | 41 on-tap="onDetailsTap_"> |
57 <cr-network-list-network-item class="flex" | 42 <cr-network-list-item class="flex" item="[[activeNetworkState]]"> |
58 network-state="[[activeNetworkState]]" show-buttons> | 43 </cr-network-list-item> |
59 </cr-network-list-network-item> | |
60 <paper-spinner active="[[showScanning_(deviceState, expanded)]]"> | 44 <paper-spinner active="[[showScanning_(deviceState, expanded)]]"> |
61 </paper-spinner> | 45 </paper-spinner> |
62 </div> | 46 </div> |
63 <div> | 47 <div> |
64 <div id="buttons" class="layout horizontal"> | 48 <div id="buttons" class="layout horizontal"> |
65 <template is="dom-if" | 49 <template is="dom-if" |
66 if="[[expandIsVisible_(deviceState, networkStateList)]]"> | 50 if="[[expandIsVisible_(deviceState, networkStateList)]]"> |
67 <cr-expand-button id="expandListButton" expanded="{{expanded}}"> | 51 <cr-expand-button id="expandListButton" expanded="{{expanded}}"> |
68 </cr-expand-button> | 52 </cr-expand-button> |
69 </template> | 53 </template> |
70 <template is="dom-if" if="[[enableIsVisible_(deviceState)]]"> | 54 <template is="dom-if" if="[[enableIsVisible_(deviceState)]]"> |
71 <paper-toggle-button id="deviceEnabledButton" | 55 <paper-toggle-button id="deviceEnabledButton" |
72 checked="[[deviceIsEnabled_(deviceState)]]" | 56 checked="[[deviceIsEnabled_(deviceState)]]" |
73 on-tap="onDeviceEnabledTap_"> | 57 on-tap="onDeviceEnabledTap_"> |
74 </paper-toggle-button> | 58 </paper-toggle-button> |
75 </template> | 59 </template> |
76 </div> | 60 </div> |
77 </div> | 61 </div> |
78 </div> | 62 </div> |
79 <template is="dom-if" if="[[expanded]]"> | 63 <template is="dom-if" if="[[expanded]]"> |
80 <div class="list-frame"> | 64 <div class="list-frame"> |
81 <cr-network-list id="networkList" | 65 <cr-network-list id="networkList" max-height="[[maxHeight]]" |
82 max-height="[[maxHeight]]" | 66 networks="[[networkStateList]]" opened="{{expanded}}" show-buttons> |
83 networks="[[networkStateList]]" | |
84 opened="{{expanded}}" | |
85 show-buttons> | |
86 </cr-network-list> | 67 </cr-network-list> |
87 <template is="dom-if" | 68 <template is="dom-if" |
88 if="[[knownNetworksIsVisible_(activeNetworkState)]]"> | 69 if="[[knownNetworksIsVisible_(activeNetworkState)]]"> |
89 <div class="button-row" actionable on-tap="onKnownNetworksTap_"> | 70 <div class="button-row" actionable on-tap="onKnownNetworksTap_"> |
90 <a is="action-link">$i18n{knownNetworksButton}</a> | 71 <a is="action-link">$i18n{knownNetworksButton}</a> |
91 </div> | 72 </div> |
92 </template> | 73 </template> |
93 </div> | 74 </div> |
94 </template> | 75 </template> |
95 </template> | 76 </template> |
96 <script src="network_summary_item.js"></script> | 77 <script src="network_summary_item.js"></script> |
97 </dom-module> | 78 </dom-module> |
OLD | NEW |