make template editor header native

app/javascript/application.js

@@ -209,7 +209,8 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withDownload: true,
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes,
-      showTourStartForm: this.dataset.showTourStartForm === 'true'
+      showTourStartForm: this.dataset.showTourStartForm === 'true',
+      nativeApp: this.dataset.nativeApp === 'true'
     })
 
     this.component = this.app.mount(this.appElem)

app/javascript/template_builder/builder.vue

@@ -79,7 +79,7 @@
       v-if="$slots.buttons || withTitle"
       id="title_container"
       class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container"
-      :class="{ sticky: withStickySubmitters || isBreakpointLg }"
+      :class="{ sticky: withStickySubmitters || isBreakpointLg, hidden: nativeApp }"
       :style="{ backgroundColor }"
     >
       <div class="flex items-center space-x-3">
@@ -104,8 +104,12 @@
           name="buttons"
         />
         <template v-else>
-          <form
+          <native-action
             v-if="withSignYourselfButton && undefinedSubmitters.length < 2 && (!template.variables_schema || Object.keys(template.variables_schema).length === 0)"
+            :data-label="t('sign_yourself')"
+            data-icon="writing"
+          >
+            <form
               target="_blank"
               data-turbo="false"
               class="inline"
@@ -138,8 +142,13 @@
                 </span>
               </button>
             </form>
-          <a
+          </native-action>
+          <native-action
             v-else-if="withSignYourselfButton"
+            :data-label="t('sign_yourself')"
+            data-icon="writing"
+          >
+            <a
               id="sign_yourself_button"
               :href="`/templates/${template.id}/submissions/new?selfsign=true`"
               class="btn btn-primary btn-ghost text-base hidden md:flex"
@@ -154,11 +163,17 @@
                 {{ t('sign_yourself') }}
               </span>
             </a>
-          <a
+          </native-action>
+          <native-action
             v-if="withSendButton"
+            :data-label="t('send')"
+            data-icon="users_plus"
+            data-placement="bar"
+          >
+            <a
               id="send_button"
               :href="`/templates/${template.id}/submissions/new?with_link=true`"
-            :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
+              :data-turbo-frame="!nativeApp && isMobile && isBreakpointLg ? '_top' : 'modal'"
               class="white-button md:!px-6"
               @click="maybeShowErrorTemplateAlert"
             >
@@ -170,10 +185,16 @@
                 {{ t('send') }}
               </span>
             </a>
+          </native-action>
           <span
             v-if="editable"
             id="save_button_container"
             class="flex"
+          >
+            <native-action
+              :data-label="t('save')"
+              data-icon="device_floppy"
+              data-placement="bar"
             >
               <button
                 class="base-button !rounded-r-none !pr-2"
@@ -194,6 +215,7 @@
                   {{ t('save') }}
                 </span>
               </button>
+            </native-action>
             <div
               class="dropdown dropdown-end"
               :class="{ 'dropdown-open': isDownloading || isPreviewLoading }"
@@ -211,6 +233,10 @@
                 class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
               >
                 <li>
+                  <native-action
+                    :data-label="t('save_and_preview')"
+                    data-icon="eye"
+                  >
                     <a
                       :href="`/templates/${template.id}/form`"
                       data-turbo="false"
@@ -227,19 +253,29 @@
                       />
                       <span class="whitespace-nowrap">{{ t('save_and_preview') }}</span>
                     </a>
+                  </native-action>
                 </li>
                 <li>
+                  <native-action
+                    :data-label="t('preferences')"
+                    data-icon="adjustments_horizontal"
+                  >
                     <a
                       :href="`/templates/${template.id}/preferences`"
-                    :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
+                      :data-turbo-frame="!nativeApp && isMobile && isBreakpointLg ? '_top' : 'modal'"
                       class="flex space-x-2"
                       @click="closeDropdown"
                     >
                       <IconAdjustments class="w-6 h-6 flex-shrink-0" />
                       <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                     </a>
+                  </native-action>
                 </li>
                 <li v-if="withRevisionsMenu">
+                  <native-action
+                    :data-label="t('revisions')"
+                    data-icon="history"
+                  >
                     <button
                       class="flex space-x-2"
                       @click.prevent="openRevisionsModal"
@@ -250,8 +286,13 @@
                       </span>
                       <span class="whitespace-nowrap">{{ t('revisions') }}</span>
                     </button>
+                  </native-action>
                 </li>
                 <li v-if="withDownload">
+                  <native-action
+                    :data-label="t('download')"
+                    data-icon="download"
+                  >
                     <button
                       class="flex space-x-2"
                       :disabled="isDownloading"
@@ -274,6 +315,7 @@
                         class="whitespace-nowrap"
                       >{{ t('download') }}</span>
                     </button>
+                  </native-action>
                 </li>
               </ul>
             </div>
