diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css
index 6f1d1f67..638cbeb9 100644
--- a/EnvelopeGenerator.Web/wwwroot/css/site.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.css
@@ -3,32 +3,50 @@
https://tailwindcss.com/docs/customizing-colors#default-color-palette
*/
+/* Toolbar Buttons */
+
.button-finish {
transition: background-color linear 300ms;
- background-color: #059669;
+ background-color: #059669; /* emerald-600 */
color: white;
border-left: none;
}
.button-finish:hover, .button-finish:focus, .button-finish:active {
- background-color: #10b981;
+ background-color: #10b981; /* emerald-500 */
+ color: white;
+ }
+
+.button-reject {
+ transition: background-color linear 300ms;
+ background-color: #d97706; /* amber-600 */
+ color: white;
+ border-left: none;
+}
+
+ .button-reject:hover, .button-reject:focus, .button-reject:active {
+ background-color: #f59e0b; /* amber-500 */
color: white;
}
.button-reset {
transition: background-color linear 300ms;
- background-color: #2563eb;
+ background-color: #2563eb; /* blue-600 */
color: white;
+ border-left: none;
}
.button-reset:hover, .button-reset:focus, .button-reset:active {
- background-color: #3b82f6;
+ background-color: #3b82f6; /* blue-500 */
color: white;
}
+
+/* Success Page */
+
#page-success header .icon {
display: inline-block;
border-radius: 100px;
padding: 15px;
margin-bottom: 2rem;
-}
\ No newline at end of file
+}
diff --git a/EnvelopeGenerator.Web/wwwroot/js/annotation.js b/EnvelopeGenerator.Web/wwwroot/js/annotation.js
index bfbc9f64..b0d63cd3 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/annotation.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/annotation.js
@@ -90,6 +90,8 @@
id: id,
pageIndex: pageIndex,
formFieldName: id,
+ backgroundColor: PSPDFKit.Color.YELLOW,
+ blendMode: "multiply",
boundingBox: new PSPDFKit.Geometry.Rect({
width,
height,
diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js b/EnvelopeGenerator.Web/wwwroot/js/app.js
index 4ea6b025..29f5decf 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/app.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/app.js
@@ -142,6 +142,9 @@ class App {
}
break
+
+ case 'REJECT':
+ alert('Dokument abgelent!')
}
}
diff --git a/EnvelopeGenerator.Web/wwwroot/js/ui.js b/EnvelopeGenerator.Web/wwwroot/js/ui.js
index 2ddc1cf0..3313fd06 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/ui.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/ui.js
@@ -19,11 +19,13 @@
styleSheets: ['/css/site.css'],
container: container,
document: arrayBuffer,
- autoSaveMode: 'DISABLED',
annotationPresets: this.getPresets(),
electronicSignatures: {
creationModes: ['DRAW', 'TYPE'],
},
+ initialViewState: new PSPDFKit.ViewState({
+ sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS,
+ }),
isEditableAnnotation: function (annotation) {
// Check if the annotation is a signature
// This will allow new signatures, but not allow edits.
@@ -40,6 +42,9 @@
//return !annotation.isSignature;
},
+ customRenderers: {
+ Annotation: this.annotationRenderer
+ }
})
}
@@ -50,6 +55,14 @@
console.debug('PSPDFKit configured!')
}
+ annotationRenderer(data) {
+ console.log(data)
+ console.log(data.annotation.toJS())
+
+ // leave everything as is
+ return null
+ }
+
getToolbarItems(instance, handler) {
const customItems = this.getCustomItems(handler)
const defaultItems = this.getDefaultItems(instance.toolbarItems)
@@ -79,6 +92,19 @@
`,
},
+ {
+ type: 'custom',
+ id: 'button-reject',
+ className: 'button-reject',
+ title: 'Ablehnen',
+ onPress() {
+ console.log('REJECT')
+ callback('REJECT')
+ },
+ icon: ``
+ },
{
type: 'custom',
id: 'button-finish',