| <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)]]" |
| on-click="onTurnOffButtonTap_" |
| disabled="[[syncStatus.setupInProgress]]"> |
| $i18n{turnOffSync} |
| </paper-button> |
| <paper-button id="sync-error-button" class="action-button" |
| hidden="[[!shouldShowErrorActionButton_(syncStatus)]]" |
| on-click="onErrorButtonTap_" |
| disabled="[[syncStatus.setupInProgress]]"> |
| [[syncStatus.statusActionText]] |
| </paper-button> |
| </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> |
