<style include="cr-shared-style settings-shared iron-flex">
.sync-row {
align-items: center;
flex: auto;
}
#profile-icon {
background: center / cover no-repeat;
border-radius: 20px;
flex-shrink: 0;
height: 40px;
width: 40px;
}
#sync-setup {
--cr-secondary-text-color: var(--settings-error-color);
}
cr-link-row {
--cr-link-row-icon-width: 40px;
border-top: var(--cr-separator-line);
}
.icon-container {
display: flex;
flex-shrink: 0;
justify-content: center;
width: 40px;
}
#toast {
left: 0;
z-index: 1;
}
:host-context([dir='rtl']) #toast {
left: auto;
right: 0;
}
settings-sync-account-control[showing-promo]::part(banner) {
/* Make the banner image stay within setting-section's card border
radius. */
border-top-left-radius: var(--cr-card-border-radius);
border-top-right-radius: var(--cr-card-border-radius);
}
settings-sync-account-control[showing-promo]::part(title) {
font-size: 1.1rem;
line-height: 1.625rem;
}
</style>
<settings-animated-pages id="pages" section="people"
focus-config="[[focusConfig_]]">
<div route-path="default">
<if expr="not chromeos_ash">
<template is="dom-if" if="[[shouldShowSyncAccountControl_(
syncStatus.syncSystemEnabled)]]">
<settings-sync-account-control
sync-status="[[syncStatus]]"
prefs="{{prefs}}"
promo-label-with-account="$i18n{peopleSignInPrompt}"
promo-label-with-no-account="$i18n{peopleSignInPrompt}"
promo-secondary-label-with-account=
"$i18n{peopleSignInPromptSecondaryWithAccount}"
promo-secondary-label-with-no-account=
"$i18n{peopleSignInPromptSecondaryWithNoAccount}">
</settings-sync-account-control>
</template>
</if>
<template is="dom-if" if="[[!shouldShowSyncAccountControl_(
syncStatus.syncSystemEnabled, signinAllowed_)]]" restamp>
<div id="profile-row" class="cr-row first two-line"
actionable$="[[isProfileActionable_]]"
on-click="onProfileClick_">
<template is="dom-if" if="[[syncStatus]]">
<div id="profile-icon"
style="background-image: [[getIconImageSet_(
profileIconUrl_)]]">
</div>
<div class="flex cr-row-gap cr-padded-text text-elide">
<span id="profile-name">[[profileName_]]</span>
<!-- When the user is signed-in, the settings-sync-account-control is always
shown on non-ChromeOS platforms -->
<if expr="chromeos_ash">
<div class="secondary" hidden="[[!isSyncing_(
syncStatus.signedInState)]]">
[[syncStatus.signedInUsername]]
</div>
</if>
</div>
<if expr="not chromeos_ash">
<cr-icon-button class="subpage-arrow"
aria-label="$i18n{editPerson}"
aria-describedby="profile-name"
aria-roledescription="$i18n{subpageArrowRoleDescription}">
</cr-icon-button>
</if>
<if expr="chromeos_ash">
<cr-icon-button class="icon-external"
id="profile-subpage-arrow"
hidden="[[!isProfileActionable_]]"
aria-label="$i18n{accountManagerSubMenuLabel}"
aria-describedby="profile-name"></cr-icon-button>
</if>
</template>
</div>
</template> <!-- if="[[!shouldShowSyncAccountControl_()]]" -->
<cr-link-row id="sync-setup"
label="$i18n{syncAndNonPersonalizedServices}"
sub-label="[[getSyncAndGoogleServicesSubtext_(syncStatus)]]"
on-click="onSyncClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<if expr="not chromeos_ash">
<template is="dom-if" if="[[signinAllowed_]]">
<cr-link-row id="manage-google-account"
label="$i18n{manageGoogleAccount}"
hidden="[[!shouldShowGoogleAccount_]]"
on-click="openGoogleAccount_" external></cr-link-row>
<cr-link-row id="edit-profile"
label="$i18n{profileNameAndPicture}"
on-click="onProfileClick_" ></cr-link-row>
</template>
</if>
<if expr="not is_chromeos">
<cr-link-row id="importDataDialogTrigger"
label="$i18n{importTitle}"
on-click="onImportDataClick_"></cr-link-row>
</if>
</div>
<template is="dom-if" route-path="/syncSetup">
<settings-subpage
associated-control="[[$$('#sync-setup')]]"
page-title="$i18n{syncPageTitle}"
learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
<settings-sync-page
sync-status="[[syncStatus]]" prefs="{{prefs}}"
page-visibility="[[pageVisibility.privacy]]"
focus-config="[[focusConfig_]]">
</settings-sync-page>
</settings-subpage>
</template>
<template is="dom-if" route-path="/syncSetup/advanced">
<settings-subpage page-title="$i18n{syncAdvancedPageTitle}"
associated-control="[[$$('#sync-setup')]]"
learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
<settings-sync-controls sync-status="[[syncStatus]]">
</settings-sync-controls>
</settings-subpage>
</template>
<template is="dom-if" route-path="/syncSetup/pageContent">
<settings-subpage page-title="$i18n{pageContentPageTitle}"
associated-control="[[$$('#sync-setup')]]">
<settings-page-content-page prefs="{{prefs}}">
</settings-page-content-page>
</settings-subpage>
</template>
<template is="dom-if" if="[[showHistorySearchControl_]]">
<template is="dom-if" route-path="/historySearch">
<settings-subpage page-title="$i18n{historySearchSettingLabel}"
associated-control="[[$$('#sync-setup')]]">
<settings-history-search-page prefs="{{prefs}}">
</settings-history-search-page>
</settings-subpage>
</template>
</template>
<if expr="not chromeos_ash">
<template is="dom-if" route-path="/manageProfile">
<settings-subpage
associated-control=
"[[getEditPersonAssocControl_(signinAllowed_)]]"
page-title="$i18n{editPerson}">
<settings-manage-profile profile-name="[[profileName_]]"
sync-status="[[syncStatus]]">
</settings-manage-profile>
</settings-subpage>
</template>
</if>
</settings-animated-pages>
<if expr="not chromeos_ash">
<template is="dom-if" if="[[showSignoutDialog_]]" restamp>
<settings-signout-dialog sync-status="[[syncStatus]]"
on-close="onDisconnectDialogClosed_">
</settings-signout-dialog>
</template>
<template is="dom-if" if="[[showImportDataDialog_]]" restamp>
<settings-import-data-dialog prefs="{{prefs}}"
on-close="onImportDataDialogClosed_">
</settings-import-data-dialog>
</template>
</if>
<cr-toast duration="3000" id="toast">
<span>$i18n{syncSettingsSavedToast}</span>
</cr-toast>