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