From 67c9bad450cb2479bb78a0372ea684c2f6205561 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Mon, 8 Aug 2022 14:31:34 +0800
Subject: [PATCH] fix: clickoutside for page references popup in whiteboard

---
 src/main/frontend/components/whiteboard.cljs | 20 +++++++++++++++-----
 src/main/frontend/components/whiteboard.css  |  6 ++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs
index 2a64f358f3..1b50ae13f6 100644
--- a/src/main/frontend/components/whiteboard.cljs
+++ b/src/main/frontend/components/whiteboard.cljs
@@ -46,11 +46,21 @@
   ([page-name classname children]
    (let [page-entity (model/get-page page-name)
          block-uuid (:block/uuid page-entity)
+         ref (rum/use-ref nil)
          refs-count (count (:block/_refs page-entity))
          [open? set-open?] (rum/use-state nil)]
+     ;; TODO: move click outside to the utility? 
+     (rum/use-effect!
+      (let [listener (fn [e]
+                       (when (and (.-current ref)
+                                  (not (.contains (.-current ref) (.-target e))))
+                         (set-open? nil)))]
+        (.addEventListener js/document.body "mousedown" listener true)
+        #(.removeEventListener js/document.body "mousedown" listener))
+      [ref])
      (when (> refs-count 0)
        (ui/tippy {:in-editor?      false
-                  :html            (fn [] [:div.mx-2 (reference/block-linked-references block-uuid)])
+                  :html            (fn [] [:div.mx-2 {:ref ref} (reference/block-linked-references block-uuid)])
                   :interactive     true
                   :delay           [100, 500]
                   :position        "bottom"
@@ -60,7 +70,7 @@
                                                 {:enabled           true
                                                  :boundariesElement "viewport"}}}}
                  [:div.flex.items-center.gap-2.whiteboard-page-refs-count
-                  {:class classname
+                  {:class (str classname (when open? " open"))
                    :on-click (fn [e]
                                (util/stop e)
                                (set-open? (fn [o] (if (nil? o) true nil))))}
@@ -175,9 +185,9 @@
                             {:style {:font-size "0.9em"}}]
                       name nil false)]
 
-     (page-refs-count name
-                      "text-md px-3 py-1 cursor-default whiteboard-page-refs-count"
-                      [:<> "Reference" (ui/icon "references-show")])]
+    (page-refs-count name
+                     "text-md px-3 py-1 cursor-default whiteboard-page-refs-count"
+                     [:<> "Reference" (ui/icon "references-show")])]
    (tldraw-app name block-id)])
 
 (rum/defc whiteboard-route
diff --git a/src/main/frontend/components/whiteboard.css b/src/main/frontend/components/whiteboard.css
index 943047eb3c..ecbb953611 100644
--- a/src/main/frontend/components/whiteboard.css
+++ b/src/main/frontend/components/whiteboard.css
@@ -89,10 +89,12 @@
 
 .whiteboard-page-refs-count {
   border-radius: 8px;
+  background: var(--ls-primary-background-color);
 }
 
-.whiteboard-page-refs-count:hover {
-  background: var(--ls-secondary-background-color);
+.whiteboard-page-refs-count:hover,
+.whiteboard-page-refs-count.open {
+  filter: brightness(0.9)
 }
 
 .whiteboard-page-title-root {