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

Behebt das Scrollproblem des iframes durch Festlegen der Höhe mit Viewport-Einheiten, um eine ordnungsgemäße interne Scroll-Verarbeitung zu gewährleisten.
2024-05-23 13:52:37 +02:00 · 2024-05-23 10:42:55 +02:00
5 changed files with 92 additions and 57 deletions
--- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
+++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
@@ -16,7 +16,8 @@
    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="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>
@@ -26,8 +27,8 @@
                <img src="~/img/digital_data.svg" alt="...">
            </div>
        </div>
-</nav>
-<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
+    </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">
@@ -44,6 +45,23 @@
                </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 = () => {
@@ -71,4 +89,3 @@
    @: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>
--- a/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml
+++ b/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>
--- a/EnvelopeGenerator.Web/wwwroot/css/site.css
+++ b/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 {
+.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 {
+.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 {
+.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 {
+.page header .icon.admin {
    background-color: #331904;
    color: #fecba1;
-    }
+}

-    .page header .icon.locked {
+.page header .icon.locked {
    background-color: #ffc107;
    color: #000;
-    }
+}

-    .page header .icon.signed {
+.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 {
+#form-access-code > .input, 
+#form-admin-password > .input {
    flex-grow: 1;
-    }
+}

 #page-admin header .icon {
    background-color: #331904;
--- a/EnvelopeGenerator.Web/wwwroot/js/app.js
+++ b/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({
--- a/EnvelopeGenerator.Web/wwwroot/js/ui.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/ui.js
@@ -68,6 +68,7 @@
  }

  getCustomItems = function (callback) {
+    return []
    return [
      {
        type: 'custom',
Author	SHA1	Message	Date
Developer 02	2014f6149d	Interne Schaltflächen wurden entfernt. Stattdessen wurden externe Sende- und Aktualisierungsschaltflächen hinzugefügt.	2024-05-23 13:52:37 +02:00
Developer 02	60afdc23da	Behebt das Scrollproblem des iframes durch Festlegen der Höhe mit Viewport-Einheiten, um eine ordnungsgemäße interne Scroll-Verarbeitung zu gewährleisten.	2024-05-23 10:42:55 +02:00