add ability to minimize form

app/javascript/submission_form/form.vue

@@ -7,259 +7,290 @@
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true)]"
   />
-  <div>
+  <button
-    <form
+    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"
-      ref="form"
+      class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
-      :action="submitPath"
+      title="Minimize"
-      method="post"
+      @click.prevent="isFormVisible = false"
-      class="md:mx-16"
-      @submit.prevent="submitStep"
     >
-      <input
+      <IconArrowsDiagonalMinimize2
-        type="hidden"
+        :width="20"
-        name="authenticity_token"
+        :height="20"
-        :value="authenticityToken"
+      />
+    </button>
+    <div>
+      <form
+        v-if="!isCompleted"
+        ref="form"
+        :action="submitPath"
+        method="post"
+        class="md:mx-16"
+        @submit.prevent="submitStep"
       >
-      <input
+        <input
-        value="put"
+          type="hidden"
-        name="_method"
+          name="authenticity_token"
-        type="hidden"
+          :value="authenticityToken"
-      >
+        >
-      <div class="md:mt-4">
+        <input
-        <div v-if="['cells', 'text'].includes(currentField.type)">
+          value="put"
-          <label
+          name="_method"
-            v-if="currentField.name"
+          type="hidden"
-            :for="currentField.uuid"
+        >
-            class="label text-2xl mb-2"
+        <div class="md:mt-4">
-          >{{ currentField.name }}
+          <div v-if="['cells', 'text'].includes(currentField.type)">
-            <template v-if="!currentField.required">(optional)</template>
+            <label
-          </label>
+              v-if="currentField.name"
-          <div
+              :for="currentField.uuid"
-            v-else
+              class="label text-2xl mb-2"
-            class="py-1"
+            >{{ currentField.name }}
-          />
+              <template v-if="!currentField.required">(optional)</template>
-          <div>
+            </label>
-            <input
+            <div
+              v-else
+              class="py-1"
+            />
+            <div>
+              <input
+                :id="currentField.uuid"
+                v-model="values[currentField.uuid]"
+                class="base-input !text-2xl w-full"
+                :required="currentField.required"
+                :placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
+                type="text"
+                :name="`values[${currentField.uuid}]`"
+                @focus="$refs.areas.scrollIntoField(currentField)"
+              >
+            </div>
+          </div>
+          <div v-else-if="currentField.type === 'date'">
+            <label
+              v-if="currentField.name"
+              :for="currentField.uuid"
+              class="label text-2xl mb-2"
+            >{{ currentField.name }}
+              <template v-if="!currentField.required">(optional)</template>
+            </label>
+            <div
+              v-else
+              class="py-1"
+            />
+            <div class="text-center">
+              <input
+                :id="currentField.uuid"
+                v-model="values[currentField.uuid]"
+                class="base-input !text-2xl text-center w-full"
+                :required="currentField.required"
+                type="date"
+                :name="`values[${currentField.uuid}]`"
+                @focus="$refs.areas.scrollIntoField(currentField)"
+              >
+            </div>
+          </div>
+          <div v-else-if="currentField.type === 'select'">
+            <label
+              v-if="currentField.name"
+              :for="currentField.uuid"
+              class="label text-2xl mb-2"
+            >{{ currentField.name }}
+              <template v-if="!currentField.required">(optional)</template>
+            </label>
+            <div
+              v-else
+              class="py-1"
+            />
+            <select
               :id="currentField.uuid"
-              v-model="values[currentField.uuid]"
-              class="base-input !text-2xl w-full"
               :required="currentField.required"
-              :placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
+              class="select base-input !text-2xl w-full text-center font-normal"
-              type="text"
               :name="`values[${currentField.uuid}]`"
+              @change="values[currentField.uuid] = $event.target.value"
               @focus="$refs.areas.scrollIntoField(currentField)"
             >
