Commit fa2e0893 authored by rbpotter's avatar rbpotter Committed by Commit Bot

Print Preview Refresh: Fix iron-list sizing

Fix the sizing of the print destinations list so that it is always set
to the maximum of the available space and 3 destinations of height.

This will ensure there is no double scrollbar unless the dialog is
extremely short.

Bug: 884741
Change-Id: Ieba1a4e634d667b2e6e5567cf6f80f5962bd0fde
Reviewed-on: https://chromium-review.googlesource.com/1235120Reviewed-by: default avatarScott Chen <scottchen@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593250}
parent 401094d9
......@@ -68,16 +68,23 @@
width: auto
}
cr-dialog [slot=body] {
display: flex;
flex: 1;
flex-direction: column;
}
/* Height = 3 * destination item (28px) + 10px padding + 1 line text */
#recentList {
height: calc(94px + 1rem);
flex: 0;
min-height: calc(94px + 1rem);
padding-bottom: 18px;
}
/* Height = 100vh - recent (94px + 1 line + 18px) - padding (68px) - */
/* header (82px + 1 line) - button (64px) - 2px spinner - 2px extra */
#printList {
height: calc(100vh - 330px - 2rem);
flex: 1;
min-height: calc(94px + 1rem);
padding-bottom: 0;
}
......@@ -161,21 +168,19 @@
</print-preview-search-box>
</div>
<div slot="body">
<div>
<print-preview-destination-list id="recentList"
destinations="[[recentDestinationList_]]"
search-query="[[searchQuery_]]"
list-name="$i18n{recentDestinationsTitle}"
on-destination-selected="onDestinationSelected_">
</print-preview-destination-list>
<print-preview-destination-list id="printList"
destinations="[[destinations_]]"
has-action-link loading-destinations="[[loadingDestinations_]]"
search-query="[[searchQuery_]]"
list-name="$i18n{printDestinationsTitle}"
on-destination-selected="onDestinationSelected_">
</print-preview-destination-list>
</div>
<print-preview-destination-list id="recentList"
destinations="[[recentDestinationList_]]"
search-query="[[searchQuery_]]"
list-name="$i18n{recentDestinationsTitle}"
on-destination-selected="onDestinationSelected_">
</print-preview-destination-list>
<print-preview-destination-list id="printList"
destinations="[[destinations_]]"
has-action-link loading-destinations="[[loadingDestinations_]]"
search-query="[[searchQuery_]]"
list-name="$i18n{printDestinationsTitle}"
on-destination-selected="onDestinationSelected_">
</print-preview-destination-list>
<print-preview-provisional-destination-resolver id="provisionalResolver"
destination-store="[[destinationStore]]">
</print-preview-provisional-destination-resolver>
......
......@@ -71,11 +71,6 @@ Polymer({
},
},
observers: [
'adjustHeight_(invitation_, showCloudPrintPromo, userInfo.loggedIn, ' +
'loadingDestinations_)',
],
listeners: {
'keydown': 'onKeydown_',
},
......@@ -125,30 +120,6 @@ Polymer({
}
},
/** @private */
adjustHeight_: function() {
// Baseline size of recent list + buttons + title + search box + 2px extra
let px = 328;
let lines = 2;
if (this.invitation_) {
// Invitation promo size
px += 56;
lines += 4;
}
// Icon size + padding
if (this.showCloudPrintPromo)
px += 56;
// Dropdown menu size + margin
if (this.userInfo && this.userInfo.loggedIn)
px += 44;
// Spinner extra height
if (this.loadingDestinations_)
px += 2;
// Compute sizing
this.$.printList.style.height = `calc(100vh - ${px}px - ${lines}rem)`;
},
/** @private */
onDestinationStoreSet_: function() {
assert(this.destinations_.length == 0);
......
......@@ -18,10 +18,16 @@
<template>
<style include="print-preview-shared action-link cr-hidden-style throbber">
:host {
display: block;
display: flex;
flex-direction: column;
overflow: hidden;
user-select: none;
}
#listContainer {
flex: 1;
}
.title,
.total {
color: var(--google-grey-refresh-700);
......@@ -32,6 +38,8 @@
align-items: center;
border-bottom: 2px solid var(--google-grey-300);
display: flex;
flex: 0;
min-height: 1em;
padding-bottom: 8px;
}
......@@ -103,15 +111,17 @@
<div class="no-destinations-message" hidden$="[[hasDestinations_]]">
$i18n{noDestinationsMessage}
</div>
<iron-list id="list" items="[[matchingDestinations_]]">
<template>
<print-preview-destination-list-item class="list-item"
search-query="[[searchQuery]]" destination="[[item]]"
on-click="onDestinationSelected_" on-keydown="onKeydown_"
tabindex$="[[tabIndex]]">
</print-preview-destination-list-item>
</template>
</iron-list>
<div id="listContainer">
<iron-list id="list" items="[[matchingDestinations_]]">
<template>
<print-preview-destination-list-item class="list-item"
search-query="[[searchQuery]]" destination="[[item]]"
on-click="onDestinationSelected_" on-keydown="onKeydown_"
tabindex$="[[tabIndex]]">
</print-preview-destination-list-item>
</template>
</iron-list>
</div>
</template>
<script src="destination_list.js"></script>
</dom-module>
......
......@@ -41,7 +41,6 @@ Polymer({
hasDestinations_: {
type: Boolean,
value: true,
observer: 'hasDestinationsChanged_',
},
/** @private {boolean} */
......@@ -56,6 +55,32 @@ Polymer({
'matchingDestinationsChanged_(matchingDestinations_.*)',
],
/** @private {?ResizeObserver} */
resizeObserver_: null,
attached: function() {
this.resizeObserver_ = new ResizeObserver(entries => {
if (entries === null)
return;
const entry = assert(entries[0]);
const fullHeight = entry.contentRect.height;
// Setting maxHeight to 0 freezes the UI when re-rendering the dialog.
if (fullHeight > 0) {
this.$.list.style.maxHeight = `${fullHeight}px`;
this.forceIronResize();
}
});
this.resizeObserver_.observe(this.$.listContainer);
},
detached: function() {
if (this.resizeObserver_) {
this.resizeObserver_.disconnect();
this.resizeObserver_ = null;
}
},
// This is a workaround to ensure that the iron-list correctly updates the
// displayed destination information when the elements in the
// |matchingDestinations_| array change, instead of using stale information
......@@ -79,6 +104,7 @@ Polymer({
this.destinations.filter(
d => d.matches(/** @type {!RegExp} */ (this.searchQuery))) :
this.destinations.slice());
this.forceIronResize();
},
/** @private */
......@@ -111,12 +137,5 @@ Polymer({
onDestinationSelected_: function(e) {
this.fire('destination-selected', e.target);
},
/** @private */
hasDestinationsChanged_: function() {
// If there are no destinations, leave space for "no destinations" message.
this.$.list.style.height = this.hasDestinations_ ?
'calc(100% - 1rem - 9px)' : 'calc(100% - 2rem - 9px)';
},
});
})();
......@@ -83,11 +83,11 @@
};
}
cr-dialog div[slot='title'] {
#dialog div[slot='title'] {
padding-bottom: 0;
}
cr-dialog div[slot='button-container'] {
#dialog div[slot='button-container'] {
align-items: center;
box-shadow: 0 -1px 1px 0 rgba(60, 64, 67, 0.3);
min-height: 64px;
......
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