From 6f787b795dd5fbeb712ca52131831904287b8e7a Mon Sep 17 00:00:00 2001 From: tsergeant Date: Mon, 22 Jun 2015 19:26:13 -0700 Subject: [PATCH] Material PDF: Expand zoom toolbar with additional buttons. Adds buttons to zoom in and out, and tweaks the layout of the toolbar. BUG=439114 Review URL: https://codereview.chromium.org/1194623002 Cr-Commit-Position: refs/heads/master@{#335610} --- .../viewer-zoom-toolbar/viewer-zoom-button.css | 5 +++-- .../viewer-zoom-toolbar/viewer-zoom-button.js | 4 ++-- .../viewer-zoom-toolbar/viewer-zoom-toolbar.css | 22 ++++++++++------------ .../viewer-zoom-toolbar/viewer-zoom-toolbar.html | 10 +++++++--- .../viewer-zoom-toolbar/viewer-zoom-toolbar.js | 12 ++++++++++++ chrome/browser/resources/pdf/pdf.js | 9 ++++----- 6 files changed, 38 insertions(+), 24 deletions(-) diff --git a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css index 2de88fd4fbf9..6c77cbe13dc3 100644 --- a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css +++ b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css @@ -3,7 +3,8 @@ * found in the LICENSE file. */ paper-fab { - background-color: #fff; - color: rgb(158, 158, 158); + background-color: rgb(242, 242, 242); + color: rgb(96, 96, 96); + margin: 0 48px; overflow: visible; } diff --git a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js index 76b519fe4278..754badb3fcb8 100644 --- a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js +++ b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js @@ -35,7 +35,7 @@ Polymer({ duration: 250, delay: delay }, - transformFrom: 'translateX(150%)' + transformFrom: 'translateX(100%)' }, 'exit': { name: 'transform-animation', @@ -45,7 +45,7 @@ Polymer({ duration: 250, delay: delay }, - transformTo: 'translateX(150%)' + transformTo: 'translateX(100%)' } }; }, diff --git a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css index 5fea615557df..808cd91f8fd6 100644 --- a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css +++ b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css @@ -4,26 +4,24 @@ :host { bottom: 0; - padding: 24px; + padding: 48px 0; position: fixed; right: 0; z-index: 3; } -#zoom-buttons { - display: inline-block; +viewer-zoom-button { + display: block; } -#fit-to-width-button { - display: block; - margin: auto; +/* A small gap between the fit to page/fit to width buttons and the zoom in/zoom + * out buttons. */ +#fit-to-page-button, +#zoom-out-button { margin-top: 1em; - overflow: visible; } -#fit-to-page-button { - display: block; - margin: auto; - overflow: visible; +/* A larger gap between the top two and bottom two buttons. */ +#zoom-in-button { + margin-top: 2em; } - diff --git a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html index 9475dbbfeb45..88649f4c52e3 100644 --- a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html +++ b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html @@ -9,10 +9,14 @@
- + on-click="fitToWidth" delay="0"> + + +
diff --git a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js index ea85bcb69988..cdd8b77cea36 100644 --- a/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js +++ b/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js @@ -37,11 +37,21 @@ Polymer({ this.fire('fit-to-width'); }, + zoomIn: function() { + this.fire('zoom-in'); + }, + + zoomOut: function() { + this.fire('zoom-out'); + }, + show: function() { if (!this.visible) { this.visible_ = true; this.$['fit-to-width-button'].show(); this.$['fit-to-page-button'].show(); + this.$['zoom-in-button'].show(); + this.$['zoom-out-button'].show(); } }, @@ -50,6 +60,8 @@ Polymer({ this.visible_ = false; this.$['fit-to-page-button'].hide(); this.$['fit-to-width-button'].hide(); + this.$['zoom-in-button'].hide(); + this.$['zoom-out-button'].hide(); } }, }); diff --git a/chrome/browser/resources/pdf/pdf.js b/chrome/browser/resources/pdf/pdf.js index 5a1821bc59ca..abb358374b41 100644 --- a/chrome/browser/resources/pdf/pdf.js +++ b/chrome/browser/resources/pdf/pdf.js @@ -166,15 +166,14 @@ function PDFViewer(browserApi) { if (this.isMaterial_) { this.zoomToolbar_ = $('zoom-toolbar'); - this.zoomToolbar_.zoomMin = Viewport.ZOOM_FACTOR_RANGE.min * 100; - this.zoomToolbar_.zoomMax = Viewport.ZOOM_FACTOR_RANGE.max * 100; - this.zoomToolbar_.addEventListener('zoom', function(e) { - this.viewport_.setZoom(e.detail.zoom); - }.bind(this)); this.zoomToolbar_.addEventListener('fit-to-width', this.viewport_.fitToWidth.bind(this.viewport_)); this.zoomToolbar_.addEventListener('fit-to-page', this.viewport_.fitToPage.bind(this.viewport_)); + this.zoomToolbar_.addEventListener('zoom-in', + this.viewport_.zoomIn.bind(this.viewport_)); + this.zoomToolbar_.addEventListener('zoom-out', + this.viewport_.zoomOut.bind(this.viewport_)); this.materialToolbar_ = $('material-toolbar'); this.materialToolbar_.docTitle = document.title; -- 2.11.4.GIT