Merge branch 'staging' into develop

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;
+      }
     }
   }
 

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]))]

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

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 "
+     #(dom/set-page-style {:size (str (mth/ceil (+ width padding padding)) "px "
-                                      (mth/round height) "px")}))
+                                      (mth/ceil (+ height padding padding)) "px")}))
 
     [:& (mf/provider embed/context) {:value true}
      [:svg {:id "screenshot"

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

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

frontend/src/app/util/dom.cljs

@@ -55,6 +55,10 @@
     (.insertAdjacentHTML head "beforeend"
                          (str "<style>"
                               "  @page {" style-str "}"
+                              "  html, body {"            ; Fix issue having Chromium to add random 1px marging at the bottom
+                              "    overflow: hidden;"     ; https://github.com/puppeteer/puppeteer/issues/2278#issuecomment-410381934
+                              "    font-size: 0;"
+                              "  }"
                               "</style>"))))
 
 (defn get-element-by-class