feat: Add PDF viewer and preview components with styling and functionality
- Implemented DeesPdfViewer for full-featured PDF viewing with toolbar and sidebar navigation. - Created DeesPdfPreview for lightweight PDF previews. - Introduced PdfManager for managing PDF document loading and caching. - Added CanvasPool for efficient canvas management. - Developed utility functions for performance monitoring and file size formatting. - Established styles for viewer and preview components to enhance UI/UX. - Included demo examples for showcasing PDF viewer capabilities.
This commit is contained in:
386
ts_web/elements/dees-pdf-viewer/component.ts
Normal file
386
ts_web/elements/dees-pdf-viewer/component.ts
Normal file
@@ -0,0 +1,386 @@
|
||||
import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, css, cssManager } from '@design.estate/dees-element';
|
||||
import { DeesInputBase } from '../dees-input-base.js';
|
||||
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
||||
import { viewerStyles } from './styles.js';
|
||||
import { demo as demoFunc } from './demo.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-pdf-viewer': DeesPdfViewer;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-pdf-viewer')
|
||||
export class DeesPdfViewer extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static styles = viewerStyles;
|
||||
|
||||
@property({ type: String })
|
||||
public pdfUrl: string = '';
|
||||
|
||||
@property({ type: Number })
|
||||
public initialPage: number = 1;
|
||||
|
||||
@property({ type: String })
|
||||
public initialZoom: 'auto' | 'page-fit' | 'page-width' | number = 'auto';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showToolbar: boolean = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showSidebar: boolean = false;
|
||||
|
||||
@property({ type: Number })
|
||||
private currentPage: number = 1;
|
||||
|
||||
@property({ type: Number })
|
||||
private totalPages: number = 1;
|
||||
|
||||
@property({ type: Number })
|
||||
private currentZoom: number = 1;
|
||||
|
||||
@property({ type: Boolean })
|
||||
private loading: boolean = false;
|
||||
|
||||
private pdfDocument: any;
|
||||
private pageRendering: boolean = false;
|
||||
private pageNumPending: number | null = null;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
|
||||
${this.showToolbar ? html`
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-group">
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.previousPage}
|
||||
?disabled=${this.currentPage <= 1}
|
||||
>
|
||||
<dees-icon icon="lucide:ChevronLeft"></dees-icon>
|
||||
</button>
|
||||
<div class="page-info">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="${this.totalPages}"
|
||||
.value=${this.currentPage}
|
||||
@change=${this.handlePageInput}
|
||||
class="page-input"
|
||||
/>
|
||||
<span class="page-separator">/</span>
|
||||
<span class="page-total">${this.totalPages}</span>
|
||||
</div>
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.nextPage}
|
||||
?disabled=${this.currentPage >= this.totalPages}
|
||||
>
|
||||
<dees-icon icon="lucide:ChevronRight"></dees-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-group">
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.zoomOut}
|
||||
?disabled=${this.currentZoom <= 0.5}
|
||||
>
|
||||
<dees-icon icon="lucide:ZoomOut"></dees-icon>
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.resetZoom}
|
||||
>
|
||||
<span class="zoom-level">${Math.round(this.currentZoom * 100)}%</span>
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.zoomIn}
|
||||
?disabled=${this.currentZoom >= 3}
|
||||
>
|
||||
<dees-icon icon="lucide:ZoomIn"></dees-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-group">
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.fitToPage}
|
||||
title="Fit to page"
|
||||
>
|
||||
<dees-icon icon="lucide:Maximize"></dees-icon>
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.fitToWidth}
|
||||
title="Fit to width"
|
||||
>
|
||||
<dees-icon icon="lucide:ArrowLeftRight"></dees-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-group toolbar-group--end">
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.downloadPdf}
|
||||
title="Download"
|
||||
>
|
||||
<dees-icon icon="lucide:Download"></dees-icon>
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.printPdf}
|
||||
title="Print"
|
||||
>
|
||||
<dees-icon icon="lucide:Printer"></dees-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="viewer-container">
|
||||
${this.showSidebar ? html`
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<span>Pages</span>
|
||||
<button
|
||||
class="sidebar-close"
|
||||
@click=${() => this.showSidebar = false}
|
||||
>
|
||||
<dees-icon icon="lucide:X"></dees-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
${Array(this.totalPages).fill(0).map((_, i) => html`
|
||||
<div
|
||||
class="thumbnail ${this.currentPage === i + 1 ? 'active' : ''}"
|
||||
@click=${() => this.goToPage(i + 1)}
|
||||
>
|
||||
<canvas class="thumbnail-canvas" data-page="${i + 1}"></canvas>
|
||||
<span class="thumbnail-number">${i + 1}</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="viewer-main">
|
||||
${this.loading ? html`
|
||||
<div class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">Loading PDF...</div>
|
||||
</div>
|
||||
` : html`
|
||||
<div class="canvas-container">
|
||||
<canvas id="pdf-canvas"></canvas>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.updateComplete;
|
||||
if (this.pdfUrl) {
|
||||
await this.loadPdf();
|
||||
}
|
||||
}
|
||||
|
||||
public async updated(changedProperties: Map<PropertyKey, unknown>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('pdfUrl') && this.pdfUrl) {
|
||||
await this.loadPdf();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadPdf() {
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
|
||||
this.totalPages = this.pdfDocument.numPages;
|
||||
this.currentPage = this.initialPage;
|
||||
|
||||
await this.updateComplete;
|
||||
this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
|
||||
this.ctx = this.canvas?.getContext('2d') as CanvasRenderingContext2D;
|
||||
|
||||
await this.renderPage(this.currentPage);
|
||||
|
||||
if (this.showSidebar) {
|
||||
this.renderThumbnails();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private async renderPage(pageNum: number) {
|
||||
if (!this.pdfDocument || !this.canvas || !this.ctx) return;
|
||||
|
||||
this.pageRendering = true;
|
||||
|
||||
try {
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
let viewport;
|
||||
if (this.initialZoom === 'auto' || this.initialZoom === 'page-fit') {
|
||||
const tempViewport = page.getViewport({ scale: 1 });
|
||||
const containerWidth = this.canvas.parentElement?.clientWidth || 800;
|
||||
const containerHeight = this.canvas.parentElement?.clientHeight || 600;
|
||||
const scaleX = containerWidth / tempViewport.width;
|
||||
const scaleY = containerHeight / tempViewport.height;
|
||||
this.currentZoom = Math.min(scaleX, scaleY);
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
} else if (this.initialZoom === 'page-width') {
|
||||
const tempViewport = page.getViewport({ scale: 1 });
|
||||
const containerWidth = this.canvas.parentElement?.clientWidth || 800;
|
||||
this.currentZoom = containerWidth / tempViewport.width;
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
} else {
|
||||
this.currentZoom = typeof this.initialZoom === 'number' ? this.initialZoom : 1;
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
}
|
||||
|
||||
this.canvas.height = viewport.height;
|
||||
this.canvas.width = viewport.width;
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: this.ctx,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
|
||||
this.pageRendering = false;
|
||||
|
||||
if (this.pageNumPending !== null) {
|
||||
await this.renderPage(this.pageNumPending);
|
||||
this.pageNumPending = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error rendering page:', error);
|
||||
this.pageRendering = false;
|
||||
}
|
||||
}
|
||||
|
||||
private queueRenderPage(pageNum: number) {
|
||||
if (this.pageRendering) {
|
||||
this.pageNumPending = pageNum;
|
||||
} else {
|
||||
this.renderPage(pageNum);
|
||||
}
|
||||
}
|
||||
|
||||
private async renderThumbnails() {
|
||||
await this.updateComplete;
|
||||
const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
|
||||
const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
|
||||
|
||||
for (const canvas of Array.from(thumbnails)) {
|
||||
const pageNum = parseInt(canvas.dataset.page || '1');
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
// Calculate scale to fit thumbnail width while maintaining aspect ratio
|
||||
const initialViewport = page.getViewport({ scale: 1 });
|
||||
const scale = thumbnailWidth / initialViewport.width;
|
||||
const viewport = page.getViewport({ scale });
|
||||
|
||||
// Set canvas dimensions to actual render size
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
// Also set the display size via style to ensure proper display
|
||||
canvas.style.width = `${viewport.width}px`;
|
||||
canvas.style.height = `${viewport.height}px`;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
}
|
||||
}
|
||||
|
||||
private previousPage() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private nextPage() {
|
||||
if (this.currentPage < this.totalPages) {
|
||||
this.currentPage++;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private goToPage(pageNum: number) {
|
||||
if (pageNum >= 1 && pageNum <= this.totalPages) {
|
||||
this.currentPage = pageNum;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private handlePageInput(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const pageNum = parseInt(input.value);
|
||||
this.goToPage(pageNum);
|
||||
}
|
||||
|
||||
private zoomIn() {
|
||||
if (this.currentZoom < 3) {
|
||||
this.currentZoom = Math.min(3, this.currentZoom * 1.2);
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private zoomOut() {
|
||||
if (this.currentZoom > 0.5) {
|
||||
this.currentZoom = Math.max(0.5, this.currentZoom / 1.2);
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private resetZoom() {
|
||||
this.currentZoom = 1;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
private fitToPage() {
|
||||
this.initialZoom = 'page-fit';
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
private fitToWidth() {
|
||||
this.initialZoom = 'page-width';
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
private downloadPdf() {
|
||||
const link = document.createElement('a');
|
||||
link.href = this.pdfUrl;
|
||||
link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
|
||||
link.click();
|
||||
}
|
||||
|
||||
private printPdf() {
|
||||
window.open(this.pdfUrl, '_blank')?.print();
|
||||
}
|
||||
}
|
||||
69
ts_web/elements/dees-pdf-viewer/demo.ts
Normal file
69
ts_web/elements/dees-pdf-viewer/demo.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demo = () => html`
|
||||
<style>
|
||||
.demo-container {
|
||||
padding: 40px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
dees-pdf-viewer {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-tall {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.viewer-compact {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h3>Full Featured PDF Viewer with Toolbar</h3>
|
||||
<dees-pdf-viewer
|
||||
class="viewer-tall"
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
showToolbar="true"
|
||||
showSidebar="false"
|
||||
initialZoom="page-fit"
|
||||
></dees-pdf-viewer>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>PDF Viewer with Sidebar Navigation</h3>
|
||||
<dees-pdf-viewer
|
||||
class="viewer-tall"
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
showToolbar="true"
|
||||
showSidebar="true"
|
||||
initialZoom="page-width"
|
||||
></dees-pdf-viewer>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Compact Viewer without Controls</h3>
|
||||
<dees-pdf-viewer
|
||||
class="viewer-compact"
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
||||
showToolbar="false"
|
||||
showSidebar="false"
|
||||
initialZoom="auto"
|
||||
></dees-pdf-viewer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
1
ts_web/elements/dees-pdf-viewer/index.ts
Normal file
1
ts_web/elements/dees-pdf-viewer/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './component.js';
|
||||
262
ts_web/elements/dees-pdf-viewer/styles.ts
Normal file
262
ts_web/elements/dees-pdf-viewer/styles.ts
Normal file
@@ -0,0 +1,262 @@
|
||||
import { css, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const viewerStyles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
|
||||
.pdf-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
height: 48px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.toolbar-group--end {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.toolbar-button:hover:not(:disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
|
||||
}
|
||||
|
||||
.toolbar-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.toolbar-button dees-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.page-input {
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
|
||||
color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-input:focus {
|
||||
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
}
|
||||
|
||||
.page-separator {
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 60%)', 'hsl(215 16% 50%)')};
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar-close:hover {
|
||||
background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
|
||||
}
|
||||
|
||||
.sidebar-close dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.15s ease;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 18%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
border-color: ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 35%)')};
|
||||
}
|
||||
|
||||
.thumbnail.active {
|
||||
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
}
|
||||
|
||||
.thumbnail-canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.thumbnail-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.viewer-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
|
||||
border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
background: white;
|
||||
box-shadow: 0 2px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#pdf-canvas {
|
||||
display: block;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.pdf-viewer.with-sidebar .viewer-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
Reference in New Issue
Block a user