Commit 608ae5a0 authored by Curt Clemens's avatar Curt Clemens Committed by Commit Bot

[Nearby] Fix share target list hitbox and scroll, adjust layout, colors

After the third element in the share target list, clicking would not
select properly. The problem was the transparent ripple animation being
higher in the z-order and capturing the click events.

The share target list wasn't scrolling because its height wasn't fixed.
Setting its flexbox alignment to stretch allows it to fill its parent
div without overflowing.

A number of small adjustments to layout included, mostly to bring
margins closer to spec. The page template title and subtitle font sizes
and line heights have been adjusted.

Some minor changes to colors. A white background has been added to
the share target list items so that the ripple animation doesn't show
through. The gradient at the bottom of the discovery page is simplified.
Hard-coded colors have been replaced with variables in several places.

Fix: 1151374
Change-Id: Ie405cd046559c3b7c82bfb86a226c77aba2283df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2551590Reviewed-by: default avatarJames Vecore <vecore@google.com>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#829816}
parent 4c4cedea
<style>
#wrapper {
align-items: center;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(216, 216, 216, 0.76);
border-radius: 8px;
box-sizing: border-box;
......@@ -19,11 +20,11 @@
}
:host(:focus) #wrapper {
border-color: rgb(95, 99, 104);
border-color: var(--google-grey-refresh-700);
}
:host([is-selected]) #wrapper {
border-color: rgb(66, 133, 244);
border-color: var(--google-blue-refresh-500);
}
:host([is-selected]) #done {
......@@ -31,11 +32,11 @@
}
:host([is-selected]) #name {
color: rgb(26, 115, 232);
color: var(--google-blue-600);
}
#done {
color: rgb(26, 115, 232);
color: var(--google-blue-600);
display: none;
flex-shrink: 0;
height: 17px;
......
......@@ -6,8 +6,8 @@
}
#centerContent {
background: radial-gradient(160% 50% at 0 100%,
rgba(var(--google-blue-refresh-300-rgb), 0.25), rgba(255, 255, 255, 0));
background: linear-gradient(to top, var(--google-blue-50) 5%,
rgba(255, 255, 255, 0) 50%);
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -17,6 +17,7 @@
}
#deviceList {
align-self: stretch;
display: block;
margin-top: 12px;
overflow: auto;
......@@ -72,9 +73,10 @@
flex-direction: row;
font-size: 9px;
line-height: 12px;
margin-block-end: 8px;
margin-inline-end: var(--nearby-page-space-inline);
margin-inline-start: var(--nearby-page-space-inline);
padding: 8px;
padding: 0 8px;
}
#helpText {
......@@ -96,9 +98,10 @@
#process-row {
align-items: flex-start;
display: flex;
flex-grow: 1;
justify-content: space-between;
margin: auto 0;
margin-block-start: 48px;
margin-block-end: 24px;
margin-block-start: 8px;
overflow: hidden;
}
......@@ -110,7 +113,7 @@
#placeholder {
align-self: center;
color: rgb(95, 99, 104);
color: var(--google-grey-refresh-700);
font-size: 13px;
line-height: 20px;
margin-inline-end: var(--nearby-page-space-large-inline);
......@@ -125,6 +128,9 @@
cancel-button-label="$i18n{nearbyShareActionsCancel}"
cancel-button-event-name="close">
<div id="centerContent" slot="content">
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
<div id="process-row">
<nearby-preview send-preview="[[sendPreview]]"></nearby-preview>
<div id="placeholder"
......@@ -168,8 +174,5 @@
</div>
</div>
</template>
<cr-lottie animation-url="nearby_share_pulse_animation.json"
autoplay="true">
</cr-lottie>
</div>
</nearby-page-template>
......@@ -32,8 +32,14 @@
}
#pageTitle {
font-size: 1.1em;
font-size: 16px;
font-weight: bold;
line-height: 24px;
}
#pageSubTitle {
font-size: 14px;
line-height: 20px;
}
#actions {
......
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