🐛 Fix exports menu on viewer mode

CHANGES.md

@@ -77,6 +77,7 @@
 - Fix rotate several elements in bulk [Taiga #5165](https://tree.taiga.io/project/penpot/issue/5165)
 - Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373)
 - Fix create typography with section closed [Taiga #5574](https://tree.taiga.io/project/penpot/issue/5574)
+- Fix exports menu on viewer mode [Taiga #5568](https://tree.taiga.io/project/penpot/issue/5568)
  
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/viewer/inspect/exports.cljs

@@ -13,6 +13,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr c]]
+   [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
 (mf/defc exports
@@ -30,6 +31,11 @@
                           (str suffix)))
                       (:name page))
 
+        scale-enabled?
+        (mf/use-callback
+         (fn [export]
+           (#{:png :jpeg} (:type export))))
+
         in-progress? (:in-progress xstate)
 
         on-download
@@ -97,7 +103,13 @@
            (let [target  (dom/get-target event)
                  value   (dom/get-value target)
                  value   (keyword value)]
-             (swap! exports assoc-in [index :type] value))))]
+             (swap! exports assoc-in [index :type] value))))
+        manage-key-down
+        (mf/use-callback
+         (fn [event]
+           (let [esc?   (kbd/esc? event)]
+             (when esc?
+               (dom/blur! (dom/get-target event))))))]
 
     (mf/use-effect
      (mf/deps shapes)
@@ -117,6 +129,7 @@
         (for [[index export] (d/enumerate @exports)]
           [:div.element-set-options-group
            {:key index}
+           (when (scale-enabled? export)
              [:select.input-select {:on-change (partial on-scale-change index)
                                     :value (:scale export)}
               [:option {:value "0.5"}  "0.5x"]
@@ -125,16 +138,18 @@
               [:option {:value "1.5"} "1.5x"]
               [:option {:value "2"} "2x"]
               [:option {:value "4"} "4x"]
-            [:option {:value "6"} "6x"]]
+              [:option {:value "6"} "6x"]])
 
-           [:input.input-text {:on-change (partial on-suffix-change index)
+           [:input.input-text {:value (:suffix export)
-                               :value (:suffix export)}]
+                               :placeholder (tr "workspace.options.export.suffix")
-           [:select.input-select {:on-change (partial on-type-change index)
+                               :on-change (partial on-suffix-change index)
-                                  :value (d/name (:type export))}
+                               :on-key-down manage-key-down}]
+           [:select.input-select {:value (d/name (:type export))
+                                  :on-change (partial on-type-change index)}
             [:option {:value "png"} "PNG"]
             [:option {:value "jpeg"} "JPEG"]
-            [:option {:value "svg"} "SVG"]]
+            [:option {:value "svg"} "SVG"]
-
+            [:option {:value "pdf"} "PDF"]]
            [:div.delete-icon {:on-click (partial delete-export index)}
             i/minus]])
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs

@@ -165,7 +165,7 @@
                                :placeholder (tr "workspace.options.export.suffix")
                                :on-change (partial on-suffix-change index)
                                :on-key-down manage-key-down}]
-           [:select.input-select {:value (name (:type export))
+           [:select.input-select {:value (d/name (:type export))
                                   :on-change (partial on-type-change index)}
             [:option {:value "png"} "PNG"]
             [:option {:value "jpeg"} "JPEG"]