@abi-software/map-side-bar 2.14.2-demo.1 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.2-demo.1",
+  "version": "2.14.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/ConnectivityInfo.vue

@@ -12,6 +12,21 @@
               @click="toggleTitleExpansion"
             >
               <span>{{ capitalise(displayTitle) }}</span>
+              <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>
             <button
               v-if="showTitleToggle"
@@ -26,19 +41,7 @@
               </el-icon>
             </button>
           </div>
-          <div class="subtitle">
-            <strong>Id: </strong>{{ entry.featureId[0] }}
-            <el-button
-              round
-              size="small"
-              class="alert-chip"
-              @click="showAlertMessage"
-              v-if="entry.featuresAlert"
-            >
-              <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
-              Notes
-            </el-button>
-          </div>
+          <div class="subtitle"><strong>Id: </strong>{{ entry.featureId[0] }}</div>
           <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
             {{ provSpeciesDescription }}
           </div>
@@ -287,22 +290,6 @@
         @trackEvent="onTrackEvent"
       />
     </div>
-
-    <div
-      ref="alertElement"
-      class="content-container content-container-alert"
-      v-if="entry.featuresAlert"
-    >
-      <div class="block attribute-title-container">
-        <span class="attribute-title">Alert</span>
-      </div>
-      <div class="block">
-        <div class="alert-block"
-          v-for="alert in entry.featuresAlert"
-          v-html="formatAlertText(alert)"
-        ></div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -798,14 +785,6 @@ export default {
         contentArray.push(contentString);
       }
 
-      // Alert
-      if (this.entry.featuresAlert) {
-        const alertContent = this.entry.featuresAlert
-          .map((alert) => this.formatAlertText(alert))
-          .join('\n');
-        contentArray.push(`<div><strong>Alert</strong></div>\n${alertContent}`);
-      }
-
       return contentArray.join('\n\n<br>');
     },
     getConnectivityDatasets: function (label) {
@@ -932,51 +911,6 @@ export default {
     onTrackEvent: function (data) {
       EventBus.emit('trackEvent', data);
     },
-    showAlertMessage: function () {
-      // scroll to alert message
-      this.$nextTick(() => {
-        const alertElement = this.$refs.alertElement;
-        if (alertElement) {
-          alertElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest',
-          });
-        }
-      });
-    },
-    formatAlertText: function (text) {
-      if (!text) return '';
-      const escaped = text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      const linkified = escaped.replace(
-        /(https?:\/\/[^\s"<>\[]+)/g,
-        (url) => {
-          const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
-          const cleanUrl = parts ? parts[1] : url;
-          const suffix = parts ? parts[2] : '';
-          return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
-        }
-      );
-
-      const normalised = linkified
-        .replace(/\\n/g, '\n')
-        .replace(/\r\n/g, '\n')
-        .replace(/\r/g, '\n');
-
-      return normalised
-        .split('\n')
-        .map((line) => {
-          const withBoldLabel = line.replace(
-            /^\s*([A-Za-z][^:<]{0,120}:)/,
-            '<strong>$1</strong>'
-          );
-          return `<div class="alert-line">${withBoldLabel}</div>`;
-        })
-        .join('\n');
-    },
   },
   mounted: function () {
     this.updatedCopyContent = this.getUpdateCopyContent();
@@ -1155,6 +1089,15 @@ export default {
   text-transform: uppercase;
 }
 
+.main {
+  .el-button.is-round {
+    border-radius: 4px;
+    padding: 9px 20px 10px 20px;
+    display: flex;
+    height: 36px;
+  }
+}
+
 .button {
   margin-left: 0px !important;
   margin-top: 0px !important;
@@ -1477,6 +1420,10 @@ export default {
 
 .content-container-connectivity {
   position: relative;
+
+  &:not([style*="display: none"]) ~ .content-container-references {
+    margin-top: -1.25rem;
+  }
 }
 
 .attribute-content {
@@ -1520,48 +1467,4 @@ export default {
     margin-bottom: 0.5em;
   }
 }
-
-.alert-block {
-  background-color: var(--el-color-warning-light-9);
-  border: 1px dashed var(--el-color-warning);
-  padding: 0.75rem;
-  border-radius: 4px;
-
-  :deep(.alert-line + .alert-line) {
-    margin-top: 0.5rem;
-  }
-
-  :deep(a) {
-    color: $app-primary-color;
-    word-break: break-all;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-.alert-chip {
-  margin-left: 5px;
-  background-color: $app-primary-color;
-  border-color: $app-primary-color;
-  color: #fff;
-
-  &:hover {
-    color: #fff !important;
-    background-color: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-
-  :deep(> span) {
-    gap: 2px;
-  }
-
-  .alert {
-    width: 1rem;
-    height: 1rem;
-    color: inherit;
-    margin: 0;
-  }
-}
 </style>