adjust ui

app/javascript/elements/autoresize_textarea.js

@@ -1,5 +1,7 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.id = `autoresize-textarea-${Math.random().toString(32).split('.')[1]}`
+
     this.resize()
 
     this.textarea.addEventListener('input', () => this.resize())

app/javascript/elements/disable_hidden.js

@@ -2,6 +2,18 @@ export default class extends HTMLElement {
   static observedAttributes = ['class']
 
   connectedCallback () {
+    this.addEventListener('turbo:morph-element', this.onMorph)
+
+    this.trigger()
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('turbo:morph-element', this.onMorph)
+  }
+
+  onMorph = (event) => {
+    if (event.target !== this) return
+
     this.trigger()
   }
 

app/javascript/elements/search_input.js

@@ -9,6 +9,11 @@ export default class extends HTMLElement {
     })
 
     document.addEventListener('turbo:before-cache', this.onBeforeCache)
+
+    if (this.input.value) {
+      this.input.focus()
+      this.input.setSelectionRange(this.input.value.length, this.input.value.length)
+    }
   }
 
   disconnectedCallback () {

app/javascript/template_builder/builder.vue

@@ -105,7 +105,7 @@
           :fields="template.fields"
           :submitters="template.submitters"
           :selected-submitter="selectedSubmitter"
-          :with-help="false"
+          :with-help="withHelp"
           :default-submitters="defaultSubmitters"
           :draw-field-type="drawFieldType"
           :custom-fields="customFields"

app/javascript/template_builder/contenteditable.vue

@@ -10,7 +10,7 @@
       :data-placeholder="placeholder"
       :data-empty="isEmpty"
       :style="{ minWidth }"
-      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '']"
+      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '', { 'py-2 -my-2': isMobile && iconInline && !isEmpty }]"
       class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-400 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"

app/javascript/template_builder/field.vue

@@ -111,7 +111,7 @@
               <label
                 tabindex="0"
                 :title="t('settings')"
-                class="cursor-pointer flex items-center pr-1"
+                class="cursor-pointer flex items-center pr-0.5 py-2 -my-2 pl-2 -ml-2"
                 :class="iconColorClass"
                 @touchstart="onHandleTouchstart"
                 @touchmove="onHandleTouchmove"
@@ -156,7 +156,7 @@
               tabindex="0"
               :title="t('settings')"
               class="cursor-pointer flex items-center"
-              :class="[iconColorClass, { 'pr-1': isMobile }]"
+              :class="[iconColorClass, { 'pr-0.5 py-2 -my-2 pl-2 -ml-2': isMobile }]"
               @touchstart="onHandleTouchstart"
               @touchmove="onHandleTouchmove"
               @touchend="onHandleTouchend"

app/javascript/template_builder/fields.vue

@@ -330,10 +330,17 @@
     </template>
   </div>
   <div
-    v-if="!isShowVariables && fields.length < 4 && editable && withHelp && !showTourStartForm"
+    v-if="!isShowVariables && (isMobile ? !fields.length : fields.length < 4) && editable && withHelp && !showTourStartForm"
     class="text-xs p-2 border border-base-200 rounded"
+    :class="{ 'text-center': isMobile }"
+  >
+    <template v-if="isMobile">
+      {{ t('tap_on_the_field_type_above_to_start_drawing_the_field') }}
+    </template>
+    <ul
+      v-else
+      class="list-disc list-outside ml-3"
     >
-    <ul class="list-disc list-outside ml-3">
       <li>
         {{ t('draw_a_text_field_on_the_page_with_a_mouse') }}
       </li>

app/javascript/template_builder/i18n.js

@@ -190,6 +190,7 @@ const en = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Draw a text field on the page with a mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Drag & drop any other field type on the page',
   click_on_the_field_type_above_to_start_drawing_it: 'Click on the field type above to start drawing it',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tap a field type above to draw it on the page',
   please_draw_fields_to_prepare_the_document: 'Please draw fields to prepare the document.',
   only_pdf_and_images_are_supported: 'Only PDF and images are supported.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification.',
@@ -435,6 +436,7 @@ const es = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Dibujar un campo de texto en la página con el mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Arrastra y suelta cualquier otro tipo de campo en la página',
   click_on_the_field_type_above_to_start_drawing_it: 'Haz clic en el tipo de campo de arriba para comenzar a dibujarlo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Toca un tipo de campo de arriba para dibujarlo en la página',
   please_draw_fields_to_prepare_the_document: 'Por favor, dibuja los campos para preparar el documento.',
   only_pdf_and_images_are_supported: 'Solo se admiten PDF e imágenes.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloquea el campo de número de teléfono verificado por SMS con un plan pago. Usa el campo de texto para números de teléfono sin verificación.',