-          </div>
+              <option
-        </div>
+                value=""
-        <div v-else-if="currentField.type === 'date'">
+                :selected="!values[currentField.uuid]"
-          <label
+              >
-            v-if="currentField.name"
+                Select your option
-            :for="currentField.uuid"
+              </option>
-            class="label text-2xl mb-2"
+              <option
-          >{{ currentField.name }}
-            <template v-if="!currentField.required">(optional)</template>
-          </label>
-          <div
-            v-else
-            class="py-1"
-          />
-          <div class="text-center">
-            <input
-              :id="currentField.uuid"
-              v-model="values[currentField.uuid]"
-              class="base-input !text-2xl text-center w-full"
-              :required="currentField.required"
-              type="date"
-              :name="`values[${currentField.uuid}]`"
-              @focus="$refs.areas.scrollIntoField(currentField)"
-            >
-          </div>
-        </div>
-        <div v-else-if="currentField.type === 'select'">
-          <label
-            v-if="currentField.name"
-            :for="currentField.uuid"
-            class="label text-2xl mb-2"
-          >{{ currentField.name }}
-            <template v-if="!currentField.required">(optional)</template>
-          </label>
-          <div
-            v-else
-            class="py-1"
-          />
-          <select
-            :id="currentField.uuid"
-            :required="currentField.required"
-            class="select base-input !text-2xl w-full text-center font-normal"
-            :name="`values[${currentField.uuid}]`"
-            @change="values[currentField.uuid] = $event.target.value"
-            @focus="$refs.areas.scrollIntoField(currentField)"
-          >
-            <option
-              value=""
-              :selected="!values[currentField.uuid]"
-            >
-              Select your option
-            </option>
-            <option
-              v-for="(option, index) in currentField.options"
-              :key="index"
-              :selected="values[currentField.uuid] == option"
-              :value="option"
-            >
-              {{ option }}
-            </option>
-          </select>
-        </div>
-        <div v-else-if="currentField.type === 'radio'">
-          <label
-            v-if="currentField.name"
-            :for="currentField.uuid"
-            class="label text-2xl mb-2"
-          >{{ currentField.name }}
-            <template v-if="!currentField.required">(optional)</template>
-          </label>
-          <div class="flex w-full">
-            <div class="space-y-3.5 mx-auto">
-              <div
                 v-for="(option, index) in currentField.options"
                 :key="index"
+                :selected="values[currentField.uuid] == option"
+                :value="option"
+              >
+                {{ option }}
+              </option>
+            </select>
+          </div>
+          <div v-else-if="currentField.type === 'radio'">
+            <label
+              v-if="currentField.name"
+              :for="currentField.uuid"
+              class="label text-2xl mb-2"
+            >{{ currentField.name }}
+              <template v-if="!currentField.required">(optional)</template>
+            </label>
+            <div class="flex w-full">
+              <div class="space-y-3.5 mx-auto">
+                <div
+                  v-for="(option, index) in currentField.options"
+                  :key="index"
+                >
+                  <label
+                    :for="currentField.uuid + option"
+                    class="flex items-center space-x-3"
+                  >
+                    <input
+                      :id="currentField.uuid + option"
+                      v-model="values[currentField.uuid]"
+                      type="radio"
+                      class="base-radio !h-7 !w-7"
+                      :name="`values[${currentField.uuid}]`"
+                      :value="option"
+                      :required="currentField.required"
+                    >
+                    <span class="text-xl">
+                      {{ option }}
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <MultiSelectStep
+            v-else-if="currentField.type === 'multiple'"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+          />
+          <div
+            v-else-if="currentField.type === 'checkbox'"
+            class="flex w-full"
+          >
+            <input
+              type="hidden"
+              name="cast_boolean"
+              value="true"
+            >
+            <div
+              class="space-y-3.5 mx-auto"
+            >
+              <div
+                v-for="(field, index) in currentStepFields"
+                :key="field.uuid"
               >
                 <label
-                  :for="currentField.uuid + option"
+                  :for="field.uuid"
                   class="flex items-center space-x-3"
                 >
                   <input
-                    :id="currentField.uuid + option"
+                    type="hidden"
-                    v-model="values[currentField.uuid]"
+                    :name="`values[${field.uuid}]`"
-                    type="radio"
+                    :value="!!values[field.uuid]"
-                    class="base-radio !h-7 !w-7"
+                  >
-                    :name="`values[${currentField.uuid}]`"
+                  <input
-                    :value="option"
+                    :id="field.uuid"
-                    :required="currentField.required"
+                    type="checkbox"
+                    class="base-checkbox !h-7 !w-7"
+                    :checked="!!values[field.uuid]"
+                    @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                   >
                   <span class="text-xl">
-                    {{ option }}
+                    {{ currentField.name || currentField.type + ' ' + (index + 1) }}
                   </span>
                 </label>
               </div>
             </div>
           </div>
+          <ImageStep
+            v-else-if="currentField.type === 'image'"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :is-direct-upload="isDirectUpload"
+            :attachments-index="attachmentsIndex"
+            :submitter-slug="submitterSlug"
+            @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
+          />
+          <SignatureStep
+            v-else-if="currentField.type === 'signature'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :is-direct-upload="isDirectUpload"
+            :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'"
+            v-model="values[currentField.uuid]"
+            :is-direct-upload="isDirectUpload"
+            :field="currentField"
+            :attachments-index="attachmentsIndex"
+            :submitter-slug="submitterSlug"
+            @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
+          />
         </div>
