From 04fe8f89604f1c8b13b2ccae380ec6ca89b4514d Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 3 Apr 2024 14:14:14 +0200
Subject: [PATCH] :bug: Fix close viewer thumbnail clicking outside

---
 frontend/src/app/main/ui/viewer.cljs          |  1 +
 frontend/src/app/main/ui/viewer/header.cljs   | 31 +++++++++++++------
 .../src/app/main/ui/viewer/thumbnails.cljs    | 23 ++++++++------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 60480d5f6..6883a6d24 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -613,6 +613,7 @@
                         :permissions permissions
                         :zoom zoom
                         :section section
+                        :shown-thumbnails (:show-thumbnails local)
                         :interactions-mode interactions-mode}]]))
 
 ;; --- Component: Viewer
diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs
index 1b1734dca..6e3051cf7 100644
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@@ -201,7 +201,7 @@
                :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]))
 
 (mf/defc header-sitemap
-  [{:keys [project file page frame] :as props}]
+  [{:keys [project file page frame toggle-thumbnails] :as props}]
   (let [project-name   (:name project)
         file-name      (:name file)
         page-name      (:name page)
@@ -209,11 +209,6 @@
         frame-name     (:name frame)
         show-dropdown? (mf/use-state false)
 
-        toggle-thumbnails
-        (mf/use-fn
-         (fn []
-           (st/emit! dv/toggle-thumbnails-panel)))
-
         open-dropdown
         (mf/use-fn
          (fn []
@@ -254,12 +249,13 @@
             (when (= page-id id)
               [:span {:class (stl/css :icon-check)} i/tick])])]]]
       [:div {:class (stl/css :current-frame)
+             :id "current-frame"
              :on-click toggle-thumbnails}
        [:span {:class (stl/css :frame-name)} frame-name]
        [:span {:class (stl/css :icon)} i/arrow]]]]))
 
 (mf/defc header
-  [{:keys [project file page frame zoom section permissions index interactions-mode]}]
+  [{:keys [project file page frame zoom section permissions index interactions-mode shown-thumbnails]}]
   (let [go-to-dashboard
         (mf/use-fn
          #(st/emit! (dv/go-to-dashboard)))
@@ -282,13 +278,27 @@
                              (keyword))]
              (if (or (= section :interactions) (:is-logged permissions))
                (st/emit! (dv/go-to-section section))
-               (open-login-dialog)))))]
+               (open-login-dialog)))))
+
+        toggle-thumbnails
+        (mf/use-fn
+         (fn []
+           (st/emit! dv/toggle-thumbnails-panel)))
+
+
+        close-thumbnails
+        (mf/use-fn
+         (mf/deps shown-thumbnails)
+         (fn [_]
+           (when shown-thumbnails
+             (st/emit! dv/close-thumbnails-panel))))]
 
 
     [:header {:class (stl/css-case :viewer-header true
-                                   :fullscreen (mf/deref fullscreen-ref))}
+                                   :fullscreen (mf/deref fullscreen-ref))
+              :on-click close-thumbnails}
      [:div {:class (stl/css :nav-zone)}
-            ;; If the user doesn't have permission we disable the link
+      ;; If the user doesn't have permission we disable the link
       [:a {:class (stl/css :home-link)
            :on-click go-to-dashboard
            :style {:cursor (when-not (:can-edit permissions) "auto")
@@ -300,6 +310,7 @@
                           :file file
                           :page page
                           :frame frame
+                          :toggle-thumbnails toggle-thumbnails
                           :index index}]]
 
      [:div {:class (stl/css :mode-zone)}
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs
index 7da49dfab..4a20d35fe 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.cljs
+++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs
@@ -107,7 +107,8 @@
 
 (mf/defc thumbnails-panel
   [{:keys [frames page index show? thumbnail-data] :as props}]
-  (let [expanded? (mf/use-state false)
+  (let [expanded-state (mf/use-state false)
+        expanded? (deref expanded-state)
         container (mf/use-ref)
 
         objects   (:objects page)
@@ -115,23 +116,27 @@
         selected  (mf/use-var false)
 
         on-item-click
-        (mf/use-callback
-         (mf/deps @expanded?)
+        (mf/use-fn
+         (mf/deps expanded?)
          (fn [_ index]
            (compare-and-set! selected false true)
            (st/emit! (dv/go-to-frame-by-index index))
-           (when @expanded?
-             (on-close))))]
+           (when expanded?
+             (on-close))))
+
+        toggle-expand
+        (mf/use-fn
+         #(swap! expanded-state not))]
     [:section {:class (stl/css-case :viewer-thumbnails true
-                                    :expanded @expanded?)
-            ;; This is better as an inline-style so it won't make a reflow of every frame inside
+                                    :expanded expanded?)
+               ;; This is better as an inline-style so it won't make a reflow of every frame inside
                :style {:display (when (not show?) "none")}
                :ref container}
 
-     [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
+     [:& thumbnails-summary {:on-toggle-expand toggle-expand
                              :on-close on-close
                              :total (count frames)}]
-     [:& thumbnails-content {:expanded? @expanded?
+     [:& thumbnails-content {:expanded? expanded?
                              :total (count frames)}
       (for [[i frame] (d/enumerate frames)]
         [:& thumbnail-item {:index i