0.1.7-DEV-5.2: Final batch of fixes for popup, hopefully?

src/components/DocumentPreview.vue

@@ -199,6 +199,16 @@ export default class DocumentPreview extends BaseClass {
   // LOCAL CONTENT
   /****************************************************************/
 
+  /**
+   * Variable string for closing of the popup due to external influences
+   */
+  @Prop({ default: "" }) readonly externalCloseTrigger!: string
+
+  @Watch("externalCloseTrigger")
+  reactToExternalClose () {
+    this.setCloseTimer()
+  }
+
   /**
    * Retrieved document ID
    */
@@ -292,7 +302,6 @@ export default class DocumentPreview extends BaseClass {
   /**
    * Variable string for closing of the popup due to external influences
    */
-  @Prop({ default: "" }) readonly externalCloseTrigger!: string
   @Prop({ default: 999 }) readonly specialZIndex!: number
   @Prop({ default: 750 }) readonly customDelay!: number
   @Prop({ default: true }) readonly customTarget!: string | boolean
@@ -300,11 +309,6 @@ export default class DocumentPreview extends BaseClass {
   @Prop({ default: "top middle" }) readonly customSelf!: string
   @Prop({ default: 500 }) readonly customCloseDelay!: number
 
-  @Watch("externalCloseTrigger")
-  reactToExternalClose () {
-    this.setCloseTimer()
-  }
-
   consitentDocumentPreviewSwitch () {
     if (this.documentPreviewLock) {
       this.documentPreviewSwitch = true
@@ -332,10 +336,12 @@ export default class DocumentPreview extends BaseClass {
   }
 
   clearCloseTimer () {
+    this.disableScroll()
     clearTimeout(this.closeTimer)
   }
 
   setCloseTimer () {
+    this.enableScroll()
     this.closeTimer = setTimeout(() => {
       this.documentPreviewClose()
     }, this.customCloseDelay)
@@ -359,6 +365,51 @@ export default class DocumentPreview extends BaseClass {
   reactToMenuLeave () {
     this.setCloseTimer()
   }
+
+  wheelOpt = { passive: false }
+  wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel"
+
+  preventDefault (e: WheelEvent) {
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    const previewWrapper = e.target.closest(".documentPreviewWrapper")
+
+    if (previewWrapper) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      const previewContent = previewWrapper.querySelector(".documentPreviewContent")
+
+      const wheelDirection = (e.deltaY > 0) ? "down" : "up"
+
+      if (wheelDirection === "up" && previewWrapper.scrollTop === 0) {
+        e.preventDefault()
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      const combinedHeight = previewContent.getBoundingClientRect().height - previewWrapper.getBoundingClientRect().height
+
+      if (wheelDirection === "down" && previewWrapper.scrollTop >= combinedHeight) {
+        e.preventDefault()
+      }
+    }
+  }
+
+  disableScroll () {
+    // @ts-ignore
+    window.addEventListener("DOMMouseScroll", this.preventDefault, false)
+    // @ts-ignore
+    window.addEventListener(this.wheelEvent, this.preventDefault, this.wheelOpt)
+    // @ts-ignore
+    window.addEventListener("touchmove", this.preventDefault, this.wheelOpt)
+  }
+
+  enableScroll () {
+    // @ts-ignore
+    window.removeEventListener("DOMMouseScroll", this.preventDefault, false)
+    // @ts-ignore
+    window.removeEventListener(this.wheelEvent, this.preventDefault, this.wheelOpt)
+    // @ts-ignore
+    window.removeEventListener("touchmove", this.preventDefault, this.wheelOpt)
+  }
 }
 </script>
 
@@ -375,6 +426,7 @@ export default class DocumentPreview extends BaseClass {
   padding: 20px;
   width: 700px;
   max-width: 100%;
+  min-height: 600px;
   background-color: map-get($customColors, 'gunmetal-lighter') !important;
   color: #fff;
 

src/components/fields/Field_MultiRelationship.vue

@@ -78,7 +78,7 @@
         @mouseleave="setDocumentPreviewClose"
       >
         <documentPreview
-          v-if="!recursive || preventPreviewsDocuments"
+          v-if="!recursive && !preventPreviewsDocuments"
           :document-id="single._id"
           :external-close-trigger="documentPreviewClose"
         />
@@ -169,9 +169,8 @@
 
     </q-list>
 
-  <div class="flex" v-if="editMode" @mouseleave="setDocumentPreviewClose">
+  <div class="flex" v-if="editMode">
     <q-select
-      @mouseleave="setDocumentPreviewClose"
       menu-anchor="bottom middle"
       menu-self="top middle"
       class="multiRelashionshipSelect"
@@ -212,7 +211,6 @@
           :color="(scope.opt.isAutoGenerated) ? 'teal-3' : 'accent'"
           text-color="dark"
           class="text-bold"
-          @mouseleave="setDocumentPreviewClose"
         >
 
           <q-tooltip
@@ -220,11 +218,19 @@
             :delay="500">
               This document doesn't exist yet. It will be auto-generated on save.
             </q-tooltip>
-          <template v-if="scope.opt.isDead">
-            †
-          </template>
-          {{ stripTags(scope.opt.label) }}
-           <q-btn
+
+          <div
+            class="relationShipChipOverlay"
+            @mouseleave="setDocumentPreviewClose"
+           />
+
+          <div class="relationShipChipContent">
+            <template v-if="scope.opt.isDead">
+              †
+            </template>
+            {{ stripTags(scope.opt.label) }}
+          </div>
+          <q-btn
             round
             dense
             flat
@@ -240,7 +246,7 @@
             </q-tooltip>
           </q-btn>
            <documentPreview
-            v-if="(!recursive || preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
+            v-if="(!recursive && !preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
             :document-id="scope.opt._id"
             :external-close-trigger="documentPreviewClose"
           />
@@ -306,7 +312,8 @@
                 </template>
               </q-list>
 
-            </q-menu>
+          </q-menu>
+
         </q-chip>
       </template>
       <template v-slot:option="{ itemProps, itemEvents, opt }">
@@ -349,7 +356,7 @@
             </q-item-label>
           </q-item-section>
            <documentPreview
-            v-if="!recursive || preventPreviewsDocuments"
+            v-if="!recursive && !preventPreviewsDocuments"
             :document-id="opt._id"
             :external-close-trigger="documentPreviewClose"
             :custom-anchor="'top start'"
@@ -1038,7 +1045,7 @@ table {
 
 <style lang="scss">
 .connectionList {
-.relationsViewList {
+  .relationsViewList {
     position: relative;
 
     > .q-item {
@@ -1091,6 +1098,20 @@ table {
   }
 }
 
+.relationShipChipOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 12px;
+}
+
+.relationShipChipContent {
+  position: relative;
+  z-index: 1;
+}
+
 .connectionList .connectionNote {
   color: #000;
   opacity: 0.8;

src/components/fields/Field_SingleRelationship.vue

@@ -154,7 +154,7 @@
 
           </q-menu>
           <documentPreview
-            v-if="!recursive || preventPreviewsDocuments"
+            v-if="!recursive && !preventPreviewsDocuments"
             :document-id="localInput._id"
             :external-close-trigger="documentPreviewClose"
           />
@@ -206,7 +206,6 @@
             :color="(scope.opt.isAutoGenerated) ? 'teal-3' : 'accent'"
             text-color="dark"
             class="text-bold"
-            @mouseleave="setDocumentPreviewClose"
           >
             <q-tooltip
               v-if="scope.opt.isAutoGenerated"
@@ -214,10 +213,18 @@
                 This document doesn't exist yet. It will be auto-generated on save.
               </q-tooltip>
 
-            <template v-if="scope.opt.isDead">
-              †
-            </template>
-            {{ stripTags(scope.opt.label) }}
+            <div
+              class="relationShipChipOverlay"
+              @mouseleave="setDocumentPreviewClose"
+            />
+
+            <div class="relationShipChipContent">
+              <template v-if="scope.opt.isDead">
+                †
+              </template>
+              {{ stripTags(scope.opt.label) }}
+            </div>
+
             <q-btn
               round
               dense
@@ -234,7 +241,7 @@
               </q-tooltip>
             </q-btn>
             <documentPreview
-              v-if="(!recursive || preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
+              v-if="(!recursive && !preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
               :document-id="scope.opt._id"
               :external-close-trigger="documentPreviewClose"
             />
@@ -344,7 +351,7 @@
               </q-item-section>
 
               <documentPreview
-                v-if="!recursive || preventPreviewsDocuments"
+                v-if="!recursive && !preventPreviewsDocuments"
                 :document-id="opt._id"
                 :external-close-trigger="documentPreviewClose"
                 :custom-anchor="'top start'"
@@ -1021,6 +1028,20 @@ table {
   }
 }
 
+.relationShipChipOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 12px;
+}
+
+.relationShipChipContent {
+  position: relative;
+  z-index: 1;
+}
+
 .connectionList .connectionNote {
   color: #000;
   opacity: 0.8;

suggestionList.md

@@ -67,6 +67,7 @@
 - Drag/drop tree list
 - Global text find/replace
 - Mass document editing (not sure about this one...)
+- Color themes
 
 - Detailed language editor support
 - Calendar field