Commit 723f857a authored by Curt Clemens's avatar Curt Clemens Committed by Chromium LUCI CQ

[Nearby] Fix pulse animation sizing on high visibility page

The pulse animation wasn't always centered on the page, sometimes had
the wrong aspect ratio, and left a blue line at the bottom of the page.

I wasn't able to reproduce the off-center behavior, but fixing the
width seems to have solved the aspect ratio and blue line problems. I
believe the cause may have had to do with the dimensions of the
cr-lottie element getting set before the page finishes rendering, and
then not updating because the width isn't set.

The radial gradient is also replaced with a linear gradient for
simplicity, but also because the right side of the page was perceptibly
less blue than the left.

The cr-lottie element is also moved to be the first child of its parent
div. The idea was to push it back in the z-order. It's difficult to see,
but the animation was actually getting rendered on top of the help text
before.

Screenshot: https://screenshot.googleplex.com/3X8u6cmSSsneUQT.png

Bug: 1157999
Change-Id: Id6b35dbfa0f21cd5019da99775a5fe47670de48b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2587209Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarJames Vecore <vecore@google.com>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#836667}
parent 4cea700f
......@@ -11,8 +11,8 @@
<template>
<style>
#content {
background: radial-gradient(160% 50% at 0 100%,
rgba(138, 180, 248, 0.25),rgba(255, 255, 255, 0));
background: linear-gradient(to top, var(--google-blue-50) 5%,
rgba(255, 255, 255, 0) 50%);
display: flex;
flex-direction: column-reverse;
height: 100%;
......@@ -62,14 +62,19 @@
cr-lottie {
bottom: 0;
height: 100px;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
}
</style>
<nearby-page-template title="$i18n{nearbyShareFeatureName}"
sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
cancel-button-label="$i18n{cancel}">
<div id="content" slot="content">
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
<div id="help">
<template is="dom-if" if="[[!highVisibilityTimedOut_(
remainingTimeInSeconds_, shutoffTimestamp)]]">
......@@ -101,9 +106,6 @@
</div>
</template>
</div>
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
</div>
</nearby-page-template>
</template>
......
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