@@ -297,7 +339,7 @@
     <div
       id="main_container"
       class="flex main-container"
-      :class="$slots.buttons || withTitle ? (isMobile ? 'max-h-[calc(100%_-_60px)]' : 'md:max-h-[calc(100%_-_60px)]') : (isMobile ? 'max-h-[100%]' : 'md:max-h-[100%]')"
+      :class="($slots.buttons || withTitle) && !nativeApp ? (isMobile ? 'max-h-[calc(100%_-_60px)]' : 'md:max-h-[calc(100%_-_60px)]') : (isMobile ? 'max-h-[100%]' : 'md:max-h-[100%]')"
     >
       <div
         v-if="withDocumentsList"
@@ -1008,6 +1050,11 @@ export default {
       required: false,
       default: true
     },
+    nativeApp: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withFieldsSearch: {
       type: Boolean,
       required: false,
@@ -1665,6 +1712,10 @@ export default {
       this.debouncedSave()
     },
     download () {
+      const download = window.webkit?.messageHandlers?.download
+
+      if (download) return download.postMessage({ src: `/templates/${this.template.id}/documents` })
+
       this.isDownloading = true
 
       this.baseFetch(`/templates/${this.template.id}/documents`).then(async (response) => {

app/views/submissions/show.html.erb

@@ -78,8 +78,8 @@
                 <% end %>
                 <ul class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right">
                   <% if show_combined_download %>
-                    <native-action data-label="<%= t('download_combined_pdf') %>" data-icon="download">
                     <li>
+                      <native-action data-label="<%= t('download_combined_pdf') %>" data-icon="download">
                         <download-button role="button" tabindex="0" data-src="<%= local_assigns[:is_preview] ? (@sig_submitter ? submit_form_documents_path(@sig_submitter.slug, { sig: params[:sig], combined: true }.compact) : submissions_preview_download_index_path(@submission.slug, combined: true)) : submission_download_index_path(@submission, combined: true) %>" class="flex items-center">
                           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                             <%= svg_icon('download', class: 'w-6 h-6 flex-shrink-0') %>
@@ -90,18 +90,18 @@
                             <span><%= t('downloading') %></span>
                           </span>
                         </download-button>
-                      </li>
                       </native-action>
+                    </li>
                   <% end %>
                   <% if show_unarchive %>
-                    <native-action data-label="<%= t('unarchive') %>" data-icon="rotate">
                     <li>
+                      <native-action data-label="<%= t('unarchive') %>" data-icon="rotate">
                         <button form="submission_unarchive_form">
                           <%= button_title(title: t('unarchive'), disabled_with: t('unarchive'), icon: svg_icon('rotate', class: 'w-6 h-6 flex-shrink-0')) %>
                         </button>
+                      </native-action>
                       <%= button_to '', submission_unarchive_index_path(@submission), form: { id: 'submission_unarchive_form' }, form_class: 'hidden' %>
                     </li>
-                    </native-action>
                   <% end %>
                 </ul>
               </div>

app/views/templates/edit.html.erb

@@ -10,4 +10,4 @@
 <% account_configs = current_account.account_configs.where(key: [AccountConfig::TEMPLATE_CUSTOM_FIELDS_KEY, AccountConfig::TEMPLATE_DATE_FORMATS_KEY]).to_a %>
 <% custom_fields = account_configs.find { |e| e.key == AccountConfig::TEMPLATE_CUSTOM_FIELDS_KEY }&.value || [] %>
 <% date_formats = account_configs.find { |e| e.key == AccountConfig::TEMPLATE_DATE_FORMATS_KEY }&.value || [] %>
-<template-builder class="grid" data-template="<%= @template_data.to_json %>" data-custom-fields="<%= custom_fields.to_json %>" data-date-formats="<%= date_formats.to_json %>" data-with-sign-yourself-button="<%= !@template.archived_at? %>" data-with-fields-detection="true" data-with-send-button="<%= !@template.archived_at? && can?(:create, @template.submissions.new(account: current_account)) %>" data-with-revisions-menu="<%= @template.template_versions.exists? %>" data-locale="<%= I18n.locale %>" data-show-tour-start-form="<%= @show_tour_start_form %>"></template-builder>
+<template-builder data-native-app="<%= turbo_native_app? %>" class="grid" data-template="<%= @template_data.to_json %>" data-custom-fields="<%= custom_fields.to_json %>" data-date-formats="<%= date_formats.to_json %>" data-with-sign-yourself-button="<%= !@template.archived_at? %>" data-with-fields-detection="true" data-with-send-button="<%= !@template.archived_at? && can?(:create, @template.submissions.new(account: current_account)) %>" data-with-revisions-menu="<%= @template.template_versions.exists? %>" data-locale="<%= I18n.locale %>" data-show-tour-start-form="<%= @show_tour_start_form %>"></template-builder>