blob: badf36b444ca053f18d04e5803017b4e36a9a86f [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-styles/color.html">
<link rel="import" href="signin_shared_css.html">
<link rel="import" href="sync_confirmation_browser_proxy.html">
<script src="chrome://sync-confirmation/strings.js"></script>
<dom-module id="sync-confirmation-app">
<template>
<style include="signin-dialog-shared paper-button-style">
:host {
color: var(--cr-primary-text-color);
display: block;
}
paper-button {
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.action-container {
bottom: 0;
box-sizing: border-box;
position: absolute;
width: 100%;
}
paper-button:not(.action-button) {
margin-inline-start: 8px;
}
<if expr="is_macosx or is_linux">
/* This works together with the button-flip in signin-dialog-shared. */
paper-button:not(.action-button) {
margin-inline-end: 8px;
margin-inline-start: 0;
}
</if>
#illustration-container {
height: 168px;
margin-bottom: 32px;
position: relative;
width: 100%;
}
#illustration {
background: url(./images/sync_confirmation_illustration.svg);
background-size: 100% 100%;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
:host-context([dark]) #illustration {
background-image: url(./images/sync_confirmation_illustration_dark.svg);
}
#illustration-container > img {
border-radius: 50%;
height: 68px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 96px;
width: 68px;
}
.heading {
font-weight: normal;
margin-bottom: 32px;
padding: 0 24px;
text-align: center;
}
#content-container {
/* Saves space for button row. */
padding-bottom: 96px;
position: relative;
width: 100%;
}
.message-container {
line-height: 20px;
margin-bottom: 16px;
padding: 0 24px;
}
.secondary {
color: var(--cr-secondary-text-color);
}
:host-context(html:not([dark])) #grey-banner {
background: var(--paper-grey-50);
height: 128px;
top: 0;
width: 100%;
}
#footer {
margin-bottom: 0;
padding-top: 12px;
}
#settingsButton {
left: 16px;
position: absolute;
}
:host-context([dir='rtl']) #settingsButton {
left: auto;
right: 16px;
}
</style>
<!--
Use the 'consent-description' attribute to annotate all the UI elements
that are part of the text the user reads before consenting to the Sync
data collection . Similarly, use 'consent-confirmation' on UI elements on
which user clicks to indicate consent.
-->
<div id="illustration-container">
<div id="grey-banner"></div>
<div id="illustration"></div>
<img src="[[accountImageSrc_]]">
</div>
<div id="content-container">
<h1 id="syncConfirmationHeading" class="heading" consent-description>
$i18n{syncConfirmationTitle}
</h1>
<div class="message-container">
<div consent-description>$i18n{syncConfirmationSyncInfoTitle}</div>
<div class="secondary" consent-description>
$i18n{syncConfirmationSyncInfoDesc}
</div>
</div>
<div id="footer" class="message-container secondary">
$i18n{syncConfirmationSettingsInfo}
</div>
<div class="action-container">
<paper-button class="action-button" id="confirmButton"
on-click="onConfirm_" consent-confirmation>
$i18n{syncConfirmationConfirmLabel}
</paper-button>
<paper-button on-click="onUndo_">
$i18n{syncConfirmationUndoLabel}
</paper-button>
<paper-button id="settingsButton" on-click="onGoToSettings_"
consent-confirmation>
$i18n{syncConfirmationSettingsLabel}
</paper-button>
</div>
</div>
</template>
<script src="sync_confirmation_app.js"></script>
</dom-module>