improve share modal

Author: digitaltom

app/assets/stylesheets/modals.css

@@ -152,6 +152,26 @@
   .modal-pull-fade {
     opacity: 0.4 !important;
   }
+
+  /* Larger touch targets on mobile */
+  .copy-link {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+  }
+
+  .copy-link i {
+    font-size: 1.2rem;
+  }
+
+  /* Touch feedback */
+  .copy-link:active {
+    background-color: rgb(0 0 0 / 8%);
+    border-radius: 0.4rem;
+  }
 }
 
 .modal-close-button {
@@ -176,18 +196,40 @@
 
 /* Share modal */
 
-#share-edit-link, #share-view-link {
+#share-ownership-link, #share-edit-link, #share-view-link {
   min-height: 2.5rem;
 }
 
-#share-edit-link a, #share-view-link a {
+#share-ownership-link a, #share-edit-link a, #share-view-link a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
 
+/* Permission badges */
+.permission-badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+
+.badge-owner, .badge-edit, .badge-view {
+  background-color: rgb(255 255 255 / 30%);
+  color: #fff;
+}
+
+@media (width <= 574px) {
+  .permission-badge {
+    display: none;
+  }
+}
+
 #share-modal .form-floating > .form-select {
   height: unset;
 }
@@ -233,6 +275,22 @@
   color: var(--bs-secondary-color) !important;
 }
 
+.copy-success {
+  color: var(--color-dark-moss-green) !important;
+  transition: all 0.2s ease-in-out;
+  animation: copy-pulse 0.4s ease-in-out;
+}
+
+@keyframes copy-pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+}
+
 #share-ownership-link .map-avatar {
   border-radius: 50%;
   display: inline-block;

app/javascript/controllers/map/modal_controller.js

