blob: c6b49136d6c00a589139d632b8291659d210d43a [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="/shared_styles.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="user-manager-tutorial">
<template>
<style include="shared-styles">
.tutorial-slide {
@apply --cr-card-elevation;
-webkit-transition: opacity 200ms ease-in-out;
background-color: white;
border-radius: var(--cr-card-border-radius);
bottom: 0;
height: 408px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 320px;
z-index: 100;
}
:host.single-pod #yourChrome,
:host.single-pod #complete {
-webkit-margin-start: 30px;
}
#guests {
bottom: 20px;
left: auto;
margin: 0;
right: 100px;
top: auto;
}
:host-context([dir='rtl']) #guests {
left: 100px;
right: auto;
}
#friends,
#notYou {
bottom: 20px;
left: auto;
margin: 0;
right: 20px;
top: auto;
}
:host-context([dir='rtl']) #friends,
:host-context([dir='rtl']) #notYou {
left: 20px;
right: auto;
}
#notYou {
height: 100px;
width: 240px;
}
.slide-contents {
color: var(--cr-primary-text-color);
padding: 0 20px;
text-align: center;
}
.slide-title {
font-size: 20px;
line-height: 20px;
margin: 30px 0;
}
.slide-text {
font-size: 15px;
line-height: 20px;
}
.slide-buttons {
bottom: 20px;
position: absolute;
text-align: center;
width: 100%;
}
.slide-buttons [is='action-link'] {
width: 100%;
}
.slide-buttons button {
bottom: 0;
height: 35px;
padding: 0 15px;
width: 138px;
}
.arrow-down {
border-bottom: 10px solid white;
border-left: 10px solid white;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
bottom: -10px;
box-shadow: rgba(60, 64, 67, .4) -1px 1px 1px 0,
rgba(60, 64, 67, .15) -2px 2px 2px 0;
height: 0;
position: absolute;
right: 40px;
transform: rotate(-45deg);
width: 0;
}
:host-context([dir='rtl']) .arrow-down {
left: 40px;
right: auto;
}
#guests .arrow-down {
right: 110px;
}
:host-context([dir='rtl']) #guests .arrow-down {
left: 110px;
right: auto;
}
.slide-image {
border-radius:
var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0;
height: 182px;
}
#yourChrome .slide-image {
background-color: rgb(241, 202, 58);
background-image:
url(chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_YOUR_CHROME);
}
#guests .slide-image {
background-color: rgb(90, 196, 144);
background-image: url(chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_GUESTS);
}
#friends .slide-image {
background-color: var(--paper-light-blue-100);
background-image:
url(chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_FRIENDS);
}
#complete .slide-image {
background-color: white;
background-image:
url(chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_COMPLETE);
}
#notYou #dismiss {
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
}
#notYou #slide-add-user {
margin-top: 10px;
}
:host-context([dir='rtl']) #notYou #dismiss {
left: 5px;
right: auto;
}
</style>
<template is="dom-if" if="[[!hidden_]]">
<template is="dom-if"
if="[[!isStepHidden_(currentStep_, steps_.YOUR_CHROME)]]">
<div class="tutorial-slide" id="[[steps_.YOUR_CHROME]]">
<div class="slide-image"></div>
<div class="slide-contents">
<div class="slide-title">$i18n{slideYourChromeTitle}</div>
<div class="slide-text">$i18n{slideYourChromeText}</div>
</div>
<div class="slide-buttons">
<paper-button on-tap="onNextTap_" data-next$="[[steps_.GUESTS]]">
$i18n{tutorialNext}
</paper-button>
</div>
</div>
</template>
<template is="dom-if"
if="[[!isStepHidden_(currentStep_, steps_.GUESTS)]]">
<div class="tutorial-slide" id="[[steps_.GUESTS]]">
<div class="slide-image"></div>
<div class="slide-contents">
<div class="slide-title">$i18n{slideGuestsTitle}</div>
<div class="slide-text">$i18n{slideGuestsText}</div>
</div>
<div class="slide-buttons">
<paper-button on-tap="onNextTap_" data-next$="[[steps_.FRIENDS]]">
$i18n{tutorialNext}
</paper-button>
</div>
<div class="arrow-down"></div>
</div>
</template>
<template is="dom-if"
if="[[!isStepHidden_(currentStep_, steps_.FRIENDS)]]">
<div class="tutorial-slide" id="[[steps_.FRIENDS]]">
<div class="slide-image"></div>
<div class="slide-contents">
<div class="slide-title">$i18n{slideFriendsTitle}</div>
<div class="slide-text">$i18n{slideFriendsText}</div>
</div>
<div class="slide-buttons">
<paper-button on-tap="onNextTap_" data-next$="[[steps_.COMPLETE]]">
$i18n{tutorialNext}
</paper-button>
</div>
<div class="arrow-down"></div>
</div>
</template>
<template is="dom-if"
if="[[!isStepHidden_(currentStep_, steps_.COMPLETE)]]">
<div class="tutorial-slide" id="[[steps_.COMPLETE]]">
<div class="slide-image"></div>
<div class="slide-contents">
<div class="slide-title">$i18n{slideCompleteTitle}</div>
<div class="slide-text">$i18n{slideCompleteText}</div>
</div>
<div class="slide-buttons">
<paper-button on-tap="onNextTap_" data-next$="[[steps_.NOT_YOU]]">
$i18n{tutorialDone}
</paper-button>
</div>
</div>
</template>
<template is="dom-if" if="[[!isStepHidden_(currentStep_, 'notYou')]]">
<div class="tutorial-slide" id="notYou">
<iron-icon id="dismiss" icon="cr:close"
on-tap="onDissmissTap_">
</iron-icon>
<div class="slide-buttons">
<div class="slide-text">
$i18n{slideCompleteUserNotFound}
</div>
<div id="slide-add-user">
<a id="addUser" is="action-link" on-tap="onAddUserTap_">
$i18n{slideCompleteAddUser}
</a>
</div>
</div>
<div class="arrow-down"></div>
</div>
</template>
</template>
</template>
<script src="user_manager_tutorial.js"></script>
</dom-module>