From 61d63b0e616392d841b78095ae8045e98d2b2fa6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jun 2022 15:23:43 +0300
Subject: fix popovers so that all of them have shadows

---
 src/components/status_popover/status_popover.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index fdca8c9c..b6a3be32 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -52,8 +52,6 @@
   border-width: 1px;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
 
   /* TODO cleanup this */
   .Status.Status {
-- 
cgit v1.2.3-70-g09d2


From a0ddfa499fe45e352e8c3920cba862a4902f0afe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jun 2022 00:34:22 +0300
Subject: update status popover when its content changes (only status
 reference)

---
 src/components/status_popover/status_popover.js  | 7 +++++++
 src/components/status_popover/status_popover.vue | 1 +
 2 files changed, 8 insertions(+)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index e0962ccd..68878a50 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -38,6 +38,13 @@ const StatusPopover = {
           .catch(e => (this.error = true))
       }
     }
+  },
+  watch: {
+    status (newStatus, oldStatus) {
+      if (newStatus !== oldStatus) {
+        this.$refs.popover.updateStyles()
+      }
+    }
   }
 }
 
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b6a3be32..2c436d04 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -4,6 +4,7 @@
     popover-class="popover-default status-popover"
     :bound-to="{ x: 'container' }"
     @show="enter"
+    ref="popover"
   >
     <template v-slot:trigger>
       <slot />
-- 
cgit v1.2.3-70-g09d2


From d5bc825616858f8eccb4fb9786f0178bce44e979 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 00:05:26 +0300
Subject: add stay-on-click prop to solve case of clicking user avatar in
 status popover

---
 src/components/popover/popover.js                | 18 ++++++++++++++----
 src/components/popover/popover.vue               | 21 +++++++++++++++++++++
 src/components/status_popover/status_popover.vue |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c19e6904..843b22f3 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -40,7 +40,10 @@ const Popover = {
     overlayCenters: Boolean,
 
     // What selector (witin popover!) to use for determining center of popover
-    overlayCentersSelector: String
+    overlayCentersSelector: String,
+
+    // Lets hover popover stay when clicking inside of it
+    stayOnClick: Boolean
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {
@@ -50,6 +53,7 @@ const Popover = {
       // with popovers refusing to be hidden when user wants to interact with something in below popover
       lockReEntry: false,
       hidden: true,
+      pinned: false,
       styles: {},
       oldSize: { width: 0, height: 0 },
       scrollable: null,
@@ -196,9 +200,10 @@ const Popover = {
     },
     showPopover () {
       if (this.disabled) return
+      this.pinned = false
       const wasHidden = this.hidden
       this.hidden = false
-      if (this.trigger === 'click') {
+      if (this.trigger === 'click' || this.stayOnClick) {
         document.addEventListener('click', this.onClickOutside)
       }
       this.scrollable.addEventListener('scroll', this.onScroll)
@@ -227,7 +232,7 @@ const Popover = {
       }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover') {
+      if (this.trigger === 'hover' && !this.pinned) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -240,7 +245,7 @@ const Popover = {
       }
     },
     onMouseleaveContent (e) {
-      if (this.trigger === 'hover') {
+      if (this.trigger === 'hover' && !this.pinned) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -259,6 +264,11 @@ const Popover = {
       if (this.$el.contains(e.target)) return
       this.hidePopover()
     },
+    onClickContent (e) {
+      if (this.trigger === 'hover' && this.stayOnClick) {
+        this.pinned = true
+      }
+    },
     onScroll (e) {
       this.updateStyles()
     },
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f854515c..9b67f400 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -21,12 +21,22 @@
           :class="popoverClass || 'popover-default'"
           @mouseenter="onMouseenterContent"
           @mouseleave="onMouseleaveContent"
+          @click="onClickContent"
         >
           <slot
             name="content"
             class="popover-inner"
             :close="hidePopover"
           />
+          <div
+            v-if="stayOnClick && pinned"
+            class="pinned-tooltip-icon popover popover-default"
+          >
+            <FAIcon
+              icon="thumbtack"
+              class="faint"
+            />
+          </div>
         </div>
       </transition>
     </teleport>
@@ -51,6 +61,17 @@
   box-shadow: var(--popupShadow);
 }
 
+.pinned-tooltip-icon {
+  position: absolute;
+  top: -1em;
+  left: -1em;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .popover-default {
   &:after {
     content: '';
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 2c436d04..9cabb751 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,6 +1,7 @@
 <template>
   <Popover
     trigger="hover"
+    :stay-on-click="true"
     popover-class="popover-default status-popover"
     :bound-to="{ x: 'container' }"
     @show="enter"
-- 
cgit v1.2.3-70-g09d2

