feat: Show related connectivities button on hover to reduce user confusion

src/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
+    ElIconConnection: typeof import('@element-plus/icons-vue')['Connection']
     ElIconCopyDocument: typeof import('@element-plus/icons-vue')['CopyDocument']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']

src/components/Tooltip/ExternalResourceCard.vue

@@ -50,36 +50,42 @@
           <template v-else>
             <span v-html="reference.citation[citationType]"></span>
 
-            <RelatedConnectivitiesButton
-              :resource="reference.resource"
-              @show-related-connectivities="showRelatedConnectivities"
-            />
-
-            <CopyToClipboard :content="reference.citation[citationType]" />
+            <div class="reference-actions">
+              <RelatedConnectivitiesButton
+                :resource="reference.resource"
+                @show-related-connectivities="showRelatedConnectivities"
+              />
+
+              <CopyToClipboard :content="reference.citation[citationType]" />
+            </div>
           </template>
         </template>
       </li>
 
       <li v-for="reference of openLibReferences" :key="reference.id">
         <div v-html="formatCopyReference(reference)"></div>
 
-        <RelatedConnectivitiesButton
-          :resource="reference.resource"
-          @show-related-connectivities="showRelatedConnectivities"
-        />
+        <div class="reference-actions">
+          <RelatedConnectivitiesButton
+            :resource="reference.resource"
+            @show-related-connectivities="showRelatedConnectivities"
+          />
 
-        <CopyToClipboard :content="formatCopyReference(reference)" />
+          <CopyToClipboard :content="formatCopyReference(reference)" />
+        </div>
       </li>
 
       <li v-for="reference of isbnDBReferences" :key="reference.id">
         <a :href="reference.url" target="_blank">{{ reference.url }}</a>
 
-        <RelatedConnectivitiesButton
-          :resource="reference.resource"
-          @show-related-connectivities="showRelatedConnectivities"
-        />
+        <div class="reference-actions">
+          <RelatedConnectivitiesButton
+            :resource="reference.resource"
+            @show-related-connectivities="showRelatedConnectivities"
+          />
 
-        <CopyToClipboard :content="reference.url" />
+          <CopyToClipboard :content="reference.url" />
+        </div>
       </li>
     </ul>
   </div>
@@ -581,6 +587,17 @@ export default {
   text-transform: uppercase;
 }
 
+.reference-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .citation-list {
   margin: 0;
   margin-top: 0.5rem;
@@ -590,7 +607,7 @@ export default {
 
   li {
     margin: 0;
-    padding: 0.5rem 1.5rem 0.5rem 0.75rem;
+    padding: 0.75rem 1.5rem 1.5rem 0.75rem;
     border-radius: var(--el-border-radius-base);
     background-color: var(--el-bg-color-page);
     position: relative;
@@ -635,16 +652,8 @@ export default {
       background-color: transparent;
     }
 
-    :deep(.copy-clipboard-button) {
-      position: absolute;
-      bottom: 0.25rem;
-      right: 0.25rem;
-      opacity: 0;
-      visibility: hidden;
-    }
-
     &:hover {
-      :deep(.copy-clipboard-button) {
+      .reference-actions {
         opacity: 1;
         visibility: visible;
       }

src/components/Tooltip/RelatedConnectivitiesButton.vue

@@ -1,39 +1,119 @@
 <template>
-  <div class="reference-button-container">
+  <el-tooltip
+    :content="textLabel"
+    placement="bottom"
+    effect="clipboard-tooltip"
+    :teleported="true"
+    :append-to="tooltipContainer"
+  >
     <el-button
       class="reference-icon-button"
+      :class="theme"
       size="small"
       @click="$emit('show-related-connectivities', resource)"
     >
-      Show related connectivities
+      <el-icon :color="iconColor">
+        <el-icon-connection />
+      </el-icon>
+      <span class="visually-hidden">{{ textLabel }}</span>
     </el-button>
-  </div>
+  </el-tooltip>
 </template>
 
 <script>
+const LABEL = 'Show related connectivities';
+const APP_PRIMARY_COLOR = '#8300bf';
+
 export default {
   name: "RelatedConnectivitiesButton",
   props: {
     resource: {
       type: String,
       required: true,
     },
+    /**
+     * `theme: light` will show white button,
+     * to use when the button is over other readable text content.
+     * Default button is transparent.
+     */
+    theme: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      textLabel: LABEL,
+      iconColor: APP_PRIMARY_COLOR,
+      tooltipContainer: null,
+    };
+  },
+  mounted() {
+    const fullscreenContainer = document.querySelector('.mapcontent');
+
+    if (fullscreenContainer) {
+      this.tooltipContainer = fullscreenContainer;
+    } else {
+      this.tooltipContainer = document.body;
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.reference-button-container {
-  margin-top: 0.5rem;
-}
+  .reference-icon-button {
+    margin-left: 0px !important;
+    margin-top: 0px !important;
+    padding: 0.25rem !important;
+    font-size: 14px !important;
+    transition: all 0.25s ease;
+
+    &,
+    &:focus,
+    &:active {
+      color: $app-primary-color !important;
+      background: transparent !important;
+      border-color: transparent !important;
+      box-shadow: none !important;
+    }
+
+    &.light {
+      &,
+      &:focus,
+      &:active {
+        background: #fff !important;
+        border-color: #fff !important;
+      }
+    }
+
+    &:hover {
+      background: #f3e6f9 !important;
+      border-color: #f3e6f9 !important;
+    }
+  }
+
+  .visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>
 
-.reference-icon-button {
-  color: $app-primary-color !important;
-  background-color: #f9f2fc !important;
-  border-color: $app-primary-color !important;
+<style lang="scss">
+  .el-popper.is-clipboard-tooltip {
+    padding: 4px 10px;
+    font-family: Asap;
+    background: #f3ecf6 !important;
+    border: 1px solid $app-primary-color;
 
-  &:hover {
-    background-color: transparent !important;
+    & .el-popper__arrow::before {
+      border: 1px solid;
+      border-color: $app-primary-color;
+      background: #f3ecf6;
+    }
   }
-}
 </style>