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