✨ Enhance the behaviour of the artboards list on view mode

CHANGES.md

@@ -8,6 +8,7 @@
 
 - On user settings, hide the theme selector as long as we only have one theme [Taiga #2610](https://tree.taiga.io/project/penpot/us/2610)
 - Automatically open comments from dashboard notifications [Taiga #2605](https://tree.taiga.io/project/penpot/us/2605)
+- Enhance the behaviour of the artboards list on view mode [Taiga #2634](https://tree.taiga.io/project/penpot/us/2634)
 - Add recent used fonts in font selection widget [Taiga #1381](https://tree.taiga.io/project/penpot/us/1381)
 - Allow to align items relative to groups [Taiga #2533](https://tree.taiga.io/project/penpot/us/2533)
 - Scroll bars [Taiga #2550](https://tree.taiga.io/project/penpot/task/2550)

frontend/resources/styles/main/partials/viewer-thumbnails.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  z-index: 10;
+  z-index: 11;
 
   &.invisible {
     visibility: hidden;
@@ -179,3 +179,14 @@
     }
   }
 }
+
+.thumbnail-close {
+  grid-row: 1 / span 2;
+  grid-column: 1 / span 1;
+  z-index: 11;
+}
+
+.thumbnail-close.invisible {
+  visibility: hidden;
+  pointer-events: none;
+}

frontend/src/app/main/ui/viewer.cljs

@@ -230,6 +230,8 @@
                  :section section}]
 
      [:div.viewer-content
+      [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
+                             :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
       [:& thumbnails-panel {:frames frames
                             :show? (:show-thumbnails local false)
                             :page page

frontend/src/app/main/ui/viewer/header.cljs

@@ -172,6 +172,10 @@
   (let [go-to-dashboard
         (st/emitf (dv/go-to-dashboard))
 
+        go-to-handoff
+        (fn []
+          (st/emit! dv/close-thumbnails-panel (dv/go-to-section :handoff)))
+
         navigate
         (fn [section]
           (st/emit! (dv/go-to-section section)))]
@@ -203,7 +207,7 @@
                 (and (= (:type permissions) :share-link)
                      (contains? (:flags permissions) :section-handoff)))
         [:button.mode-zone-button.tooltip.tooltip-bottom
-         {:on-click #(navigate :handoff)
+         {:on-click go-to-handoff
           :class (dom/classnames :active (= section :handoff))
           :alt (tr "viewer.header.handoff-section" (sc/get-tooltip :open-handoff))}
          i/code])]

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -104,14 +104,13 @@
      {:class (dom/classnames :expanded @expanded?
                              :invisible (not show?))
 
-      :ref container
-      }
+      :ref container}
 
      [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
                              :on-close on-close
                              :total (count frames)}]
      [:& thumbnails-content {:expanded? @expanded?
-                              :total (count frames)}
+                             :total (count frames)}
       (for [[i frame] (d/enumerate frames)]
         [:& thumbnail-item {:index i
                             :frame frame