Commit 09ee331f authored by Matthew Mourgos's avatar Matthew Mourgos Committed by Commit Bot

OOBE: Add assets and styling to the gesture navigation screen.

This change adds the required icons to the gesture navigation OOBE
screen. Lottie animations are added as well, with one lottie animation
on each page (go back, go home, overview).

Bug: 976949
Change-Id: Ida70ee09793383ad29c94dd5719f9bc7e64440d5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2066078Reviewed-by: default avatarSteven Bennetts <stevenjb@chromium.org>
Reviewed-by: default avatarToni Baržić <tbarzic@chromium.org>
Commit-Queue: Matthew Mourgos <mmourgos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744765}
parent e92a1f6b
...@@ -4156,28 +4156,37 @@ ...@@ -4156,28 +4156,37 @@
</message> </message>
<!-- Strings for Oobe gesture navigation education screen --> <!-- Strings for Oobe gesture navigation education screen -->
<message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_TITLE" desc="The title in the gesture navigation education intro screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_TITLE" desc="The title in the gesture navigation education intro OOBE screen shown on the first user login.">
Introducing a new way to navigate with gestures Introducing a new way to navigate with gestures
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_NEXT_BUTTON" desc="The label for the button which advances to the next page in the gesture navigation education intro screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_NEXT_BUTTON" desc="The label for the button which advances to the next page in the gesture navigation education intro OOBE screen shown on the first user login.">
Get started Get started
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_HOME_TITLE" desc="The title in the gesture navigation education home screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_GO_HOME" desc="The label for the home gesture item in the gesture list within the gesture navigation education intro OOBE screen shown on the first user login.">
Go home
</message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_SWITCH_APP" desc="The label for the switch app gesture item in the gesture list within the gesture navigation education intro OOBE screen shown on the first user login.">
Switch to another app
</message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_INTRO_GO_BACK" desc="The label for the go back gesture item in the gesture list within the gesture navigation education intro OOBE screen shown on the first user login.">
Go back
</message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_HOME_TITLE" desc="The title in the gesture navigation education home OOBE screen shown on the first user login.">
Go Home Go Home
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_HOME_DESCRIPTION" desc="The description for the gesture navigation education home screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_HOME_DESCRIPTION" desc="The description for the gesture navigation education home OOBE screen shown on the first user login.">
To get to the Homescreen at any time, swipe up from the bottom. To get to the Homescreen at any time, swipe up from the bottom.
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_BACK_TITLE" desc="The title in the gesture navigation education back screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_BACK_TITLE" desc="The title in the gesture navigation education back OOBE screen shown on the first user login.">
Go Back Go Back
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_BACK_DESCRIPTION" desc="The description for the gesture navigation education back screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_BACK_DESCRIPTION" desc="The description for the gesture navigation education back OOBE screen shown on the first user login.">
To return to the previous screen, swipe from the side. To return to the previous screen, swipe from the side.
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_OVERVIEW_TITLE" desc="The title in the gesture navigation education overview screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_OVERVIEW_TITLE" desc="The title in the gesture navigation education overview OOBE screen shown on the first user login.">
Switch to open apps Switch to open apps
</message> </message>
<message name="IDS_OOBE_GESTURE_NAVIGATION_OVERVIEW_DESCRIPTION" desc="The description for the gesture navigation education overview screen."> <message name="IDS_OOBE_GESTURE_NAVIGATION_OVERVIEW_DESCRIPTION" desc="The description for the gesture navigation education overview OOBE screen shown on the first user login.">
To see all open app windows, swipe up from the bottom and hold. To see all open app windows, swipe up from the bottom and hold.
</message> </message>
......
b1da971f550f5926900dca051bdc3a19cfd9eefe
\ No newline at end of file
b1da971f550f5926900dca051bdc3a19cfd9eefe
\ No newline at end of file
b1da971f550f5926900dca051bdc3a19cfd9eefe
\ No newline at end of file
/* Copyright 2020 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
.gesture-animation {
height: 300px;
margin-top: -75px;
position: absolute;
width: 300px;
}
.gesture-animation-container {
height: 225px;
overflow: hidden;
position: relative;
top: 10%;
width: 300px;
}
.gesture-list-item {
display: flex;
height: 48px;
}
.gesture-list-item-icon {
align-self: flex-start;
height: 30px;
padding: 9px;
width: 30px;
}
.gesture-list-item-text {
flex: 1 1 auto;
margin: auto;
}
\ No newline at end of file
...@@ -4,16 +4,37 @@ ...@@ -4,16 +4,37 @@
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_lottie/cr_lottie.html">
<dom-module id="gesture-navigation"> <dom-module id="gesture-navigation">
<template> <template>
<link rel="stylesheet" href="oobe_flex_layout.css"> <link rel="stylesheet" href="oobe_flex_layout.css">
<link rel="stylesheet" href="gesture_navigation.css">
<oobe-dialog id="gestureIntro" has-buttons <oobe-dialog id="gestureIntro" has-buttons class="step hidden animated"
hidden="[[!isEqual_(currentPage_, 'gestureIntro')]]" hidden="[[!isEqual_(currentPage_, 'gestureIntro')]]"
title-key="gestureNavigationIntroTitle" title-key="gestureNavigationIntroTitle"
aria-label$="[[i18nDynamic(locale, 'gestureNavigationIntroTitle')]]"> aria-label$="[[i18nDynamic(locale, 'gestureNavigationIntroTitle')]]">
<div slot="footer"> <img slot="oobe-icon" src="images/gestures.svg" width="32" height="32">
<!-- content goes here --> <div slot="footer" class="flex layout vertical">
<div class="gesture-list-item">
<img class="gesture-list-item-icon" src="images/home.svg">
<div class="gesture-list-item-text">
[[i18nDynamic(locale, 'gestureNavigationIntroGoHomeItem')]]
</div>
</div>
<div class="gesture-list-item">
<img class="gesture-list-item-icon" src="images/overview.svg">
<div class="gesture-list-item-text">
[[i18nDynamic(locale, 'gestureNavigationIntroSwitchAppItem')]]
</div>
</div>
<div class="gesture-list-item">
<img class="gesture-list-item-icon" src="images/back.svg">
<div class="gesture-list-item-text">
[[i18nDynamic(locale, 'gestureNavigationIntroGoBackItem')]]
</div>
</div>
</div> </div>
<div slot="bottom-buttons" class="flex layout horizontal end-justified"> <div slot="bottom-buttons" class="flex layout horizontal end-justified">
<oobe-text-button inverse on-tap="onNext_" <oobe-text-button inverse on-tap="onNext_"
...@@ -28,8 +49,13 @@ ...@@ -28,8 +49,13 @@
title-key="gestureNavigationHomeTitle" title-key="gestureNavigationHomeTitle"
subtitle-key="gestureNavigationHomeDescription" subtitle-key="gestureNavigationHomeDescription"
aria-label$="[[i18nDynamic(locale, 'gestureNavigationHomeTitle')]]"> aria-label$="[[i18nDynamic(locale, 'gestureNavigationHomeTitle')]]">
<div slot="footer"> <img slot="oobe-icon" src="images/home.svg" width="32" height="32">
<!-- content goes here --> <div slot="footer" class="flex layout vertical center">
<div class="gesture-animation-container">
<cr-lottie animation-url="gesture_go_home.json"
class="gesture-animation">
</cr-lottie>
</div>
</div> </div>
<div slot="bottom-buttons" class="flex layout horizontal end-justified"> <div slot="bottom-buttons" class="flex layout horizontal end-justified">
<oobe-next-button on-tap="onNext_" <oobe-next-button on-tap="onNext_"
...@@ -42,8 +68,13 @@ ...@@ -42,8 +68,13 @@
title-key="gestureNavigationBackTitle" title-key="gestureNavigationBackTitle"
subtitle-key="gestureNavigationBackDescription" subtitle-key="gestureNavigationBackDescription"
aria-label$="[[i18nDynamic(locale, 'gestureNavigationBackTitle')]]"> aria-label$="[[i18nDynamic(locale, 'gestureNavigationBackTitle')]]">
<div slot="footer"> <img slot="oobe-icon" src="images/back.svg" width="32" height="32">
<!-- content goes here --> <div slot="footer" class="flex layout vertical center">
<div class="gesture-animation-container">
<cr-lottie animation-url="gesture_go_back.json"
class="gesture-animation">
</cr-lottie>
</div>
</div> </div>
<div slot="bottom-buttons" class="flex layout horizontal end-justified"> <div slot="bottom-buttons" class="flex layout horizontal end-justified">
<oobe-next-button on-tap="onNext_" <oobe-next-button on-tap="onNext_"
...@@ -56,8 +87,13 @@ ...@@ -56,8 +87,13 @@
title-key="gestureNavigationOverviewTitle" title-key="gestureNavigationOverviewTitle"
subtitle-key="gestureNavigationOverviewDescription" subtitle-key="gestureNavigationOverviewDescription"
aria-label$="[[i18nDynamic(locale, 'gestureNavigationOverviewTitle')]]"> aria-label$="[[i18nDynamic(locale, 'gestureNavigationOverviewTitle')]]">
<div slot="footer"> <img slot="oobe-icon" src="images/overview.svg" width="32" height="32">
<!-- content goes here --> <div slot="footer" class="flex layout vertical center">
<div class="gesture-animation-container">
<cr-lottie animation-url="gesture_hotseat_overview.json"
class="gesture-animation">
</cr-lottie>
</div>
</div> </div>
<div slot="bottom-buttons" class="flex layout horizontal end-justified"> <div slot="bottom-buttons" class="flex layout horizontal end-justified">
<oobe-next-button on-tap="onNext_" <oobe-next-button on-tap="onNext_"
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Enum to represent each page in the gesture navigation screen. * Enum to represent each page in the gesture navigation screen.
* @enum {string} * @enum {string}
*/ */
const gesturePage = { const GesturePage = {
INTRO: 'gestureIntro', INTRO: 'gestureIntro',
HOME: 'gestureHome', HOME: 'gestureHome',
BACK: 'gestureBack', BACK: 'gestureBack',
...@@ -22,7 +22,7 @@ Polymer({ ...@@ -22,7 +22,7 @@ Polymer({
properties: { properties: {
/** @private */ /** @private */
currentPage_: {type: String, value: gesturePage.INTRO}, currentPage_: {type: String, value: GesturePage.INTRO},
}, },
/** @override */ /** @override */
...@@ -37,7 +37,7 @@ Polymer({ ...@@ -37,7 +37,7 @@ Polymer({
* Called before the screen is shown. * Called before the screen is shown.
*/ */
onBeforeShow() { onBeforeShow() {
this.currentPage_ = gesturePage.INTRO; this.currentPage_ = GesturePage.INTRO;
this.behaviors.forEach((behavior) => { this.behaviors.forEach((behavior) => {
if (behavior.onBeforeShow) if (behavior.onBeforeShow)
behavior.onBeforeShow.call(this); behavior.onBeforeShow.call(this);
...@@ -51,21 +51,37 @@ Polymer({ ...@@ -51,21 +51,37 @@ Polymer({
*/ */
onNext_() { onNext_() {
switch (this.currentPage_) { switch (this.currentPage_) {
case gesturePage.INTRO: case GesturePage.INTRO:
this.currentPage_ = gesturePage.HOME; this.setCurrentPage_(GesturePage.HOME);
break; break;
case gesturePage.HOME: case GesturePage.HOME:
this.currentPage_ = gesturePage.BACK; this.setCurrentPage_(GesturePage.BACK);
break; break;
case gesturePage.BACK: case GesturePage.BACK:
this.currentPage_ = gesturePage.OVERVIEW; this.setCurrentPage_(GesturePage.OVERVIEW);
break; break;
case gesturePage.OVERVIEW: case GesturePage.OVERVIEW:
// Exiting the last page in the sequence - stop the animation, and
// report exit. Keep the currentPage_ value so the UI does not get
// updated until the next screen is shown.
this.setPlayCurrentScreenAnimation(false);
this.userActed('exit'); this.userActed('exit');
break; break;
} }
}, },
/**
* Set the new page, making sure to stop the animation for the old page and
* start the animation for the new page.
* @param {GesturePage} newPage The target page.
* @private
*/
setCurrentPage_(newPage) {
this.setPlayCurrentScreenAnimation(false);
this.currentPage_ = newPage;
this.setPlayCurrentScreenAnimation(true);
},
/** /**
* Comparison function for the current page. * Comparison function for the current page.
* @private * @private
...@@ -73,5 +89,18 @@ Polymer({ ...@@ -73,5 +89,18 @@ Polymer({
isEqual_(currentPage_, page_) { isEqual_(currentPage_, page_) {
return currentPage_ == page_; return currentPage_ == page_;
}, },
/**
* This will play or stop the current screen's lottie animation.
* @param {boolean} enabled Whether the animation should play or not.
* @private
*/
setPlayCurrentScreenAnimation(enabled) {
var animation =
this.$[this.currentPage_].querySelector('.gesture-animation');
if (animation) {
animation.setPlay(enabled);
}
},
}); });
})(); })();
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M32 14H7.66L18.84 2.82 16 0 0 16l16 16 2.82-2.82L7.66 18H32z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(8 8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g fill="#1A73E8" mask="url(#b)"><path d="M-8-8h48v48H-8z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path d="M0 0h59.077v59.077H0z"/><path fill="#1A73E8" d="M33.23.025a6.106 6.106 0 0 1 5.072 2.683 6.051 6.051 0 0 1 2.313-.443 6.156 6.156 0 0 1 6.154 6.153v.69a6.156 6.156 0 0 1 7.385 6.03v14.4H49.23v-14.4c0-.689-.542-1.23-1.231-1.23-.69 0-1.23.541-1.23 1.23v14.4h-4.924V8.418c0-.689-.541-1.23-1.23-1.23-.69 0-1.231.541-1.231 1.23v21.12h-4.923V6.178c0-.689-.542-1.23-1.231-1.23-.69 0-1.231.541-1.231 1.23v23.36h-4.923V11.791c0-.69-.542-1.231-1.23-1.231-.69 0-1.232.566-1.232 1.23v31.68l-13.169-6.965-1.255 1.107 14.424 15.016c.936.96 2.216 1.526 3.545 1.526H32v4.923h-3.815a9.948 9.948 0 0 1-7.114-3.028L3.1 37.317l5.096-4.505a4.928 4.928 0 0 1 5.563-.664l5.932 3.15V11.791a6.156 6.156 0 0 1 6.154-6.154c.419 0 .837.05 1.256.123.221-3.2 2.88-5.735 6.129-5.735z"/><path fill="#1A73E8" d="M52.302 41.698l2.313 5.071 2.314-5.07L62 39.384l-5.07-2.314L54.614 32l-2.313 5.07-5.071 2.315 5.07 2.313zM41.222 57.24L44.309 64l3.085-6.761 6.76-3.085-6.76-3.085-3.085-6.761-3.085 6.76-6.761 3.086 6.76 3.085z"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M16 0L0 12v24h32V12L16 0zm12 32h-6V20H10v12H4V14l12-9 12 9v18z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(8 6)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g fill="#1A73E8" mask="url(#b)"><path d="M-8-6h48v48H-8z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><path fill="#fff" d="M0 0h64v64H0z"/><path fill="#1A73E8" fill-rule="evenodd" d="M4 15.2h33.6v33.6H4V15.2zm28 5.6H9.6v22.4H32V20.8z" clip-rule="evenodd"/><path fill="#1A73E8" d="M48.8 15.2h-5.6v33.6h5.6V15.2zm11.2 0h-5.6v33.6H60V15.2z"/></svg>
\ No newline at end of file
...@@ -42,6 +42,12 @@ void GestureNavigationScreenHandler::DeclareLocalizedValues( ...@@ -42,6 +42,12 @@ void GestureNavigationScreenHandler::DeclareLocalizedValues(
IDS_OOBE_GESTURE_NAVIGATION_INTRO_TITLE); IDS_OOBE_GESTURE_NAVIGATION_INTRO_TITLE);
builder->Add("gestureNavigationIntroNextButton", builder->Add("gestureNavigationIntroNextButton",
IDS_OOBE_GESTURE_NAVIGATION_INTRO_NEXT_BUTTON); IDS_OOBE_GESTURE_NAVIGATION_INTRO_NEXT_BUTTON);
builder->Add("gestureNavigationIntroGoHomeItem",
IDS_OOBE_GESTURE_NAVIGATION_INTRO_GO_HOME);
builder->Add("gestureNavigationIntroSwitchAppItem",
IDS_OOBE_GESTURE_NAVIGATION_INTRO_SWITCH_APP);
builder->Add("gestureNavigationIntroGoBackItem",
IDS_OOBE_GESTURE_NAVIGATION_INTRO_GO_BACK);
builder->Add("gestureNavigationHomeTitle", builder->Add("gestureNavigationHomeTitle",
IDS_OOBE_GESTURE_NAVIGATION_HOME_TITLE); IDS_OOBE_GESTURE_NAVIGATION_HOME_TITLE);
builder->Add("gestureNavigationHomeDescription", builder->Add("gestureNavigationHomeDescription",
......
...@@ -189,6 +189,16 @@ void AddAssistantScreensResources(content::WebUIDataSource* source) { ...@@ -189,6 +189,16 @@ void AddAssistantScreensResources(content::WebUIDataSource* source) {
source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';"); source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
} }
void AddGestureNavigationResources(content::WebUIDataSource* source) {
source->AddResourcePath("gesture_go_home.json",
IDR_GESTURE_NAVIGATION_GO_HOME_ANIMATION);
source->AddResourcePath("gesture_go_back.json",
IDR_GESTURE_NAVIGATION_GO_BACK_ANIMATION);
source->AddResourcePath("gesture_hotseat_overview.json",
IDR_GESTURE_NAVIGATION_HOTSEAT_OVERVIEW_ANIMATION);
source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
}
void AddFingerprintResources(content::WebUIDataSource* source) { void AddFingerprintResources(content::WebUIDataSource* source) {
int animation_id; int animation_id;
bool is_lottie_animation = false; bool is_lottie_animation = false;
...@@ -283,6 +293,7 @@ content::WebUIDataSource* CreateOobeUIDataSource( ...@@ -283,6 +293,7 @@ content::WebUIDataSource* CreateOobeUIDataSource(
AddSyncConsentResources(source); AddSyncConsentResources(source);
AddArcScreensResources(source); AddArcScreensResources(source);
AddAssistantScreensResources(source); AddAssistantScreensResources(source);
AddGestureNavigationResources(source);
source->AddResourcePath(kKeyboardUtilsJSPath, IDR_KEYBOARD_UTILS_JS); source->AddResourcePath(kKeyboardUtilsJSPath, IDR_KEYBOARD_UTILS_JS);
source->OverrideContentSecurityPolicyObjectSrc( source->OverrideContentSecurityPolicyObjectSrc(
......
...@@ -108,6 +108,11 @@ ...@@ -108,6 +108,11 @@
<structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ANIMATION" file="vector/voice_laptop.json" compress="gzip" /> <structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ANIMATION" file="vector/voice_laptop.json" compress="gzip" />
<structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION" file="vector/connecting_loop.json" compress="gzip" /> <structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION" file="vector/connecting_loop.json" compress="gzip" />
<!-- Gesture Navigation animations. -->
<structure type="chrome_html" name="IDR_GESTURE_NAVIGATION_GO_HOME_ANIMATION" file="vector/gesture_go_home.json" compress="gzip" />
<structure type="chrome_html" name="IDR_GESTURE_NAVIGATION_GO_BACK_ANIMATION" file="vector/gesture_go_back.json" compress="gzip" />
<structure type="chrome_html" name="IDR_GESTURE_NAVIGATION_HOTSEAT_OVERVIEW_ANIMATION" file="vector/gesture_hotseat_overview.json" compress="gzip" />
</structures> </structures>
</release> </release>
</grit> </grit>
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment