chrome/browser/resources/settings/people_page/sync_account_control.html

<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/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. */
        -webkit-margin-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 {
        -webkit-margin-start: 8px;
      }

      .flex {
        display: flex;
        flex: 1;
        flex-direction: column;
      }

      #avatar-container {
        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-disabled {
        background: var(--google-blue-500);
      }

      #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. */
      }

      :host([showing-promo]) #banner {
        display: block;
      }

      :host([showing-promo]) #promo-header {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      :host([showing-promo]) #promo-title {
        @apply --promo-title;
      }

      :host([showing-promo]) #promo-description {
        @apply --promo-description;
      }

      :host([showing-promo]) #promo-separator {
        @apply --promo-separator;
      }

      :host([always-show-promo]) #turn-off {
        display: none;
      }
    </style>
    <div id="banner" hidden="[[syncStatus.signedIn]]"></div>
    <div class="settings-box first two-line" id="promo-header"
        hidden="[[syncStatus.signedIn]]">
      <div class="start">
        <div id="promo-title">
          [[getLabel_(promoLabelWithAccount,
              promoLabelWithNoAccount, shownAccount_)]]
        </div>
        <div class="secondary">
          [[getLabel_(promoSecondaryLabelWithAccount,
              promoSecondaryLabelWithNoAccount, shownAccount_)]]
        </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$="[[getSyncIcon_(
                  syncStatus.hasError, syncStatus.statusAction)]]">
            <iron-icon icon$="settings:[[getSyncIcon_(
                syncStatus.hasError, syncStatus.statusAction)]]"></iron-icon>
          </div>
        </div>
        <div class="middle two-line no-min-width">
          <div class="flex text-elide" id="user-info">
            <span hidden="[[syncStatus.hasError]]">
              [[shownAccount_.fullName]]
            </span>
            <span hidden="[[!syncStatus.hasError]]">
              [[getErrorLabel_('$i18nPolymer{syncNotWorking}',
                  '$i18nPolymer{syncPaused}', syncStatus.hasError,
                  syncStatus.statusAction)]]
            </span>
            <div class="secondary">
              [[getAccountLabel_(
                  '$i18nPolymer{syncingTo}', shownAccount_.email,
                  syncStatus.hasError, syncStatus.signedIn)]]
            </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 class="action-button" on-click="onSyncButtonTap_"
            hidden="[[syncStatus.signedIn]]"
            disabled="[[syncStatus.setupInProgress]]">
          [[getSubstituteLabel_(
              '$i18nPolymer{syncAsName}', shownAccount_.givenName)]]
        </paper-button>
        <paper-button class="secondary-button" on-click="onTurnOffButtonTap_"
            hidden="[[!syncStatus.signedIn]]" id="turn-off"
            disabled="[[syncStatus.setupInProgress]]">
          $i18n{turnOffSync}
        </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_" slot="item">
              <img class="account-icon small" alt=""
                  src="[[getAccountImageSrc_(item.avatarImage)]]">
              <span>[[item.email]]</span>
            </button>
          </template>
          <button class="dropdown-item" on-click="onSigninTap_" slot="item"
              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>
        </cr-action-menu>
      </template>
    </template>
  </template>
  <script src="sync_account_control.js"></script>
</dom-module>