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