From 985da087301a68742900961b9e60e8c11d5ccf87 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 30 Jun 2021 14:21:11 +0200
Subject: [PATCH] add Bpopover default props & add text_rebond body and tags

---
 src/components/layouts/NodePreviewZone.vue |  3 +-
 src/components/nodes/NodeView.vue          |  2 +-
 src/components/nodes/NodeViewBody.vue      |  5 ++-
 src/components/nodes/NodeViewFooter.vue    | 48 +++++++++++++++++++---
 src/main.js                                |  3 +-
 5 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/layouts/NodePreviewZone.vue b/src/components/layouts/NodePreviewZone.vue
index 54ddd95..1bef260 100644
--- a/src/components/layouts/NodePreviewZone.vue
+++ b/src/components/layouts/NodePreviewZone.vue
@@ -8,8 +8,7 @@
       v-for="node in nodes" :key="'popover-' + node.id"
       custom-class="popover-node-preview"
       :target="'preview-node-' + node.id" container="preview-zone"
-      placement="auto"
-      triggers="manual" :boundary-padding="0"
+      placement="auto" triggers="manual"
     >
       <node-view
         :node="node"
diff --git a/src/components/nodes/NodeView.vue b/src/components/nodes/NodeView.vue
index 3d991d6..6d19169 100644
--- a/src/components/nodes/NodeView.vue
+++ b/src/components/nodes/NodeView.vue
@@ -3,7 +3,7 @@
     class="node-view"
     :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant, { 'preview': preview }]"
   >
-    <div v-if="!loading" class="node-view-wrapper" :id="'node-' + node.id">
+    <div v-if="!loading" class="node-view-wrapper" :id="`node-${mode}-${node.id}`">
       <component
         :is="'node-view-header-' + nodeType"
         v-bind="{ node, mode }"
diff --git a/src/components/nodes/NodeViewBody.vue b/src/components/nodes/NodeViewBody.vue
index 2755ed1..3a40176 100644
--- a/src/components/nodes/NodeViewBody.vue
+++ b/src/components/nodes/NodeViewBody.vue
@@ -9,9 +9,9 @@
       <b-popover
         v-for="note in notes" :key="note.number"
         custom-class="footnote"
-        :target="'note-' + note.number" :container="'node-' + nodeId"
+        :target="'note-' + note.number" :container="`node-${mode}-${nodeId}`"
         placement="top" :fallback-placement="['bottom', 'right', 'left']"
-        :triggers="['focus']" :boundary-padding="0"
+        :triggers="['focus']"
       >
         <div class="footnote-content" v-html="note.content" />
 
@@ -91,6 +91,7 @@ export default {
 
   mounted () {
     if (this.mode === 'view' && this.notes) this.addFootnotes()
+    this.$el.querySelectorAll('img, video, audio').forEach(elem => elem.parentElement.classList.add('media-container'))
   }
 }
 </script>
diff --git a/src/components/nodes/NodeViewFooter.vue b/src/components/nodes/NodeViewFooter.vue
index 7389211..f5f514e 100644
--- a/src/components/nodes/NodeViewFooter.vue
+++ b/src/components/nodes/NodeViewFooter.vue
@@ -18,9 +18,9 @@
         </b-button>
 
         <b-popover
-          :target="'siblings-' + node.id" triggers="click" placement="top"
+          :target="'siblings-' + node.id"
+          triggers="focus" placement="top" boundary="viewport"
           custom-class="popover-siblings"
-          boundary="viewport"
         >
           <ul>
             <li v-for="sibling in node.siblings" :key="sibling.id">
@@ -29,6 +29,17 @@
                 link edition block
                 @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
               />
+              <node-view-body
+                v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
+              />
+              <div class="tags mb-n2 mt-2" v-if="sibling.tags">
+                <b-badge
+                  v-for="tag in sibling.tags" :key="tag.id"
+                  variant="dark" pill class="mr-2 mb-2"
+                >
+                  {{ tag.name }}
+                </b-badge>
+              </div>
             </li>
           </ul>
         </b-popover>
@@ -46,14 +57,15 @@
 <script>
 import { toCommaList } from '@/helpers/common'
 import { getRelation } from '@/store/utils'
-import { NodeViewTitle } from '@/components/nodes'
+import { NodeViewTitle, NodeViewBody } from '@/components/nodes'
 
 
 export default {
   name: 'NodeViewFooter',
 
   components: {
-    NodeViewTitle
+    NodeViewTitle,
+    NodeViewBody
   },
 
   props: {
@@ -108,8 +120,11 @@ export default {
 .popover-siblings {
   background-color: $white;
   border: $line;
+  max-width: 350px;
 
   .popover-body {
+    max-height: 70vh;
+    overflow: auto;
     color: $black;
 
     ul {
@@ -117,14 +132,35 @@ export default {
       padding: 0;
       margin: 0;
 
-      li:not(:last-of-type) {
-        margin-bottom: 1rem;
+      li {
+        margin-bottom: 2rem;
+
+        &:last-of-type {
+          margin-bottom: 18px;
+        }
       }
 
       h6 {
         margin: 0;
       }
     }
+
+    .edition {
+      font-size: .7rem;
+    }
+
+    .node-view-body {
+      font-size: 1rem;
+      padding: 0;
+
+      .media-container {
+        display: none;
+      }
+    }
+
+    .badge {
+      font-size: 0.875rem;
+    }
   }
 }
 </style>
diff --git a/src/main.js b/src/main.js
index e9446e2..b3521c2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,8 @@ import store from './store'
 
 Vue.use(BootstrapVue, {
   BButton: { pill: true },
-  BOverlay: { blur: null, spinnerType: 'grow', opacity: 0 }
+  BOverlay: { blur: null, spinnerType: 'grow', opacity: 0 },
+  BPopover: { boundaryPadding: 0, zIndex: 0 }
 })
 Vue.use(Meta)
 Vue.use(Vue2TouchEvents)