blob: 930197efe7dca4aed988bd79d5e82c3b38cffa1c [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_siminfo.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../settings_page/settings_subpage.html">
<link rel="import" href="../settings_shared_css.html">
<dom-module id="network-summary-item">
<template>
<style include="internet-shared iron-flex">
network-siminfo {
-webkit-padding-start: var(--settings-box-row-padding);
}
#details {
align-items: center;
display: flex;
flex: auto;
}
#networkName {
color: #333;
font-weight: 500;
}
#networkState {
color: var(--cr-secondary-text-color);
font-size: inherit;
font-weight: 400;
}
</style>
<div class="settings-box two-line">
<div actionable class="flex layout horizontal center"
on-click="onShowDetailsTap_">
<div id="details" no-flex$="[[showSimInfo_(deviceState)]]">
<cr-network-icon network-state="[[activeNetworkState]]"
device-state="[[deviceState]]">
</cr-network-icon>
<div class="flex">
<div id="networkName">[[getNetworkName_(activeNetworkState)]]</div>
<div id="networkState">
[[getNetworkStateText_(activeNetworkState, deviceState)]]
</div>
</div>
</div>
<template is="dom-if" if="[[showSimInfo_(deviceState)]]" restamp>
<network-siminfo editable on-click="doNothing_"
network-properties="[[getCellularState_(deviceState)]]"
networking-private="[[networkingPrivate]]">
</network-siminfo>
</template>
<template is="dom-if" if="[[showPolicyIndicator_(activeNetworkState)]]">
<cr-policy-indicator indicator-type="[[getIndicatorTypeForSource(
activeNetworkState.Source)]]" on-click="doNothing_">
</cr-policy-indicator>
</template>
<template is="dom-if" if="[[showDetailsIsVisible_(activeNetworkState,
deviceState, networkStateList)]]">
<paper-icon-button-light class="subpage-arrow">
<button aria-label$="[[getDetailsA11yString_(activeNetworkState,
deviceState, networkStateList)]]">
</button>
</paper-icon-button-light>
</template>
</div>
<template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
<div class="separator"></div>
<cr-toggle id="deviceEnabledButton"
aria-label$="[[getToggleA11yString_(deviceState)]]"
checked="[[deviceIsEnabled_(deviceState)]]"
disabled="[[!enableToggleIsEnabled_(deviceState)]]"
on-change="onDeviceEnabledChange_">
</cr-toggle>
</template>
</div>
</template>
<script src="network_summary_item.js"></script>
</dom-module>