Merge pull request #52 from CareerPlug/CP-12312-mobile-preview

CP-12312 / mobile preview

app/javascript/submission_form/form.vue

@@ -90,6 +90,18 @@
       :height="20"
     />
   </button>
+  <button
+    v-if="!isFormVisible && !isCompleted && isMobile"
+    id="expand_form_button_x"
+    class="btn btn-neutral flex text-white fixed top-4 right-4 z-40"
+    :title="t('preview')"
+    @click.prevent="isFormVisible = true"
+  >
+    <IconX
+      :width="20"
+      :height="20"
+    />
+  </button>
   <div
     v-show="isFormVisible"
     id="form_container"
@@ -97,10 +109,22 @@
     :style="formContainerStyle"
   >
     <button
-      v-if="!isCompleted"
+      v-if="!isCompleted && isFormVisible && isMobile && currentField?.type !== 'signature'"
+      id="close_form_button"
+      class="absolute right-0 top-0 minimize-form-button mr-2 mt-2"
+      :title="t('preview')"
+      @click.prevent="minimizeForm"
+    >
+      <IconEye
+        :width="20"
+        :height="20"
+      />
+    </button>
+    <button
+      v-if="!isCompleted && isFormVisible && !isMobile"
       id="minimize_form_button"
       class="absolute right-0 top-0 minimize-form-button"
-      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
+      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2'"
       :title="t('minimize')"
       @click.prevent="minimizeForm"
     >
@@ -598,7 +622,7 @@ import DateStep from './date_step'
 import MarkdownContent from './markdown_content'
 import InviteForm from './invite_form'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2, IconX, IconEye } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
@@ -647,6 +671,8 @@ export default {
     MarkdownContent,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
+    IconX,
+    IconEye,
     FormCompleted
   },
   provide () {

app/javascript/submission_form/i18n.js

@@ -44,6 +44,7 @@ const en = {
   minimize: 'Minimize',
   payment: 'Payment',
   phone: 'Phone',
+  preview: 'Preview',
   start_now: 'Start Now',
   continue: 'Continue',
   sign_now: 'Sign Now',

app/javascript/submission_form/initials_step.vue

@@ -88,14 +88,13 @@
           {{ t('clear') }}
         </a>
         <a
-          :title="t('minimize')"
+          :title="t('preview')"
           href="#"
-          class="py-1.5 inline md:hidden"
+          class="btn btn-outline btn-sm font-medium inline md:hidden flex items-center justify-center"
           @click.prevent="$emit('minimize')"
         >
-          <IconArrowsDiagonalMinimize2
+          <IconEye
-            :width="20"
+            :width="18"
-            :height="20"
           />
         </a>
       </div>
@@ -145,7 +144,7 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconUpload, IconSignature, IconEye } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
@@ -162,7 +161,7 @@ export default {
     IconTextSize,
     IconSignature,
     MarkdownContent,
-    IconArrowsDiagonalMinimize2
+    IconEye
   },
   inject: ['baseUrl', 't'],
   props: {

app/javascript/submission_form/signature_step.vue

@@ -84,6 +84,16 @@
           <IconReload :width="16" />
           {{ t(format === 'upload' ? 'reupload' : 'redraw') }}
         </a>
+        <a
+          href="#"
+          :title="t('preview')"
+          class="btn btn-outline btn-sm font-medium inline md:hidden flex items-center justify-center"
+          @click.prevent="$emit('minimize')"
+        >
+          <IconEye
+            :width="18"
+          />
+        </a>
         <span
           v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed' && format !== 'upload'"
           class=" tooltip"
@@ -101,17 +111,6 @@
             />
           </a>
         </span>
-        <a
-          href="#"
-          :title="t('minimize')"
-          class="py-1.5 inline md:hidden"
-          @click.prevent="$emit('minimize')"
-        >
-          <IconArrowsDiagonalMinimize2
-            :width="20"
-            :height="20"
-          />
-        </a>
       </div>
     </div>
     <div
@@ -290,7 +289,7 @@
 </template>
 
 <script>
-import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconEye, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import { isValidSignatureCanvas } from './validate_signature'
 import SignaturePad from 'signature_pad'
@@ -315,7 +314,7 @@ export default {
     IconX,
     IconTextSize,
     IconSignature,
-    IconArrowsDiagonalMinimize2
+    IconEye
   },
   inject: ['baseUrl', 't'],
   props: {