Show last commit date as tooltip

meltano · Apr 28, 2024 · b5b5780 · b5b5780
1 parent 47a778f
commit b5b5780
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -271,3 +271,32 @@ pre[class*="language-"] {
   content: "/";
   color: #f963bc;
 }
+
+.tooltip {
+  position: relative;
+}
+.tooltip .tooltip-content {
+  visibility: hidden;
+  width: max-content;
+  background-color: #62626e;
+  text-align: center;
+  padding: 5px;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 1;
+  left: 105%;
+  top: -5px;
+}
+.tooltip .tooltip-content::after {
+  content: " ";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #62626e transparent transparent;
+}
+.tooltip:hover .tooltip-content {
+  visibility: visible;
+}
diff --git a/src/templates/Plugins.vue b/src/templates/Plugins.vue
@@ -185,10 +185,29 @@
                     <ul class="pl-4 list-disc list-inside">
                       <li v-for="(variant, index) in filteredVariants" v-bind:key="index">
                         <g-link
+                          class="tooltip"
                           :to="variant.node.path"
                           v-if="variant.node.path !== $page.plugins.path"
-                          >{{ variant.node.maintainer.label }}</g-link
                         >
+                          {{ variant.node.maintainer.label }}
+                          <div class="tooltip-content">
+                            <img
+                              alt="Last Commit Date"
+                              :src="
+                                ((repo) => {
+                                  const url = `https://img.shields.io/${repo.type}/last-commit/${repo.user}/${repo.name}?label=Last%20Commit`;
+
+                                  if (!variant.node.keywords.includes('airbyte_protocol')) {
+                                    return url;
+                                  }
+
+                                  const [path] = repo.url.match(/airbyte-integrations\S+/) ?? [];
+                                  return path ? `${url}&path=${path}` : url;
+                                })(parsedVariantRepos[variant.node.variant])
+                              "
+                            />
+                          </div>
+                        </g-link>
                         <span v-else>{{ variant.node.maintainer.label }}</span>
                         <span v-if="variant.node.isDefault"> (default)</span>
                         <span v-if="variant.node.keywords.includes('meltano_sdk')">
@@ -216,24 +235,6 @@
                             >🥉</a
                           ></span
                         >
-                        <span>
-                          <img
-                            class="inline pl-2 float-right"
-                            alt="Last Commit Date"
-                            :src="
-                              ((repo) => {
-                                const url = `https://img.shields.io/${repo.type}/last-commit/${repo.user}/${repo.name}?label=`;
-
-                                if (!variant.node.keywords.includes('airbyte_protocol')) {
-                                  return url;
-                                }
-
-                                const [path] = repo.url.match(/airbyte-integrations\S+/) ?? [];
-                                return path ? `${url}&path=${path}` : url;
-                              })(parsedVariantRepos[variant.node.variant])
-                            "
-                          />
-                        </span>
                       </li>
                     </ul>
                   </span>