@@ -692,6 +694,7 @@ const it = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Disegna un campo di testo sulla pagina con il mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Trascina e rilascia qualsiasi altro tipo di campo sulla pagina',
   click_on_the_field_type_above_to_start_drawing_it: 'Clicca sul tipo di campo sopra per iniziare a disegnarlo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tocca un tipo di campo sopra per disegnarlo sulla pagina',
   please_draw_fields_to_prepare_the_document: 'Per favore, disegna i campi per preparare il documento.',
   only_pdf_and_images_are_supported: 'Sono supportati solo PDF e immagini.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Sblocca il campo numero di telefono verificato tramite SMS con un piano a pagamento. Usa il campo di testo per numeri di telefono senza verifica.',
@@ -937,6 +940,7 @@ const pt = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Desenhar um campo de texto na página com o mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Arraste e solte qualquer outro tipo de campo na página',
   click_on_the_field_type_above_to_start_drawing_it: 'Clique no tipo de campo acima para começar a desenhá-lo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Toque em um tipo de campo acima para desenhá-lo na página',
   please_draw_fields_to_prepare_the_document: 'Por favor, desenhe os campos para preparar o documento.',
   only_pdf_and_images_are_supported: 'Apenas PDFs e imagens são suportados.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloqueie o campo de número de telefone verificado por SMS com um plano pago. Use o campo de texto para números de telefone sem verificação.',
@@ -1194,6 +1198,7 @@ const fr = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Dessinez un champ de texte sur la page avec la souris',
   drag_and_drop_any_other_field_type_on_the_page: 'Glissez-déposez tout autre type de champ sur la page',
   click_on_the_field_type_above_to_start_drawing_it: 'Cliquez sur le type de champ ci-dessus pour commencer à le dessiner',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Appuyez sur un type de champ ci-dessus pour le dessiner sur la page',
   please_draw_fields_to_prepare_the_document: 'Veuillez dessiner des champs pour préparer le document.',
   only_pdf_and_images_are_supported: 'Seuls les PDF et les images sont pris en charge.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un forfait payant. Utilisez un champ texte pour les numéros sans vérification.',
@@ -1445,6 +1450,7 @@ const de = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Ein Textfeld mit der Maus auf der Seite zeichnen',
   drag_and_drop_any_other_field_type_on_the_page: 'Jeden anderen Feldtyp auf die Seite ziehen und ablegen',
   click_on_the_field_type_above_to_start_drawing_it: 'Klicken Sie oben auf den Feldtyp, um mit dem Zeichnen zu beginnen',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tippen Sie oben auf einen Feldtyp, um ihn auf der Seite zu zeichnen',
   please_draw_fields_to_prepare_the_document: 'Bitte zeichnen Sie Felder, um das Dokument vorzubereiten.',
   only_pdf_and_images_are_supported: 'Nur PDF und Bilder werden unterstützt.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'SMS-verifiziertes Telefonnummernfeld mit kostenpflichtigem Plan freischalten. Verwenden Sie für Telefonnummern ohne Verifizierung das Textfeld.',
@@ -1696,6 +1702,7 @@ const nl = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Teken met de muis een tekstveld op de pagina',
   drag_and_drop_any_other_field_type_on_the_page: 'Sleep elk ander veldtype naar de pagina',
   click_on_the_field_type_above_to_start_drawing_it: 'Klik op het bovenstaande veldtype om te beginnen met tekenen',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tik op een veldtype hierboven om het op de pagina te tekenen',
   please_draw_fields_to_prepare_the_document: 'Teken velden om het document voor te bereiden.',
   only_pdf_and_images_are_supported: 'Alleen PDF en afbeeldingen worden ondersteund.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Ontgrendel het SMS-geverifieerde veld voor telefoonnummer met een betaald abonnement. Gebruik het tekstveld voor telefoonnummers zonder verificatie.',

app/views/storage_settings/index.html.erb

@@ -7,7 +7,7 @@
     </h1>
     <% value = @encrypted_config.value || { 'service' => 'disk' } %>
     <% configs = value['configs'] || {} %>
-    <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off', class: 'w-full' }, data: { turbo_action: 'advance' } do |f| %>
+    <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off', class: 'w-full' } do |f| %>
       <% options = [%w[Disk disk], %w[AWS aws_s3], %w[GCP google], %w[Azure azure]] %>
       <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="block relative">
         <ul class="items-center w-full text-sm font-medium text-gray-900 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">

app/views/submissions/show.html.erb

@@ -139,7 +139,7 @@
           <% end %>
         </div>
       <% end %>
