diff --git a/src/dbp-official-signature-pdf-upload.js b/src/dbp-official-signature-pdf-upload.js index bd8e5fea2b470816c7b8763d0ce53b16e0a25f5c..2180f60a4727bca96940fc75e13cebbead21ceb4 100644 --- a/src/dbp-official-signature-pdf-upload.js +++ b/src/dbp-official-signature-pdf-upload.js @@ -600,8 +600,8 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem white-space: nowrap; } - .button.downloaded { - background-color: var(--dbp-downloaded-bg-color); + .bold-filename { + font-weight: bold; } #pdf-preview .button.is-cancel { @@ -773,12 +773,12 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem const file = this.signedFiles[id]; results.push(html` - <div class="file-block"> + <div class="file-block" id="file-block-${id}"> <div class="header"> - <span class="filename"><strong>${file.name}</strong> (${humanFileSize(file.contentSize)})</span> - <button class="button is-primary" id="file-download-button-${id}" + <span class="filename"><span class="bold-filename">${file.name}</span> (${humanFileSize(file.contentSize)})</span> + <button class="button close" title="${i18n.t('official-pdf-upload.download-file-button-title')}" - @click="${() => { this.downloadFileClickHandler(file, 'file-download-button-' + id); }}"> + @click="${() => { this.downloadFileClickHandler(file, 'file-block-' + id); }}"> <dbp-icon name="download"></dbp-icon></button> </div> </div> diff --git a/src/dbp-qualified-signature-pdf-upload.js b/src/dbp-qualified-signature-pdf-upload.js index a6b2caa2f82f312326dd7bcb15c0438b0bb60489..a3548b6b808a3ee65f54fb31d0e10263c1f4e4b5 100644 --- a/src/dbp-qualified-signature-pdf-upload.js +++ b/src/dbp-qualified-signature-pdf-upload.js @@ -706,8 +706,8 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle white-space: nowrap; } - .downloaded { - background-color: var(--dbp-downloaded-bg-color); + .bold-filename { + font-weight: bold; } #pdf-preview .button.is-cancel { @@ -896,12 +896,12 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle const file = this.signedFiles[id]; results.push(html` - <div class="file-block"> + <div class="file-block" id="file-block-${id}"> <div class="header"> - <span class="filename"><strong>${file.name}</strong> (${humanFileSize(file.contentSize)})</span> - <button class="button is-primary" id="file-download-button-${id}" + <span class="filename"><span class="bold-filename">${file.name}</span> (${humanFileSize(file.contentSize)})</span> + <button class="button close" title="${i18n.t('qualified-pdf-upload.download-file-button-title')}" - @click="${() => { this.downloadFileClickHandler(file, 'file-download-button-' + id); }}"> + @click="${() => { this.downloadFileClickHandler(file, 'file-block-' + id); }}"> <dbp-icon name="download"></dbp-icon></button> </div> </div> diff --git a/src/dbp-signature-lit-element.js b/src/dbp-signature-lit-element.js index 86911388b526c1457a1f505a1aa45111c264b44c..46d10b397bda1765170c4dde2151316fccbf3162 100644 --- a/src/dbp-signature-lit-element.js +++ b/src/dbp-signature-lit-element.js @@ -389,10 +389,9 @@ export default class DBPSignatureLitElement extends BaseLitElement { this._("#file-sink").files = files; this._("#zip-download-button").stop(); // mark downloaded files buttons - const buttons = this.shadowRoot.querySelectorAll('.file-block > div > button'); - buttons.forEach(button => { - button.classList.add('downloaded'); - button.classList.remove('is-primary'); + const spans = this.shadowRoot.querySelectorAll('.file-block > div.header > span.filename > span.bold-filename'); + spans.forEach(span => { + span.classList.remove('bold-filename'); }); } @@ -417,8 +416,9 @@ export default class DBPSignatureLitElement extends BaseLitElement { this.signedFilesToDownload = files.length; this._("#file-sink").files = files; // mark downloaded files button - const button = this.shadowRoot.querySelector('#' + id); - button.classList.add('downloaded'); - button.classList.remove('is-primary'); + const span = this.shadowRoot.querySelector('#' + id + ' > div.header > span.filename > span.bold-filename'); + if (span) { + span.classList.remove('bold-filename'); + } } }