diff --git a/CHANGES.md b/CHANGES.md index c2d9f4f08..591d6eb1c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -9,6 +9,7 @@ - Fix problem with exporting before the document is saved [Taiga #2189](https://tree.taiga.io/project/penpot/issue/2189) - Fix undo stacking when changing color from color-picker [Taiga #2191](https://tree.taiga.io/project/penpot/issue/2191) +- Fix pages dropdown in viewer [Taiga #2087](https://tree.taiga.io/project/penpot/issue/2087) ### :arrow_up: Deps updates ### :heart: Community contributions by (Thank you!) diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index ff7808da9..3a2b6a684 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -6,7 +6,6 @@ height: 48px; padding: 0 $size-4 0 55px; position: relative; - z-index: 12; justify-content: space-between; a { diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss index d87f765fa..d37c05bfd 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: 12; + z-index: 10; &.invisible { visibility: hidden; diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 2c838251e..13b3d0353 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -75,31 +75,33 @@ (mf/defc header-sitemap [{:keys [project file page frame index] :as props}] - (let [project-name (:name project) - file-name (:name file) - page-name (:name page) - frame-name (:name frame) - total (count (:frames page)) - - toggle-thumbnails - (fn [] - (st/emit! dv/toggle-thumbnails-panel)) - + (let [project-name (:name project) + file-name (:name file) + page-name (:name page) + frame-name (:name frame) + total (count (:frames page)) show-dropdown? (mf/use-state false) + toggle-thumbnails + (mf/use-callback + (fn [] + (st/emit! dv/toggle-thumbnails-panel))) + open-dropdown - (fn [] - (reset! show-dropdown? true) - (st/emit! dv/close-thumbnails-panel)) + (mf/use-callback + (fn [] + (reset! show-dropdown? true))) close-dropdown - (fn [] - (reset! show-dropdown? false)) + (mf/use-callback + (fn [] + (reset! show-dropdown? false))) navigate-to - (fn [page-id] - (st/emit! (dv/go-to-page page-id)) - (reset! show-dropdown? false))] + (mf/use-callback + (fn [page-id] + (st/emit! (dv/go-to-page page-id)) + (reset! show-dropdown? false)))] [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")} [:div.breadcrumb @@ -108,6 +110,7 @@ [:span "/"] [:span.file-name file-name] [:span "/"] + [:span.page-name page-name] [:span.icon i/arrow-down]