From cc431170391082e679c94539d936aac28babfc71 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Fri, 13 Apr 2012 14:14:05 -0700 Subject: [PATCH 1/3] Add selection ring around thumbnails. --- web/viewer.css | 26 ++++++++++++-------------- web/viewer.html | 2 +- web/viewer.js | 26 +++++++++++++++----------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index a9315c983..ad81e1d2f 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -350,27 +350,25 @@ body { } .thumbnail { - width: 134px; - height: 134px; - margin-top: 15px; margin-bottom: 15px; - margin-left:auto; - margin-right:auto; - line-height: 134px; - text-align: center; - overflow: hidden; + float: left; +} + +.thumbnailImage { + -moz-transition-duration: 150ms; + border: 1px solid transparent; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); + opacity: 0.8; + z-index: 99; } .thumbnailSelectionRing { - position: absolute; - width: 112px; - height: 142px; - margin: 4px; border-radius: 2px; + padding: 7px; -moz-transition-duration: 150ms; } -.thumbnail:hover > .thumbnailImage { +.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage { opacity: .9; } @@ -384,7 +382,7 @@ body { color: hsla(0,0%,100%,.9); } -.thumbnail.selected > .thumbnailImage { +.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage { box-shadow: 0 0 0 1px hsla(0,0%,0%,.5); opacity: 1; } diff --git a/web/viewer.html b/web/viewer.html index 5d4f046c9..f58aea05f 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -49,7 +49,7 @@
-
+
diff --git a/web/viewer.js b/web/viewer.js index 5a4b573a5..18faeca73 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -990,11 +990,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { this.height = view.height; this.id = id; - var maxThumbSize = 134; - var canvasWidth = pageRatio >= 1 ? maxThumbSize : - maxThumbSize * pageRatio; - var canvasHeight = pageRatio <= 1 ? maxThumbSize : - maxThumbSize / pageRatio; + var canvasWidth = 98; + var canvasHeight = canvasWidth / this.width * this.height; var scaleX = this.scaleX = (canvasWidth / this.width); var scaleY = this.scaleY = (canvasHeight / this.height); @@ -1014,9 +1011,14 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { canvas.width = canvasWidth; canvas.height = canvasHeight; + canvas.className = 'thumbnailImage'; div.setAttribute('data-loaded', true); - div.appendChild(canvas); + + var ring = document.createElement('div'); + ring.className = 'thumbnailSelectionRing'; + ring.appendChild(canvas); + div.appendChild(ring); var ctx = canvas.getContext('2d'); ctx.save(); @@ -1026,10 +1028,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { var view = page.view; ctx.translate(-view.x * scaleX, -view.y * scaleY); - div.style.width = (view.width * scaleX) + 'px'; - div.style.height = (view.height * scaleY) + 'px'; - div.style.lineHeight = (view.height * scaleY) + 'px'; - return ctx; } @@ -1272,6 +1270,7 @@ window.addEventListener('load', function webViewerLoad(evt) { document.getElementById('sidebarToggle').addEventListener('click', function() { + this.classList.toggle('toggled'); document.getElementById('toolbarSidebar').classList.toggle('hidden'); document.getElementById('sidebarContainer').classList.toggle('hidden'); updateThumbViewArea(); @@ -1452,8 +1451,13 @@ window.addEventListener('scalechange', function scalechange(evt) { window.addEventListener('pagechange', function pagechange(evt) { var page = evt.pageNumber; - if (document.getElementById('pageNumber').value != page) + if (document.getElementById('pageNumber').value != page) { document.getElementById('pageNumber').value = page; + var selected = document.querySelector('.thumbnail.selected'); + if (selected) + selected.classList.remove('selected'); + document.getElementById('thumbnailContainer' + page).classList.add('selected'); + } document.getElementById('previous').disabled = (page <= 1); document.getElementById('next').disabled = (page >= PDFView.pages.length); }, true); From a03d2100f5147e129f930741cadf285aae7af7ad Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Fri, 13 Apr 2012 14:16:45 -0700 Subject: [PATCH 2/3] Fix lint. --- web/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index 18faeca73..6d53251d2 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -498,7 +498,7 @@ var PDFView = { var pagesCount = pdf.numPages; var id = pdf.fingerprint; var storedHash = null; - document.getElementById('numPages').textContent = '/ '+pagesCount; + document.getElementById('numPages').textContent = '/ ' + pagesCount; document.getElementById('pageNumber').max = pagesCount; PDFView.documentFingerprint = id; var store = PDFView.store = new Settings(id); @@ -1456,7 +1456,8 @@ window.addEventListener('pagechange', function pagechange(evt) { var selected = document.querySelector('.thumbnail.selected'); if (selected) selected.classList.remove('selected'); - document.getElementById('thumbnailContainer' + page).classList.add('selected'); + document.getElementById('thumbnailContainer' + page) + .classList.add('selected'); } document.getElementById('previous').disabled = (page <= 1); document.getElementById('next').disabled = (page >= PDFView.pages.length); From 719133a15f26efeacd67830a0ce9c4412c3afabf Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Fri, 13 Apr 2012 14:17:18 -0700 Subject: [PATCH 3/3] Update download image. --- web/images/toolbarButton-download.png | Bin 334 -> 512 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/web/images/toolbarButton-download.png b/web/images/toolbarButton-download.png index a0a9ce3e00581a3a2bd395ca25b554eb9c80394e..8676d8e2c2c0bac77cfce486f6f18639a8caa987 100644 GIT binary patch delta 462 zcmV;<0Wtp00)PaN83+ad001BJ|6!3KCw~E=NklpTG(3u?~~8-RJKR61@po0nw&j-Zf}uM`Re z1IBnHvj;%lW(tv*fb&ZHFIX|iIJtqC9%tO zp-^b%P9XOn4riQ?HXe_)VzD^XG%Zjrmk)Ja=bT_n8)Dj$#A&0^SY@->FFWaA7{(G- z_JGU@4+dY1oAM5JK|iIpmPtR^daJJc7hGqEef<_-02Y_4^ii$fy8r+H07*qoM6N<$ Ef_RVEmjD0& delta 283 zcmV+$0p$LG1kM7G83+Ub006c6H|migCw~C&Nklf)3T7c7 zvH~uki?xBCi}*ho0U08|-jxMS)S#Q!tFuonq}MV|C9NH8#nC#HXI`;P^FX@3h( zWDo;|pk6@1*ZTix@MFDOF3=KSh%z#8Gw6BdeyaLkiGc5_9J7F~-~!4rK$Pe@XMHI7 zUkrh7ORO`1x}nlAB|5elZwvnC{m*-qZ=S}W3A7q64N=0yply+IJ?CnUX(FaHLDkDn+0QuIaD$uLUrvLx|00>D%PDHLkV1hkmcSZmJ