diff --git a/CHANGES.md b/CHANGES.md index d4d311494..5b9d0d4df 100644 --- a/CHANGES.md +++ b/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) diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss index 29c7441c9..8ccc4fcf1 100644 --- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss +++ b/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; +} diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 432f4ec05..144c472d9 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 8a3e078a0..d5a833f79 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/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])] diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index c383149a0..a38e8b16c 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/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