-    <div id="document_view" class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5" tabindex="0">
+      <div id="document_view" class="w-full <%= 'overflow-y-auto overflow-x-hidden' unless turbo_native_app? %> mt-0.5 pt-0.5" tabindex="0">
         <div class="pr-3.5 pl-0.5 max-md:pr-4 max-md:pl-0">
           <% fields_index = Templates.build_field_areas_index(@submission.template_fields || @submission.template.fields) %>
           <% submitters_index = @submission.submitters.index_by(&:uuid) %>
@@ -195,13 +195,13 @@
       </div>
     <% end %>
     <% unless native_tab == 'document' %>
-    <div id="parties_view" class="<%= 'hidden md:block md:w-80' unless native_tab %> relative w-full flex-none pt-0.5 pr-4 pl-0.5 max-md:pl-0 overflow-auto space" tabindex="0">
+      <div id="parties_view" class="<%= 'hidden md:block md:w-80' unless native_tab %> relative w-full flex-none pt-0.5 pr-4 pl-0.5 max-md:pl-0 <%= 'overflow-auto' unless turbo_native_app? %> space" tabindex="0">
         <% colors = %w[bg-red-500 bg-sky-500 bg-emerald-500 bg-yellow-300 bg-purple-600 bg-pink-500 bg-cyan-500 bg-orange-500 bg-lime-500 bg-indigo-500] %>
         <% submitter_fields_index = (@submission.template_fields || @submission.template.fields).group_by { |f| f['submitter_uuid'] } %>
         <% submitter_field_counters = Hash.new { 0 } %>
         <% (@submission.template_submitters || @submission.template.submitters).each_with_index do |item, index| %>
           <% submitter = @submission.submitters.find { |e| e.uuid == item['uuid'] } %>
-        <div class="sticky -top-1 bg-base-100 pt-1 -mt-1">
+          <div class="<%= 'sticky -top-1 bg-base-100' unless native_tab == 'recipients' %> pt-1 -mt-1">
             <div class="group border border-base-300 rounded-md px-2 py-1 mb-1">
               <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-1">

app/views/templates_preferences/show.html.erb

@@ -10,7 +10,7 @@
         <% options.each_with_index do |(label, value), index| %>
           <span>
             <%= radio_button_tag 'option', value, value == 'general', class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
-            <label for="option_<%= value %>" class="<%= '!rounded-s-full' if index.zero? %> btn btn-sm join-item peer-checked:btn-active normal-case px-8 md:px-0 <%= 'min-w-28 md:min-w-0' if value == 'api' %> <%= options.size > 2 ? 'md:w-44' : 'md:w-48' %>">
+            <label for="option_<%= value %>" class="<%= '!rounded-s-full' if index.zero? %> btn btn-sm join-item peer-checked:btn-active normal-case px-5 md:px-0 <%= 'min-w-24 md:min-w-0' if value == 'api' %> <%= options.size > 2 ? 'md:w-44' : 'md:w-48' %>">
               <%= label %>
             </label>
           </span>

app/views/templates_share_link/show.html.erb

@@ -24,9 +24,11 @@
       <% end %>
       <div class="flex gap-2 mt-3">
         <div class="relative flex-grow">
+          <%= content_tag(turbo_native_app? ? 'check-on-click' : 'div', class: 'block', data: { element_id: 'template_shared_link' }) do %>
             <%= content_tag(turbo_native_app? ? 'clipboard-copy' : 'div', class: 'block', data: { text: start_form_url(slug: @template.slug, host: form_link_host) }) do %>
               <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full pr-10" autocomplete="off" readonly>
             <% end %>
+          <% end %>
           <% if @template.variables_schema.blank? && !@template.preferences&.dig('require_email_2fa') && !@template.preferences&.dig('require_phone_2fa') %>
             <a href="<%= template_share_link_qr_path(@template) %>" target="_blank" rel="noopener" class="absolute top-1/2 -translate-y-1/2 right-2 flex items-center justify-center tooltip tooltip-no-touch text-base-content/70 hover:text-base-content bg-white rounded px-1 py-0.5" data-tip="<%= t('qr_code') %>" aria-label="<%= t('qr_code') %>">
               <%= svg_icon('qrcode', class: 'w-6 h-6') %>

tailwind.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true
+  },
   plugins: [
     require('daisyui')
   ],

tailwind.dynamic.config.js

@@ -1,6 +1,9 @@
 const path = require('path')
 
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true
+  },
   content: [
     path.resolve(__dirname, 'app/javascript/template_builder/dynamic_area.vue'),
     path.resolve(__dirname, 'app/javascript/template_builder/dynamic_section.vue')