blob: 51754fddea5bde4ae4249512cc54807a92a0500b [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="profile_info_browser_proxy.html">
<link rel="import" href="sync_browser_proxy.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<dom-module id="settings-sync-account-control">
<template>
<style include="settings-shared">
:host {
--sync-icon-size: 16px;
--sync-icon-border-size: 2px;
--shown-avatar-size: 40px;
}
setting-box.middle {
/* Per spec, middle text is indented 20px in this section. */
margin-inline-start: 20px;
}
.account-icon {
border-radius: 20px;
flex-shrink: 0;
height: var(--shown-avatar-size);
width: var(--shown-avatar-size);
}
.account-icon.small {
height: 20px;
width: 20px;
}
#menu .dropdown-item {
padding: 12px;
}
#menu .dropdown-item span {
margin-inline-start: 8px;
}
.flex {
display: flex;
flex: 1;
flex-direction: column;
}
#avatar-container {
height: var(--shown-avatar-size);
position: relative;
}
#sync-icon-container {
align-items: center;
background: var(--google-green-700);
border: var(--sync-icon-border-size) solid white;
border-radius: 50%;
display: flex;
height: var(--sync-icon-size);
position: absolute;
right: -6px;
top: calc(var(--shown-avatar-size) - var(--sync-icon-size) -
var(--sync-icon-border-size));
width: var(--sync-icon-size);
}
:host-context([dir='rtl']) #sync-icon-container {
left: -6px;
right: initial;
}
#sync-icon-container.sync-problem {
background: var(--settings-error-color);
}
#sync-icon-container.sync-paused {
background: var(--google-blue-500);
}
#sync-icon-container.sync-disabled {
background: var(--google-grey-400);
}
#sync-icon-container iron-icon {
fill: white;
height: 12px;
margin: auto;
width: 12px;
}
#sign-in {
min-width: 100px;
}
#banner {
background-color: rgb(248, 249, 250);
background-image: url(../images/sync_banner.svg);
background-repeat: no-repeat;
background-size: 100% auto;
display: none;
padding-top: calc(120 / 680 * 100%); /* Keep background ratio. */
@apply --promo-banner;
}
:host([showing-promo]) #banner {
display: block;
}
:host([showing-promo]) #promo-title {
@apply --promo-title;
}
:host([showing-promo]) #promo-description {
@apply --promo-description;
}
:host([showing-promo]) #promo-separator {
@apply --promo-separator;
}
</style>
<div id="banner" hidden="[[syncStatus.signedIn]]"></div>
<div class$="settings-box first
[[getPromoHeaderClass_(subLabel_)]]"
id="promo-header" hidden="[[syncStatus.signedIn]]">
<div class="start settings-box-text">
<div id="promo-title">
[[getLabel_(promoLabelWithAccount,
promoLabelWithNoAccount, shownAccount_)]]
</div>
<div class="secondary">[[subLabel_]]</div>
</div>
<div id="promo-separator" class="separator"
hidden="[[shouldShowAvatarRow_]]"></div>
<paper-button class="action-button" on-click="onSigninTap_"
disabled="[[syncStatus.setupInProgress]]" id="sign-in"
hidden="[[shouldShowAvatarRow_]]">
$i18n{peopleSignIn}
</paper-button>
</div>
<template is="dom-if" if="[[shouldShowAvatarRow_]]">
<div class="settings-box first two-line" id="avatar-row">
<div id="avatar-container">
<img class="account-icon" alt=""
src="[[getAccountImageSrc_(shownAccount_.avatarImage)]]">
<div id="sync-icon-container" hidden="[[!syncStatus.signedIn]]"
class$="[[getSyncIconStyle_(
syncStatus.hasError, syncStatus.statusAction,
syncStatus.disabled)]]">
<iron-icon icon$="[[getSyncIcon_(
syncStatus.hasError, syncStatus.statusAction,
syncStatus.disabled)]]"></iron-icon>
</div>
</div>
<div class="middle two-line no-min-width">
<div class="flex text-elide settings-box-text" id="user-info">
<span>
[[getAvatarRowTitle_(shownAccount_.fullName,
'$i18nPolymer{syncNotWorking}', '$i18nPolymer{syncPaused}',
'$i18nPolymer{syncDisabled}', syncStatus.hasError,
syncStatus.statusAction, syncStatus.disabled)]]
</span>
<div class="secondary">
[[getAccountLabel_(
'$i18nPolymer{syncingTo}', shownAccount_.email,
syncStatus.hasError, syncStatus.signedIn,
syncStatus.disabled, syncStatus.setupInProgress,
unifiedConsentEnabled)]]
</div>
</div>
</div>
<paper-icon-button-light class="icon-arrow-dropdown"
hidden="[[syncStatus.signedIn]]">
<button on-click="onMenuButtonTap_" id="dropdown-arrow"
aria-label="$i18n{useAnotherAccount}">
</button>
</paper-icon-button-light>
<div class="separator" hidden="[[syncStatus.signedIn]]"></div>
<paper-button id="sync-button" class="action-button"
hidden="[[syncStatus.signedIn]]" on-click="onSyncButtonTap_"
disabled="[[syncStatus.setupInProgress]]">
$i18n{peopleSignIn}
</paper-button>
<paper-button id="turn-off" class="secondary-button"
hidden="[[!shouldShowTurnOffButton_(syncStatus.signedIn,
showSetupButtons_)]]"
on-click="onTurnOffButtonTap_"
disabled="[[syncStatus.setupInProgress]]">
$i18n{turnOffSync}
</paper-button>
<paper-button id="sync-error-button" class="action-button"
hidden="[[!shouldShowErrorActionButton_(syncStatus,
showSetupButtons_)]]"
on-click="onErrorButtonTap_"
disabled="[[syncStatus.setupInProgress]]">
[[syncStatus.statusActionText]]
</paper-button>
<div id="setup-buttons" hidden="[[!showSetupButtons_]]">
<paper-button class="secondary-button" on-click="onSetupCancel_">
$i18n{cancel}
</paper-button>
<paper-button class="action-button" on-click="onSetupConfirm_">
$i18n{confirm}
</paper-button>
</div>
</div>
<template is="dom-if" if="[[!syncStatus.signedIn]]" restamp>
<cr-action-menu id="menu" auto-reposition>
<template is="dom-repeat" items="[[storedAccounts_]]">
<button class="dropdown-item" on-click="onAccountTap_">
<img class="account-icon small" alt=""
src="[[getAccountImageSrc_(item.avatarImage)]]">
<span>[[item.email]]</span>
</button>
</template>
<button class="dropdown-item" on-click="onSigninTap_"
disabled="[[syncStatus.setupInProgress]]" id="sign-in-item">
<img class="account-icon small" alt=""
src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
<span>$i18n{useAnotherAccount}</span>
</button>
<button class="dropdown-item" on-click="onSignoutTap_"
disabled="[[syncStatus.setupInProgress]]" id="sign-out-item">
<iron-icon icon="settings:exit-to-app"></iron-icon>
<span>$i18n{peopleSignOut}</span>
</button>
</cr-action-menu>
</template>
</template>
</template>
<script src="sync_account_control.js"></script>
</dom-module>