chrome/browser/resources/settings/internet_page/internet_detail_page.html

   1 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
   2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
   3 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_checkbox/cr_checkbox.html">
   4 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_collapse/cr_collapse.html">
   5 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_expand_button/cr_expand_button.html">
   6 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_onc/cr_onc_types.html">
   7 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html">
   8 <link rel="import" href="network_apnlist.html">
   9 <link rel="import" href="network_ip_config.html">
  10 <link rel="import" href="network_nameservers.html">
  11 <link rel="import" href="network_property_list.html">
  12 <link rel="import" href="network_proxy.html">
  13
  14 <dom-module id="cr-settings-internet-detail-page">
  15   <link rel="import" type="css" href="chrome://md-settings/settings_page/settings_page.css">
  16   <link rel="import" type="css" href="internet_detail_page.css">
  17   <template>
  18     <paper-material class="layout vertical">
  19       <div id="outerDiv" class="layout vertical">
  20         <!-- Title section: Icon + name + connection state. -->
  21         <div id="titleDiv" class="layout horizontal">
  22           <div class="layout center horizontal flex">
  23             <cr-network-icon id="networkIcon" network-state="[[networkState]]">
  24             </cr-network-icon>
  25             <span id="networkName">[[getStateName_(networkState)]]</span>
  26             <span id="networkState" class="[[getStateClass_(networkState)]]"
  27                 >[[getStateText_(networkState)]]</span>
  28           </div>
  29         </div>
  30
  31         <!-- Info and properties common to all networks. -->
  32         <div id="infoDiv" class="layout vertical">
  33           <span hidden$="[[!showShared_(networkState)]]">
  34             This network is shared with other users.
  35           </span>
  36           <cr-checkbox checked="{{preferNetwork}}"
  37               hidden$="[[!showPreferNetwork_(networkState)]]">
  38             Prefer this network
  39           </cr-checkbox>
  40           <cr-checkbox checked="{{autoConnect}}"
  41               hidden$="[[!showAutoConnect_(networkState)]]">
  42             Automatically connect to this network
  43           </cr-checkbox>
  44
  45           <!-- Properties to always show if present. -->
  46           <div class="layout horizontal" hidden$="[[!IPAddress]]">
  47             <span>IP Address:</span>
  48             <span>[[IPAddress]]</span>
  49           </div>
  50           <network-property-list
  51               fields="[[getInfoFields_(networkState)]]"
  52               network-state="[[networkState]]">
  53           </network-property-list>
  54         </div>
  55
  56         <!-- Button row: Advanced + Disconnect | Connect. -->
  57         <div class="layout horizontal center">
  58           <cr-button toggles active="{{advancedExpanded}}"
  59               hidden$="[[!hasAdvancedOrDeviceFields_(networkState)]]">
  60             Advanced
  61           </cr-button>
  62           <span class="flex"></span>
  63           <cr-button hidden$="[[!canDisconnect_(networkState)]]"
  64               on-click="onDisconnectClicked_">
  65             Disconnect
  66           </cr-button>
  67           <cr-button hidden$="[[!canConnect_(networkState)]]"
  68               on-click="onConnectClicked_">
  69             Connect
  70           </cr-button>
  71         </div>
  72
  73         <!-- Advanced section -->
  74         <div id="advancedDiv" class="layout vertical"
  75             hidden$="[[!hasAdvancedOrDeviceFields_(networkState)]]">
  76           <cr-collapse opened="[[advancedExpanded]]">
  77             <!-- Advanced properties -->
  78             <div id="advancedInfoDiv" class="layout vertical">
  79               <network-property-list
  80                   fields="[[getAdvancedFields_(networkState)]]"
  81                   network-state="[[networkState]]">
  82               </network-property-list>
  83             </div>
  84
  85             <!-- Network (APN, address, nameservers) -->
  86             <div id="addressDiv" class="layout vertical"
  87                 hidden$="[[!hasNetworkSection_(networkState)]]">
  88               <cr-button toggles active="{{addressExpanded}}">
  89                 Network
  90               </cr-button>
  91               <cr-collapse opened="[[addressExpanded]]">
  92                 <div class="layout vertical flex">
  93                   <network-apnlist editable
  94                       hidden$="[[!isType_(networkState, 'Cellular')]]"
  95                       network-state="[[networkState]]"
  96                       apnlist="[[networkState.Cellular.APNList]]"
  97                       on-apn-change="onApnChange_">
  98                   </network-apnlist>
  99                   <network-ip-config editable
 100                       network-state="[[networkState]]"
 101                       on-ip-change="onIPConfigChange_">
 102                   </network-ip-config>
 103                   <network-nameservers editable
 104                       network-state="[[networkState]]"
 105                       on-nameservers-change="onIPConfigChange_">
 106                   </network-nameservers>
 107                 </div>
 108               </cr-collapse>
 109             </div>
 110
 111             <!-- Proxy -->
 112             <div class="layout vertical"
 113                 hidden$="[[!hasNetworkSection_(networkState)]]">
 114               <cr-button toggles active="{{proxyExpanded}}">
 115                 Proxy
 116               </cr-button>
 117               <cr-collapse opened="[[proxyExpanded]]">
 118                 <div id="proxyDiv" class="layout vertical flex">
 119                   <network-proxy editable
 120                       network-state="[[networkState]]"
 121                       on-proxy-change="onProxyChange_">
 122                   </network-proxy>
 123                 </div>
 124               </cr-collapse>
 125             </div>
 126
 127             <!-- Device properties -->
 128             <div class="layout vertical"
 129                 hidden$="[[!hasDeviceFields_(networkState)]]">
 130               <cr-button toggles active="{{deviceExpanded}}">
 131                 Device
 132               </cr-button>
 133               <cr-collapse opened="[[deviceExpanded]]">
 134                 <network-property-list
 135                     fields="[[getDeviceFields_(networkState)]]"
 136                     network-state="[[networkState]]">
 137                 </network-property-list>
 138                 <!-- TODO(stevenjb): Cellular SIM -->
 139               </cr-collapse>
 140             </div>
 141           </cr-collapse>
 142         </div>
 143       </div>
 144     </paper-material>
 145   </template>
 146   <script src="internet_detail_page.js"></script>
 147 </dom-module>