diff --git a/src/dbp-official-signature-pdf-upload.js b/src/dbp-official-signature-pdf-upload.js
index 2920fff36f38ce9639664f5188bb79bcad94d5da..4c7e922bd07e2344672cf19234948b7e8a173502 100644
--- a/src/dbp-official-signature-pdf-upload.js
+++ b/src/dbp-official-signature-pdf-upload.js
@@ -55,6 +55,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
this.queuedFilesEnabledAnnotations = [];
this.queuedFilesAnnotationsCount = 0;
this.isAnnotationViewVisible = false;
+ this.addAnnotationInProgress = false;
this.activity = new Activity(metadata);
}
@@ -102,6 +103,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
isAnnotationViewVisible: { type: Boolean, attribute: false },
queuedFilesAnnotations: { type: Array, attribute: false },
queuedFilesAnnotationsCount: { type: Number, attribute: false },
+ addAnnotationInProgress: { type: Boolean, attribute: false },
};
}
@@ -130,7 +132,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
return;
}
- if (!this.signingProcessEnabled || this.uploadInProgress) {
+ if (!this.signingProcessEnabled || this.uploadInProgress || this.addAnnotationInProgress) {
return;
}
this.signaturePlacementInProgress = false;
@@ -401,7 +403,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
}
isUserInterfaceDisabled() {
- return this.signaturePlacementInProgress || this.externalAuthInProgress || this.uploadInProgress;
+ return this.signaturePlacementInProgress || this.externalAuthInProgress || this.uploadInProgress || this.addAnnotationInProgress;
}
static get styles() {
diff --git a/src/dbp-pdf-annotation-view.js b/src/dbp-pdf-annotation-view.js
index 305d5087b8647ee05be7973b6b650f222dbbeccd..46866adb3b04940831a1f428b81f329105591cd1 100644
--- a/src/dbp-pdf-annotation-view.js
+++ b/src/dbp-pdf-annotation-view.js
@@ -150,33 +150,20 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
- #org-selector {
- text-overflow: ellipsis;
- }
-
- div.annotation-block.with-organization select:not(.select) {
- background-size: 4%;
- }
-
- div.annotation-block.with-organization {
- display: grid;
- grid-template-columns: 140px auto auto 42px;
- column-gap: .5em;
-
+ div.inner-grid {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
align-items: center;
-
- margin-left: 4px;
- margin-right: 2px;
}
div.annotation-block {
display: grid;
- grid-template-columns: 140px auto 42px;
- column-gap: .5em;
+ row-gap: .3em;
align-items: center;
-
- margin-left: 4px;
+
+ margin-left: 2px;
margin-right: 2px;
}
@@ -185,12 +172,25 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
padding-right: 1em;
}
+ .border {
+ border-top: 1px solid #888;
+ padding-bottom: .5em;
+ }
+ .border-wrapper {
+ border: 1px solid black;
+ border-bottom-width: 0;
+ border-top-width: 0;
+
+ padding-left: 3px;
+ padding-right: 3px;
+ }
+
#inside-fields {
display: grid;
- row-gap: .5em;
+ row-gap: 1em;
}
- .add-elements {
+ .delete-elements {
padding-top: 1em;
margin-left: 2px;
@@ -200,12 +200,12 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
justify-content: flex-end;
}
- .add-elements .button {
+ .delete-elements .button {
margin-left: .5em;
}
select:not(.select) {
- background-size: 8%;
+ background-size: 13px;
height: 33px;
}
@@ -215,16 +215,9 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
border-width: 1px;
border-style: solid;
padding: 0.5em;
- padding-bottom: 1.5em;
- border-top-width: 0;
- }
+ padding-bottom: 0.8em;
- #fields-wrapper fields {
- position: absolute;
- top: 0;
- left: 0;
- border: solid 1px black;
- border-top-color: #888;
+ border-top-width: 0;
}
#pdf-meta {
@@ -234,6 +227,18 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
padding: 0.5em;
border-bottom-width: 0;
border-top-width: 0;
+
+ padding-bottom: 1em;
+ }
+
+ .input {
+ padding-left: 8px;
+ font-weight: 300;
+ color: inherit;
+ border: 1px solid #aaa;
+ line-height: 100%;
+ height: 28px;
+ width: 100%;
}
.nav-buttons {
@@ -252,6 +257,19 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
margin: 2px;
}
+ /* Handling for small displays (like mobile devices) */
+ @media (max-width: 680px) {
+ .nav-buttons {
+ flex-direction: column;
+ }
+
+ .add-elements {
+ display: grid;
+ grid-template-columns: auto 42px;
+ column-gap: 3px;
+ }
+
+ }
`;
}
@@ -272,19 +290,25 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
results.push(html`
<div class="${classMap({'with-organization': annotationTypeData.hasOrganization, 'annotation-block': true})}">
- <label>${name}</label>
+ <div class="inner-grid">
+ <label><strong>${name}</strong></label>
+ <button class="button close"
+ title="${i18n.t('annotation-view.remove-field')}"
+ @click="${() => { this.removeAnnotation(id); } }">
+ <dbp-icon name="trash"></dbp-icon></button>
+ </div>
+
<dbp-organization-select subscribe="lang:lang,entry-point-url:entry-point-url,auth:auth"
- class="${classMap({hidden: !annotationTypeData.hasOrganization})}"
+ class="${classMap({hidden: !annotationTypeData.hasOrganization})}"
value="${data.organizationValue}"
@change=${e => {
this.updateAnnotation(id, 'organizationValue', e.target.value);
this.updateAnnotation(id, 'organizationNumber', JSON.parse(e.target.getAttribute("data-object")).alternateName);
}}></dbp-organization-select>
- <input type="text" .value="${data.value}" class="input" placeholder="${i18n.t('annotation-view.businessnumber-placeholder')}" @change=${e => { this.updateAnnotation(id, 'value', e.target.value); }}>
- <button class="button close"
- title="${i18n.t('annotation-view.remove-field')}"
- @click="${() => { this.removeAnnotation(id); } }">
- <dbp-icon name="trash"></dbp-icon></button>
+
+ <input type="text" .value="${data.value}" class="input"
+ placeholder="${annotationTypeData.hasOrganization ? i18n.t('annotation-view.businessnumber-placeholder') : i18n.t('annotation-view.intended-use-placeholder')}"
+ @change=${e => { this.updateAnnotation(id, 'value', e.target.value); }}>
</div>
`);
});
@@ -297,12 +321,20 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
<div id="pdf-main-container">
<div id="pdf-meta">
<div class="nav-buttons">
- <button class="button"
- title="${i18n.t('annotation-view.delete-all-button-title')}"
- @click="${() => { this.deleteAll(); } }"
- ?disabled="${ this.annotationRows.length === 0 }">
- ${i18n.t('annotation-view.delete-all-button-text')}
- </button>
+
+ <div class="add-elements">
+ <select id="additional-select" @change="${() => { this.isSelected = true; } }">
+ ${utils.getAnnotationTypeSelectOptionsHtml('', this.lang)}
+ <option value="" disabled selected>${i18n.t('annotation-view.insert-field')}</option>
+ </select>
+ <button class="button"
+ title="${i18n.t('annotation-view.insert-field')}"
+ @click="${() => { this.addAnnotation(); } }"
+ ?disabled="${ !this.isSelected }">
+ <dbp-icon name="checkmark-circle"></dbp-icon></button>
+ </button>
+ </div>
+
<button class="button is-primary"
title="${i18n.t('annotation-view.save-all-button-title')}"
@click="${() => { this.saveAll(); } }"
@@ -311,7 +343,9 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
</button>
</div>
</div>
-
+ <div class="border-wrapper">
+ <div class="border"></div>
+ </div>
<div id="fields-wrapper">
<div id="inside-fields">
<div class="text ${classMap({hidden: this.isTextHidden})}">
@@ -319,17 +353,12 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
</div>
${this.getAnnotationsHtml()}
</div>
-
- <div class="add-elements">
- <select id="additional-select" @change="${() => { this.isSelected = true; } }">
- ${utils.getAnnotationTypeSelectOptionsHtml('', this.lang)}
- <option value="" disabled selected>${i18n.t('annotation-view.insert-field')}</option>
- </select>
- <button class="button"
- title="${i18n.t('annotation-view.insert-field')}"
- @click="${() => { this.addAnnotation(); } }"
- ?disabled="${ !this.isSelected }">
- <dbp-icon name="plus"></dbp-icon></button>
+ <div class="delete-elements">
+ <button class="button ${classMap({hidden: !this.isTextHidden})}"
+ title="${i18n.t('annotation-view.delete-all-button-title')}"
+ @click="${() => { this.deleteAll(); } }"
+ ?disabled="${ this.annotationRows.length === 0 }">
+ ${i18n.t('annotation-view.delete-all-button-text')}
</button>
</div>
</div>
diff --git a/src/dbp-qualified-signature-pdf-upload.js b/src/dbp-qualified-signature-pdf-upload.js
index b78d1f42d3a2168c1da1f113e47cd9f8b7154662..538e07e559d657fd3e60bbe4efd67eaef863bd7b 100644
--- a/src/dbp-qualified-signature-pdf-upload.js
+++ b/src/dbp-qualified-signature-pdf-upload.js
@@ -56,6 +56,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
this.queuedFilesAnnotationsCount = 0;
this.queuedFilesEnabledAnnotations = [];
this.isAnnotationViewVisible = false;
+ this.addAnnotationInProgress = false;
this.activity = new Activity(metadata);
@@ -107,6 +108,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
isAnnotationViewVisible: { type: Boolean, attribute: false },
queuedFilesAnnotations: { type: Array, attribute: false },
queuedFilesAnnotationsCount: { type: Number, attribute: false },
+ addAnnotationInProgress: { type: Boolean, attribute: false },
};
}
@@ -151,7 +153,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
return;
}
- if (!this.signingProcessEnabled || this.externalAuthInProgress || this.uploadInProgress) {
+ if (!this.signingProcessEnabled || this.externalAuthInProgress || this.uploadInProgress || this.addAnnotationInProgress) {
return;
}
this.signaturePlacementInProgress = false;
@@ -532,7 +534,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
}
isUserInterfaceDisabled() {
- return this.signaturePlacementInProgress || this.externalAuthInProgress || this.uploadInProgress;
+ return this.signaturePlacementInProgress || this.externalAuthInProgress || this.uploadInProgress || this.addAnnotationInProgress;
}
static get styles() {
@@ -550,8 +552,9 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
color: var(--dbp-override-danger-bg-color);
cursor: pointer;
padding: 0px;
+ padding-right: 2px;
}
-
+
#annotation-view .box-header, #external-auth .box-header {
display: flex;
justify-content: space-between;
diff --git a/src/dbp-signature-lit-element.js b/src/dbp-signature-lit-element.js
index a0028381507b6ea4be40818ee501043e326726a4..ee7cd7d8e3f5c56a3038ddc142d6e63affd3964f 100644
--- a/src/dbp-signature-lit-element.js
+++ b/src/dbp-signature-lit-element.js
@@ -129,6 +129,8 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
this.currentPreviewQueueKey = key;
console.log(file);
+ this.addAnnotationInProgress = true;
+
const viewTag = this.constructor.getScopedTagName('dbp-pdf-annotation-view');
this._(viewTag).setAttribute('key', key);
this._(viewTag).setAnnotationRows(this.queuedFilesAnnotations[key]);
@@ -155,6 +157,7 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
this.queuedFilesAnnotations[key] = annotationDetails.annotationRows;
this.isAnnotationViewVisible = false;
+ this.addAnnotationInProgress = false;
}
/**
@@ -163,6 +166,7 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
hideAnnotationView() {
this._("#annotation-switch").name = "no-text";
this.isAnnotationViewVisible = false;
+ this.addAnnotationInProgress = false;
}
/**
diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json
index dc517e5b4722933c88d77be93f22987ba733b8a5..74bd5f84e713566cfc093a14336196cce0e18d76 100644
--- a/src/i18n/de/translation.json
+++ b/src/i18n/de/translation.json
@@ -11,7 +11,7 @@
"start-signing-process-button": "Signatur starten",
"stop-signing-process-button": "Signieren unterbrechen",
"show-preview": "Dokument anzeigen",
- "positioning-automatic": "Automatisch",
+ "positioning-automatic": "Auto",
"positioning-manual": "Manuell",
"preview-label": "Dokumentenansicht",
"signed-files-label": "Signierte Dokumente",
@@ -30,7 +30,7 @@
"file-picker-context": "PDF-Dokumente zum Signieren auswählen",
"add-annotation-title": "Dem PDF eine Kennzahl hinzufügen",
"annotation-type-please-select": "Bitte wählen Sie einen Typ aus",
- "annotation": "Text anbringen",
+ "annotation": "Text hinzufügen",
"annotation-no": "Nein",
"annotation-yes": "Ja",
"annotation-view-label": "Text zu Dokument hinzufügen"
@@ -50,7 +50,7 @@
"start-signing-process-button": "Signatur starten",
"stop-signing-process-button": "Signieren unterbrechen",
"show-preview": "Dokument anzeigen",
- "positioning-automatic": "Automatisch",
+ "positioning-automatic": "Auto",
"positioning-manual": "Manuell",
"preview-label": "Dokumentenansicht",
"signed-files-label": "Signierte Dokumente",
@@ -67,7 +67,7 @@
"positioning": "Positionierung",
"confirm-page-leave": "Sind Sie sicher, dass Sie die Seite verlassen wollen? Es stehen signierte Dokumente zum Download bereit.",
"file-picker-context": "PDF-Dokumente zum Signieren auswählen",
- "annotation": "Text anbringen",
+ "annotation": "Text hinzufügen",
"annotation-no": "Nein",
"annotation-yes": "Ja",
"annotation-view-label": "Text zu Dokument hinzufügen"
@@ -126,7 +126,7 @@
"remove-field": "Feld löschen",
"type-value-1": "Geschäftszahl",
"type-value-2": "Verwendungszweck",
- "businessnumber-placeholder": "Z.B. 247/1/2020-S",
+ "businessnumber-placeholder": "Fügen Sie hier die Geschäftszahl ein (z.B. 247/1/2020-S)",
"intended-use-placeholder": "Fügen Sie hier den gewünschten Text ein",
"introduction": "In diesem Bereich können Sie zusätzlichen Text definieren, der in der Signatur enthalten sein soll. Klicken Sie dafür auf \"Neues Feld einfügen\" und wählen Sie das gewünschte Feld aus. Klicken Sie dann auf das \"+\" um das Feld einzufügen und den gewünschten Text einzugeben."
},
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 8f57017b8d3fcd9a240a33119744ce5467873571..311c57b1d24e1f45ef4d4496efac49ba2fac23f1 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -11,7 +11,7 @@
"start-signing-process-button": "Start signing",
"stop-signing-process-button": "Stop signing",
"show-preview": "Show document",
- "positioning-automatic": "Automatic",
+ "positioning-automatic": "Auto",
"positioning-manual": "Manual",
"preview-label": "Document view",
"signed-files-label": "Signed documents",
@@ -50,7 +50,7 @@
"start-signing-process-button": "Start signing",
"stop-signing-process-button": "Stop signing",
"show-preview": "Show document",
- "positioning-automatic": "Automatic",
+ "positioning-automatic": "Auto",
"positioning-manual": "Manual",
"preview-label": "Document view",
"signed-files-label": "Signed documents",
@@ -126,7 +126,7 @@
"remove-field": "Delete field",
"type-value-1": "Businessnumber",
"type-value-2": "Intended use",
- "businessnumber-placeholder": "E.g. 247/1/2020-S",
+ "businessnumber-placeholder": "Insert business number here (e.g. 247/1/2020-S)",
"intended-use-placeholder": "Insert text here",
"introduction": "In this area you can define additional text to be included in the signature. To do this, click on \"Insert new field\" and select the desired field. Then click on the \"+\" to insert the field and enter the desired text."
},