| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html"> |
| <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| |
| <dom-module id="cr-network-list-item"> |
| <template> |
| <style include="cr-shared-style iron-flex"> |
| :host { |
| display: inline-flex; |
| outline: none; |
| } |
| |
| #divOuter { |
| -webkit-padding-end: var(--cr-icon-ripple-padding); |
| } |
| |
| #divDetail { |
| display: flex; |
| flex: 1 0 auto; |
| flex-direction: row; |
| } |
| |
| #divText { |
| -webkit-margin-start: 20px; |
| display: flex; |
| flex: 1 0 auto; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| #networkStateText { |
| color: var(--cr-secondary-text-color); |
| font-size: inherit; |
| font-weight: 400; |
| } |
| |
| #networkStateText[connected] { |
| color: var(--google-green-500); |
| } |
| |
| iron-icon { |
| height: 24px; |
| width: 24px; |
| } |
| |
| cr-policy-indicator { |
| padding: 0 var(--cr-controlled-by-spacing); |
| } |
| </style> |
| <div id="divOuter" |
| class="layout horizontal center flex" actionable> |
| <template is="dom-if" if="[[networkState]]"> |
| <cr-network-icon is-list-item network-state="[[networkState]]"> |
| </cr-network-icon> |
| </template> |
| <template is="dom-if" if="[[item.polymerIcon]]"> |
| <iron-icon icon="[[item.polymerIcon]]"></iron-icon> |
| </template> |
| <div id="divText" class="layout horizontal flex"> |
| <div>[[ariaLabel]]</div> |
| <div id="networkStateText" |
| hidden$="[[!isStateTextVisible_(networkState)]]" |
| connected$="[[isConnected_(networkState)]]"> |
| [[getNetworkStateText_(networkState)]] |
| </div> |
| </div> |
| <template is="dom-if" if="[[isPolicySource(networkState.Source)]]"> |
| <cr-policy-indicator |
| indicator-type="[[getIndicatorTypeForSource(networkState.Source)]]"> |
| </cr-policy-indicator> |
| </template> |
| <template is="dom-if" |
| if="[[isSubpageButtonVisible_(networkState, showButtons)]]"> |
| <!-- iron-list captures 'enter' so handle it here explicitly. --> |
| <iron-a11y-keys keys="enter" on-keys-pressed="fireShowDetails_"> |
| </iron-a11y-keys> |
| <paper-icon-button-light class="subpage-arrow"> |
| <button on-tap="fireShowDetails_" tabindex$="[[tabindex]]" |
| aria-label$="[[ariaLabel]]"> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| </div> |
| </template> |
| <script src="cr_network_list_item.js"></script> |
| </dom-module> |