#2417 Update the tooltip for 'Anyone link' (#2488)

* update tooltip for anyonelink * fix the 'direction' right option * anchor tooltip to the trigger element in some components / fix 'bottom-right' option * fix the useless space
okTurtles · Jan 15, 2025 · 6eff95f · 6eff95f
1 parent a6f8717
commit 6eff95f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/frontend/views/components/LinkToCopy.vue b/frontend/views/components/LinkToCopy.vue
@@ -18,6 +18,7 @@ component.c-wrapper(
   tooltip.c-feedback(
     v-if='ephemeral.isTooltipActive'
     :isVisible='true'
+    :anchorToElement='true'
     direction='top'
     :text='L("Copied to clipboard!")'
   )
@@ -100,7 +101,7 @@ export default ({
 }
 
 .c-feedback {
-  position: absolute;
+  position: absolute !important;
   left: 50%;
   transform: translateX(-50%);
 }

diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue
@@ -162,9 +162,9 @@ export default ({
 
         switch (this.direction) {
           case 'right':
-            x = '100%'
+            x = `${spacing}px`
             y = '-50%'
-            absPosition = { top: '50%', right: `-${spacing}px` }
+            absPosition = { top: '50%', left: '100%' }
             break
           case 'left':
             x = '-100%'
@@ -177,9 +177,9 @@ export default ({
             absPosition = { bottom: `-${spacing}px` }
             break
           case 'bottom-right':
-            x = 0
+            x = '-100%'
             y = '100%'
-            absPosition = { bottom: `-${spacing}px`, right: 0 }
+            absPosition = { bottom: `-${spacing}px`, left: '100%' }
             break
           case 'top':
             x = '-50%'
@@ -324,6 +324,7 @@ export default ({
 
     if (this.triggerElementSelector) {
       this.triggerDOM.style.cursor = 'pointer'
+      this.triggerDOM.style.position = 'relative'
     }
   },
   beforeDestory () {
@@ -388,6 +389,10 @@ export default ({
   }
 }
 
+.c-anchored-tooltip {
+  width: max-content;
+}
+
 .c-background {
   position: absolute;
   z-index: $zindex-tooltip - 1;

diff --git a/frontend/views/containers/group-settings/InvitationsTable.vue b/frontend/views/containers/group-settings/InvitationsTable.vue
@@ -33,9 +33,10 @@ page-section.c-section(:title='L("Invite links")')
           | {{ item.invitee }}
           tooltip.c-name-tooltip(
             v-if='item.isAnyoneLink'
-            direction='top'
+            :direction='ephemeral.isMobile ? "right" : "top"'
             :isTextCenter='true'
-            :text='L("This invite link is only available during the onboarding period.")'
+            :anchorToElement='true'
+            :text='L("Anyone with this link can join the group.")'
           )
             .button.is-icon-smaller.is-primary.c-tip
               i.icon-info
@@ -151,8 +152,10 @@ export default ({
           selectedOption: 'Active'
         },
         // keep invite in "Active" list for a few seconds after being revoked
-        inviteRevokedNow: null
-      }
+        inviteRevokedNow: null,
+        isMobile: false
+      },
+      matchMediaMobile: null
     }
   },
   computed: {
@@ -354,6 +357,16 @@ export default ({
         this.$refs.inviteError.danger(e.message)
       }
     }
+  },
+  mounted () {
+    this.matchMediaMobile = window.matchMedia('screen and (max-width: 769px)')
+    this.ephemeral.isMobile = this.matchMediaMobile.matches
+    this.matchMediaMobile.onchange = (e) => {
+      this.ephemeral.isMobile = e.matches
+    }
+  },
+  beforeDestroy () {
+    this.matchMediaMobile.onchange = null
   }
 }: Object)
 </script>