Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(thumbnails): Update document thumbnails to latest designs #1357

Merged
merged 2 commits into from
Apr 19, 2021
Merged

feat(thumbnails): Update document thumbnails to latest designs #1357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14d6be6
feat(thumbnails): Update document thumbnails to latest designs
jstoffan Apr 15, 2021
1607d1b
Merge branch 'master' into thumbnails-design
mergify[bot] Apr 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 12 additions & 21 deletions src/lib/ThumbnailsSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE = 'bp-thumbnail-image';
const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE_LOADED = 'bp-thumbnail-image-loaded';
const CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED = 'bp-thumbnail-is-selected';
const CLASS_BOX_PREVIEW_THUMBNAIL_PAGE_NUMBER = 'bp-thumbnail-page-number';
export const DEFAULT_THUMBNAILS_SIDEBAR_WIDTH = 154; // 225px sidebar width - 25px margin right, - 40px for page number - 6px for border
const THUMBNAIL_IMAGE_WIDTH = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
const THUMBNAIL_TOTAL_WIDTH = 150; // 190px sidebar width - 40px margins
const THUMBNAIL_IMAGE_WIDTH = THUMBNAIL_TOTAL_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
const THUMBNAIL_MARGIN = 15;
const BORDER_WIDTH = 6;

class ThumbnailsSidebar {
/** @property {HTMLElement} - The anchor element for this ThumbnailsSidebar */
Expand Down Expand Up @@ -78,19 +77,11 @@ class ThumbnailsSidebar {
*/
thumbnailClickHandler(event) {
const { target } = event;
const thumbnailEl = target.parentNode;
const thumbnailPage = parseInt(thumbnailEl.dataset.bpPageNum, 10);

// Only care about clicks on the thumbnail element itself.
// The image and page number have pointer-events: none so
// any click should be the thumbnail element itself.
if (target.classList.contains(CLASS_BOX_PREVIEW_THUMBNAIL_NAV)) {
const thumbnailEl = target.parentNode;
// Get the page number
const { bpPageNum: pageNumStr } = thumbnailEl.dataset;
const pageNum = parseInt(pageNumStr, 10);

if (this.onThumbnailSelect) {
this.onThumbnailSelect(pageNum);
}
if (this.onThumbnailSelect) {
this.onThumbnailSelect(thumbnailPage);
}

// IE 11 will focus a div when it's parent has a tabindex, so we focus the anchorEl to avoid
Expand Down Expand Up @@ -189,8 +180,8 @@ class ThumbnailsSidebar {
return;
}

// Amount to scale down from fullsize to thumbnail size
this.scale = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / width;
// Amount to scale down from full-size to thumbnail size
this.scale = THUMBNAIL_TOTAL_WIDTH / width;
// Width : Height ratio of the page
this.pageRatio = width / height;
const scaledViewport = page.getViewport({ scale: this.scale });
Expand All @@ -199,7 +190,7 @@ class ThumbnailsSidebar {
this.virtualScroller.init({
initialRowIndex: this.currentPage - 1,
totalItems: this.pdfViewer.pagesCount,
itemHeight: this.thumbnailHeight + BORDER_WIDTH,
itemHeight: this.thumbnailHeight,
containerHeight: this.getContainerHeight(),
margin: THUMBNAIL_MARGIN,
renderItemFn: this.createPlaceholderThumbnail,
Expand Down Expand Up @@ -255,6 +246,7 @@ class ThumbnailsSidebar {

thumbnailEl.className = CLASS_BOX_PREVIEW_THUMBNAIL;
thumbnailEl.dataset.bpPageNum = pageNum;
thumbnailEl.setAttribute('role', 'button');
thumbnailEl.appendChild(this.createPageNumber(pageNum));

const thumbnailNav = this.createThumbnailNav();
Expand Down Expand Up @@ -285,7 +277,6 @@ class ThumbnailsSidebar {
createThumbnailNav() {
const thumbnailNav = document.createElement('div');
thumbnailNav.className = CLASS_BOX_PREVIEW_THUMBNAIL_NAV;
thumbnailNav.setAttribute('role', 'button');
return thumbnailNav;
}

Expand Down Expand Up @@ -368,7 +359,7 @@ class ThumbnailsSidebar {
if (curPageRatio < this.pageRatio) {
// Set the canvas height to that of the thumbnail max height
canvas.height = Math.ceil(THUMBNAIL_IMAGE_WIDTH / this.pageRatio);
// Find the canvas width based on the curent page ratio
// Find the canvas width based on the current page ratio
canvas.width = canvas.height * curPageRatio;
} else {
// In case the current page ratio is same as the first page
Expand Down Expand Up @@ -402,7 +393,7 @@ class ThumbnailsSidebar {

// Add the height and width to the image to be the same as the thumbnail
// so that the css `background-image` rules will work
imageEl.style.width = `${DEFAULT_THUMBNAILS_SIDEBAR_WIDTH}px`;
imageEl.style.width = `${THUMBNAIL_TOTAL_WIDTH}px`;
imageEl.style.height = `${this.thumbnailHeight}px`;

return imageEl;
Expand Down
16 changes: 3 additions & 13 deletions src/lib/__tests__/ThumbnailsSidebar-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* eslint-disable no-unused-expressions */
import ThumbnailsSidebar, { DEFAULT_THUMBNAILS_SIDEBAR_WIDTH } from '../ThumbnailsSidebar';
import ThumbnailsSidebar from '../ThumbnailsSidebar';
import VirtualScroller from '../VirtualScroller';
import * as utils from '../util';

const TEST_SCALE = (DEFAULT_THUMBNAILS_SIDEBAR_WIDTH * 2) / 10;
const TEST_SCALE = 30;

describe('ThumbnailsSidebar', () => {
let thumbnailsSidebar;
Expand Down Expand Up @@ -103,7 +103,7 @@ describe('ThumbnailsSidebar', () => {

return pagePromise.then(() => {
expect(stubs.getViewport).toBeCalled();
expect(thumbnailsSidebar.scale).toBe(DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / 10);
expect(thumbnailsSidebar.scale).toBe(15);
expect(thumbnailsSidebar.pageRatio).toBe(1);
expect(stubs.vsInit).toBeCalled();
});
Expand Down Expand Up @@ -346,16 +346,6 @@ describe('ThumbnailsSidebar', () => {
expect(stubs.preventDefault).toBeCalled();
expect(stubs.stopImmediatePropagation).toBeCalled();
});

test('should not call the onThumbnailSelect if target is not thumbnail element', () => {
targetEl.classList.remove('bp-thumbnail-nav');
thumbnailsSidebar.thumbnailClickHandler(evt);

expect(stubs.onThumbnailSelect).not.toBeCalled();
expect(stubs.focus).toBeCalled();
expect(stubs.preventDefault).toBeCalled();
expect(stubs.stopImmediatePropagation).toBeCalled();
});
});

describe('onKeyDown()', () => {
Expand Down
105 changes: 61 additions & 44 deletions src/lib/viewers/doc/_docBase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
@import '../../boxuiVariables';
@import './annotations';
@import './theme';

$pdfjs-highlight: #b400aa !default;
$pdfjs-highlight-selected: #006400 !default;
$thumbnail-border-radius: 3px;
// Accounts for the 1px border on the right so the remaining width is actually 225
$thumbnail-sidebar-width: 226px;

@mixin bp-breakpoint-medium {
@media (min-width: 600px) {
@content;
}
}
$thumbnail-border-radius: 6px;
$thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border

.bp {
.bp-ThumbnailsToggle {
Expand All @@ -36,67 +30,90 @@ $thumbnail-sidebar-width: 226px;
.bp-thumbnail {
position: relative;
display: flex;
flex: 1 0 auto;
margin-right: 25px;
padding: 0;
}
margin-right: 20px;
margin-left: 20px;
cursor: pointer;

.bp-thumbnail-page-number {
flex: 0 0 34px;
width: 34px;
margin: 4px 6px 0 0;
color: $twos;
font-size: 11px;
line-height: 16px;
text-align: right;
pointer-events: none;
&:focus,
&:hover {
.bp-thumbnail-page-number {
background: $seventy-sixers;
opacity: 1;
}

.bp-thumbnail-nav {
box-shadow: 0 0 0 1px $seventy-sixers, 0 4px 5px 0 rgba(0, 0, 0, .15);
}

&.bp-thumbnail-image-loaded {
.bp-thumbnail-nav {
background-color: $seventy-sixers; // Prevents the default background from showing through the image borders
}
}
}

&.bp-thumbnail-is-selected {
.bp-thumbnail-page-number {
background: $box-blue;
opacity: 1;
}

.bp-thumbnail-nav {
box-shadow: 0 0 0 3px $box-blue, 0 4px 5px 0 rgba(0, 0, 0, .08);
}

&.bp-thumbnail-image-loaded {
.bp-thumbnail-nav {
background-color: $box-blue; // Prevents the default background from showing through the image borders
}
}
}
}

.bp-thumbnail-nav {
flex: 1 0 154px;
padding: 0;
width: 150px;
overflow: hidden;
background-color: $d-eight;
border: $thumbnail-border-radius solid $ffive;
border-radius: $thumbnail-border-radius;
outline: none;
cursor: pointer;
box-shadow: 0 0 0 1px $off-white, 0 1px 4px 0 rgba(0, 0, 0, .08);
transition: box-shadow 50ms ease;
}

.bp-thumbnail:not(.bp-thumbnail-is-selected) {
.bp-thumbnail-nav:focus,
.bp-thumbnail-nav:hover {
margin: 2px;
border: 1px solid $seesee;
}
.bp-thumbnail-page-number {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding-right: 3px;
padding-left: 3px;
color: $white;
font-size: 13px;
border-radius: $thumbnail-border-radius / 2 0 $thumbnail-border-radius 0;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .2);
opacity: 0;
transition: background 50ms ease, opacity 50ms ease;
}

.bp-thumbnail-image {
background-repeat: no-repeat;
background-position: center;
background-size: contain; // Needed for the case of document with portrait and landscape orientations
pointer-events: none;
}

.bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav {
border-color: $fours;
pointer-events: none; // Allow the parent elements to handle user events
}

.bp-thumbnails-container--dark {
background-color: $fours;
border-right-color: $black;

.bp-thumbnail-page-number {
color: $white;
background-color: $fours;
}

.bp-thumbnail-nav {
border-color: $fours;
}

.bp-thumbnail-is-selected .bp-thumbnail-nav {
border-color: $black;
}
}

@keyframes bp-thumbnails-open {
Expand All @@ -115,7 +132,7 @@ $thumbnail-sidebar-width: 226px;
}
}

@include bp-breakpoint-medium {
@media (min-width: 600px) {
$bp-thumbnails-animation: 300ms cubic-bezier(.4, 0, .2, 1);

&.bp-loaded.bp-thumbnails-open-active,
Expand Down
19 changes: 19 additions & 0 deletions src/lib/viewers/doc/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@import '~box-ui-elements/es/styles/constants/colors';

.custom-theme {
.bp .bp-thumbnail.bp-thumbnail-is-selected {
.bp-thumbnail-nav {
box-shadow: 0 0 0 3px $bdl-gray, 0 4px 5px 0 rgba(0, 0, 0, .08);
jstoffan marked this conversation as resolved.
Show resolved Hide resolved
}

.bp-thumbnail-page-number {
background: $bdl-gray;
}

&.bp-thumbnail-image-loaded {
.bp-thumbnail-nav {
background-color: $bdl-gray;
}
}
}
}