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 @@ ...@@ -11,8 +11,8 @@
<template> <template>
<style> <style>
#content { #content {
background: radial-gradient(160% 50% at 0 100%, background: linear-gradient(to top, var(--google-blue-50) 5%,
rgba(138, 180, 248, 0.25),rgba(255, 255, 255, 0)); rgba(255, 255, 255, 0) 50%);
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
height: 100%; height: 100%;
...@@ -62,14 +62,19 @@ ...@@ -62,14 +62,19 @@
cr-lottie { cr-lottie {
bottom: 0; bottom: 0;
height: 100px; height: 100px;
left: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
right: 0;
} }
</style> </style>
<nearby-page-template title="$i18n{nearbyShareFeatureName}" <nearby-page-template title="$i18n{nearbyShareFeatureName}"
sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]" sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
cancel-button-label="$i18n{cancel}"> cancel-button-label="$i18n{cancel}">
<div id="content" slot="content"> <div id="content" slot="content">
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
<div id="help"> <div id="help">
<template is="dom-if" if="[[!highVisibilityTimedOut_( <template is="dom-if" if="[[!highVisibilityTimedOut_(
remainingTimeInSeconds_, shutoffTimestamp)]]"> remainingTimeInSeconds_, shutoffTimestamp)]]">
...@@ -101,9 +106,6 @@ ...@@ -101,9 +106,6 @@
</div> </div>
</template> </template>
</div> </div>
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
</div> </div>
</nearby-page-template> </nearby-page-template>
</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