diff --git a/frontend/resources/styles/main/partials/zoom-widget.scss b/frontend/resources/styles/main/partials/zoom-widget.scss index b25192321..16abbc1a1 100644 --- a/frontend/resources/styles/main/partials/zoom-widget.scss +++ b/frontend/resources/styles/main/partials/zoom-widget.scss @@ -1,6 +1,7 @@ .zoom-widget { cursor: pointer; display: flex; + position: relative; span { color: $color-gray-10; @@ -16,8 +17,10 @@ .dropdown { position: absolute; - z-index: 12; + right: 0; + top: 25px; width: 210px; + z-index: 12; background-color: $color-white; border-radius: $br-small; diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 0ccf53049..7220cfc2f 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -219,6 +219,12 @@ (update [_ state] (update-in state [:viewer-local :show-thumbnails] not)))) +(def close-thumbnails-panel + (ptk/reify ::close-thumbnails-panel + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :show-thumbnails] false)))) + (def select-prev-frame (ptk/reify ::select-prev-frame ptk/WatchEvent diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index b0c869f90..7d37a3a14 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -84,15 +84,23 @@ show-dropdown? (mf/use-state false) + open-dropdown + (fn [] + (reset! show-dropdown? true) + (st/emit! dv/close-thumbnails-panel)) + + close-dropdown + (fn [] + (reset! show-dropdown? false)) + navigate-to (fn [page-id] (st/emit! (dv/go-to-page page-id)) - (reset! show-dropdown? false)) - ] + (reset! show-dropdown? false))] [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")} [:div.breadcrumb - {:on-click #(swap! show-dropdown? not)} + {:on-click open-dropdown} [:span.project-name project-name] [:span "/"] [:span.file-name file-name] @@ -101,7 +109,7 @@ [:span.icon i/arrow-down] [:& dropdown {:show @show-dropdown? - :on-close #(swap! show-dropdown? not)} + :on-close close-dropdown} [:ul.dropdown (for [id (get-in file [:data :pages])] [:li {:id (str id)