🐛 Fix close viewer thumbnail clicking outside

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

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)}

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/use-fn
-         (mf/deps @expanded?)
+         (mf/deps expanded?)
          (fn [_ index]
            (compare-and-set! selected false true)
            (st/emit! (dv/go-to-frame-by-index index))
-           (when @expanded?
+           (when expanded?
-             (on-close))))]
+             (on-close))))
+
+        toggle-expand
+        (mf/use-fn
+         #(swap! expanded-state not))]
     [:section {:class (stl/css-case :viewer-thumbnails true
-                                    :expanded @expanded?)
+                                    :expanded expanded?)
-            ;; This is better as an inline-style so it won't make a reflow of every frame inside
+               ;; 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