adjust ui

app/javascript/application.js

@@ -81,6 +81,12 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
+document.addEventListener('turbo:morph', () => {
+  if (document.activeElement?.closest('.dropdown')) {
+    document.activeElement.blur()
+  }
+})
+
 document.addEventListener('turbo:before-fetch-response', (event) => {
   if (event.detail.fetchResponse.header('content-disposition')?.includes('attachment')) {
     event.preventDefault()
@@ -373,7 +379,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
     root.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
 
-    style.textContent = 'html { overflow-x: hidden; overscroll-behavior-x: none; } html, body { max-width: 100%; }'
+    style.textContent = 'html { overflow-x: hidden; overscroll-behavior-x: none; } html, body { max-width: 100%; } body { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }'
 
     root.querySelector('head').appendChild(style)
 

app/javascript/elements/native_action.js

@@ -1,3 +1,5 @@
+import { nativeIcon } from '../native'
+
 export default class extends HTMLElement {
   connectedCallback () {
     const bridge = window.webkit?.messageHandlers?.native
@@ -18,13 +20,13 @@ export default class extends HTMLElement {
       op: 'add',
       id: this.nativeId,
       title: this.dataset.label || target?.textContent.trim(),
-      icon: this.dataset.icon,
+      icon: nativeIcon(this.dataset.icon),
       placement: this.dataset.placement || 'menu',
       side: this.dataset.side,
       view: this.dataset.view,
       section: this.dataset.section,
       menu: this.dataset.menu,
-      menuIcon: this.dataset.menuIcon,
+      menuIcon: nativeIcon(this.dataset.menuIcon),
       native: this.dataset.native,
       url: this.dataset.url,
       accept: this.dataset.accept,

app/javascript/elements/native_menu.js

@@ -1,3 +1,5 @@
+import { nativeIcon } from '../native'
+
 export default class extends HTMLElement {
   connectedCallback () {
     if (window.webkit?.messageHandlers?.native) {
@@ -31,7 +33,7 @@ export default class extends HTMLElement {
       return {
         id: target.dataset.nativeId,
         title: action.dataset.label || target.textContent.trim(),
-        icon: action.dataset.icon,
+        icon: nativeIcon(action.dataset.icon),
         destructive: action.dataset.destructive === 'true',
         selected: action.dataset.selected === 'true',
         haptic: action.dataset.haptic === 'true'

app/javascript/native.js

@@ -1,3 +1,54 @@
+const ICONS = {
+  ios: {
+    link: 'link',
+    archive: 'archivebox',
+    folder: 'folder',
+    trash: 'trash',
+    rotate: 'arrow.counterclockwise',
+    copy: 'doc.on.doc',
+    pencil: 'pencil',
+    logs: 'list.bullet.rectangle',
+    external_link: 'arrow.up.right.square',
+    download: 'arrow.down.circle',
+    mail_forward: 'paperplane',
+    send: 'paperplane',
+    writing: 'signature',
+    adjustments_horizontal: 'slider.horizontal.3',
+    file_text: 'doc.text',
+    files: 'doc.on.doc',
+    plus: 'plus',
+    eye: 'eye',
+    check: 'checkmark',
+    code: 'chevron.left.forwardslash.chevron.right',
+    history: 'clock.arrow.circlepath',
+    user: 'person',
+    users: 'person.2',
+    users_plus: 'person.badge.plus',
+    photo: 'photo',
+    settings: 'gearshape',
+    logout: 'rectangle.portrait.and.arrow.right',
+    upload: 'arrow.up.doc',
+    scan: 'doc.viewfinder',
+    pencil_plus: 'square.and.pencil',
+    arrow_sort: 'arrow.up.arrow.down',
+    sort_descending_numbers: 'calendar',
+    sort_descending_small_big: 'clock.arrow.circlepath',
+    sort_ascending_letters: 'textformat.abc',
+    calendar: 'calendar',
+    calendar_check: 'calendar.badge.checkmark',
+    info_circle: 'info.circle',
+    list: 'list.bullet',
+    clock: 'clock',
+    circle_check: 'checkmark.circle'
+  }
+}
+
+const platform = navigator.userAgent.includes('Hotwire Native Android') ? 'android' : 'ios'
+
+export function nativeIcon (name) {
+  return ICONS[platform]?.[name] || name
+}
+
 const handlers = window.webkit?.messageHandlers
 
 if (handlers?.native && window === window.top) {
@@ -46,7 +97,7 @@ if (handlers?.native && window === window.top) {
 
     const actions = link.closest('[data-native-actions]')?.dataset.nativeActions
 
-    handlers.native.postMessage({ type: 'title', url: link.href, title, actions: actions ? actions.split(',') : null })
+    handlers.native.postMessage({ type: 'title', url: link.href, title, actions: actions ? actions.split(',').map(nativeIcon) : null })
   }, true)
 
   document.addEventListener('click', (event) => {

app/javascript/template_builder/area_title.vue

@@ -90,7 +90,7 @@
         class="cursor-pointer flex items-center"
         :class="{ 'pr-0.5': isMobile }"
         style="height: 24px"
-        @focus="isSettingsFocus = true"
+        @focus="onSettingsFocus"
         @blur="maybeBlurSettings"
       >
         <IconDotsVertical class="w-5 h-5" />
@@ -423,6 +423,19 @@ export default {
         this.isSettingsFocus = false
       }
     },
+    onSettingsFocus () {
+      this.isSettingsFocus = true
+
+      if (this.isMobile) {
+        this.$nextTick(() => {
+          const dropdown = this.$refs.settingsDropdown
+          const padding = parseFloat(getComputedStyle(dropdown).paddingLeft) + 6
+          const left = dropdown.parentElement.getBoundingClientRect().right - dropdown.offsetWidth - padding
+
+          dropdown.style.right = left < 0 ? `${left}px` : ''
+        })
+      }
+    },
     onNameFocus (e) {
       this.selectedAreasRef.value = [this.area]