From 847e70ec1b4fcfd1c5fa2b3271151455d2e9b477 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Fri, 18 Apr 2025 12:16:11 +0300
Subject: [PATCH] improve signing form header

---
 app/javascript/elements/scroll_buttons.js    | 56 ++++++++++++++++++++
 app/javascript/form.js                       |  2 +
 app/javascript/submission_form/completed.vue |  6 +--
 app/views/shared/_html_modal.html.erb        |  2 +-
 app/views/submit_form/show.html.erb          | 18 ++++++-
 5 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/elements/scroll_buttons.js

diff --git a/app/javascript/elements/scroll_buttons.js b/app/javascript/elements/scroll_buttons.js
new file mode 100644
index 00000000..0fdfcab4
--- /dev/null
+++ b/app/javascript/elements/scroll_buttons.js
@@ -0,0 +1,56 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.header = document.querySelector('#signing_form_header')
+
+    window.addEventListener('scroll', this.onScroll.bind(this))
+    window.addEventListener('resize', this.onResize.bind(this))
+
+    this.onResize()
+  }
+
+  disconnectedCallback () {
+    window.removeEventListener('scroll', this.onScroll.bind(this))
+    window.removeEventListener('resize', this.onResize.bind(this))
+  }
+
+  onResize () {
+    if (this.isNarrow()) {
+      this.hideButtons(true)
+    } else if (this.isHeaderNotVisible()) {
+      this.showButtons()
+    }
+  }
+
+  isNarrow () {
+    return window.innerWidth < 1366
+  }
+
+  onScroll () {
+    if (this.isHeaderNotVisible() && !this.isNarrow()) {
+      this.showButtons()
+    } else {
+      this.hideButtons()
+    }
+  }
+
+  isHeaderNotVisible () {
+    const rect = this.header.getBoundingClientRect()
+    return rect.bottom <= 0 || rect.top >= window.innerHeight
+  }
+
+  showButtons () {
+    this.classList.remove('hidden', '-translate-y-10', 'opacity-0')
+    this.classList.add('translate-y-0', 'opacity-100')
+  }
+
+  hideButtons () {
+    this.classList.remove('translate-y-0', 'opacity-100')
+    this.classList.add('-translate-y-10', 'opacity-0')
+
+    setTimeout(() => {
+      if (this.classList.contains('-translate-y-10')) {
+        this.classList.add('hidden')
+      }
+    }, 300)
+  }
+}
diff --git a/app/javascript/form.js b/app/javascript/form.js
index cbd26d1a..45b3b3d2 100644
--- a/app/javascript/form.js
+++ b/app/javascript/form.js
@@ -4,12 +4,14 @@ import Form from './submission_form/form'
 import DownloadButton from './elements/download_button'
 import ToggleSubmit from './elements/toggle_submit'
 import FetchForm from './elements/fetch_form'
+import ScrollButtons from './elements/scroll_buttons'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
 safeRegisterElement('download-button', DownloadButton)
 safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('fetch-form', FetchForm)
+safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
diff --git a/app/javascript/submission_form/completed.vue b/app/javascript/submission_form/completed.vue
index a41f27ac..43228f63 100644
--- a/app/javascript/submission_form/completed.vue
+++ b/app/javascript/submission_form/completed.vue
@@ -193,9 +193,9 @@ export default {
       })
     }
 
-    if (window.decline_button) {
-      window.decline_button.setAttribute('disabled', 'true')
-    }
+    document.querySelectorAll('#decline_button').forEach((button) => {
+      button.setAttribute('disabled', 'true')
+    })
   },
   methods: {
     sendCopyToEmail () {
diff --git a/app/views/shared/_html_modal.html.erb b/app/views/shared/_html_modal.html.erb
index 00d269c9..c6baa601 100644
--- a/app/views/shared/_html_modal.html.erb
+++ b/app/views/shared/_html_modal.html.erb
@@ -1,4 +1,4 @@
-<% uuid = SecureRandom.uuid %>
+<% uuid = local_assigns[:uuid] || SecureRandom.uuid %>
 <label id="<%= local_assigns[:button_id] %>" for="<%= uuid %>" class="<%= local_assigns[:btn_class] %>"><%= local_assigns[:btn_text] %></label>
 <input type="checkbox" id="<%= uuid %>" class="modal-toggle">
 <div id="<%= local_assigns[:id] %>" class="modal items-start !animate-none overflow-y-auto">
diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index b4774423..566413ba 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -11,14 +11,15 @@
       <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
       <%= local_assigns[:banner_html] || capture do %>
         <%= render('submit_form/banner') %>
-        <div class="sticky top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
+        <div id="signing_form_header" class="sticky min-[1366px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
           <div class="text-xl md:text-2xl font-medium focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
             <%= @submitter.submission.template.name %>
           </div>
           <div class="flex items-center space-x-2" style="margin-left: 20px; flex-shrink: 0">
             <% if @form_configs[:with_decline] %>
+              <% decline_modal_checkbox_uuid = SecureRandom.uuid %>
               <div>
-                <%= render 'shared/html_modal', title: t(:decline), btn_text: t(:decline), btn_class: 'btn btn-sm !px-5', button_id: 'decline_button' do %>
+                <%= render 'shared/html_modal', title: t(:decline), btn_text: t(:decline), btn_class: 'btn btn-sm !px-5', button_id: 'decline_button', uuid: decline_modal_checkbox_uuid do %>
                   <%= render 'submit_form/decline_form', submitter: @submitter %>
                 <% end %>
               </div>
@@ -35,6 +36,19 @@
             </download-button>
           </div>
         </div>
+        <scroll-buttons class="fixed right-5 top-2 hidden md:flex gap-1 z-50 transition-transform duration-300 ease-in-out opacity-0 -translate-y-10">
+          <% if @form_configs[:with_decline] %>
+            <label id="decline_button" for="<%= decline_modal_checkbox_uuid %>" class="btn btn-sm px-2"><%= t(:decline) %></label>
+          <% end %>
+          <download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2">
+            <span data-target="download-button.defaultButton">
+              <%= svg_icon('download', class: 'w-6 h-6') %>
+            </span>
+            <span class="hidden" data-target="download-button.loadingButton">
+              <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
+            </span>
+          </download-button>
+        </scroll-buttons>
       <% end %>
       <% schema.each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>