blob: c5b2d745652a31b116a9986a6e70fcf5ca46ba8a [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/icons.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/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../settings_shared_css.html">
<dom-module id="settings-display-overscan-dialog">
<template>
<style include="settings-shared iron-flex iron-flex-alignment">
.subtitle {
margin-top: 10px;
}
.instructions {
color: var(--paper-grey-600);
margin-top: 4px;
}
.details {
margin: 40px;
}
iron-icon {
--iron-icon-fill-color: white;
background: black;
margin: 5px;
}
#move > div {
color: grey;
font-size: 150%;
}
#move > div.shift {
background: black;
color: white;
font-size: 100%;
margin: 0 8px;
padding: 4px 8px 0;
}
</style>
<cr-dialog id="dialog" on-close="close"
close-text="$i18n{close}">
<div slot="title">$i18n{displayOverscanPageTitle}</div>
<div slot="body">
<div class="subtitle" >$i18n{displayOverscanSubtitle}</div>
<div class="instructions" >$i18n{displayOverscanInstructions}</div>
<div class="details layout horizontal around-justified self-stretch">
<div class="layout vertical center">
<div class="layout horizontal">
<iron-icon icon="cr:expand-less"></iron-icon>
</div>
<div class="layout horizontal">
<iron-icon icon="settings:chevron-left"></iron-icon>
<iron-icon icon="cr:expand-more"></iron-icon>
<iron-icon icon="cr:chevron-right"></iron-icon>
</div>
<div class="label" >$i18n{displayOverscanResize}</div>
</div>
<div class="layout vertical center">
<div class="layout vertical center-justified flex">
<div id="move" class="layout horizontal">
<!-- TODO(stevenjb): Localize 'shift' for other keyboards -->
<!-- crbug.com/614827 -->
<div>( + </div><div class="shift">shift</div><div>)</div>
</div>
</div>
<div class="label">$i18n{displayOverscanPosition}</div>
</div>
</div>
</div>
<div slot="button-container">
<paper-button id="reset" class="cancel-button" on-click="onResetTap_">
$i18n{displayOverscanReset}
</paper-button>
<paper-button class="action-button" on-click="onSaveTap_">
$i18n{ok}
</paper-button>
</div>
</cr-dialog>
</template>
<script src="display_overscan_dialog.js"></script>
</dom-module>