@@ -5,11 +5,11 @@ import { draw } from 'maplibre/edit'
 export default class extends Controller {
   close() {
     resetControls()
-    if (draw) { 
+    if (draw) {
       draw.changeMode('simple_select', { featureIds: [] })
       map.fire('draw.modechange')
     }
-    // TODO: drop anchor if present 
+    // TODO: drop anchor if present
     window.history.pushState({}, '', `${window.location.pathname}`)
   }
 }

app/javascript/controllers/map/share_controller.js

@@ -15,15 +15,21 @@ export default class extends Controller {
 
     // Update share icons for native sharing support
     if (navigator.share) {
+      const ownershipLinkIcon = document.querySelector('#share-ownership-link i')
+      if (ownershipLinkIcon) {
+        ownershipLinkIcon.classList.remove('bi-shield-fill-check')
+        ownershipLinkIcon.classList.add('bi-share')
+      }
+
       const editLinkIcon = document.querySelector('#share-edit-link i')
       if (editLinkIcon) {
-        editLinkIcon.classList.remove('bi-link-45deg')
+        editLinkIcon.classList.remove('bi-pencil-square')
         editLinkIcon.classList.add('bi-share')
       }
 
       const viewLinkIcon = document.querySelector('#share-view-link i')
       if (viewLinkIcon) {
-        viewLinkIcon.classList.remove('bi-link-45deg')
+        viewLinkIcon.classList.remove('bi-eye-fill')
         viewLinkIcon.classList.add('bi-share')
       }
     }
@@ -41,36 +47,39 @@ export default class extends Controller {
   copyOwnershipLink (e) {
     e.preventDefault()
     const ownershipLink = window.location.origin + document.querySelector('#share-ownership-link a').getAttribute('href')
-    this.copyToClipboard(ownershipLink, "Ownership link copied")
+    this.copyToClipboard(ownershipLink, "Ownership link copied", e.currentTarget)
   }
 
   copyEditLink (e) {
     e.preventDefault()
     const editLink = window.location.origin + document.querySelector('#share-edit-link a').getAttribute('href')
-    this.copyToClipboard(editLink, "Edit link copied")
+    this.copyToClipboard(editLink, "Edit link copied", e.currentTarget)
   }
 
   copyViewLink (e) {
     e.preventDefault()
     const viewLink = window.location.origin + document.querySelector('#share-view-link a').getAttribute('href')
-    this.copyToClipboard(viewLink, "View link copied")
+    this.copyToClipboard(viewLink, "View link copied", e.currentTarget)
   }
 
-  copyToClipboard (text, successMessage) {
+  copyToClipboard (text, successMessage, iconElement = null) {
     // Try modern clipboard API first
     if (navigator.clipboard && navigator.clipboard.writeText) {
       navigator.clipboard.writeText(text).then(() => {
         status(successMessage)
+        if (iconElement) {
+          this.showCopySuccess(iconElement)
+        }
       }).catch(() => {
-        this.fallbackCopyToClipboard(text, successMessage)
+        this.fallbackCopyToClipboard(text, successMessage, iconElement)
       })
     } else {
       // Fallback for non-secure contexts
-      this.fallbackCopyToClipboard(text, successMessage)
+      this.fallbackCopyToClipboard(text, successMessage, iconElement)
     }
   }
 
-  fallbackCopyToClipboard (text, successMessage) {
+  fallbackCopyToClipboard (text, successMessage, iconElement = null) {
     const textArea = document.createElement('textarea')
     textArea.value = text
     textArea.style.position = 'fixed'
@@ -83,6 +92,9 @@ export default class extends Controller {
     try {
       document.execCommand('copy')
       status(successMessage)
+      if (iconElement) {
+        this.showCopySuccess(iconElement)
+      }
     } catch (err) {
       status("Failed to copy link")
       console.error('Fallback copy failed:', err)
@@ -91,6 +103,27 @@ export default class extends Controller {
     document.body.removeChild(textArea)
   }
 
+  showCopySuccess (iconElement) {
+    // Find the actual icon element
+    const icon = iconElement.querySelector('i') || iconElement
+
+    // Store original classes
+    const wasCheck = icon.classList.contains('bi-check2')
+
+    // Don't animate if already showing success
+    if (wasCheck) return
+
+    // Change to checkmark with success styling
+    icon.classList.remove('bi-copy')
+    icon.classList.add('bi-check2', 'copy-success')
+
+    // Revert after 2 seconds
+    setTimeout(() => {
+      icon.classList.remove('bi-check2', 'copy-success')
+      icon.classList.add('bi-copy')
+    }, 2000)
+  }
+
   nativeShareOwnershipLink (e) {
     if (navigator.share) {
       e.preventDefault()
@@ -127,6 +160,6 @@ export default class extends Controller {
   copyEmbedCode (e) {
     e.preventDefault()
     const embedCode = document.querySelector('#embed-code').value
-    this.copyToClipboard(embedCode, "Embed code copied")
+    this.copyToClipboard(embedCode, "Embed code copied", e.currentTarget)
   }
 }

app/views/maps/modals/_share.haml

@@ -19,7 +19,9 @@
                           - @map.owners.each do |owner|
                             - if owner.image
                               = image_tag avatar_url(owner.image, 24), class: 'map-avatar', style: 'width: 24px; height: 24px; margin-right: 4px;', crossorigin: "anonymous", title: owner.name || owner.email, data: { "toggle": 'tooltip', 'bs-placement': 'top' }
+                      %i.bi.bi-shield-fill-check.me-2
                       Share ownership link
+                      %span.permission-badge.badge-owner.ms-2 Full Control
                   %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyOwnershipLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: "Copy link to clipboard" }
                     %i.bi.bi-copy.me-1
                 %small.text-muted.mt-2.flex-center.center
@@ -30,8 +32,9 @@
               .d-flex.gap-2.align-items-center
                 %button#share-edit-link.form-button.btn.btn-blue.flex-grow-1{ type: "button" }
                   =link_to(map_path(@map.private_id), data: { turbo: false, action: "click->map--share#nativeShareEditLink" }) do
-                    %i.bi.bi-link-45deg.me-2
+                    %i.bi.bi-pencil-square.me-2
                     Share edit link
+                    %span.permission-badge.badge-edit.ms-2 Can Edit
                 %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyEditLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: "Copy link to clipboard" }
                   %i.bi.bi-copy.me-1
               %small.text-muted.mt-2.flex-center.center
@@ -42,8 +45,9 @@
             .d-flex.gap-2.align-items-center
               %button#share-view-link.form-button.btn.btn-blue.flex-grow-1{ type: "button" }
                 =link_to(map_path(id: @map.public_id), data: { turbo: false, action: "click->map--share#nativeShareViewLink" }) do
-                  %i.bi.bi-link-45deg.me-1
+                  %i.bi.bi-eye-fill.me-2
                   Share view link
+                  %span.permission-badge.badge-view.ms-2 Read Only
               %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyViewLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: "Copy link to clipboard" }
                 %i.bi.bi-copy.me-1
             %small.text-muted.mt-2.flex-center.center