Merge remote-tracking branch 'upstream/main'

ABI-Software · Aug 15, 2024 · 8b5775e · 8b5775e
2 parents 98d8e2a + 4c81c5c
commit 8b5775e
Showing 1 changed file with 38 additions and 22 deletions.
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
@@ -4,7 +4,24 @@
     <div class="connectivity-info-title">
       <div>
         <div class="block" v-if="entry.title">
-          <div class="title">{{ capitalise(entry.title) }}</div>
+          <div class="title">
+            {{ capitalise(entry.title) }}
+            <template v-if="entry.featuresAlert">
+              <el-popover
+                width="250"
+                trigger="hover"
+                :teleported="false"
+                popper-class="popover-origin-help"
+              >
+                <template #reference>
+                  <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+                </template>
+                <span style="word-break: keep-all">
+                  {{ entry.featuresAlert }}
+                </span>
+              </el-popover>
+            </template>
+          </div>
           <div
             v-if="
               entry.provenanceTaxonomyLabel &&
@@ -41,22 +58,6 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div v-if="featuresAlert" class="attribute-title-container">
-      <span class="attribute-title">Alert</span>
-      <el-popover
-        width="250"
-        trigger="hover"
-        :teleported="false"
-        popper-class="popover-origin-help"
-      >
-        <template #reference>
-          <el-icon class="info"><el-icon-warning /></el-icon>
-        </template>
-        <span style="word-break: keep-all">
-          {{ featuresAlert }}
-        </span>
-      </el-popover>
-    </div>
     <div class="content-container scrollbar">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
@@ -229,14 +230,14 @@ export default {
         originsWithDatasets: [],
         componentsWithDatasets: [],
         resource: undefined,
+        featuresAlert: undefined,
       }),
     },
     availableAnatomyFacets: {
       type: Array,
       default: () => [],
     },
   },
-  // inject: ['getFeaturesAlert'],
   data: function () {
     return {
       controller: undefined,
@@ -274,9 +275,6 @@ export default {
       }
       return resources;
     },
-    featuresAlert() {
-      // return this.getFeaturesAlert()
-    },
     originDescription: function () {
       if (
         this.entry &&
@@ -517,6 +515,9 @@ export default {
 :deep(.popover-origin-help.el-popover) {
   text-transform: none !important; // need to overide the tooltip text transform
   border: 1px solid $app-primary-color;
+  font-weight: 400;
+  font-family: Asap, sans-serif, Helvetica;
+
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;
@@ -525,12 +526,27 @@ export default {
   }
 }
 
+.info,
+.alert {
+  color: #8300bf;
+}
+
 .info {
   transform: rotate(180deg);
-  color: #8300bf;
   margin-left: 8px;
 }
 
+.alert {
+  margin-left: 5px;
+  vertical-align: text-bottom;
+
+  &,
+  > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
 .seperator {
   width: 90%;
   height: 1px;