diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 7aa002565..24b9d802b 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -123,7 +123,7 @@ } } - .breadcrumb { + .breadcrumb, .current-frame { display: flex; position: relative; @@ -148,6 +148,10 @@ color: $color-white; margin-right: $x-small; } + + .counters { + color: $color-gray-20; + } } } diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 7f8b0c14b..fde18c31d 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -240,7 +240,7 @@ pparams (:path-params route) qparams (:query-params route) - page-id (:page-id pparams) + page-id (:page-id qparams) index (:index qparams) total (count (get-in state [:viewer :pages page-id :frames]))] diff --git a/frontend/src/app/main/data/workspace/path/helpers.cljs b/frontend/src/app/main/data/workspace/path/helpers.cljs index deff63dce..9b36e4099 100644 --- a/frontend/src/app/main/data/workspace/path/helpers.cljs +++ b/frontend/src/app/main/data/workspace/path/helpers.cljs @@ -18,7 +18,7 @@ (defn end-path-event? [event] (or (= (ptk/type event) ::common/finish-path) - (= (ptk/type event) :esc-pressed) + (= (ptk/type event) :app.main.data.workspace.path.shortcuts/esc-pressed) (= :app.main.data.workspace.common/clear-edition-mode (ptk/type event)) (= :app.main.data.workspace/finalize-page (ptk/type event)) (= event :interrupt) ;; ESC diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index 59a31d16a..9cea9c60a 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -80,8 +80,8 @@ (mf/use-effect (mf/deps width height) - #(dom/set-page-style {:size (str (mth/round width) "px " - (mth/round height) "px")})) + #(dom/set-page-style {:size (str (mth/ceil (+ width padding padding)) "px " + (mth/ceil (+ height padding padding)) "px")})) [:& (mf/provider embed/context) {:value true} [:svg {:id "screenshot" diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 36e6c5fc0..c3b54d8bb 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -86,6 +86,7 @@ :handoff-layout (= section :handoff))} [:& header {:project project + :index index :file file :page page :frame frame diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 52377fa4c..b0c869f90 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -71,11 +71,12 @@ [:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")])])) (mf/defc header-sitemap - [{:keys [project file page frame] :as props}] + [{: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 [] @@ -111,10 +112,12 @@ {:on-click toggle-thumbnails} [:span.label "/"] [:span.label frame-name] - [:span.icon i/arrow-down]]])) + [:span.icon i/arrow-down] + [:span.counters (str (inc index) " / " total)]]])) + (mf/defc header - [{:keys [project file page frame zoom section permissions]}] + [{:keys [project file page frame zoom section permissions index]}] (let [go-to-dashboard (st/emitf (dv/go-to-dashboard)) @@ -129,7 +132,7 @@ ;; If the user doesn't have permission we disable the link :style {:pointer-events (when-not permissions "none")}} i/logo-icon]] - [:& header-sitemap {:project project :file file :page page :frame frame}] + [:& header-sitemap {:project project :file file :page page :frame frame :index index}] [:div.mode-zone [:button.mode-zone-button.tooltip.tooltip-bottom diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 91ff3ab2e..5c3074e14 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -55,6 +55,10 @@ (.insertAdjacentHTML head "beforeend" (str "")))) (defn get-element-by-class