-        <MultiSelectStep
+        <div class="mt-6 md:mt-8">
-          v-else-if="currentField.type === 'multiple'"
+          <button
-          v-model="values[currentField.uuid]"
+            type="submit"
-          :field="currentField"
+            class="base-button w-full flex justify-center"
-        />
+            :disabled="isButtonDisabled"
-        <div
-          v-else-if="currentField.type === 'checkbox'"
-          class="flex w-full"
-        >
-          <input
-            type="hidden"
-            name="cast_boolean"
-            value="true"
           >
-          <div
+            <span class="flex">
-            class="space-y-3.5 mx-auto"
+              <IconInnerShadowTop
-          >
+                v-if="isSubmitting"
-            <div
+                class="mr-1 animate-spin"
-              v-for="(field, index) in currentStepFields"
+              />
-              :key="field.uuid"
+              <span v-if="stepFields.length === currentStep + 1">
-            >
+                Submit
-              <label
+              </span>
-                :for="field.uuid"
+              <span v-else>
-                class="flex items-center space-x-3"
+                Next
-              >
+              </span><span
-                <input
+                v-if="isSubmitting"
-                  type="hidden"
+                class="w-6 flex justify-start mr-1"
-                  :name="`values[${field.uuid}]`"
+              ><span>...</span></span>
-                  :value="!!values[field.uuid]"
-                >
-                <input
-                  :id="field.uuid"
-                  type="checkbox"
-                  class="base-checkbox !h-7 !w-7"
-                  :checked="!!values[field.uuid]"
-                  @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
-                >
-                <span class="text-xl">
-                  {{ currentField.name || currentField.type + ' ' + (index + 1) }}
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <ImageStep
-          v-else-if="currentField.type === 'image'"
-          v-model="values[currentField.uuid]"
-          :field="currentField"
-          :is-direct-upload="isDirectUpload"
-          :attachments-index="attachmentsIndex"
-          :submitter-slug="submitterSlug"
-          @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
-        />
-        <SignatureStep
-          v-else-if="currentField.type === 'signature'"
-          ref="currentStep"
-          v-model="values[currentField.uuid]"
-          :field="currentField"
-          :is-direct-upload="isDirectUpload"
-          :attachments-index="attachmentsIndex"
-          :submitter-slug="submitterSlug"
-          @attached="attachments.push($event)"
-        />
-        <AttachmentStep
-          v-else-if="currentField.type === 'file'"
-          v-model="values[currentField.uuid]"
-          :is-direct-upload="isDirectUpload"
-          :field="currentField"
-          :attachments-index="attachmentsIndex"
-          :submitter-slug="submitterSlug"
-          @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
-        />
-      </div>
-      <div class="mt-6 md:mt-8">
-        <button
-          type="submit"
-          class="base-button w-full flex justify-center"
-          :disabled="isButtonDisabled"
-        >
-          <span class="flex">
-            <IconInnerShadowTop
-              v-if="isSubmitting"
-              class="mr-1 animate-spin"
-            />
-            <span v-if="stepFields.length === currentStep + 1">
-              Submit
             </span>
-            <span v-else>
+          </button>
-              Next
+        </div>
-            </span><span
+      </form>
-              v-if="isSubmitting"
+      <FormCompleted
-              class="w-6 flex justify-start mr-1"
+        v-else
-            ><span>...</span></span>
+        :is-demo="isDemo"
-          </span>
+        :can-send-email="canSendEmail"
-        </button>
+        :submitter-slug="submitterSlug"
-      </div>
+      />
-    </form>
+      <div class="flex justify-center">
-    <FormCompleted
+        <div class="flex items-center mt-5 mb-1">
-      v-else
+          <a
-      :is-demo="isDemo"
+            v-for="(step, index) in stepFields"
-      :can-send-email="canSendEmail"
+            :key="step[0].uuid"
-      :submitter-slug="submitterSlug"
+            href="#"
-    />
+            class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
-    <div class="flex justify-center">
+            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
-      <div class="flex items-center mt-5 mb-1">
+            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
-        <a
+          />
-          v-for="(step, index) in stepFields"
+        </div>
-          :key="step[0].uuid"
-          href="#"
-          class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
-          :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
-          @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
-        />
       </div>
     </div>
   </div>
@@ -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>
-        <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>