Interne Schaltflächen wurden entfernt. Stattdessen wurden externe Sende- und Aktualisierungsschaltflächen hinzugefügt.

EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@@ -16,34 +16,52 @@
     var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
                   + (pages.Count() > 1 ? " und " : "") + pages.LastOrDefault();
 }
-<nav class="navbar navbar-light bg-light">
-    <div class="container-fluid">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+<div class="d-flex flex-column min-vh-100">
+    <nav class="navbar navbar-light bg-light">
+        <div class="container-fluid">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
             <div class="navbar-brand me-auto ms-5 envelope-message">@($"Hallo {Model.Name.TrySanitize(_sanitizer)}, {@envelope?.Message.TrySanitize(_sanitizer)}")</div>
-        <div class="col-1  p-0 m-0 me-3 d-flex">
-            <img src="~/img/digital_data.svg" alt="...">
+            <div class="col-1  p-0 m-0 me-3 d-flex">
+                <img src="~/img/digital_data.svg" alt="...">
+            </div>
         </div>
-    </div>
-</nav>
-<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
-    <div class="bg-light p-1">
-        <div class="card sender-card mb-3">
-            <div class="row g-0">
-                <div class="col-1  p-0 m-0 ps-4 mx-auto">
-                    <img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
-                </div>
-                <div class="col p-0 m-0">
-                    <div class="card-body p-0 m-0">
-                        <h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
-                        <p class="card-text p-0 m-0">@($"Sie haben {(pages.Count())} Briefe zu unterschreiben. Bitte prüfen Sie die Seiten {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
-                        <p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
+    </nav>
+    <div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
+        <div class="bg-light p-1">
+            <div class="card sender-card mb-3">
+                <div class="row g-0">
+                    <div class="col-1  p-0 m-0 ps-4 mx-auto">
+                        <img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
+                    </div>
+                    <div class="col p-0 m-0">
+                        <div class="card-body p-0 m-0">
+                            <h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
+                            <p class="card-text p-0 m-0">@($"Sie haben {(pages.Count())} Briefe zu unterschreiben. Bitte prüfen Sie die Seiten {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
+                            <p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="btn-group btn_group position-fixed bottom-0 end-0 d-flex align-items-center" role="group" aria-label="Basic mixed styles example">
+        <button class="btn_complete btn btn-primary" type="button">
+            <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
+                <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
+                <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
+            </svg>
+            <span>Abschließen</span>
+        </button>
+        <button class="btn_refresh btn btn-outline-secondary" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
+                <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
+            </svg>
+        </button>
+    </div>
+    <div id='app' class="flex-grow-1"></div>
 </div>
 <script nonce="@nonce">
     const collapseNav = () => {
@@ -70,5 +88,4 @@
 
     @:document.addEventListener("DOMContentLoaded", async () => await new App("@envelopeKey.TrySanitize(_sanitizer)", @Html.Raw(envelopeReceiverJson.TrySanitize(_sanitizer)), B64ToBuff("@Html.Raw(documentBase64String.TrySanitize(_sanitizer))"), "@ViewData["PSPDFKitLicenseKey"]").init())
 }
-</script>
-<div id='app'></div>
+</script>

EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
     <link rel="stylesheet" href="~/EnvelopeGenerator.Web.styles.css" asp-append-version="true"/>
     <link rel="stylesheet" href="~/lib/flag-icons-main/css/flag-icons.min.css" asp-append-version="true" />
-    <link href="~/lib/select2/dist/css/select2.min.css" rel="stylesheet"/>
 </head>
 <body>
     <script src="~/lib/jquery/dist/jquery.min.js"></script>

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -4,12 +4,28 @@
 */
 
 /* Toolbar Buttons */
-
 #app {
     background: gray;
     width: 100vw;
-    height: 100vh;
-    margin: 0 auto;
+    height: 80vh;
+}
+
+.btn-group {
+    margin-right: 10vw;
+    margin-bottom: 10vh;
+}
+.btn_refresh, .btn_complete {
+    height:4vh
+}
+.btn_refresh {
+}
+.btn_complete{
+}
+.btn_complete .icon {
+    width: 2vh;
+}
+.btn_complete span {
+    vertical-align: middle;
 }
 
 .button-finish {
@@ -19,10 +35,10 @@
     border-left: none;
 }
 
-    .button-finish:hover, .button-finish:focus, .button-finish:active {
-        background-color: #10b981; /* emerald-500 */
-        color: white;
-    }
+.button-finish:hover, .button-finish:focus, .button-finish:active {
+    background-color: #10b981; /* emerald-500 */
+    color: white;
+}
 
 .button-reject {
     transition: background-color linear 300ms;
@@ -31,10 +47,10 @@
     border-left: none;
 }
 
-    .button-reject:hover, .button-reject:focus, .button-reject:active {
-        background-color: #f59e0b; /* amber-500 */
-        color: white;
-    }
+.button-reject:hover, .button-reject:focus, .button-reject:active {
+    background-color: #f59e0b; /* amber-500 */
+    color: white;
+}
 
 .button-reset {
     transition: background-color linear 300ms;
@@ -43,10 +59,10 @@
     border-left: none;
 }
 
-    .button-reset:hover, .button-reset:focus, .button-reset:active {
-        background-color: #3b82f6; /* blue-500 */
-        color: white;
-    }
+.button-reset:hover, .button-reset:focus, .button-reset:active {
+    background-color: #3b82f6; /* blue-500 */
+    color: white;
+}
 
 body {
     background-color: #bbb;
@@ -72,20 +88,20 @@ body {
     margin-bottom: 2rem;
 }
 
-    .page header .icon.admin {
-        background-color: #331904;
-        color: #fecba1;
-    }
+.page header .icon.admin {
+    background-color: #331904;
+    color: #fecba1;
+}
 
-    .page header .icon.locked {
-        background-color: #ffc107;
-        color: #000;
-    }
+.page header .icon.locked {
+    background-color: #ffc107;
+    color: #000;
+}
 
-    .page header .icon.signed {
-        background-color: #146c43;
-        color: #fff;
-    }
+.page header .icon.signed {
+    background-color: #146c43;
+    color: #fff;
+}
 
 .page .form {
     max-width: 30rem;
@@ -95,10 +111,10 @@ body {
     gap: 1rem;
 }
 
-    #form-access-code > .input, 
-    #form-admin-password > .input {
-        flex-grow: 1;
-    }
+#form-access-code > .input, 
+#form-admin-password > .input {
+    flex-grow: 1;
+}
 
 #page-admin header .icon {
     background-color: #331904;

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -65,7 +65,6 @@ class App {
         )
 
         // Load annotations into PSPDFKit
-
         try {
             this.signatureCount = this.currentDocument.elements.length
             const annotations = this.Annotation.createAnnotations(
@@ -84,6 +83,10 @@ class App {
             }
         } catch (e) {
         }
+
+        //add click events of external buttons
+        [...document.getElementsByClassName('btn_refresh')].forEach(btn => btn.addEventListener('click', _ => this.handleClick('RESET')));
+        [...document.getElementsByClassName('btn_complete')].forEach(btn => btn.addEventListener('click', _ => this.handleClick('FINISH')));
     }
 
     handleAnnotationsLoad(loadedAnnotations) {
@@ -165,7 +168,6 @@ class App {
     }
 
     async handleFinish(event) {
-
         const validationResult = await this.validateAnnotations(this.signatureCount)
         if (validationResult === false) {
             Swal.fire({

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -68,6 +68,7 @@
   }
 
   getCustomItems = function (callback) {
+    return []
     return [
       {
         type: 'custom',