add ability to minimize form

app/javascript/submission_form/form.vue

@@ -7,6 +7,34 @@
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true)]"
   />
+  <button
+    v-if="!isFormVisible"
+    class="btn btn-neutral text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
+    @click.prevent="isFormVisible = true"
+  >
+    Submit Form
+    <IconArrowsDiagonal
+      class="absolute right-0 mr-4"
+      :width="20"
+      :height="20"
+    />
+  </button>
+  <div
+    v-else
+    id="form_container"
+    class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border-base-200 border p-4 rounded"
+  >
+    <button
+      v-if="!isCompleted"
+      class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
+      title="Minimize"
+      @click.prevent="isFormVisible = false"
+    >
+      <IconArrowsDiagonalMinimize2
+        :width="20"
+        :height="20"
+      />
+    </button>
     <div>
       <form
         v-if="!isCompleted"
@@ -209,6 +237,8 @@
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             @attached="attachments.push($event)"
+            @start="$refs.areas.scrollIntoField(currentField)"
+            @minimize="isFormVisible = false"
           />
           <AttachmentStep
             v-else-if="currentField.type === 'file'"
@@ -263,6 +293,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -272,7 +303,7 @@ import SignatureStep from './signature_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import FormCompleted from './completed'
-import { IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 
 export default {
   name: 'SubmissionForm',
@@ -283,6 +314,8 @@ export default {
     AttachmentStep,
     MultiSelectStep,
     IconInnerShadowTop,
+    IconArrowsDiagonal,
+    IconArrowsDiagonalMinimize2,
     FormCompleted
   },
   props: {
@@ -332,6 +365,7 @@ export default {
   data () {
     return {
       isCompleted: false,
+      isFormVisible: true,
       currentStep: 0,
       isSubmitting: false
     }

app/javascript/submission_form/signature_step.vue

@@ -4,7 +4,7 @@
       <label
         class="label text-2xl"
       >{{ field.name || 'Signature' }}</label>
-      <div class="space-x-2">
+      <div class="space-x-2 flex">
         <span
           class="tooltip"
           data-tip="Type text"
@@ -49,6 +49,16 @@
           <IconReload :width="16" />
           Clear
         </button>
+        <button
+          title="Minimize"
+          class="py-1.5 inline md:hidden"
+          @click.prevent="$emit('minimize')"
+        >
+          <IconArrowsDiagonalMinimize2
+            :width="20"
+            :height="20"
+          />
+        </button>
       </div>
     </div>
     <input
@@ -59,7 +69,7 @@
     <img
       v-if="modelValue"
       :src="attachmentsIndex[modelValue].url"
-      class="w-full bg-white border border-base-300 rounded"
+      class="mx-auto bg-white border border-base-300 rounded max-h-72"
     >
     <canvas
       v-show="!modelValue"
@@ -79,14 +89,15 @@
 </template>
 
 <script>
-import { IconReload, IconCamera, IconTextSize } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 
 export default {
   name: 'SignatureStep',
   components: {
     IconReload,
     IconCamera,
-    IconTextSize
+    IconTextSize,
+    IconArrowsDiagonalMinimize2
   },
   props: {
     field: {
@@ -113,7 +124,7 @@ export default {
       default: ''
     }
   },
-  emits: ['attached', 'update:model-value'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize'],
   data () {
     return {
       isSignatureStarted: false,
@@ -136,6 +147,8 @@ export default {
 
     this.pad.addEventListener('beginStroke', () => {
       this.isSignatureStarted = true
+
+      this.$emit('start')
     })
   },
   methods: {
@@ -169,13 +182,19 @@ export default {
       context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
     },
     toggleTextInput () {
+      this.remove()
       this.isTextSignature = !this.isTextSignature
 
       if (this.isTextSignature) {
-        this.$nextTick(() => this.$refs.textInput.focus())
+        this.$nextTick(() => {
+          this.$refs.textInput.focus()
+
+          this.$emit('start')
+        })
       }
     },
     drawImage (event) {
+      this.remove()
       this.isSignatureStarted = true
 
       const file = event.target.files[0]
@@ -214,6 +233,8 @@ export default {
 
             context.clearRect(0, 0, canvas.width, canvas.height)
             context.drawImage(img, x, y, targetWidth, targetHeight)
+
+            this.$emit('start')
           }
         }
 

app/views/submit_form/show.html.erb

@@ -32,9 +32,7 @@
 <div class="fixed bottom-0 w-full h-0 z-20">
   <div class="mx-auto" style="max-width: 1000px">
     <div class="relative md:mx-32">
-      <div id="form_container" class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border border-base-200 border p-4 rounded">
       <submission-form data-is-demo="<%= Docuseal.demo? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
     </div>
   </div>
 </div>
-</div>