From 3117716e3423fdb24c6c40cafd5047db99c3476f Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 25 Jun 2020 11:32:43 +0200
Subject: [PATCH] Replace next/prev button labels in the PDF preview with icons
See #25
---
src/vpu-pdf-preview.js | 19 ++++++++++++++-----
1 file changed, 14 insertions(+), 5 deletions(-)
diff --git a/src/vpu-pdf-preview.js b/src/vpu-pdf-preview.js
index edf26f5..8efc84e 100644
--- a/src/vpu-pdf-preview.js
+++ b/src/vpu-pdf-preview.js
@@ -4,7 +4,7 @@ import {classMap} from 'lit-html/directives/class-map.js';
import {live} from 'lit-html/directives/live.js';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import VPULitElement from 'vpu-common/vpu-lit-element';
-import {MiniSpinner} from 'vpu-common';
+import {MiniSpinner, Icon} from 'vpu-common';
import * as commonUtils from "vpu-common/utils";
import * as commonStyles from 'vpu-common/styles';
import pdfjs from 'pdfjs-dist';
@@ -41,6 +41,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
static get scopedElements() {
return {
'vpu-mini-spinner': MiniSpinner,
+ 'vpu-icon': Icon,
};
}
@@ -497,11 +498,15 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
<button class="button"
title="${i18n.t('pdf-preview.first-page')}"
@click="${async () => { await this.showPage(1); } }"
- ?disabled="${this.isPageRenderingInProgress || this.currentPage === 1}">${i18n.t('pdf-preview.first')}</button>
+ ?disabled="${this.isPageRenderingInProgress || this.currentPage === 1}">
+ <vpu-icon name="angle-double-left"></vpu-icon>
+ </button>
<button class="button"
title="${i18n.t('pdf-preview.previous-page')}"
@click="${async () => { if (this.currentPage > 1) await this.showPage(--this.currentPage); } }"
- ?disabled="${this.isPageRenderingInProgress || this.currentPage === 1}">${i18n.t('pdf-preview.previous')}</button>
+ ?disabled="${this.isPageRenderingInProgress || this.currentPage === 1}">
+ <vpu-icon name="chevron-left"></vpu-icon>
+ </button>
<input type="number"
min="1"
max="${this.totalPages}"
@@ -511,11 +516,15 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
<button class="button"
title="${i18n.t('pdf-preview.next-page')}"
@click="${async () => { if (this.currentPage < this.totalPages) await this.showPage(++this.currentPage); } }"
- ?disabled="${this.isPageRenderingInProgress || this.currentPage === this.totalPages}">${i18n.t('pdf-preview.next')}</button>
+ ?disabled="${this.isPageRenderingInProgress || this.currentPage === this.totalPages}">
+ <vpu-icon name="chevron-right"></vpu-icon>
+ </button>
<button class="button"
title="${i18n.t('pdf-preview.last-page')}"
@click="${async () => { await this.showPage(this.totalPages); } }"
- ?disabled="${this.isPageRenderingInProgress || this.currentPage === this.totalPages}">${i18n.t('pdf-preview.last')}</button>
+ ?disabled="${this.isPageRenderingInProgress || this.currentPage === this.totalPages}">
+ <vpu-icon name="angle-double-right"></vpu-icon>
+ </button>
<button class="button ${classMap({hidden: !this.isShowPlacement || isRotationHidden})}"
title="${i18n.t('pdf-preview.rotate-signature')}"
@click="${() => { this.rotateSignature(); } }"
--
GitLab