chrome/browser/resources/chromeos/emulator/device_emulator.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Device Emulator</title>
   6   <script src="chrome://resources/js/polymer_config.js"></script>
   7   <script src="chrome://resources/js/cr.js"></script>
   8   <script src="chrome://resources/js/load_time_data.js"></script>
   9   <script src="chrome://resources/js/util.js"></script>
  10   <script src="strings.js"></script>
  11   <link rel="stylesheet" href="chrome://resources/css/roboto.css">
  12   <link rel="stylesheet" href="device_emulator.css">
  13   <link rel="import" href="audio_settings.html">
  14   <link rel="import" href="battery_settings.html">
  15   <link rel="import" href="bluetooth_settings.html">
  16   <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
  17   <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
  18   <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html">
  19   <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html">
  20   <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
  21   <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
  22   <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/paper-header-panel.html">
  23   <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"
  24   <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
  25   <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
  26   <style is="custom-style">
  27     paper-drawer-panel {
  28       --paper-drawer-panel-main-container: {
  29         background-color: #ddd;
  30       };
  31     }
  32
  33     paper-drawer-panel .bold { font-weight: bolder; }
  34     paper-drawer-panel .menu-item { margin: 20px 15px; }
  35
  36     paper-drawer-panel .cards-container {
  37       overflow: scroll;
  38     }
  39
  40     paper-drawer-panel .card {
  41       display: block;
  42       margin: 20px 20px 60px 20px;
  43       width: 95%;
  44       background-color: #fff;
  45       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  46       border-radius: 2px;
  47     }
  48
  49     paper-drawer-panel .card .card-body {
  50       margin: 0 20px;
  51       padding-bottom: 20px;
  52     }
  53
  54     paper-header-panel div paper-item:first {
  55       margin-top: 20px;
  56     }
  57   </style>
  58 </head>
  59 <body unresolved fullbleed layout vertical>
  60   <paper-drawer-panel>
  61     <paper-header-panel drawer>
  62       <paper-toolbar>
  63         <div><span class="bold">Chrome OS Device Emulator</span></div>
  64       </paper-toolbar>
  65       <div>
  66         <paper-item>
  67           <div class="menu-item">
  68             <paper-checkbox
  69                 class="menu-item-toggle"
  70                 data-content-id="audio-settings-card"></paper-checkbox>
  71             <paper-icon-button icon="av:volume-up"></paper-icon-button>
  72             <span>Audio</span>
  73           </div>
  74         </paper-item>
  75         <paper-item>
  76           <div class="menu-item">
  77             <paper-checkbox
  78                 data-content-id="battery-settings-card"
  79                 class="menu-item-toggle"></paper-checkbox>
  80             <paper-icon-button icon="device:battery-charging-full">
  81             </paper-icon-button>
  82             <span>Battery/Power</span>
  83           </div>
  84         </paper-item>
  85         <paper-item>
  86           <div class="menu-item">
  87             <paper-checkbox
  88                 class="menu-item-toggle"
  89                 data-content-id="bluetooth-settings-card"></paper-checkbox>
  90             <paper-icon-button icon="device:bluetooth"></paper-icon-button>
  91             <span>Bluetooth</span>
  92           </div>
  93         </paper-item>
  94       </div>
  95     </paper-header-panel>
  96     <paper-header-panel main>
  97       <paper-toolbar>
  98       </paper-toolbar>
  99       <div>
 100         <div id="cards-container">
 101           <div class="card" hidden id="audio-settings-card">
 102             <div class="card-body">
 103               <audio-settings id="audio-settings"></audio-settings>
 104             </div>
 105           </div>
 106           <div class="card" hidden id="battery-settings-card">
 107             <div class="card-body">
 108               <battery-settings id="battery-settings">
 109               </battery-settings>
 110             </div>
 111           </div>
 112           <div class="card" hidden id="bluetooth-settings-card">
 113             <div class="card-body">
 114               <bluetooth-settings id="bluetooth-settings"></bluetooth-settings>
 115             </div>
 116           </div>
 117         </div>
 118       </div>
 119     </paper-header-panel>
 120   </paper-drawer-panel>
 121   <script src="chrome://resources/js/i18n_template.js"></script>
 122   <script src="device_emulator.js"></script>
 123 </body>
 124 </html>