blob: 5d1a3f8f13191845c50dd6daa553200873b18ece [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.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="display_layout.html">
<link rel="import" href="display_overscan_dialog.html">
<link rel="import" href="display_size_slider.html">
<link rel="import" href="night_light_slider.html">
<link rel="import" href="../controls/settings_dropdown_menu.html">
<link rel="import" href="../controls/settings_slider.html">
<link rel="import" href="../prefs/prefs_behavior.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 iron-flex iron-flex-alignment paper-tabs-style">
.indented {
-webkit-margin-start: var(--cr-section-indent-padding);
align-self: stretch;
padding: 0;
}
#nightLightTemperatureDiv[disabled] {
opacity: 0.38;
pointer-events: none;
}
.display-tabs {
width: 100%;
}
display-layout {
align-self: stretch;
flex: 1 1;
height: 300px;
margin: 10px;
}
.text-area {
margin: 10px 0;
}
.settings-box > paper-button:first-child {
-webkit-padding-start: 0
}
#controlsDiv > .settings-box:first-of-type {
border-top: none;
}
#nightLightSlider {
flex-grow: 1;
margin-top: 20px;
}
</style>
<div class="settings-box first layout vertical self-stretch">
<h2 class="layout self-start">
$i18n{displayArrangementTitle}
</h2>
<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>
<template is="dom-if" if="[[showMirror_(unifiedDesktopMode_, displays)]]"
restamp>
<div class="secondary self-start">
<cr-checkbox checked="[[isMirrored_(displays)]]"
on-click="onMirroredTap_"
aria-label="[[getDisplayMirrorText_(displays)]]">
<div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
</cr-checkbox>
</div>
</template>
</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 id="controlsDiv" class="settings-box layout vertical first">
<h2>[[selectedDisplay.name]]</h2>
<template is="dom-if" if="[[showUnifiedDesktop_(unifiedDesktopAvailable_,
unifiedDesktopMode_, displays)]]" restamp>
<div class="settings-box indented two-line">
<div class="start">
<div id="displayUnifiedDesktopCheckboxLabel">
$i18n{displayUnifiedDesktop}
</div>
<div class="secondary">
[[getUnifiedDesktopText_(unifiedDesktopMode_)]]
</div>
</div>
<cr-toggle checked="[[unifiedDesktopMode_]]"
on-click="onUnifiedDesktopTap_"
aria-labelledby="displayUnifiedDesktopCheckboxLabel">
</cr-toggle>
</div>
</template>
<template is="dom-if" restamp
if="[[showDisplaySelectMenu_(displays, selectedDisplay)]]">
<div class="settings-box indented">
<div id="displayScreenTitle" class="start">
$i18n{displayScreenTitle}
</div>
<select class="md-select" on-change="updatePrimaryDisplay_"
aria-labelledby="displayScreenTitle"
value="[[getDisplaySelectMenuIndex_(
selectedDisplay, primaryDisplayId)]]">
<option value="0">$i18n{displayScreenPrimary}</option>
<option value="1">$i18n{displayScreenExtended}</option>
</select>
</div>
</div>
</template>
<!-- Slider for selecting resolution when display zoom is disabled -->
<template is="dom-if" if="[[!showDisplayZoomSetting_]]">
<div class="settings-box indented two-line">
<div class="start text-area layout vertical">
<div>$i18n{displayResolutionTitle}</div>
<div class="secondary self-start">
[[getResolutionText_(selectedDisplay, selectedModePref_.value)]]
</div>
</div>
<settings-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
tick-values="[[modeValues_]]" pref="{{selectedModePref_}}"
on-change="onSelectedModeSliderChange_">
</settings-slider>
</div>
</template>
<!-- Display zoom selection slider -->
<template is="dom-if" if="[[showDisplayZoomSetting_]]">
<div class="settings-box indented two-line">
<div class="start text-area layout vertical">
<div>$i18n{displayZoomTitle}</div>
<div class="secondary self-start">$i18n{displayZoomSublabel}</div>
<div class="secondary self-start"
hidden$="[[!logicalResolutionText_]]">
[[logicalResolutionText_]]
</div>
</div>
<display-size-slider id="displaySizeSlider"
ticks="[[zoomValues_]]" pref="{{selectedZoomPref_}}"
min-label="$i18n{displaySizeSliderMinLabel}"
max-label="$i18n{displaySizeSliderMaxLabel}"
on-immediate-value-changed="onDisplaySizeSliderDrag_">
</display-size-slider>
</div>
<!-- Drop down select menu for resolution -->
<div class="settings-box indented two-line"
hidden$="[[!showDropDownResolutionSetting_(selectedDisplay)]]">
<div class="start text-area layout vertical">
<div>$i18n{displayResolutionTitle}</div>
<div class="secondary self-start">
$i18n{displayResolutionSublabel}
</div>
</div>
<settings-dropdown-menu id="displayModeSelector"
pref="{{selectedModePref_}}"
label="Display Mode Menu"
menu-options="[[displayModeList_]]">
</settings-dropdown-menu>
</div>
</template>
<template is="dom-if" if="[[!unifiedDesktopMode_]]" restamp>
<div class="settings-box indented">
<div id="displayOrientation" class="start text-area">
$i18n{displayOrientation}
</div>
<select class="md-select" value="[[selectedDisplay.rotation]]"
disabled="[[selectedDisplay.isTabletMode]]"
aria-labelledby="displayOrientation"
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>
</div>
</template>
<cr-link-row icon-class="subpage-arrow" class="indented hr"
id="overscan" label="$i18n{displayOverscanPageTitle}"
sub-label="$i18n{displayOverscanPageText}" on-click="onOverscanTap_"
hidden$="[[!showOverscanSetting_(selectedDisplay)]]">
</cr-link-row>
<settings-display-overscan-dialog id="displayOverscan"
display-id="{{overscanDisplayId}}"
on-close="onCloseOverscanDialog_">
</settings-display-overscan-dialog>
<div class="settings-box indented two-line"
on-click="onTouchCalibrationTap_"
hidden$="[[!showTouchCalibrationSetting_(selectedDisplay)]]"
actionable>
<div class="start">
$i18n{displayTouchCalibrationTitle}
<div class="secondary" id="touchCalibrationSecondary">
$i18n{displayTouchCalibrationText}
</div>
</div>
<paper-icon-button-light class="subpage-arrow">
<button aria-label="$i18n{displayTouchCalibrationTitle}"
aria-describedby="touchCalibrationSecondary"></button>
</paper-icon-button-light>
</div>
</div>
<!-- Night Light Settings -->
<template is="dom-if" if="[[nightLightFeatureEnabled_]]" restamp>
<settings-toggle-button
id="nightLightToggleButton"
label="$i18n{displayNightLightLabel}"
pref="{{prefs.ash.night_light.enabled}}"
sub-label="$i18n{displayNightLightText}">
</settings-toggle-button>
<div id="nightLightSettingsDiv"
class="settings-box continuation start layout vertical">
<!-- Color temperature slider -->
<div id="nightLightTemperatureDiv"
class="settings-box indented continuation"
disabled$="[[!prefs.ash.night_light.enabled.value]]">
<div class="start text-area" id="colorTemperatureLabel">
$i18n{displayNightLightTemperatureLabel}
</div>
<settings-slider id="colorTemperatureSlider"
aria-labelledby="colorTemperatureLabel" min="0" max="100"
scale="100" label-min="$i18n{displayNightLightTempSliderMinLabel}"
label-max="$i18n{displayNightLightTempSliderMaxLabel}"
pref="{{prefs.ash.night_light.color_temperature}}"
disabled$="[[!prefs.ash.night_light.enabled.value]]">
</settings-slider>
</div>
<!-- Schedule settings -->
<div class="settings-box indented">
<div class="start text-area">
<div id="nightLightScheduleLabel" class="label">
$i18n{displayNightLightScheduleLabel}
</div>
<div id="nightLightScheduleSubLabel" class="secondary label"
hidden$="[[!nightLightScheduleSubLabel_]]">
[[nightLightScheduleSubLabel_]]
</div>
</div>
<settings-dropdown-menu
id="nightLightScheduleTypeDropDown"
aria-labelledby="nightLightScheduleLabel"
pref="{{prefs.ash.night_light.schedule_type}}"
menu-options="[[scheduleTypesList_]]">
</settings-dropdown-menu>
</div>
<!-- Custom schedule slider -->
<div class="settings-box indented continuation">
<iron-collapse id="nightLightCustomScheduleCollapse"
class="start text-area layout vertical"
opened="[[shouldOpenCustomScheduleCollapse_]]">
<div class="settings-box continuation self-stretch">
<night-light-slider id="nightLightSlider" prefs="{{prefs}}">
</night-light-slider>
</div>
</iron-collapse>
</div>
</div>
</template>
</template>
<script src="display.js"></script>
</dom-module>