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

Print Preview Refresh: Address UI review comments

(1) Increase line height for destinations items
(2) Remove "Advanced" label for printer options button
(3) Remove margin on paper-icon-button so Print with system dialog...
    does not wrap (for English + normal font size)
(4) Change pages per sheet label to sentence case
(5) Fix alignment of "Destinations" label with printer names,
    particularly for printers that do not have a status/location
    displayed.

Bug: 891375, 891378, 891379, 891395, 891577
Change-Id: I13fbcd167e2e9ee513ef056ce5c9e471248dd3d8
Reviewed-on: https://chromium-review.googlesource.com/c/1257370
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596332}
parent 3764afed
......@@ -80,7 +80,7 @@
Scale
</message>
<message name="IDS_PRINT_PREVIEW_PAGES_PER_SHEET_LABEL" desc="Pages per sheet option label.">
Pages Per Sheet
Pages per sheet
</message>
<message name="IDS_PRINT_PREVIEW_EXAMPLE_PAGE_RANGE_TEXT" desc="Example page range text.">
e.g. 1-5, 8, 11-13
......
......@@ -22,7 +22,7 @@
}
</style>
<print-preview-settings-section>
<span slot="title">$i18n{advancedOptionsLabel}</span>
<span slot="title"></span>
<div slot="controls">
<paper-button id="button" disabled$="[[disabled]]"
on-click="onButtonClick_">
......
......@@ -69,20 +69,12 @@
padding-bottom: 16px;
}
#container > *,
#container iron-collapse > * {
.settings-section {
display: block;
margin-bottom: 16px;
margin-top: 16px;
}
#container print-preview-more-settings,
#container iron-collapse,
#container print-preview-link-container {
margin-bottom: 0;
margin-top: 0;
}
#preview-area-container {
align-items: center;
background-color: var(--google-grey-200);
......@@ -108,24 +100,24 @@
invitation-store="[[invitationStore_]]"
disabled="[[controlsDisabled_]]" state="[[state]]"
recent-destinations="[[recentDestinations_]]"
user-info="{{userInfo_}}" available>
user-info="{{userInfo_}}" available class="settings-section">
</print-preview-destination-settings>
<print-preview-pages-settings settings="{{settings}}"
document-info="[[documentInfo_]]"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.pages.available]]">
hidden$="[[!settings.pages.available]]" class="settings-section">
</print-preview-pages-settings>
<print-preview-copies-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.copies.available]]">
hidden$="[[!settings.copies.available]]" class="settings-section">
</print-preview-copies-settings>
<print-preview-layout-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.layout.available]]">
hidden$="[[!settings.layout.available]]" class="settings-section">
</print-preview-layout-settings>
<print-preview-color-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.color.available]]">
hidden$="[[!settings.color.available]]" class="settings-section">
</print-preview-color-settings>
<print-preview-more-settings
settings-expanded-by-user="{{settingsExpandedByUser_}}"
......@@ -138,35 +130,41 @@
<print-preview-media-size-settings settings="{{settings}}"
capability="[[destination_.capabilities.printer.media_size]]"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.mediaSize.available]]">
hidden$="[[!settings.mediaSize.available]]"
class="settings-section">
</print-preview-media-size-settings>
<template is="dom-if" if="[[showPagesPerSheet_]]">
<print-preview-pages-per-sheet-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.pagesPerSheet.available]]">
hidden$="[[!settings.pagesPerSheet.available]]"
class="settings-section">
</print-preview-pages-per-sheet-settings>
</template>
<print-preview-margins-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.margins.available]]">
hidden$="[[!settings.margins.available]]"
class="settings-section">
</print-preview-margins-settings>
<print-preview-dpi-settings settings="{{settings}}"
capability="[[destination_.capabilities.printer.dpi]]"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.dpi.available]]">
hidden$="[[!settings.dpi.available]]" class="settings-section">
</print-preview-dpi-settings>
<print-preview-scaling-settings settings="{{settings}}"
document-info="[[documentInfo_]]" disabled="[[controlsDisabled_]]"
hidden$="[[!settings.scaling.available]]">
hidden$="[[!settings.scaling.available]]"
class="settings-section">
</print-preview-scaling-settings>
<print-preview-other-options-settings settings="{{settings}}"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.otherOptions.available]]">
hidden$="[[!settings.otherOptions.available]]"
class="settings-section">
</print-preview-other-options-settings>
<print-preview-advanced-options-settings
settings="{{settings}}" destination="[[destination_]]"
disabled="[[controlsDisabled_]]"
hidden$="[[!settings.vendorItems.available]]">
hidden$="[[!settings.vendorItems.available]]"
class="settings-section">
</print-preview-advanced-options-settings>
</iron-collapse>
<if expr="not chromeos">
......
......@@ -74,16 +74,20 @@
flex-direction: column;
}
/* Height = 3 * destination item (28px) + 10px padding + 1 line text */
/* Height = 3 * destination item + 10px padding + 1 line text */
#recentList,
#printList {
min-height:
calc(3 * var(--destination-item-height) + 10px + 20 / 13 * 1rem);
}
#recentList {
flex: 0;
min-height: calc(94px + 20 / 13 * 1rem);
padding-bottom: 18px;
}
#printList {
flex: 1;
min-height: calc(94px + 20 / 13 * 1rem);
padding-bottom: 0;
}
......
......@@ -26,7 +26,7 @@
#listContainer {
flex: 1;
min-height: 84px;
min-height: calc(3 * var(--destination-item-height));
}
.title,
......
......@@ -65,7 +65,7 @@ Polymer({
const entry = assert(entries[0]);
// Don't set maxHeight below the minimum height.
const fullHeight = Math.max(entry.contentRect.height, 84);
const fullHeight = Math.max(entry.contentRect.height, 96);
this.$.list.style.maxHeight = `${fullHeight}px`;
this.forceIronResize();
});
......
......@@ -20,7 +20,7 @@
cursor: default;
display: flex;
font-size: calc(12/13 * 1em);
min-height: 28px;
min-height: var(--destination-item-height);
opacity: .87;
padding-bottom: 2px;
padding-inline-end: 2px;
......
......@@ -22,13 +22,9 @@
<dom-module id="print-preview-destination-settings">
<template>
<style include="print-preview-shared paper-button-style throbber cr-hidden-style">
print-preview-settings-section {
margin-top: 16px;
}
paper-button {
margin: 2px;
margin-top: 12px;
margin-top: 8px;
width: 89px;
}
......@@ -40,7 +36,6 @@
.throbber-container {
align-items: center;
display: flex;
min-height: 28px;
overflow: hidden;
}
......@@ -56,16 +51,16 @@
overflow: hidden;
}
.destination-name {
line-height: calc(20/13 * 1em);
}
.destination-location,
.destination-connection-status {
color: var(--google-grey-700);
font-size: calc(12/13 * 1em);
}
.destination-name {
margin-bottom: 4px;
}
.destination-info-wrapper > div,
.destination-throbber-name {
flex: 1;
......@@ -78,7 +73,7 @@
opacity: 0.4;
}
</style>
<print-preview-settings-section class="multirow-controls">
<print-preview-settings-section>
<span slot="title">$i18n{destinationLabel}</span>
<div slot="controls">
<div class="throbber-container" hidden="[[!loadingDestination_]]">
......@@ -96,6 +91,11 @@
</div>
</div>
</div>
</div>
</print-preview-settings-section>
<print-preview-settings-section>
<div slot="title"></div>
<div slot="controls">
<paper-button
disabled$="[[shouldDisableButton_(destinationStore, disabled,
state)]]"
......
......@@ -9,6 +9,14 @@
<dom-module id="print-preview-link-container">
<template>
<style include="print-preview-shared throbber cr-hidden-style">
:host paper-icon-button-light {
--cr-paper-icon-button-margin: {
margin-inline-end: -6px;
margin-inline-start: 0;
};
--cr-icon-size: 16px;
}
.link:not([actionable]) {
pointer-events: none;
}
......
......@@ -35,10 +35,14 @@
cursor: default;
height: 100%;
}
:host #title {
justify-content: flex-start;
padding-top: 9px;
}
</style>
<print-preview-settings-section
class="input-settings-section multirow-controls">
<span slot="title">$i18n{pagesLabel}</span>
<print-preview-settings-section>
<span id="title" slot="title">$i18n{pagesLabel}</span>
<div slot="controls" id="controls">
<paper-radio-group selectable="cr-radio-button" class="radio"
disabled$="[[controlsDisabled_]]"
......
......@@ -17,6 +17,7 @@
--print-preview-dialog-margin: 34px;
--cr-form-field-label-height: 1.5rem;
--cr-form-field-label-line-height: .75rem;
--destination-item-height: 32px;
}
/* Default state ********************************************************/
......
......@@ -34,16 +34,12 @@
color: var(--google-grey-900);
flex: none;
font-size: 1em;
line-height: calc(20/13 * 1em);
padding-inline-end: var(--policy-icon-padding);
width: calc(75px - var(--policy-icon-padding));
word-break: break-word;
}
:host(.multirow-controls) ::slotted([slot=title]) {
justify-content: flex-start;
padding-top: 10px;
}
:host([managed]:not([show-policy-on-end])) ::slotted([slot=title]) {
width: calc(75px - var(--policy-icon-size)
- var(--policy-icon-padding));
......
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