From 41b2357bf6aa340875dc10971e87943376a43790 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 4 Jan 2024 18:39:04 +0100
Subject: [PATCH] Add some styling and dynamic postioning to new popover
 service

---
 .../highlights/HighlightPopover.vue           | 82 +++++++++++++++++--
 client/src/components/icons/NoteIcon.vue      |  8 --
 client/src/directives/highlight.ts            |  6 ++
 client/src/helpers/popover.ts                 |  5 +-
 4 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/client/src/components/highlights/HighlightPopover.vue b/client/src/components/highlights/HighlightPopover.vue
index 43fe8ea0..3fd12046 100644
--- a/client/src/components/highlights/HighlightPopover.vue
+++ b/client/src/components/highlights/HighlightPopover.vue
@@ -1,12 +1,84 @@
 <template>
   <div class="highlight-popover">
-    <h1>Hello</h1>
-    <button @click="emit('confirm')">Confirm</button>
-    <button @click="emit('close')">Close</button>
+    <section class="highlight-popover__section">
+      <div class="highlight-popover__color highlight-popover__color--yellow"></div>
+      <div class="highlight-popover__color highlight-popover__color--pink"></div>
+      <div class="highlight-popover__color highlight-popover__color--blue"></div>
+    </section>
+    <section class="highlight-popover__section">
+      <note-icon class="highlight-popover__icon" />
+    </section>
+    <section class="highlight-popover__section">
+      <trash-icon class="highlight-popover__icon" />
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-console.log('hi');
-const emit = defineEmits(['close', 'confirm']);
+import NoteIcon from '@/components/icons/NoteIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+export interface Props {
+  top: string;
+}
+
+defineEmits(['close', 'confirm']);
+defineProps<Props>();
 </script>
+
+<style lang="postcss">
+.highlight-popover {
+  position: absolute;
+  z-index: 99;
+  top: calc(v-bind(top) - 80px);
+
+  background-color: white;
+  padding: var(--medium-spacing);
+  border-radius: var(--default-border-radius);
+  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+
+  display: flex;
+
+  &__color {
+    width: 38px;
+    height: 38px;
+    background-color: red;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    background-color: white;
+    border-radius: 50%;
+
+    &--yellow {
+      background-color: var(--mark-yellow);
+    }
+    &--pink {
+      background-color: var(--mark-pink);
+    }
+    &--blue {
+      background-color: var(--mark-blue);
+    }
+  }
+
+  &__section {
+    padding-right: var(--medium-spacing);
+    padding-left: var(--medium-spacing);
+    border-right: 1px solid var(--color-silver);
+    display: flex;
+    flex-direction: row;
+    gap: var(--small-spacing, 10px);
+    align-items: center;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+      padding-right: 0;
+    }
+  }
+
+  &__icon {
+    width: 40px;
+    height: 40px;
+  }
+}
+</style>
diff --git a/client/src/components/icons/NoteIcon.vue b/client/src/components/icons/NoteIcon.vue
index 2d9dba4a..41eb81c4 100644
--- a/client/src/components/icons/NoteIcon.vue
+++ b/client/src/components/icons/NoteIcon.vue
@@ -12,11 +12,3 @@
     <path d="M62.13184,69.55859H39.39453a2.5,2.5,0,0,1,0-5h22.7373a2.5,2.5,0,0,1,0,5Z" />
   </svg>
 </template>
-
-<style scoped lang="scss">
-.note-icon {
-  width: 29px;
-  height: 25px;
-  margin-left: 2px;
-}
-</style>
diff --git a/client/src/directives/highlight.ts b/client/src/directives/highlight.ts
index fd598148..5c4b7166 100644
--- a/client/src/directives/highlight.ts
+++ b/client/src/directives/highlight.ts
@@ -5,6 +5,7 @@ import log from 'loglevel';
 import * as Mark from 'mark.js';
 import { ContentBlockNode } from '@/__generated__/graphql';
 import ContentBlock from '@/components/ContentBlock.vue';
+import popover from '@/helpers/popover';
 
 // todo: we need to get the following information for a highlight:
 // Which ContentBlock? => contentBlock.id
@@ -131,6 +132,11 @@ export const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockN
               text: range.toString(),
             };
             console.log(highlightedText);
+
+            const positionOfContentBlock = el.getBoundingClientRect();
+            const positionOfSelection = paragraph?.getBoundingClientRect();
+            const offetTop = positionOfSelection.top - positionOfContentBlock.top;
+            popover.show(el, offetTop);
             // todo: how do we save this? maybe we need to move away from the directive and do this inside the mounted
             // and unmounted hooks of the ContentBlock
           }
diff --git a/client/src/helpers/popover.ts b/client/src/helpers/popover.ts
index fad4b76b..cbea6248 100644
--- a/client/src/helpers/popover.ts
+++ b/client/src/helpers/popover.ts
@@ -4,9 +4,9 @@ import { createApp } from 'vue';
 type ResolveReject = (v?: unknown) => void;
 
 export default {
-  show() {
+  show(wrapper: HTMLElement, offsetTop: number) {
     const mountEl = document.createElement('div');
-    document.body.appendChild(mountEl);
+    wrapper.appendChild(mountEl);
 
     let _resolve: ResolveReject, _reject: ResolveReject;
 
@@ -21,6 +21,7 @@ export default {
     };
 
     const popover = createApp(HighlightPopover, {
+      top: `${Math.floor(offsetTop)}px`,
       onConfirm() {
         cleanUp();
         _resolve();