chrome/browser/resources/settings/device_page/display.html

<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="display_layout.html">
<link rel="import" href="display_overscan_dialog.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">

<dom-module id="settings-display">
  <template>
    <style include="settings-shared md-select">
     .settings-box.embedded {
       -webkit-margin-start: 20px;
       align-self: stretch;
       padding: 0;
     }

     :host {
       --paper-tabs-selection-bar-color: var(--paper-blue-500);
     }

     .display-tabs {
       width: 100%;
     }

     display-layout {
       align-self: stretch;
       flex: 1 1;
       height: 300px;
       margin: 10px;
     }

     .textarea {
       margin: 10px 0;
     }

     .title-text {
       margin-top: 10px;
     }

     .info-text {
       color: var(--paper-grey-500);
       margin-top: 5px;
     }

     .settings-box > paper-button:first-child {
       -webkit-padding-start: 0
     }

     paper-tab {
       text-transform: uppercase;
     }

    </style>
    <div class="settings-box first layout vertical self-stretch">
      <div class="title-text layout self-start">
        $i18n{displayArrangementTitle}
      </div>
      <div class="secondary layout self-start"
          hidden="[[!hasMultipleDisplays_(displays)]]">
        $i18n{displayArrangementText}
      </div>
      <display-layout id="displayLayout"
          selected-display="[[selectedDisplay]]"
          on-select-display="onSelectDisplay_">
      </display-layout>
    </div>
    <div hidden="[[!hasMultipleDisplays_(displays)]]" class="settings-box">
      <paper-tabs noink selected="[[selectedDisplay.id]]" class="display-tabs"
          on-iron-select="onSelectDisplayTab_" attr-for-selected="display-id">
        <template is="dom-repeat" items="[[displays]]">
          <paper-tab display-id="[[item.id]]">[[item.name]]</paper-tab>
        </template>
      </paper-tabs>
    </div>
    <div hidden="[[hasMultipleDisplays_(displays)]]"
        class="settings-box line-only"></div>
    <div class="settings-box layout vertical first">
      <h2>[[selectedDisplay.name]]</h2>
      <div class="settings-box embedded first two-line"
          hidden$="[[!showMirror_(displays)]]">
        <div class="start">
          <div>$i18n{displayMirror}</div>
          <div class="secondary">[[getDisplayMirrorText_(displays)]]</div>
        </div>
        <paper-toggle-button checked="[[isMirrored_(displays)]]"
            on-tap="onMirroredTap_">
      </div>
      <div class="settings-box embedded"
          hidden$="[[!showDisplaySelectMenu_(displays, selectedDisplay)]]">
        <div class="start">$i18n{displayScreenTitle}</div>
        <div class="md-select-wrapper">
          <select class="md-select" on-change="updatePrimaryDisplay_"
              value="[[getDisplaySelectMenuIndex_(
                  selectedDisplay, primaryDisplayId)]]">
            <option value="0">$i18n{displayScreenPrimary}</option>
            <option value="1">$i18n{displayScreenExtended}</option>
          </select>
          <span class="md-select-underline"></span>
        </div>
      </div>
      <div class="settings-box embedded two-line">
        <div class="start textarea layout vertical">
          <div>$i18n{displayResolutionTitle}</div>
          <div class="secondary layout self-start">
            [[getResolutionText_(selectedDisplay, selectedModeIndex_)]]
          </div>
        </div>
        <cr-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
            tick-values="[[modeValues_]]" value="{{selectedModeIndex_}}"
            on-change="onSelectedModeChange_">
        </cr-slider>
      </div>
      <div class="settings-box embedded">
        <div class="start textarea">$i18n{displayOrientation}</div>
        <div class="md-select-wrapper">
          <select class="md-select" value="[[selectedDisplay.rotation]]"
              on-change="onOrientationChange_">
            <option value="0">$i18n{displayOrientationStandard}</option>
            <option value="90">90</option>
            <option value="180">180</option>
            <option value="270">270</option>
          </select>
          <span class="md-select-underline"></span>
        </div>
      </div>
      <div class="settings-box embedded two-line"
          on-tap="onOverscanTap_" hidden$="[[selectedDisplay.isInternal]]"
          actionable>
        <div class="start">
          $i18n{displayOverscanPageTitle}
          <div class="secondary" id="displayOverscanSecondary">
            $i18n{displayOverscanPageText}
          </div>
        </div>
        <button class="subpage-arrow" is="paper-icon-button-light"
            aria-label="$i18n{displayOverscanPageTitle}"
            aria-describedby="displayOverscanSecondary"></button>
      </div>

      <settings-display-overscan-dialog id="displayOverscan"
          display-id="{{overscanDisplayId}}">
      </settings-display-overscan-dialog>

      <div class="settings-box embedded two-line"
          on-tap="onTouchCalibrationTap_"
          hidden$="[[!showTouchCalibrationSetting_(selectedDisplay)]]"
          actionable>
        <div class="start">
          $i18n{displayTouchCalibrationTitle}
          <div class="secondary" id="touchCalibrationSecondary">
            $i18n{displayTouchCalibrationText}
          </div>
        </div>
        <button class="subpage-arrow" is="paper-icon-button-light"
            aria-label="$i18n{displayTouchCalibrationTitle}"
            aria-describedby="touchCalibrationSecondary"></button>
      </div>
    </div>
  </template>
  <script src="display.js"></script>
</dom-module>