Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5596 from fkaelberer/fixBordersAroundThumbnails

Browse Source 
Fix border sizes around thumbnails
This commit is contained in:
Tim van der Meij 2015-01-23 21:29:49 +01:00
commit 997c2b9d94
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/thumbnail_view.js
View File

@ -20,6 +20,7 @@
'use strict'; 'use strict';
var THUMBNAIL_SCROLL_MARGIN = -19; var THUMBNAIL_SCROLL_MARGIN = -19;
var THUMBNAIL_CANVAS_BORDER_WIDTH = 1;
/** /**
* @constructor * @constructor
@ -53,8 +54,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
this.renderingId = 'thumbnail' + id; this.renderingId = 'thumbnail' + id;
this.canvasWidth = 98; this.canvasWidth = 98;
this.canvasHeight = this.canvasWidth / this.pageWidth * this.pageHeight; this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
this.scale = (this.canvasWidth / this.pageWidth); this.scale = this.canvasWidth / this.pageWidth;
var div = this.el = document.createElement('div'); var div = this.el = document.createElement('div');
div.id = 'thumbnailContainer' + id; div.id = 'thumbnailContainer' + id;
@ -68,8 +69,10 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
var ring = document.createElement('div'); var ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing'; ring.className = 'thumbnailSelectionRing';
ring.style.width = this.canvasWidth + 'px'; ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
ring.style.height = this.canvasHeight + 'px'; 'px';
ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
div.appendChild(ring); div.appendChild(ring);
anchor.appendChild(div); anchor.appendChild(div);
@ -100,13 +103,15 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
this.pageHeight = this.viewport.height; this.pageHeight = this.viewport.height;
this.pageRatio = this.pageWidth / this.pageHeight; this.pageRatio = this.pageWidth / this.pageHeight;
this.canvasHeight = this.canvasWidth / this.pageWidth * this.pageHeight; this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
this.scale = (this.canvasWidth / this.pageWidth); this.scale = (this.canvasWidth / this.pageWidth);
div.removeAttribute('data-loaded'); div.removeAttribute('data-loaded');
ring.textContent = ''; ring.textContent = '';
ring.style.width = this.canvasWidth + 'px'; ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
ring.style.height = this.canvasHeight + 'px'; 'px';
ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
this.hasImage = false; this.hasImage = false;
this.renderingState = RenderingStates.INITIAL; this.renderingState = RenderingStates.INITIAL;

6
web/viewer.css
View File

@ -1113,9 +1113,13 @@ html[dir='rtl'] .verticalToolbarSeparator {
margin-bottom: 10px; margin-bottom: 10px;
} }
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
margin-bottom: 9px;
}
.thumbnail:not([data-loaded]) { .thumbnail:not([data-loaded]) {
border: 1px dashed rgba(255, 255, 255, 0.5); border: 1px dashed rgba(255, 255, 255, 0.5);
margin-bottom: 10px; margin: -1px -1px 4px -1px;
} }
.thumbnailImage { .thumbnailImage {