Print Preview Layout Changes: Update preview area/plugin styling
Update the styling/colors of the preview area and plugin to match the mocks (lighter background color, and smaller, lighter zoom buttons). The lighter new colors look out of place in dark mode, so also adding separate colors for dark mode. See bug for screenshots. Bug: 945619 Change-Id: I600d6ec6cd6422ad9b2bab1c0218504744220170 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1560450 Reviewed-by: Lei Zhang <thestig@chromium.org> Reviewed-by: Dan Beam <dbeam@chromium.org> Commit-Queue: Rebekah Potter <rbpotter@chromium.org> Cr-Commit-Position: refs/heads/master@{#650020}
This commit is contained in:
chrome
browser
resources
test
data
webui
print_preview
pdf
@ -1,9 +1,18 @@
|
||||
<link rel="import" href="chrome://resources/html/polymer.html">
|
||||
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
|
||||
<link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.html">
|
||||
|
||||
<dom-module id="viewer-zoom-button">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
--translate-x-distance: 132px;
|
||||
}
|
||||
|
||||
:host([new-print-preview]) {
|
||||
--translate-x-distance: 96px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
transition: transform 250ms;
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
@ -12,12 +21,12 @@
|
||||
:host([closed]) #wrapper {
|
||||
/* 132px roughly flips the location of the button across the right edge
|
||||
* of the page. */
|
||||
transform: translateX(132px);
|
||||
transform: translateX(var(--translate-x-distance));
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
:host([show-on-left][closed]) #wrapper {
|
||||
transform: translateX(-132px);
|
||||
transform: translateX(calc(-1 * var(--translate-x-distance)));
|
||||
}
|
||||
|
||||
paper-fab {
|
||||
@ -31,9 +40,32 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:host([new-print-preview]) paper-fab {
|
||||
--paper-fab-mini: {
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
width: 24px;
|
||||
};
|
||||
background-color: var(--google-grey-100);
|
||||
color: var(--google-grey-refresh-700);
|
||||
}
|
||||
|
||||
:host-context([dark]):host([new-print-preview]) paper-fab {
|
||||
background-color: var(--google-grey-900);
|
||||
color: var(--google-grey-200);
|
||||
}
|
||||
|
||||
paper-fab.keyboard-focus {
|
||||
background-color: var(--viewer-icon-ink-color);
|
||||
}
|
||||
|
||||
:host([new-print-preview]) paper-fab.keyboard-focus {
|
||||
background-color: var(--google-grey-200);
|
||||
}
|
||||
|
||||
:host-context([dark]):host([new-print-preview]) paper-fab.keyboard-focus {
|
||||
background-color: var(--google-grey-800);
|
||||
}
|
||||
</style>
|
||||
<div id="wrapper">
|
||||
<paper-fab id="button" mini icon="[[visibleIcon_]]" on-click="fireClick"
|
||||
|
@ -26,6 +26,8 @@ Polymer({
|
||||
|
||||
delay: {type: Number, observer: 'delayChanged_'},
|
||||
|
||||
newPrintPreview: {type: Boolean, reflectToAttribute: true},
|
||||
|
||||
showOnLeft: {type: Boolean, reflectToAttribute: true},
|
||||
|
||||
/**
|
||||
|
@ -8,6 +8,7 @@
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
--button-position-offset: 48px;
|
||||
bottom: 0;
|
||||
padding: 48px 0;
|
||||
position: fixed;
|
||||
@ -16,6 +17,10 @@
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
:host([new-print-preview]) {
|
||||
--button-position-offset: 24px;
|
||||
}
|
||||
|
||||
:host([show-on-left_]) {
|
||||
left: 0;
|
||||
right: auto;
|
||||
@ -23,11 +28,11 @@
|
||||
|
||||
#zoom-buttons {
|
||||
position: relative;
|
||||
right: 48px;
|
||||
right: var(--button-position-offset);
|
||||
}
|
||||
|
||||
:host([show-on-left_]) #zoom-buttons {
|
||||
left: 48px;
|
||||
left: var(--button-position-offset);
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@ -47,13 +52,16 @@
|
||||
</style>
|
||||
<div id="zoom-buttons">
|
||||
<viewer-zoom-button id="fit-button" on-fabclick="fitToggle" delay="100"
|
||||
new-print-preview="[[newPrintPreview]]"
|
||||
show-on-left="[[showOnLeft_]]"
|
||||
icons="pdf:fullscreen-exit cr:fullscreen">
|
||||
</viewer-zoom-button>
|
||||
<viewer-zoom-button id="zoom-in-button" icons="pdf:add"
|
||||
new-print-preview="[[newPrintPreview]]"
|
||||
show-on-left="[[showOnLeft_]]"
|
||||
on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
|
||||
<viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
|
||||
new-print-preview="[[newPrintPreview]]"
|
||||
show-on-left="[[showOnLeft_]]"
|
||||
on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
|
||||
</div>
|
||||
|
@ -11,12 +11,15 @@ Polymer({
|
||||
is: 'viewer-zoom-toolbar',
|
||||
|
||||
properties: {
|
||||
reverse: Boolean,
|
||||
newPrintPreview: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
|
||||
/** @private */
|
||||
showOnLeft_: {
|
||||
type: Boolean,
|
||||
computed: 'computeShowOnLeft_(reverse)',
|
||||
computed: 'computeShowOnLeft_(newPrintPreview)',
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
|
||||
@ -47,7 +50,7 @@ Polymer({
|
||||
* @private
|
||||
*/
|
||||
computeShowOnLeft_: function() {
|
||||
return isRTL() !== this.reverse;
|
||||
return isRTL() !== this.newPrintPreview;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -215,6 +215,11 @@ PDFScriptingAPI.prototype = {
|
||||
this.sendMessage_({type: 'loadPreviewPage', url: url, index: index});
|
||||
},
|
||||
|
||||
/** @param {boolean} darkMode Whether the page is in dark mode. */
|
||||
darkModeChanged: function(darkMode) {
|
||||
this.sendMessage_({type: 'darkModeChanged', darkMode: darkMode});
|
||||
},
|
||||
|
||||
/**
|
||||
* Select all the text in the document. May only be called after document
|
||||
* load.
|
||||
@ -296,5 +301,6 @@ function PDFCreateOutOfProcessPlugin(src, baseUrl) {
|
||||
iframe.sendKeyEvent = client.sendKeyEvent.bind(client);
|
||||
iframe.scrollPosition = client.scrollPosition.bind(client);
|
||||
iframe.hideToolbars = client.hideToolbars.bind(client);
|
||||
iframe.darkModeChanged = client.darkModeChanged.bind(client);
|
||||
return iframe;
|
||||
}
|
||||
|
@ -101,14 +101,20 @@ PDFViewer.MATERIAL_TOOLBAR_HEIGHT = 56;
|
||||
PDFViewer.TOOLBAR_WINDOW_MIN_HEIGHT = 250;
|
||||
|
||||
/**
|
||||
* The light-gray background color used for print preview.
|
||||
* The background color used for print preview (--google-grey-refresh-300).
|
||||
*/
|
||||
PDFViewer.LIGHT_BACKGROUND_COLOR = '0xFFCCCCCC';
|
||||
PDFViewer.PRINT_PREVIEW_BACKGROUND_COLOR = '0xFFDADCE0';
|
||||
|
||||
/**
|
||||
* The dark-gray background color used for the regular viewer.
|
||||
* The background color used for print preview when dark mode is enabled
|
||||
* (--google-grey-refresh-700).
|
||||
*/
|
||||
PDFViewer.DARK_BACKGROUND_COLOR = '0xFF525659';
|
||||
PDFViewer.PRINT_PREVIEW_DARK_BACKGROUND_COLOR = '0xFF5F6368';
|
||||
|
||||
/**
|
||||
* The background color used for the regular viewer.
|
||||
*/
|
||||
PDFViewer.BACKGROUND_COLOR = '0xFF525659';
|
||||
|
||||
/**
|
||||
* Creates a new PDFViewer. There should only be one of these objects per
|
||||
@ -214,8 +220,7 @@ function PDFViewer(browserApi) {
|
||||
}
|
||||
this.plugin_.setAttribute('headers', headers);
|
||||
|
||||
const backgroundColor = PDFViewer.DARK_BACKGROUND_COLOR;
|
||||
this.plugin_.setAttribute('background-color', backgroundColor);
|
||||
this.plugin_.setAttribute('background-color', PDFViewer.BACKGROUND_COLOR);
|
||||
this.plugin_.setAttribute('top-toolbar-height', topToolbarHeight);
|
||||
this.plugin_.setAttribute('javascript', this.javascript_);
|
||||
|
||||
@ -737,6 +742,16 @@ PDFViewer.prototype = {
|
||||
}
|
||||
},
|
||||
|
||||
/** @private */
|
||||
sendBackgroundColorForPrintPreview_: function() {
|
||||
this.pluginController_.postMessage({
|
||||
type: 'backgroundColorChanged',
|
||||
backgroundColor: document.documentElement.hasAttribute('dark') ?
|
||||
PDFViewer.PRINT_PREVIEW_DARK_BACKGROUND_COLOR :
|
||||
PDFViewer.PRINT_PREVIEW_BACKGROUND_COLOR,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Load a dictionary of translated strings into the UI. Used as a callback for
|
||||
* chrome.resourcesPrivate.
|
||||
@ -749,13 +764,15 @@ PDFViewer.prototype = {
|
||||
document.documentElement.lang = strings.language;
|
||||
|
||||
loadTimeData.data = strings;
|
||||
const reverseZoomToolbar = this.isPrintPreview_ &&
|
||||
const isNewPrintPreview = this.isPrintPreview_ &&
|
||||
loadTimeData.getBoolean('newPrintPreviewLayoutEnabled');
|
||||
this.reverseZoomToolbar_ = reverseZoomToolbar;
|
||||
if (reverseZoomToolbar) {
|
||||
if (isNewPrintPreview) {
|
||||
this.sendBackgroundColorForPrintPreview_();
|
||||
this.toolbarManager_.reverseSideToolbar();
|
||||
}
|
||||
$('zoom-toolbar').reverse = reverseZoomToolbar;
|
||||
this.reverseZoomToolbar_ = isNewPrintPreview;
|
||||
this.zoomToolbar_.newPrintPreview = isNewPrintPreview;
|
||||
|
||||
$('toolbar').strings = strings;
|
||||
$('toolbar').pdfAnnotationsEnabled =
|
||||
loadTimeData.getBoolean('pdfAnnotationsEnabled');
|
||||
@ -996,6 +1013,12 @@ PDFViewer.prototype = {
|
||||
case 'hideToolbars':
|
||||
this.toolbarManager_.resetKeyboardNavigationAndHideToolbars();
|
||||
return true;
|
||||
case 'darkModeChanged':
|
||||
document.documentElement.toggleAttribute('dark', message.data.darkMode);
|
||||
if (this.isPrintPreview_) {
|
||||
this.sendBackgroundColorForPrintPreview_();
|
||||
}
|
||||
return true;
|
||||
case 'scrollPosition':
|
||||
const position = this.viewport_.position;
|
||||
position.y += message.data.y;
|
||||
|
@ -45,12 +45,12 @@
|
||||
|
||||
#preview-area-container {
|
||||
align-items: center;
|
||||
background-color: var(--google-grey-200);
|
||||
background-color: var(--preview-area-background-color);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:host-context([dark]) #preview-area-container {
|
||||
background-color: var(--google-grey-400);
|
||||
:host([new-print-preview-layout_]) #preview-area-container {
|
||||
background-color: var(--preview-area-background-color-new);
|
||||
}
|
||||
</style>
|
||||
<print-preview-state id="state" state="{{state}}" error="{{error_}}">
|
||||
@ -90,6 +90,7 @@
|
||||
document-modifiable="[[documentSettings_.isModifiable]]"
|
||||
margins="[[margins_]]" page-size="[[pageSize_]]" state="[[state]]"
|
||||
measurement-system="[[measurementSystem_]]"
|
||||
new-print-preview-layout="[[newPrintPreviewLayout_]]"
|
||||
preview-state="{{previewState_}}" on-preview-start="onPreviewStart_">
|
||||
</print-preview-preview-area>
|
||||
</div>
|
||||
|
@ -350,7 +350,7 @@ Polymer({
|
||||
/** @private */
|
||||
onPreviewSettingChanged_: function() {
|
||||
if (this.state === print_preview_new.State.READY) {
|
||||
this.$.previewArea.startPreview();
|
||||
this.$.previewArea.startPreview(false);
|
||||
this.startPreviewWhenReady_ = false;
|
||||
} else {
|
||||
this.startPreviewWhenReady_ = true;
|
||||
@ -361,7 +361,7 @@ Polymer({
|
||||
onStateChanged_: function() {
|
||||
if (this.state == print_preview_new.State.READY) {
|
||||
if (this.startPreviewWhenReady_) {
|
||||
this.$.previewArea.startPreview();
|
||||
this.$.previewArea.startPreview(false);
|
||||
this.startPreviewWhenReady_ = false;
|
||||
}
|
||||
if (this.isInKioskAutoPrintMode_ || this.printRequested_) {
|
||||
|
@ -159,6 +159,11 @@ cr.define('print_preview_new', function() {
|
||||
this.plugin_.loadPreviewPage(
|
||||
this.getPreviewUrl_(previewUid, pageIndex), index);
|
||||
}
|
||||
|
||||
/** @param {boolean} darkMode Whether the page is in dark mode. */
|
||||
darkModeChanged(darkMode) {
|
||||
this.plugin_.darkModeChanged(darkMode);
|
||||
}
|
||||
}
|
||||
|
||||
/** @type {?print_preview_new.PluginProxy} */
|
||||
|
@ -74,7 +74,7 @@
|
||||
}
|
||||
|
||||
.preview-area-overlay-layer {
|
||||
background: var(--google-grey-200);
|
||||
background: var(--preview-area-background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@ -91,8 +91,8 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:host-context([dark]) .preview-area-overlay-layer {
|
||||
background: var(--google-grey-400);
|
||||
:host([new-print-preview-layout]) .preview-area-overlay-layer {
|
||||
background: var(--preview-area-background-color-new);
|
||||
}
|
||||
|
||||
.preview-area-overlay-layer.invisible {
|
||||
@ -109,6 +109,10 @@
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host([new-print-preview-layout]) .preview-area-message {
|
||||
color: var(--cr-primary-text-color);
|
||||
}
|
||||
</style>
|
||||
<div class$="preview-area-overlay-layer [[getInvisible_(previewState)]]"
|
||||
aria-hidden$="[[getAriaHidden_(previewState)]]">
|
||||
|
@ -45,6 +45,11 @@ Polymer({
|
||||
/** @type {?print_preview.MeasurementSystem} */
|
||||
measurementSystem: Object,
|
||||
|
||||
newPrintPreviewLayout: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
|
||||
/** @type {!print_preview.Size} */
|
||||
pageSize: Object,
|
||||
|
||||
@ -110,6 +115,10 @@ Polymer({
|
||||
this.nativeLayer_ = print_preview.NativeLayer.getInstance();
|
||||
this.addWebUIListener(
|
||||
'page-preview-ready', this.onPagePreviewReady_.bind(this));
|
||||
if (this.newPrintPreviewLayout) {
|
||||
this.addWebUIListener(
|
||||
'dark-mode-changed', this.onDarkModeChanged_.bind(this));
|
||||
}
|
||||
|
||||
this.pluginProxy_ = print_preview_new.PluginProxy.getInstance();
|
||||
if (!this.pluginProxy_.checkPluginCompatibility(assert(
|
||||
@ -257,9 +266,12 @@ Polymer({
|
||||
}
|
||||
},
|
||||
|
||||
/** @private */
|
||||
startPreview: function() {
|
||||
if (!this.hasTicketChanged_() &&
|
||||
/**
|
||||
* @param {boolean} forceUpdate Whether to force the preview area to update
|
||||
* regardless of whether the print ticket has changed.
|
||||
*/
|
||||
startPreview: function(forceUpdate) {
|
||||
if (!this.hasTicketChanged_() && !forceUpdate &&
|
||||
this.previewState !== print_preview_new.PreviewAreaState.ERROR) {
|
||||
return;
|
||||
}
|
||||
@ -312,6 +324,10 @@ Polymer({
|
||||
}
|
||||
|
||||
this.pluginLoaded_ = false;
|
||||
if (document.documentElement.hasAttribute('dark') &&
|
||||
this.newPrintPreviewLayout) {
|
||||
this.pluginProxy_.darkModeChanged(true);
|
||||
}
|
||||
this.pluginProxy_.resetPrintPreviewMode(
|
||||
previewUid, index, !this.getSettingValue('color'),
|
||||
/** @type {!Array<number>} */ (this.getSettingValue('pages')),
|
||||
@ -384,6 +400,21 @@ Polymer({
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {boolean} darkMode Whether the page is now in dark mode.
|
||||
* @private
|
||||
*/
|
||||
onDarkModeChanged_: function(darkMode) {
|
||||
if (this.pluginProxy_.pluginReady()) {
|
||||
this.pluginProxy_.darkModeChanged(darkMode);
|
||||
}
|
||||
|
||||
if (this.previewState ===
|
||||
print_preview_new.PreviewAreaState.DISPLAY_PREVIEW) {
|
||||
this.startPreview(true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Processes a keyboard event that could possibly be used to change state of
|
||||
* the preview plugin.
|
||||
|
@ -21,9 +21,13 @@
|
||||
--cr-form-field-label-height: initial;
|
||||
--cr-form-field-label-line-height: .75rem;
|
||||
--destination-item-height: 32px;
|
||||
--preview-area-background-color: var(--google-grey-200);
|
||||
--preview-area-background-color-new: var(--google-grey-refresh-300);
|
||||
}
|
||||
|
||||
:host-context([dark]) {
|
||||
--preview-area-background-color: var(--google-grey-400);
|
||||
--preview-area-background-color-new: var(--google-grey-refresh-700);
|
||||
--print-preview-disabled-label: {
|
||||
opacity: var(--cr-disabled-opacity);
|
||||
}
|
||||
|
@ -89,6 +89,8 @@ cr.define('print_preview', function() {
|
||||
this.loadCallback_(true);
|
||||
}
|
||||
}
|
||||
|
||||
darkModeChanged(darkMode) {}
|
||||
}
|
||||
|
||||
return {PDFPluginStub: PDFPluginStub};
|
||||
|
@ -118,6 +118,9 @@ constexpr char kJSResetPrintPreviewModeType[] = "resetPrintPreviewMode";
|
||||
constexpr char kJSPrintPreviewUrl[] = "url";
|
||||
constexpr char kJSPrintPreviewGrayscale[] = "grayscale";
|
||||
constexpr char kJSPrintPreviewPageCount[] = "pageCount";
|
||||
// Background color changed (Page -> Plugin)
|
||||
constexpr char kJSBackgroundColorChangedType[] = "backgroundColorChanged";
|
||||
constexpr char kJSBackgroundColor[] = "backgroundColor";
|
||||
// Load preview page (Page -> Plugin)
|
||||
constexpr char kJSLoadPreviewPageType[] = "loadPreviewPage";
|
||||
constexpr char kJSPreviewPageUrl[] = "url";
|
||||
@ -693,6 +696,13 @@ void OutOfProcessInstance::HandleMessage(const pp::Var& message) {
|
||||
RotateCounterclockwise();
|
||||
} else if (type == kJSSelectAllType) {
|
||||
engine_->SelectAll();
|
||||
} else if (type == kJSBackgroundColorChangedType) {
|
||||
if (!dict.Get(pp::Var(kJSBackgroundColor)).is_string()) {
|
||||
NOTREACHED();
|
||||
return;
|
||||
}
|
||||
base::HexStringToUInt(dict.Get(pp::Var(kJSBackgroundColor)).AsString(),
|
||||
&background_color_);
|
||||
} else if (type == kJSResetPrintPreviewModeType) {
|
||||
if (!(dict.Get(pp::Var(kJSPrintPreviewUrl)).is_string() &&
|
||||
dict.Get(pp::Var(kJSPrintPreviewGrayscale)).is_bool() &&
|
||||
|
Reference in New Issue
Block a user