feat(dees-pdf-viewer): add configurable sidebar position support
This commit is contained in:
@@ -1,5 +1,11 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
|
||||||
|
add configurable sidebar position support
|
||||||
|
|
||||||
|
- introduces a sidebarPosition property with left and right options
|
||||||
|
- updates viewer layout and footer alignment when the sidebar is displayed on the right
|
||||||
|
|
||||||
## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
|
## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
|
||||||
add top scroll offset when navigating to a page in the PDF viewer
|
add top scroll offset when navigating to a page in the PDF viewer
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-catalog',
|
name: '@design.estate/dees-catalog',
|
||||||
version: '3.52.5',
|
version: '3.53.0',
|
||||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,6 +34,9 @@ export class DeesPdfViewer extends DeesElement {
|
|||||||
@property({ type: Boolean })
|
@property({ type: Boolean })
|
||||||
accessor showSidebar: boolean = false;
|
accessor showSidebar: boolean = false;
|
||||||
|
|
||||||
|
@property({ type: String })
|
||||||
|
accessor sidebarPosition: 'left' | 'right' = 'left';
|
||||||
|
|
||||||
@property({ type: Number })
|
@property({ type: Number })
|
||||||
accessor currentPage: number = 1;
|
accessor currentPage: number = 1;
|
||||||
|
|
||||||
@@ -89,7 +92,7 @@ export class DeesPdfViewer extends DeesElement {
|
|||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<dees-tile class="${this.showSidebar ? 'with-sidebar' : ''}">
|
<dees-tile class="${this.showSidebar ? 'with-sidebar' : ''} sidebar-${this.sidebarPosition}">
|
||||||
${this.showToolbar ? html`
|
${this.showToolbar ? html`
|
||||||
<div slot="header" class="toolbar">
|
<div slot="header" class="toolbar">
|
||||||
<div class="toolbar-group">
|
<div class="toolbar-group">
|
||||||
@@ -251,7 +254,7 @@ export class DeesPdfViewer extends DeesElement {
|
|||||||
<span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
|
<span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
|
||||||
` : ''}
|
` : ''}
|
||||||
</div>
|
</div>
|
||||||
<div class="pdf-footer-center" style="margin-left: ${this.showSidebar ? '100px' : '0'}">
|
<div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === 'left' ? '100px' : this.showSidebar && this.sidebarPosition === 'right' ? '-100px' : '0'}">
|
||||||
<span>Page ${this.currentPage} of ${this.totalPages}</span>
|
<span>Page ${this.currentPage} of ${this.totalPages}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pdf-footer-right">
|
<div class="pdf-footer-right">
|
||||||
|
|||||||
@@ -144,6 +144,13 @@ export const viewerStyles = [
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-right .sidebar {
|
||||||
|
border-right: none;
|
||||||
|
border-left: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
|
||||||
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
|
|||||||
Reference in New Issue
Block a user