@abi-software/map-utilities 1.5.1-beta.0 → 1.6.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.5.1-beta.0",
+  "version": "1.6.0-beta.1",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityList/ConnectivityList.vue

@@ -52,7 +52,7 @@
             popper-class="popover-origin-help"
           >
             <template #reference>
-              <el-icon 
+              <el-icon
                 class="magnify-glass"
                 v-show="shouldShowMagnifyGlass(origin,)"
                 @click="onConnectivityClicked(origin)"
@@ -98,7 +98,7 @@
             popper-class="popover-origin-help"
           >
             <template #reference>
-              <el-icon 
+              <el-icon
                 class="magnify-glass"
                 v-show="shouldShowMagnifyGlass(component)"
                 @click="onConnectivityClicked(component)"
@@ -146,7 +146,7 @@
             popper-class="popover-origin-help"
           >
             <template #reference>
-              <el-icon 
+              <el-icon
                 class="magnify-glass"
                 v-show="shouldShowMagnifyGlass(destination)"
                 @click="onConnectivityClicked(destination)"
@@ -472,7 +472,7 @@ export default {
   right:0px;
 }
 
-:deep(.connectivity-error-container.el-popover) {
+.connectivity-list :deep(.connectivity-error-container.el-popover) {
   min-height: 31px; // placeholder
   align-items: center;
   justify-content: center;
@@ -481,5 +481,6 @@ export default {
   border-radius: var(--el-border-radius-small);
   border: 1px solid var(--el-color-error);
   pointer-events: none;
+  word-break: break-word;
 }
 </style>

package/src/components/Tooltip/AnnotationPopup.vue

@@ -72,13 +72,13 @@
                 {{ sub.creator.name }}
               </el-row>
               <el-row class="dialog-text">
-                <strong>Evidence: </strong>
+                <strong>Evidence: &nbsp;</strong>
                 <el-row
                   v-for="(evidence, index) in processEvidences(sub)"
                   :key="evidence"
                   class="dialog-text"
-                > 
-                  <a v-if="typeof evidence === 'object' ":href="Object.values(evidence)[0]" target="_blank"> 
+                >
+                  <a v-if="typeof evidence === 'object' ":href="Object.values(evidence)[0]" target="_blank">
                     {{ Object.keys(evidence)[0] }}
                   </a>
                   <span v-else> {{ evidence }}</span>
@@ -86,7 +86,7 @@
                 </el-row>
               </el-row>
               <el-row class="dialog-text">
-                <strong>Comment: </strong> {{ sub.body.comment }}
+                <strong>Comment: &nbsp;</strong> {{ sub.body.comment }}
               </el-row>
             </div>
           </template>
@@ -270,13 +270,22 @@ export default {
     previous: function () {
       if (this.entryIndex !== 0) {
         this.entryIndex = this.entryIndex - 1;
+        this.emitActiveItemChange();
       }
     },
     next: function () {
       if (this.entryIndex !== this.annotationEntry.length - 1) {
         this.entryIndex = this.entryIndex + 1;
+        this.emitActiveItemChange();
       }
     },
+    emitActiveItemChange: function () {
+      const tabType = { tabType: "annotation" };
+      const data = this.annotationEntry[this.entryIndex];
+      const payload = {...tabType, ...data};
+
+      this.$emit('hover-changed', payload);
+    },
     processEvidences: function(sub) {
       const evidences = [];
       if (sub?.body?.evidence) {
@@ -490,6 +499,10 @@ export default {
       handler: function (newVal, oldVal) {
         if (newVal !== oldVal) {
           this.entryIndex = 0;
+
+          if (newVal?.length) {
+            this.emitActiveItemChange();
+          }
         }
       },
     },
@@ -523,6 +536,9 @@ export default {
 .toggle-button {
   display: flex;
   justify-content: space-between;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #e4e7ed;
 
   .is-disabled {
     color: #fff !important;
@@ -559,6 +575,9 @@ export default {
 
 .block {
   margin-bottom: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 
   .main > &:first-of-type {
     margin-right: 0.5em;
@@ -637,7 +656,8 @@ export default {
 
 .dialog-spacer {
   border-bottom: 1px solid #e4e7ed;
-  margin-bottom: 10px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .submit {
@@ -689,4 +709,8 @@ export default {
     }
   }
 }
+
+.annotation-popup :deep(.el-popover.el-popper) {
+  word-break: break-word;
+}
 </style>

package/src/components/TreeControls/TreeControls.vue

@@ -84,7 +84,6 @@
               :class="{ 'show-picker': showColourPicker }"
               v-model="data.activeColour"
               size="small"
-              :popper-class="myPopperClass"
               @change="setColour(data, $event)"
             />
             <div class="lastChildInItem">
@@ -157,7 +156,6 @@ export default {
     return {
       defaultExpandedKeys: ["All"],
       filterText: "",
-      myPopperClass: "hide-scaffold-colour-popup",
       tooltipVisible: false,
       tooltipLabel: "",
       tooltipAtBottom: false,
@@ -186,13 +184,6 @@ export default {
     },
   },
   watch: {
-    showColourPicker: {
-      immediate: true,
-      handler: function () {
-        if (this.showColourPicker) this.myPopperClass = "showPicker";
-        else this.myPopperClass = "hide-scaffold-colour-popup";
-      },
-    },
     filterText: {
       handler: function (value) {
         if (this.$refs.regionTree) this.$refs.regionTree.filter(value);
@@ -394,6 +385,7 @@ export default {
   width: 100%;
 
   :deep(.el-color-picker) {
+    pointer-events: none;
     height: 14px !important;
   }
 
@@ -412,14 +404,17 @@ export default {
 }
 
 :deep(.el-color-picker__icon) {
-  &.el-icon-arrow-down {
+  &.is-icon-arrow-down {
     display: none;
   }
 }
 
 :deep(.show-picker) {
+  &.el-color-picker {
+    pointer-events: auto;
+  }
   .el-color-picker__icon {
-    &.el-icon-arrow-down {
+    &.is-icon-arrow-down {
       display: block;
     }
   }